I'm trying to make my site more accessible for disabled users, and I've been researching how to add alternative text to icons. I'm using Font Awesome icons and the icons are acting as a link, and the docs suggested I add a title link to the anchor tag around it like so:
<a href="path/to/shopping/cart" title="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
However, it doesn't seem to work with the Apple's VoiceOver. It's still just reading out "Visiting Link [?]". Does anyone have any experience with this?
Thanks!
You have to use the title attribute conjointly with the aria-label attribute.
The title attribute is not always read by assisting technologies but the aria-label should be.
Unfortunately using the aria-label alone won't be of any help to people not using a screen reader and the title attribute will give them a clue.
There are two ways you can add some content in here.
The first is to use an img element with an appropriate alt attribute value, e.g.
<a href="path/to/shopping/cart" >
<img src="url/source.jpg" alt="View 3 items in your shopping card" />
</a>
A second method would be to add some text into the i element and visibly hiding it:
<a href="path/to/shopping/cart">
<i class="fa fa-shopping-cart" aria-hidden="true">
<span class="sr-only">
View 3 items in your shopping cart
</span>
</i>
</a>
Add the .sr-only class to your stylesheet:
.sr-only {
height: 1px;
width: 1px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
This second method will allow for longer strings of text, if needed. It also prevents a quirk on some browsers (Firefox, from memory) where if text is aligned off-screen and is part of a link, a user tabbing to the link sees focus extended to where the text is, which leads to a very long, thin box on screen.
.sr-only works by making the content a small 1px box that's then clipped out, and for robustness is positioned absolutely on the page. It's supported by all modern browsers and only needs one extra clip rule for older versions of IE that don't like the standard syntax (clip: rect(1px 1px 1px 1px)). More information can be found on Yahoo's developer blog.
As for which to go for it's a matter of personal preference. I would go for the .sr-only to add meaningful text to the page if using an icon set. If you want to use the img element you need to make sure that when the content's updated the content author writes something meaningful rather than describing what the image looks like.
If the icon is content (which is must be if it is conveying information and you don't have other text already conveying that information) then the element to use to represent it is not the italic element, but the <img> element, which supports the alt attribute.
Using the aria-label attribute is likely what you are looking for.
<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
I'd also recommend these 2 articles for further understanding why the title attribute is widely misunderstood and why it isn't behaving the way you're led to believe it will.
http://mrwweb.com/the-title-attribute-and-why-its-almost-useless/
https://devbook.com/title-attribute-truth/
Related
I am working on a website, making it accessible. But I am having some trouble with the voice reader focus going into the items located in the footer.
I tried using aria-label but it didn't work.
I'll attach an image.
The elements enter focus, which I can tell because of the blue ring around the item, but I don't know how to get the orange ring to focus to those anchor elements in the footer.
The problem was created due to the use of "fontawesome.com" for the social media Icons. In order to include an alternative text or label to the element (provide by fontawesome.com) you need to use a different method: In my specific case this solved it:
<a href="https://www.instagram.com/iamthonystark/" aria-label="Instagram">
<i aria-hidden="true" class="fab fa-instagram fa-3x"></i>
</a>
Here is the link to this solution and the solution to other possible issues related to accessibility and fontawesome.com
https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
On my web page I have an anchor (code below), which I visually display as an image (logotype) completely hiding the text. I'd like the anchor to be:
accessible - read properly by screen readers,
display a tooltip when hovered by mouse (the tooltip explains the image logotype, which may not be understood by everyone).
I use the following method:
HTML
<a href="http://some-institution.com"
title="Some Institution"
class="replace-text-with-image">Some Institution</a>
CSS
.replace-text-with-image {
/* Hide the text. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
/* Display the image. */
width: <image-width>;
height: <image-height>;
background-image: url(<url-to-image>);
background-size: <image-width> <image-height>;
background-repeat: none;
}
The problems with the method above:
A guy reported to me that on encountering the link his screen reader reads both the link's contents ("Some Institution") and then the link's title ("Some Institution" again), resulting in a "stutter".
I read (in this article) that using title for accessibility is wrong and aria-label should be used instead.
So I tried re-factoring to use both aria-label and title:
<a href="http://some-institution.com"
title="Some Institution"
aria-label="Some Institution"
class="replace-text-with-image">Some Institution</a>
Now NVDA (the screen reader I'm testing on) reads both title and aria-label attributes resulting in a stutter again.
Other possible solutions which won't work:
When I remove the title attribute and leave only aria-label it's read fine, but I can't remove title attribute, as that's an explanation for the visual users that I want to have.
I could also stay with just title attribute completely removing anchor's contents, but I feel having an empty anchor is not a particularly good practice, isn't it?
What's a solution for that problem?
First off, I would really encourage you to use the simplest possible markup, which would be an anchor element wrapped around an image element, like this: https://jsfiddle.net/pLuqqh8w/
You should be using the title attribute of your anchor element to describe the intent of the link (i.e. where it goes), and use the alt attribute to describe the intent of your image (i.e. what it is). This is how the technology is designed to work. The alt and title attributes should not be same thing.
That being said, if you REALLY want to have a tooltip that isn't announced by screen readers, here's how I would recommend doing it: https://jsfiddle.net/neht6v01/
EDIT: Using the title attribute isn't wrong per-se, it's just not something that should be relied upon because it has very spotty support among screen-reader/browser combinations.
You should think about which ARIA role you have to give.
The a[href] is a link. Can it be also an image? No. So, create an image.
<a href="http://some-institution.com" aria-label="Some institution">
<span class="replace-text-with-image" role="img" title="Some institution">Some institution</span>
</a>
This way, the screenreader will announce the aria-label. And the title will be available to mouse users.
title is not bad for accessibility but can be useless for screenreaders. So you should not rely only on the title attribute but, as you perfectly pointed out, aria-label is useless for non-screenreader users.
How can I hide text value and just show icon at all using Font Awesome 3.2.1? The menu option needs to have a value. Here is what I have:
Facebook
I tried text-indent but simply hidden the logo and not the text which was weird.
<i class="fa fa-facebook"></i> <span style="display:none;">Facebook</span>
This is the standard use of FontAwesome icons, that should solve your issue.
In a similar way to Glyphicons (as used in Bootstrap), you can use a span element within the a tag:
<span class="icon icon-facebook-sign"></span>
As advised, I have included the title attribute for screen readers. A screen reader should use this, as long as the a tag doesn't contain any text.
<span class="hidden-xs">Facebook</span>
If you use Bootstrap here, you can use hidden-lg, hidden-md classes.
You can use color:transparent property which is very useful.
Text-indent should also work. CSS property value to display: inline-block or display: block to anchor.
One more solution is that you can put text in span tag and give span display:none;
I'm trying to get a site I'm working on to be WCAG 2 compliant. The site uses image sprites and it would be a challenge to replace the usage of image sprites throughout. As such I'm trying to determine whether the following technique:
<div style="background: url(flower.png); height: 20px; width:20px;">
<div style="text-indent: 100%; white-space: wrap; overflow: hidden">
A red rose
</div>
</div>
Is sufficiently compliant. From reading the documentation... it's unclear.
For a non-decorative img tag use of alt is definitely a requirement: H37: Using alt attributes on img elements
And for a media objects, wrapping content is sufficient: H53: Body of Object
But whether using the body of a a div that has a non-decorative image background passes muster isn't very clear.
Can anyone speak to this or point me to the relevant page in the standard?
There are a couple of scenarios this could be, the advice will change depending on whether it is:
Content images (e.g. a gallery)
Functional elements like a navigation or toolbar options.
If they are content images (which 'red rose' implies), then I think this technique applies:
http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/C30.html
In which case your approach would meet WCAG if people could display it without the image in order to read the alt-text. That might sound odd, but assistive technologies have long known how to read alt attributes, but image-replacement can be done in many ways and they may not be able to tell when it is used.
Screen reader users would probably find it ok, but other groups who need alt-text probably wouldn't be able to read the text in a 20x20px box. For example, if you turn on high-contrast mode in Windows, background CSS images are dropped and the text would not be visible.
If they are functional elements and the image is an icon, e.g. a "save" button, then you want a visible (e.g. tooltip) and programatic label, in which case I would suggest:
<div style="background: url(flower.png); height: 20px; width:20px;"
role="button" aria-label="Save" title="Save" tabindex="0"></div>
However, you would be better off using foreground images or font-icons, as these are far more robust in different situations. For example, if you included a font-icon you could use:
<button>
<span class=”icon-save” aria-hidden="true"></span>
<span class=”alt”>Save</span>
</button>
With something like this as the CSS, assuming you have already imported the correct font to use:
.icon-save:before {
font-family: icons;
content: ⇝ /* whatever your icon reference is */
}
.alt {
position: absolute;
left: -9999px;}