Menu
The goal is to display normal text in the browser tab while providing invisible alternative text that helps a screen-reader to have better pronunciation.
E.g., the acronym for geographic information systems is pronounced as "GIs" (like the soldiers) by the NVDA screen-reader as opposed to the conventional "G I S".
In the experiment below, none of the alternatives is seen by NVDA. Can it be done?
Thanks!
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title aria-label="G I S aria" title="G I S title" alt="G I S alt">GIS</title>
</head>
<body>doc</body>
</html>
976
asked Jun 19 '20 22:06
To set the title for an HTML Document, use the HTML <title> tag. The body title is placed between the <head> and the </head> tags. HTML document title is visible on the web browsers title bar.
The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab.
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The <title> tag is required in HTML documents! The contents of a page title is very important for search engine optimization (SEO)!
The HTML <title> tag is used for declaring the title, or name, of the HTML document. The title is usually displayed in the browser's title bar (at the top). It is also displayed in browser bookmarks and search results. The title tag is placed between the opening and closing <head> tags.
You can't use aria-* attributes on <title>. See ARIA in HTML:
No
roleoraria-*attributes
According to MDN the <title> element supports only global attributes (they include aria-* attributes) but I think it is not supported by most screen readers.
Accessibility inspector viewing page with this (see below) <title> element in Firefox shows “a” in the document name field so Firefox does not support alternate document titles.
…
<title alt="b" aria-label="c">a</title>
…
@jiwopene has pointed out that support is not good for aria on a title (if at all). I think that answers your question well.
This answer hopes to show you what you should be doing in the given example / with pronunciation. It changes "can this be done?" to "should this be done?" which is probably a more important question when dealing with accessibility.
99% of the time you should not interfere with pronunciation for screen reader users.
Acronyms and Abbreviations should be introduced on a page in their full form and then introduced as the acronym used throughout the document. Do not forget the abbr element or linking to definitions on longer pages.
Do not worry about how something is pronounced, only ever interfere when the screen reader parses / interprets something incorrectly. Even then it is debatable.
If someone is using a screen reader they are used to unusual pronunciations and they will expect an acronym to be announced a certain way.
If you decide you are trying to do them a favour by "improving" the pronunciation you may in fact be making your application less accessible.
The golden rule of accessibility is to not interfere with expected behaviour. Even if that behaviour is not quite right in your mind.
Imagine that I first learn about Geographic Information Systems on your website and expect a certain pronunciation. Then I search Google for more information and the acronym is pronounced differently, that would be more confusing than if I just thought it was pronounced G I S.
What if the acronym was WCAG which is pronounced "WUCAG, WACAG, W C A G" depending on who you talk to. If I just add the letters WCAG a screen reader user will know what they mean if they know the acronym.
The recommended way to introduce acronyms is to write the full phrase and then write the abbreviated version (or vice-versa).
So in this instance your title should be "Geographic Information Systems (GIS)". I would also do the same the first time it appears in the <body> or <h1> to <h6> if appropriate.
This has the added benefit of explaining the acronym for people who may not know the acronym.
It also explains the acronym for people with cognitive impairments that affect their ability to retain relationships between acronyms and information, for example BBC can mean many things depending on context!
If you are unable to understand context then that could be very confusing.
It is then up to you whether you link to a definition of the word or use the <abbr> element throughout the rest of the document.
Personally I believe if the document is long you should use a link or <abbr> element, if it is short then introducing the abbreviation once at the start of the document is sufficient. But that is my opinion, there is no hard-fast rule on that.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
