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
Related
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/
I have this piece of html:
<i class="fa fa-fw fa-comment" title="Hello"></i>
This displays comment icon from Font Awesome. When I hoover over this icon, tooltip with text Hello is displayed. There is a delay between hoovering over icon and displaying the text. How do I change length of this delay? To be more specific, I would like to display title instantly.
I am aware, that this could be achieved by writing my own tooltip. However, I would like to avoid it and (if possible) use native solution.
I've got a un-ordered list. And I've added icons using the Twitter Bootstrap 3.
Using Carme Font from the Google Fonts. For the normal text Carme font works very well.
But in the unordered list which i created, when I add a icon to it using the BS3, I'm getting icon and the font-family for that particular list is getting changed.
FIDDLE for a better understanding.
Notice the font-family both the list items with and without glyphicons.
I don't know whether the problem is..
Any suggestions will be helpful for me to overcome it.
Icon tag needs to go outside <a> tag
<ul>
<li>
<i class="glyphicon glyphicon-user"></i> One 1
</li>
<li>
One 1
</li>
</ul>
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
In my web application, I have made myself a font that consists solely of icons. I use these icons to complement titles and sub titles within the application and make it more visually appealing.
However, screen readers like JAWS read this out and it makes for an unpleasant experience for users of screen readers.
For instance the character c displays an image of a cloud. I use it in this way to complement for instance a header such as <h1>:
<span class="my-font">c</span>
Now I would like for screen readers to completely ignore this as this is just complementing an existing title and not adding any new meaning to what's on the page. Through my research I have found two possibilities:
aria-hidden="true" or role="presentation"
I'm just not sure which one of these (or perhaps both) are suitable to what I am trying to achieve.
You should use the aria-hidden="true" attribute, which says:
Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
This means that the element is not supposed to be perceived by any user. So use:
<span class="my-font" aria-hidden="true">c</span>
If the icon is supposed to be a link or is not just for decoration, I suggest you have some text accompanying them so that screen readers knows what it is. You can move the text off screen so that it is only visible to screen readers.
HTML
<span>
<span class="my-font" aria-hidden="true">c</span>
<span class="screen-reader">About me</span>
</span>
CSS
.screen-reader {
position:absolute;
top:-9999px;
left:-9999px;
}
If it's just a decorative icon, it should better be served with CSS instead of HTML, for example with a pseudo-element: ::after(content:…; font:…;). Unfortunately, some screenreaders might read this content, too, and we can't apply WAI-ARIA in CSS, of course. So, depending on your situation, you might be "forced" to use markup with aria-hidden="true" instead.
If possible, you should also use a corresponding Unicode symbol (like ☁, which is "U+2601 CLOUD") instead of a irrelevant character (like c).
If there is no corresponding character, you should make use of Unicode's Private Use Areas, which are code points that are left undefined, so you can define your own characters/symbols.
You might be interested in these posts:
css-tricks.com: HTML for Icon Font Usage
nimbupani.com: Markup-free icon fonts using unicode-range
While aria-hidden="true" works to hide the audible icon, it will still show up in the assistive technology's list of links and headings.
I'm still trying to find a way to hide them entirely, but it's tricky. To the OP, yes, aria-hidden="true" will hide them somewhat, but not entirely. Don't rely on it alone. Also, make sure you test with real users!
I came across this really good article: http://pictos.cc/articles/using-icon-fonts/