I'm displaying some numeric info to the user describing it by using graphic icon label. I want to make it readable by screen reader using the aria-label tag. However, when I add this attribute, it makes the nested content not visible for screen readers. Below is the structure how the html looks like.
<ul>
<li tabindex="0" aria-label="Counter 1">
<div>
<i aria-hidden="true"></i>
<span class="counter">{{properties.counter1}}</span>
</div>
</li>
<li tabindex="0" aria-label="Counter 2">
<div>
<i aria-hidden="true"></i>
<span>{{properties.counter2}}</span>
</div>
</li>
</ul>
I was trying to use aria-describedby attribute, but it didn't work with dynamically created id.
Below is the screenshot from the chrome dev tools accessibility tab. I wonder why labeling makes content value omitted.
Screenshot
That's correct, specifying aria-label or aria-labelledby generates the accessible name for the element rather than having to nest through all the child elements and concatenating text from each child. All child elements will be ignored. You can see more details regarding child elements at https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label. In particular:
When applied to an element with one of the roles that supports naming from child content, aria-label hides descendant content from assistive technology users and replaces it with the value of aria-label.
aria-describedby specifies the accessible description of the element, which is different from the accessible name.
When a screen reader announces an element's name, it will announce the accessible name first, possibly any state information (such as a checked checkbox or an expanded accordion), and then the accessible description.
The accessible name and description calculation has a precedence list which can be seen at https://www.w3.org/TR/accname-1.1/#step2. Essentially it looks in this order. Whichever one is found first is used:
aria-labelledby
aria-label
<label>
internal text (such as the text between <button> and </button> or between <a> and </a>)
Note that there are some limitations to aria-label and aria-labelledby. See https://www.w3.org/TR/using-aria/#label-support
Related
I have this part of code:
<div role="heading" aria-level="5" >
<span role="text" aria-label="This is another title example">Title example</span>
</div>
The problem is that I want that JAWS reads the text of the aria label 'This is another title example' but in the list of heading, I want to see only the span text 'Title example'.
I use the role="text" and this is work fine in Chrome, but not in IE.
Is there a correct structure to have my request (in the list of headings I would like to see only the text 'Title example' but when I navigate with JAWS, the heading pronunciation must be aria-label 'This is another title example') in Chrome and IE?
Before answering the question, I will explain what you do and where are the errors.
An ARIA-LABEL overrides the actual text of an element. In your example, the value of the ARIA-LABEL replaces the 'Title example'.
If you want to display specific content to the screen reader user, you should use the common technique called 'screen reader only text'.
<div role="heading" aria-level="5" >
<span class="sr-only">This is another </span><span role="text">Title example</span>
</div>
With JAWS, the list of heading will consider the hidden content so you'll see 'This is another title example'
"If you can use a native HTML element or attribute with the semantics and behavior you require already built-in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so". This is the first rule of ARIA. You should remove all unnecessary ARIA attributes.
element has implicitly a role=heading and an aria-level=5
with a role=text is useless because the content inside the h5 tags is consider has text
<h5>
<span class="sr-only">This is another </span>Title example
</h5>
I'm running the Axe plugin to ensure the validity and 508 accessibility of my app, and some of the violations reported are too restrictive and I don't know how to fix them because they are valid cases:
1. "Links must have discernible text"
In reference to a Tooltip link which isn't supposed to have any text. It's a graphic and must exist on the page by itself. In general, how do you handle textless links which are very common?
<a href="#" rel="tooltip" data-toggle="tooltip" title="" data-original-title="This is a tooltip icon by itself">
2. All th elements and elements with role=columnheader/rowheader must have data cells they describe
"We are not sure this is an issue, because:
Table data cells are missing or empty"
I have a table where the last column is "Actions" that only contains graphic icons, no text; e.g. there's a View button, Edit button, and Delete button. The column is structured as
<table>
<tr>
<td>
<a href="javascript:void(0)" title="Edit">
<i class="fa fa-pencil" alt="Edit"></i>
</a>
<a href="javascript:void(0)" title="Delete">
<i class="fa fa-trash" alt="Delete"></i>
</a>
</td>
It's the lack of inner-HTML text that triggers Axe's "Empty Cell" violation. Do I just ignore it? This is a common scenario, I don't want to be hit by it constantly.
If your icons, graphics, buttons, or links execute some action you need to provide some text alternative to screen readers that describes the action taken by the link.
Either add an aria-label attribute to the links describing their purpose, or place a span tag with descriptive text within the link that is hidden from sight using CSS but will be accessible to screen readers.
Additionally your usage of the alt attribute on your i elements is incorrect. You should hide the icon using aria-hidden="true", and provide a text alternative via another element.
There is nothing inherently wrong with having an empty td element within a table as the td element has the roll of cell and elements of the roll cell do not require an accessible name. If the cell contains content such as an icon you would want to make sure that an accessible alternative is provided, or if the content is strictly decorative appropriate action is taken.
https://www.w3.org/TR/wai-aria-1.1/#cell
An issue would arise if you had an empty th element as it would have a role of either rowheader or columnheader, and an accessible name is required for both.
https://www.w3.org/TR/wai-aria-1.1/#columnheader
https://www.w3.org/TR/wai-aria-1.1/#rowheader
Helpful information for using icons: https://www.w3.org/WAI/GL/wiki/Icon_Font_with_an_On-Screen_Text_Alternative
Information on describing the purpose of a link: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html#navigation-mechanisms-refs-techniques-head
Hiding content from sighted users:
https://webaim.org/techniques/css/invisiblecontent/
Trying to figure out why a Lighthouse audit flagged a bunch of my links as failing the elements have discernible names
<h3>
My New Post Title
</h3>
My question is do all links need aria-labels because I thought if it's just a normal link the text inside the link is what is required?
Or is there something else going on with the structure of my markup? Another flagged element is this one:
<a class="custom classes" href="https://...">
<div class="custom classes" style="background-image: url('https://...');"></div>
<div class="article-thumbnails-small__title">Post Title</div>
</a>
For that one I understand that the a has no text so the aria-label should go on the div with the actual post title, correct?
SOLVED
I was looking at the wrong element... Have a nice day.
Both of your examples are fine and should not be flagged. Something else must be going on. Is the code you posted exactly what was being tested?
ARIA attributes should be used sparingly and are only meant to be used when native markup isn't sufficient. For links, as you said, if there's any text between the <a>...</a>, then that's "discernible text".
If the link doesn't have any direct text but if a child element does, then you're also ok, such as your second example. The <a> doesn't have text but the second <div> has "Post Title". All the child elements of the <a> are considered when looking for the "discernible text". When I tab to that link, I'll hear "Post Title, link" from a screen reader.
However, CSS can affect this. If your class="article-thumbnails-small__title" on the second <div> has a display:none or visibility:hidden, then that text will not be discernible because it's hidden.
If the class has width/height:0px, then it might not be discernible either. Sometimes 0 sized elements are considered hidden.
If your link does not have text but has a nested <img>, as long as the image has alt text, then you're ok.
Good:
<a href="foo.html">
<img src="foo.jpg" alt="foo">
</a>
No Discernible Text:
<a href="foo.html">
<img src="foo.jpg">
</a>
The aria-label attribute on links (a elements with a href attribute) should only be used when, for whatever reason, it is not possible or not desirable to use perceivable link text. (This includes the alt attribute in image links.) If you have normal link text, you should not use the aria-label attribute because that attribute would override the link text. See step F of the text alternative computation in the document Accessible Name and Description Computation 1.1: the a element has an inherent role that allows the computation of its name from its content (i.e. the link text and/or the alt attribute on an img in the link). However, this step is only followed if there is no aria-label attribute on the link element (see step C.
See also Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger in the WAI-ARIA Authoring Practices 1.1, which points out that ARIA sometimes overrides the original semantics or content, citing aria-label as an example.
So if Lighthouse flags links with perceivable link text and no aria-label attribute, there must be something else going on, such as CSS that hides elements.
I need to use a font awesome icon inside an anchor element. The anchor element does not contain anything rather than the icon.
Ex:
<a href="#" aria-label="List">
<i className="fa fa-list-ul"
title="List View"
aria-hidden="true"
title="List View">
</i>
</a>
What I want to know is is it wrong to put aria-hidden="true" to the icon since there is no other text or content inside the anchor tag(In this case tag becomes informational so I think it is ok to use aria-hidden="false" here).
Is there any rules related to this so we all can follow ?
You have two things to consider:
people not using assistive technologies (=not relying on ARIA)
What alternative text will have people not using assistive technologies? A title attribute should be added to the a[href] tag.
This will help for instance, people with cognitive deficience, people with low vision, people with bad computer knowledge to understand the meaning of the icon. If you can show the tooltip on keyboard focus, it would also be nice.
people using assistive technologies
The Fourth rule of ARIA says:
Do not use role="presentation" or aria-hidden="true" on a visible focusable element
Perfect here, only the a[href] is focusable. This does not prevent you from adding the aria-hidden attribute on the i element as long as you keep an aria-label for valid alternative for assistive technologies.
How can I add accessibility to this
Text:
Buttons and Images and anchors:
<div class="btn-group" role="group">
<button class="btn btn-default">
<img class="profile-img">
<span id="user-name">john</span>
</button>
<button class="btn btn-default">
Log out
<i class="fa fa-sign-out fa-lg"></i>
</button>
</div>
<div>
Change recipient
</div>
Too little information provided. Context needed. That being said:
Add an alt attribute to the <img>,
make sure the link has a valid href,
don't rely on FontAwesome icons to convey critical information,
maybe dump the role attribute as it may not be needed (context necessary to know if needed).
Only you are suited to properly add semantics to your code and content, so we really can't do this for you. But, here are some important things to remember/do/follow:
Your HTML is not event valid, so start by correcting that.
Don't ever use an HTML element because of the way it makes the
visible page look (i.e. using a heading like <h4> to make text
small and bold). CSS should be used for all layout and presentation.
Use the most appropriate HTML elements to convey the semantics of the content you have. For
example, go ahead and use the <table> element if you actually are
trying to display tabular data and use <ul> and <li> to make menus.
Despite the (many) myths, the HTML5 sectioning elements (section,
article, nav, aside) are not recognized by most screen readers. Their use actually makes creating a valid document outline much more difficult.
The proper use of heading (<h1>...<h6>) elements is the best
thing you can do to convey a proper document structure.
Use WAI-ARIA landmark roles where applicable as that has been a
standard for many years and all the major screen readers understand
it.
For images, provide the alt attribute to the <img> tag, which is a description of the image. For example, <img class="profile-img" alt="profile picture">.
For semantics, use <em> instead of <i> and <strong> instead of <b>.
Also, look into ARIA (Accessible Rich Internet Applications). A useful ARIA attribute is the role attribute. It provides extra content about the element's purpose and functionality.