I'm testing the JAWS screen reader on a table having the following markup in its cells:
<center><i class="fa fa-check fa-1" title="MyTitle" aria-hidden="true" style="color:green" aria-label="read me"></i></center>
I've noticed that the screen reader can't "enter" the above cell (due to the aria-hidden), so I removed it:
<center><i class="fa fa-check fa-1" title="MyTitle" style="color:green" aria-label="read me"></i></center>
Now it can enter the cell but doesn't read any text.
Any way to put some text accessible only to the screen reader and not visible on the UI?
<center>
<i class="fa fa-check fa-1"
title="MyTitle"
style="color:green"
aria-label="read me"
role="img">
</i>
</center>
Notice how I added role="img", this instructs the screen reader to treat this like an image and so it will read the aria-label.
Without it some screen readers will ignore aria-label attributes on certain elements as they aren't "semantically correct".
The alternative is to leave the aria-hidden on the icon and add some visually hidden text that is for screen reader users.
Related
My problem is the next:
I have a p:commanButton like this:
<p:commandButton icon="fa fa-reply fa-2x"/>
The problem is that the content (fa-reply) grows but the size of the button doesn't.
Which is the problem?
When I do: <p:commandButton icon="fa fa-reply" styleClass="fa-2x"/> the size of the button grows, but the content doesn't show correctly.
I think, simple work-arround would be to use p:commandLink with manual <i class="fa fa-reply fa-2x"></i> tag instead of p:commandButton, as following:
<p:commandLink>
<i class="fa fa-reply fa-2x"></i>
</p:commandLink>
And if you want to use text as well, then:
<p:commandLink>
<i class="fa fa-reply fa-2x"> Reply</i>
</p:commandLink>
Otherwise, you will require to add compatencies for the different sizes of the icons (fa-xx) on your p:commandButton using custom CSS classes.
You can simply add style="font-size: 2rem" to your button:
<p:commandButton icon="fa fa-reply" style="font-size: 2rem"/>
This will set the font size of both the icon and the button text.
Example from the showcase where I applied this to the button in the middle:
I suggest to create a class though, so you can reuse this style on buttons.
See also:
How do I override default PrimeFaces CSS with custom styles?
Is there any way to tell an assistive tool to treat an element (e.g: <div>) as a whole, and not split it in child elements?
First example
Using iOS VoiceOver and a with a field on it, it gets splitted into two different elements:
Second example
This elements are splitted in two parts, where the best solution would be read "122 points" and "First position":
<div class="row">
<div class="stat lg col-xs-6">
<span>122</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Points</h5>
</div>
<div class="stat lg col-xs-6">
<span>1º</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Position</h5>
</div>
</div>
VoiceOver on iOS does indeed sometimes split a sentence, although your example code actually works fine. I used your code as the first line in the screen shots below and then copied the text without the <a> tag as the second line. The second line gets broken up by VoiceOver but the <a> tag does not.
<span class="label info">
<a href="/round/next">
Next round starts <strong>in 3 days</strong>
</a>
</span>
<br>
Next round starts <strong>in 3 days</strong>
(Note: I have the enhanced outline turned on for VoiceOver so the black outline is probably thicker than what you're used to seeing.)
I found that using role="button" the element is treated as a group and its innerText property is read, but announced as a button.
I have a navigation bar that has two glyphicons from bootstrap the envelope and phone I want my phone icon to disappear when screen reaches <768px so I used the bootstrap class .hidden-xs but it doesn't work, any help? My code is
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-phone"; class="hidden-xs"></span>
That's not how you assign multiple classes to an element. There should only ever be one class="" attribute...
<span class="glyphicon glyphicon-phone hidden-xs"></span>
Separate the individual classes with a space.
I'm wondering about screen reader accessibility using Twitter Bootstrap framework and FontAwesome icon fonts.
I'm looking at 2 different icon situations:
1) The icon has helper text that a screen reader will pick up:
<span class="fa fa-pencil"></span> Edit
2) And a standalone icon without any helper text:
<span class="fa fa-pencil"></span>
Ideally, in both situations, a screen reader will announce that the element is an "Edit" button.
Per FontAwesome's site:
Font Awesome won't trip up screen readers, unlike other icon fonts.
I don't see any speech css tags related to FontAwesome or Bootstrap and not really clear to me how a screen reader will react to each of these situations.
I'm also aware of aria-hidden and Bootstrap's .sr-only and there has to be an ideal way to handle both situations.
Edit: added title="Edit to example 2.
What advantage does using aria-label="Edit" have over the standard title="Edit"?
Edit 2: I came across this article that explains pros and cons of different use implementations.
First of all, you should probably use <button> instead of <a href="#">. Empty links can be confusing for screen readers, but a button is a button. In short, links take you places, buttons perform actions. (http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/; https://ux.stackexchange.com/questions/5493/what-are-the-differences-between-buttons-and-links).
I would go with a variation of your first code sample, and utilize Bootstraps .sr-only class. If we update your code with button and add in the class, we have:
<button type="button" class="btn btn-default"><span class="fa fa-pencil"></span> <span class="sr-only">Edit</span></button>
We now have a more semantically correct button element; sighted users see the edit pencil icon; and screen reader users will hear "Edit". Everyone wins.
(Note, the button code is straight from Bootstraps CSS Buttons section.)
From my understanding I think it may be useful to also add in:
aria-hidden="true"
to the span class that holds the pencil icon. This will prevent the screen reader from trying to read this element.
<span class="fa fa-pencil" aria-hidden="true"></span>
As part of making our site WCAG compliance we are adding play/pause buttons for carousel.Here the screen reader is reading in different manner
<div id="imageCarouselPlayBtn" class="cblt-button imageCarouselPlayBtn" tabindex ="0">
►
</div>
<div id="imageCarouselPauseBtn" class="cblt-button imageCarouselPauseBtn" tabindex ="0">
‖
</div>`
in this case screen reader is reading pause button as double vertical line and group for play button.
if we use sprite image instead it is reading as group for both play/pause buttons.
Is there any good solution for this problem instead of using image tags for both ?
You could use WAI-ARIA’s aria-label attribute:
It provides the user with a recognizable name of the object.
Also: Is there a reason why you don’t use button/input instead of div for the play/pause buttons? With buttons, your markup could look like:
<button type="button" aria-label="Play">►</button>
<button type="button" aria-label="Pause">‖</button>