I have following layout in my web application:
To make it accessibility compliant, is there a need to relate "Al Allbrook" with "Requester" label? If so, how we can achieve that?
"Al Allbrook" is a link to user profile.
If they are not related, how come srceen reader will know "Al Allbrook" is a requester? Same in case of "Site".
In additon to what #andy said, you could also use a table. The first column could have a "requestor" table heading (<th scope="col">). The heading itself could be visually hidden if you don't want it to "clutter" the display but still be available to screen reader (SR) users. The second column would be something like "contact info" and the last column is "site". This allows a SR user to navigate across the row of the table and they'll hear the column heading before the data cell.
Of course, you can do a combination of these techniques. Have a table and have extra information on the links. I would recommend aria-labelledby instead of aria-describedby. While both attributes will cause the extra information to be read by a SR (*), only the aria-labelledby attribute will be displayed in the list of links.
(*) Some SRs announce the aria-describedby attribute directly but other SRs will just tell you that there is a description associated with the link and you have to hit a different shortcut key to hear the description.
The nice thing about both attributes is that the element can refer to itself as part of the label. Kind of a recursive labeling but the "Accessible Name and Description Computation" rules handle the recursion.
if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-labelledby traversal, process its IDREFs in the order they occur
It's probably easier to see an example of this.
<span id="comma" style="display:none">,</span>
...
<span id="requestor">Requestor</span>
Al Allbrook
Several things to note.
First is that the link is referring to itself in the aria-labelledby attribute (the 'myself' id).
Second is that I'm using a trick with screen readers by adding a comma in the label, "Al Allbrook, Requestor" so that the SR has a slight pause when reading the label, "Al Allbrook <pause> Requestor", rather than hearing it as if the guy's name was "Al Allbrook Requestor". Note that the comma itself has display:none so it's not visible, but since the comma element's ID is listed in aria-labelledby, it'll still be used. (See rule 2A in the Accessible Name url above)
Lastly, my example used a <span> for "Requestor" but you might want it to be a heading (<h3> or <h4> or whatever level is appropriate) instead.
For example:
<span id="comma" style="display:none">,</span>
...
<h3 id="requestor">Requestor</h3>
Al Allbrook
And then all this code could be in a <td> if you're using a table.
There is different ways to navigate through a site with a screenreader, so it depends on the navigation mode the user is using at the moment.
In DOM order
In this case, if your "Requester" is before the link in DOM, it will be read before the person's name. Also, the text right before and after a link can be read by means of certain shortcuts.
By accessing a list of links
There is different lists screen reader users can request, f.e. list of all headers, or a list of all links on the page.
If it's important to you to have the "requester" read when navigating to the link directly, you can link the two elements by means of aria-describedby or aria-labelledby.
Alternatively, you could add the text again to the link itself, hidden visually. Like "Al Allbrook, Requester".
Related
I have a lengthy document that I need to convert to WCAG AA compliant HTML and the author used asterisks as end notes like *, **, and ***. Here is an example:
Solano County Atlas Fire (Solano County) 10/17*
Ponderosa Fire (Butte County) 08/17*
Helena Fire (Trinity County) 08/17*
...
* For taxable years beginning on or after January 1, 2014...
NOTE: multiple * asterisks in the above list all point to a single end note reference making it difficult to use traditional footnote practices.
Below is my attempt to solve this using aria-describedby, however JAWS does not read the description asterisks or the description at all.
Solano County Atlas Fire (Solano County) 10/17<span aria-describedby="dd1">*</span>
...
<p id="dd1">* For taxable years beginning on or after January 1, 2014...</p>
After some research it appears that JAWS and some other screen readers do not announce some punctuation at all. So I am not sure how exactly to go about fixing this. I am not really at liberty to change the characters unless there is no other possible solution.
What would you suggest I do to fix this?
I'd suggest to do a simple thing, as it is done in quite a number of books in HTML I read.
Make your asterisk a link with an Id, i.e., <a id="linkToNote1" href="#note1">*</a>.
Add a heading called "Notes" to the end of the document.
Add notes either as list items or as paragraphs with corresponding Ids (in this case, note1).
The most important: End each note with a link leading back to the appropriate place in the text, i.e.: Go back.
If however you want to use ARIA, do not mark the only asterisk with aria-describedby since you're right in that many users set their punctuation level quite low so they are not distracted by those signs in a lengthy text.
I have a website featuring a long list of names.
To make it more oversee-able, I'd like to put a text link in to
(on load) show all
(on clicking word "pears") hide all elements with class="apple"
(on clicking word "apples") hide all elements with class="pear"
(on clicking "show all") show all
I suppose it'd be like a really simplified version of "as you type" filtering.
Does a plug-in exist for this? I don't even know where to start!
Just bumped into this post, I know it's old but to be honest are none of the given answers pretty helpful. In my opinion, you can filter out the elements using the filter with :not, as in filter(':not()').
As Joel Potter stated, using $("span[class='apple']").hide(); will only select the spans with exactly one classname, apple. If multiple classes are present (which is highly likely) then such an approach would not work.
If you click on a word, e.g. pears, you can then filter out the elements that do not contain the class pears.
$('span').show().filter(':not(.pears)').hide();
and you're done ;)
hmm.. if you had a list like the following:
<span class="apple">red apple</span>
<span class="apple">green apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>
the following would show all:
$("span.*").show();
the following would hide all elements with 'class="apple"':
$("span[class='apple']").hide();
or you could go with hiding everything that doesn't have 'class="pear"':
$("span[class!='pear']").hide();
To filter out elements that contain a given class or any other attribute value, using the Attribute Contains Word Selector would be a good solution:
$("span").filter("[class~='apple']")
Actually, for the class attribute, it's even easier to just write:
$("span").filter(".apple") // or:
$("span.apple")
[This is also what Joel Potter wrote in his comment to this answer.]
That way you'll be able to match all of the below:
<span class="apple">...</span>
<span class="apple fruit">...</span>
<span class="fruit apple sweet">...</span>
So whenever you're not 100% sure that you'll only have a single class set on an element, use the ~= operator.
While it is recommended to use the title attribute on the <abbr /> element, this has no effect on screen readers (at least not on chromevox).
<abbr title="as soon as possible">ASAP</abbr>
The thing that works is of course aria-label e.g:
<abbr aria-label="as soon as possible">ASAP</abbr>
So in order to be both semantically corrent and screen reader compatible I need to mark both:
<abbr aria-label="as soon as possible" title="as soon as possible">ASAP</abbr>
which seems a bit of a hack. why doesn't chromevox just read the title attribute instead?
In short : Despite one of the WCAG recommendations, abbr is not a perfect solution to explain the signification of an abbreviation to everyone, aria-label should be used when you want to announce the pronunciation of the abbreviation.
Screen readers are not supposed to read the title attribute as it is not intended to replace the aria-label. See also W3 warning:
http://www.w3.org/TR/html/dom.html#attr-title
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
I never encourage the use of the abbr tag for two reasons:
it's not a focusable element so you can't navigate through it using the keyboard to see the meaning of the abbreviation. If you intend to provide a pronounceable alternative then aria-label is definitely what you need.
For instance, when abbreviation is part of the language, you do need to explain it, but you can give a speech alternative :
Director: <span aria-label="Mister">Mr</span> Smith
Blind people do understand abbreviations just like most of us do,
For instance, the following sentence is something blind people can understand perfectly:
John Smith of the NATO was arrested by the FBI.
And the following one is far less understandable
John Smith of the North Atlantic Treaty Organization was arrested by the Federal Bureau of Investigation.
As abbr is used for acronyms and abbreviations you should use the CSS property speak:spell-out to announce that an element must be spelled-out. You can use abbr tag to semantically indicate that it's an abbreviation or an acronym, but it won't have any effect on the global accessibility.
If you do consider that the abbreviation needs an explanation (intended for everyone and not only for blind people) then you should give this explanation in full words without requiring the user to mouseover the abbreviation to see a small tooltip.
Bad example, when abbreviation doesn't help the readability:
<abbr title="Doctor">Dr.</abbr> Smith is located on Lincoln <abbr title="Drive">Dr.</abbr>
Good example (simple is better):
Doctor Smith is located on Lincoln Drive
WCAG promote many other methods than using abbr tag:
Providing the expansion or explanation of an abbreviation
Providing the first use of an abbreviation immediately before or after the expanded form
Linking to definitions
I'm sorry to add another totally different answer but I think both answers should not be merged:
As ChromeVox is opensource, I have a second and now technical answer to your question.
http://src.chromium.org/svn/trunk/src/chrome/browser/resources/chromeos/chromevox/common/dom_util.js
For any element (and there is no exception for abbreviations) ChromeVox fallbacks to the title attribute if there is no text content in the node (node.textContent.length==0)
Here is the order of precedence defined in the code:
Text content if it's a text node.
aria-labelledby
aria-label
alt (for an image)
title (only if there is no text content)
label (for a control)
placeholder (for an input element)
recursive calls to children
Now, it's kind of a buggy situation
This example, in my opinion, correctly reads "BBC":
<abbr title="British Broadcasting Corporation">BBC</abbr>
This one announces "British Broadcasting Corporation": which is a correct fallback to an invalid markup
<abbr title="British Broadcasting Corporation"></abbr>
But this one doesn't read anything, because the node text length is not null
<abbr title="British Broadcasting Corporation"> </abbr>
If we except the last bug, it is not a perfect but quite consistent implementation of Text Alternative Computation
[F. Otherwise, look in the subtree]
G. Otherwise, if the current node is a Text node, return its textual contents.
H. Otherwise, if the current node has a tooltip attribute, return its value.
Note that according to the document referenced in one comment above, the title attribute, if present, should now be used by accessibility api instead of the text content: (http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#text-level-elements-not-listed-elsewhere). I'm not sure it's a good thing as the title attribute was previously and is still defined as the following by the W3.
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip
If you had to properly choose one HTML tag to represent a price, a money amount or an account balance, (e.g. 3/9/2012 - Income: 1.200,00 € or item #314159 - price: $ 31,99) then
which tag would you choose for the amount and why?
should the currency also be wrapped in its own tag or not?
I'd really like to avoid a generic inline element like <span class="income">1.200,00 €</span> or <span class="price">$ 31,99</span> but so far I've found no references about it.
The HTML spec for var states:
The var element represents a variable. This could be an actual
variable in a mathematical expression or programming context, an
identifier representing a constant, a function parameter, or just be a
term used as a placeholder in prose.
For me this means that <var> is not suitable for the prices in your examples. It depends on what you are trying to accomplish, but it seems your options are:
Use microdata (ref), for example Schema.org’s offer vocabulary for a product’s price
Use <b> if you’d like to draw attention to the price without indicating it’s more important (ref)
Use <strong> if the price is important, such as the total price of an itemised receipt
Use <span> with a class if you need an element to style the price differently, but <b> and <strong> are not appropriate
If nothing above is suitable and you don’t want to style the price, don’t do anything
From the examples you’ve given there doesn’t seem to be any need to mark up prices. If the examples are from a table to display financial information, make sure they’re in a column headed by <th scope="col">Income</th> or <th scope="col">Price</th> respectively for accessibility.
Hope that helps!
Looking at the HTML5 specs, it's rather clear that a price is not considered to be a semantic entity. And I agree. Think about it this way:
If there were semantic elements, this would be the result
<p>
I have 4 apples, 2 oranges and <money>5 <currency>dollars</currency></money>.
</p>
What is it that makes 5 dollars different from 2 oranges? Should we add a <fruit> tag too?
which tag would you choose for the amount and why?
A span with a class, if you want to add some CSS.
Because nobody really cares too much about semantics. Nice to have, but in reality all that matters is styling.
The currency should be also wrapped in its own tag or not?
Definitely not.
I'd really like to avoid a generic inline element
Why?
You may decide to use <i> if you want to express the "special nature of money".
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, ...
http://dev.w3.org/html5/spec/the-i-element.html
What about <data>?
<p>The price is <data class="money" value="100.00">$100</data>.</p>
According to the HTML5 spec:
The data element represents its contents, along with a machine-readable form of those contents in the value attribute.
When combined with microformats or microdata, the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a Web browser. In this case, the format to be used in the value attribute is determined by the microformats or microdata vocabulary in use.
In this case you could also use microdata to add additional information about the kind of currency, etc.
I would use a definition list here.
The HTML element (or HTML Description List Element) encloses a
list of pairs of terms and descriptions. Common uses for this element
are to implement a glossary or to display metadata (a list of
key-value pairs).
<dl>
<dt>Income:</dt>
<dd>1.200,00 €</dd>
<dt>Price:</dt>
<dd>$31,99</dd>
</dl>
I can't see anything more semantic than var either:
<var>1.200,00 <abbr title="EUR">€</abbr></var>
Use the var tag. Is described as: "Variable or user defined text"
<var> </var>
I've read this and I GENERALLY use spans or strongs to describe "text-labels". Is this true for best practices? It seems is also a semantic way but why is it limited to just form elements?
What if I wanted to display information as this:
Name: FOo Bar
Age: 27
Weight: 151 kg
etc?
name, age, and weight can all be described as labels, but since the items they're describing aren't input tags, it isn't semantically correct(for html and w3c at least). I usually use
<span class="label"> or <span class="description"> or <span class="person-detail"> etc
but generally there should also be a tag for labels that don't pertain to input fields. As this might be a bit subjective I don't mind this turning into a community wiki or something
You should use a definition list (dl with dt and dd):
<dl>
<dt>Name</dt>
<dd>FOo Bar</dd>
<dt>Age</dt>
<dd>27</dd>
<dt>Weight</dt>
<dd>151 kg</dd>
</dl>
The spec states that it could be used for
terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.
I think a table (with th) could be used, too. But I would only use it when I want to compare several people, not just listing the data of one person.
I'd avoid using a label tag unless it's in combination with a functional HTML form (with editable fields); otherwise, using it may be semantically confusing.
A span tag has no semantic meaning, regardless of the id or class added to it, and regardless of the context in which it's used. You don't gain anything semantically by using a span (though it does no harm).
A strong tag has a generic meaning (this content has extra importance) that doesn't vary based on the context in which it's used. It's sometimes useful when there's nothing else more appropriate.
In this particular case, a definition list (as suggested by #unor) seems like the way to go. If advanced styling is required, put each name-value pair into a separate definition list (which may be awkward semantically, but it allows greater flexibility with styling the content).
I guess if you wanted to be 100% semantically correct you'd have to use labels in conjunction with disabled or readonly text boxes that have been styled to look a bit different.