If I have a site with a couple of font awesome icons on it, e.g.
<i class="fa fa-fw fa-cloud "></i>
And run this through the WCAG 2.0 validator I get the following error:
Success Criteria 1.4.4 Resize text (AA)
Check 117: i (italic) element used.
Repair: Replace your i elements with em or strong.
Error Line 185, Column 158:
<i class="fa fa-fw fa-cloud"></i>
I realize that the rule shouldn't really apply in this case, as it is there to ensure that <em> and <strong> are used instead of their non-semantic counterparts <i> and <b>. But the problem still exists if I have a client that requires me to check all the WCAG2.0 boxes.
So does anyone know what would be the proper way. Should I change them to <em> instead, does that give screen-readers any difficulties? Any other suggestions are welcome!
First, <i> does have semantic meaning in HTML5 (but was only presentational before that). Assuming you're using HTML5, the validator you're using is wrong to flag all occurrences of <i> as inappropriate.
Second, changing
<i class="fa fa-fw fa-cloud"></i>
to
<span class="fa fa-fw fa-cloud"></span>
is good but it doesn't fix the real accessibility issue, which is that you don't have any text alternative to the icon (at least it appears that you don't). For the sake of argument, let's assume your fa-cloud icon is inside an <a> tag. Something like this (using Bootstrap's sr-only CSS class):
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
<span class="sr-only">Download</span>
</a>
or like this (using WAI-ARIA's aria-label attribute):
<a href="..." aria-label="Download">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>
is the solution. Even simpler would be to show the text to everyone:
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
Download
</a>
from font-awesome doc:
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the 'i' tag for brevity, but using a 'span' is more semantically correct).
So, you could try changing your 'i' tags for 'span'.
It very much depends on what the content is inside the i tag is semantically. WCAG2.0 is a set of guidelines, not hard and fast rules.
According to the HTML5 spec:
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, such as a taxonomic designation, a
technical term, an idiomatic phrase from another language,
transliteration, a thought, or a ship name in Western texts.
From: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element
If the content is something that needs to be "emphasises" then, no use the em tag as that is semantically correct across all user agents. The example on the spec, with a Latin technical name for an animal, is a perfect example of something that would be italicized, but not emphasised (although visually they would look the same).
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
Would be styled:
The Felis silvestris catus is cute.
So, if you can justify why the text is "italic", but not emphasised, keep it as is, otherwise change it to a semantically appropriate tag.
Adding to danielnixon answer (+1): if I want to use a fontawesome icon as a decorative thing in the UI (not a link, button, etc), I add a span with a wai-aria attribute:
<span class="fa fa-small-arrow" role="presentation"></span>
Related
Which one of the below methods is correct / better for making a link accessible?
Read More <i class="fas fa-chevron-right" aria-hidden="true"></i>
OR
<span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i>
Which one of the methods is correct/ better for making a section accessible?
<section aria-label="Events"></section>
OR
<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>
OR
<section>
<h2 class="sr-only">Events</h2>
</section>
For the link, it should make sense out of context so I'd use a sr-only class around helpful screen-reader specific text.
<span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i>
Regarding the section, a major heading tag at the very beginning will do the job well. If you want both screen-reader and regular users to see the heading, use a heading tag with an aria-labelledby attribute. If you only want screenreader users to see the heading, use the sr-only class again. Typically, you'd want all users to see a section heading though, so everyone can recognize the beginning of a new group of content.
<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>
Just to expand upon the great answer by #thenomadicmann here is a bit of advice on the subject and why things are suggested in WCAG / general accessibility guidance.
How should I include screen-reader friendly text in a link?
In the two examples you give (one using visually hidden text and one using an aria-label) you should use the visually hidden text.
There is one good reason for this, compatibilty.
14 browser / screen reader combinations have problems with aria-label on links (although support is very good)
However 100% of browser / screen reader combinations will read visually hidden text.
For this reason you should use
<span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i>
Side note on icons
Consider replacing your font-awesome icons with inline SVGs. They are more accessibility friendly as they won't disappear if somebody overrides your site fonts (e.g. someone with dyslexia who prefers a certain font as it is easier for them to read). Plus font awesome is some 150kb of CSS and an inline SVG is about 1kb so it makes the site faster too if you only have a few icons!
How to make a section accessible
By standards the following is the correct method
<section>
<h2>section title example<h2>
</section>
However for maximum comparability you should use aria-label and role="region".
<section aria-label="section title example" role="region">
<h2>section title example<h2>
</section>
There are two points here.
aria-label support is nearly 100% (as discussed previously) whereas aria-labelledby support is not as good
Around 2% of all screen reader users are still stuck on IE6-8. As such adding role="region" gives (almost) the same semantic meaning to those screen reader users.
Side Note(s) on regions and headings
1 - The aria-label will result in some duplicate announcements in some screen readers. However this is still preferable as a user may prefer to navigate by regions and as such announcing the region names is useful.
2 - In your comments you wondered why to use a sr-only heading vs a label.
I partially covered this in the previous point (aria-label is slightly less reliable than visually hidden text) but there is another reason.
While some screen reader users navigate by regions, others prefer to navigate a page by headings (i.e. in NVDA you press NVDA key + 2 to loop through all level 2 headings.).
This is why headings are important, in fact they are more important than correct use of <section> elements as this is how the majority of screen reader users will explore your page.
I have a html webpage containing with lot of css. Let's say if I have one style per div, do I need to add it to my external css file or just write internal css inside of that html page?
Take a look at this example.
<div class="sub">
Link <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</div>
I need to add two different colors to "link" and icons. I can simply do this way.
<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>
Or can add classes and write it to external css also.
<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>
I know those two methods are working but need to know the best practice for this type of situation. Internal or external?
In a short answer:
As far as possible don't use inline style, because inline style has Highest priority after !important keyword.when we have too many lines and use of inline style, it is very hard if we want to find and overlay it.
Actually it's a good practice to have your CSS in external, but it depends upon the situation. For this, it is best to use inline CSS.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am a new fresher in front end, my basics are really poor. I was reading an example code. The code is like this:
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
<li>
<i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span>
</li>
</ul>
After I checked whether there is a class called network-name, the answer is no. So I want to know what is the meaning of span class="network-name" here?
Span has no meaning. It is a generic inline element with no associated semantics.
I check whether there is a class called network-name,the answer is no.
The answer is "yes". There is an HTML element with network-name in the class attribute. That makes the element a member of that class.
There might not be any CSS that makes use of it. There might not be any JS that makes use of it. The class does exist though.
span is generally used for applying many attributes to inline content. Alone it adds no value at all to the page. If there is no JavaScript, CSS or other code using this class network-name or targeting the span element directly then it will make no difference if these span are removed.
See the HTML span tag W3C documentation.
The span tag is used to group inline-elements in a document.
The span tag provides no visual change by itself.
The span tag provides a way to add a hook to a part of a text or a part of a document.
The tag also occupies only the space it needs to display what it contains
check W3Schools Span Definition and usage
As for the class="network-name" check the head of the document where you got the code its surely linked to some online style sheet(most likely Bootstrap)
I was going over this codepen and I saw this <dropdown> tag. I dont know if this is a legit tag like <div>, <span>, <section> etc..
<dropdown>
<input type="checkbox" id="toggle1" checked>
<label for="toggle1" class="animate">Editor <i class="fa fa-list float-right"></i></label>
<ul class="animate">
<li class="animate">Source <i class="fa fa-code float-right"></i></li>
<li class="animate">Fullpage <i class="fa fa-arrows-alt float-right"></i></li>
<li class="animate">Debug <i class="fa fa-cog float-right"></i></li>
</ul>
</dropdown>
I think Xml allows you to have custom name for tags/ DOM elements but I don't think the author is using Xml.
I think the author made up his own element that describes the section that he is writing about. I didn't know you could do this. I also saw <time> one time being used in html. Can someone explain to me about how it's ok to make up your own tag names or show me documentation. I'm assuming this is an html thing
There is no dropdown element in HTML5 standard set.
HTML5 allows custom elements if they contain '-' in their names. So they'd better use <drop-down>...</drop-down> .
<dropdown> is not a valid HTML tag. Not sure where you get this piece of code from, but you should avoid using custom tag. Use class selector / ID selector instead.
On the other hand, <time> is a HTML tag in HTML5 specification. Documentation is here.
I'm trying to put a block of HTML into a field in a content management system, but it keeps stripping out one of the elements. In particular it is stripping out the <i class="sprite arrowDDnav"></i> from the block below.
<a class="static selected menu-item rootActive" href="/community/presbyterian-healthcare-foundation/Pages/default.aspx">
<i class="sprite arrowDDnav"></i>
<span class="additional-background">
<span class="menu-item-text">Presbyterian Healthcare Foundation</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
Any idea why this might be? And any idea how I can "trick" the CMS into preserving the above HTML, or should I resort to using JQuery and document.ready(...) to inject the element in the appropriate place?