I have been using Bootstrap to build my site, but in doing so and researching SEO, I've discovered that using the i tags with glyphicons is not technically "valid" HTML. Is there a definitive rule that says that i tags can be used in this way without effecting markup validity without effecting SEO?
As part of this issue, I am also trying to satisfy a complaint that my anchor text does not describe its destination:
<a href="#Url.Action("Accountant", "Service")">
<div class="service-icon">
<div class="icon-book-1 icon-medium-effect icon-effect-2"></div>
</div>
</a>
This produces the desired visual effect, however I can't add anchor text else it will obviously be displayed on the screen. Normally an image would have been used within the anchor and I could have displayed alt text, so I'm stuck as to where best to put this "descriptive text".
Don’t use i.
The i element has a meaning which isn’t appropriate for general icons:
[…] 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.
Reasons why some people use(d) i as hook for showing icons (via CSS) might be:
The term "icon" starts with i.
The element name is short.
Use span instead, which is a meaningless element.
If the icon is relevant content (important for understanding/using your page), consider using the img element instead, which allows you to use the alt attribute.
You should use CSS for decorative icons only. If that’s not possible:
If you link this icon and the link doesn’t contain any content (no text, no img, …), i.e. it only contains an empty element, then you should provide some content in the HTML. Otherwise, visitors without CSS support, screen reader users, etc. won’t be able to use your link. If you don’t want to include content for design reasons, hide it visually. More details in my related answer.
You can use something like <span class="sr-only">Your Text</span> to improve the accessibility.
.sr-only is a built-in Bootstrap class to make it easier to provide useful text to screen readers when you also do not want that text to appear visually on the screen.
Related
In general, I try to use semantic html to improve accessability. However, I'm working in an existing codebase and noticing that a lot of single-line text used in the layout is placed directly in <div> tags, to avoid the bottom margin that comes with <p> tags.
<div>Team Average is 20%.</div>
Does this have direct accessibility implications, and if so, what are they? Will using <p> tags and adding a style rule to each one to get rid of the bottom margin produce distinct accessibility benefits? (I realize I could just set p elements to have no padding via CSS, but as this is an existing codebase, that isn't an option.)
I also realize I should use more semantic html where possible; this is just in situations where nothing more specific applies.
In my experience, assistive technology will function better, and the page will be more understandable when text is placed in paragraph tags, as opposed to divs.
Divs seem to be treated more like raw text. If the div uses line breaks to simulate paragraphs, then the visitor will be unable to easily skip paragraphs or move between paragraphs without listening to the contents of the entire div.
Using divs instead of paragraph tags is definitely sub-optimal. Whether or not it's a failure of WCAG 1.3.1 is debatable. If it's relatively easy to change this out, it would be better to do so.
W3Cschools said "Any sort of content can be put inside the tag!" (https://www.w3schools.com/tags/tag_div.ASP) and in my experience there's no accessibility issues related to this.
DIV are for a division of space and it's no rules about their content however it's best for design to have html elements inside of if.
If you are concerned about accessibility rules i suggest you to check your website with some tools like the following ones:
aXe
Wave
Google Lighthouse
Valmolà
If it's a single-line text, then it will not be a problem.
If the text has more than 1 paragraph, then you should use <p> tags.
Context: Educational ebook (HTML + CSS) publishing
I have a composition title where I have a sentence like this:
<p>This is <del>correct</del> <ins>incorrect</ins></p>
And it is important that the user knows that some text is being deleted and some text is being inserted. I also have a related scenario where text has a highlight applied that has semantic meaning. For instance:
<p>This is an <span class="highlight-blue">adjective</span> and this is a <span class="highlight-red">noun</span>. </p>
I was recommended to use role="region" + aria-label for these situations by an accessibility consultant.
For instance:
<p>This is an <span role="region" aria-label="adjective" class="highlight-blue">adjective</span> and this is a <span role="region" aria-label="noun" class="highlight-red">noun</span>. </p>
The flexibility is necessary here because we are using a standard CSS for all of our titles and sometimes a highlight-red might indicate passive voice or it might indicate a noun, etc.
I have seen in other questions on this site that it is not allowed to use aria-label on span (or div) elements. Also using Chromevox, I have found that the reader will read the aria-label but not the text inside the aria label. (I do not have access to other screen-readers for testing.)
So my question is: What is the best way to have the semantic meaning of these inline elements read to the screen reader user?
Non-viable options
Pseudo-element with CSS hiding. I've seen solutions where you can create a pseudo-element and then hide it offscreen using CSS. When you hide content off-screen, Kindle encounters issues, dropping large chunks of text after the off-screen content, so this is not a viable option.
I would not make the highligting marks a region. That makes them a landmark, which are used to navigate to different areas on the page. The more landmarks you have, the less useful they are (because you'd have to navigate through a bunch of them to get where you want.).
There's a nice article on making highlights and other editing symbols accessible on "Short note on making your mark (more accessible)"
it is not allowed to use aria-label on span (or div) elements
That's not quite accurate. aria-label is a global attribute and can be set on any element. However, the label might be ignored if set on a <div> or <span>. See "2.10 Practical Support: aria-label, aria-labelledby and aria-describedby". In particular, the third last bullet point:
Don't use aria-label or aria-labelledby on a span or div unless its given a role.
So if your <div> or <span> has a role that is appropriate, then the aria-label will be read. But don't assign a role just to get the aria-label read. The role has to make sense.
Simple question. I was told that the use of, for example, this
<span class="fa-stack fa-lg">
<i class="fa fa-cloud fa-stack-2x"></i>
<i class="fa fa-cog fa-stack-1x"></i>
</span>
(which will result in a cloud with a cog at its center), is forbidden for proper accessible html, because the two <i> tags are empty.
But then, how can you do that sort of stuff without resorting to an image ? My goal is to achieve the fewest images possible in a page, its only achievable with font icons.
Is it valid to have an empty element (like <span></span>)? Yes.
Is it accessible to have an empty element? It depends.
Is it used for nothing / for achieving a certain CSS layout? It shouldn’t affect accessibility at all.
Is it used for adding content via CSS? It depends.
Is this CSS content only decoration? It shouldn’t affect accessibility.
Is this CSS content representing actual content? It depends.
Is there an acessible alternative for this content / is it redundant? It shouldn’t affect accessibility.
Is there no alternative / it’s not redundant? It’s likely a problem for accessibility.
Example
If you have some empty space on your page, and you’d love to add some images of cogs via CSS, but they don’t serve any purpose besides looking nice, adding these should not affect accessibility, as it’s just decoration:
<span class="cog"></span>
If you have a link to a settings page, and you want to add a cog icon via CSS, it’s accessible using CSS for including the icon because it’s redundant; the relevant information (that the link is leading to the settings page) is present in the actual content of the a element, i.e., the text "Settings":
<span class="cog"></span>Settings
If you have this link, but you don’t want to provide text, just the cog icon, it’s not acessible anymore. Now the relevant "content" is no longer in the HTML (where it belongs) but in the CSS (which is not accessible to everyone):
<span class="cog"></span>
To make this accessible, you could use the img element and its alt attribute; or add some text that’s visually hidden via CSS.
(You shouldn’t use the i element for adding icons; use span instead if you have to add an empty element.)
(I'm not the same Adam as the one who gave the previous answer)
There is two points in your questions:
Does using an i tag to insert an icon is something accessible?
In HTML5, the i tag should be used as a typographic marker to markup a change in the semantic (like a latin locution for instance or something commonly italicized which is not used to emphasize). So this markup is not correct to be used to specify a logo.
For the specific case of screen readers, it will be ignored. But screen readers are one part of the accessibility aspects.
Does it provide enough semantic?
If your icon is just for decoration purpose, like you said in comments, then it's ok.
If your icon had any semantic included then you must specify an alternative text.
Sorry if this is sounding fussy but I'm about to produce a whole lot of HTML 5 and I was hoping someone out there had come up with some clear rules for when to use the <em>, <strong> and <mark> tags. The spec suggests some subtle differences but I keep finding myself asking whether I want the text bolded, italic or yellow high-lighted, which makes me think I should be using CSS instead. (And sometimes I wonder why I even bother when I could just as easily write "Cats are NOT dogs.")
I keep finding myself asking whether I want the text bolded, italic or yellow high-lighted, which makes me think I should be using CSS instead.
That's 100% correct. Markup is for describing content, not appearance. That being said:
http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html
The <strong> element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
The <em> element represents stress emphasis of its contents. The placement of stress emphasis changes the meaning of the sentence.
The <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
<mark> doesn't really have relevance to content, only context (e.g. marking content that matches a search term, misspelled words, selected content in a web app, etc.).
<strong> denotes important text, but does not affect meaning.
<em> denotes important text and affects the meaning of the content by saying that it should be read/spoken with emphasis.
You are free to use CSS to change browser defaults for all of these elements.
Remember HTML is a markup language. Inside it you write the content of the page. If you use "Cats are NOT dogs", search engines like google don't know whether "DOGS" is a distinguished phrase or not (of course your readers will notice it, though). If you use CSS, which is a styling language, same thing happens: search engines don't recognize "DOGS" as distinguished text but users do.
When you use the elements of your question, they indeed give information. They're called semantic elements. For example it's more informative for the search engine (or screen reader or speaking software) to use element <h1> for titles than just using <p> and through CSS making it big and bold. Another example is using alt and title attributes in img, 'cause engines don't understand what image you have in src.
So, even though any of the HTML elements <em>, <strong>, <mark> are noticeable for the user, they give different meaning to the text inside them for the engines.
Look for writing style for e.g. books. True, webpages are less formal than this, but it should give you a starting point. Italic text (i.e., <em>) is used for emphasis. Boldface (<strong>) is used for titles and such, very rarely in running text.
I use font-awesome and display their fonts like that:
<i class="icon-lock"></i>
This will display a nice little lock symbol. For the user to know what exactly that means, I tried adding attributes such as title and alt, but to no avail.
Is there any attribute I can use for the <i> tag that executes the same task as alt for images and title for links?
You can use the title attribute on an i element, like any element, e.g.
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
Whether it helps is a more difficult issue. Browsers usually show the title attribute value as a “tooltip” on mouseover, but why would the user mouse over the icon? And such tooltips are of poor usability; so-called CSS tooltips often work better.
Screen readers may give the user optional access to title attributes, but I’m not sure what they do with elements with empty content.
With the advance of WAI-ARIA, when using font icons, you probably should use a combination of the following to improve accessibility:
The role presentation to remove implicit native role semantics of the element. This is especially important if you (ab)use an element with a native semantic to provide icons, as this is the case in your example using the i element (which, according to the specs, "represents a span of text in an alternate voice or mood [...]").
An aria-label to provide a string value that labels the element -or- a native HTML title attribute if you are OK with the browser displaying a tooltip when hovered.
An aria-hidden attribute to hide generated content from assistive technologies (as you are using an icon font family, there is a generated character :before of :after). According to the specs:
Authors MAY, with caution, use aria-hidden to hide visibly rendered
content from assistive technologies only if the act of hiding this
content is intended to improve the experience for users of assistive
technologies by removing redundant or extraneous content. Authors
using aria-hidden to hide visible content from screen readers MUST
ensure that identical or equivalent meaning and functionality is
exposed to assistive technologies.
I don't know your exact use case, so I take the liberty to use the simpler case of providing a phone number. In decreasing order of preference, I would use:
<span aria-label="Our phone number">
<span class="icon-phone" aria-hidden="true"></span>
+33 7 1234576
</span>
(or any variation implying:
- an `i` element with a `role` presentation attribute
instead of the inner `span` element
- a `title` attribute instead of an `aria-label` attribute)
<span class="icon-phone"
aria-label="Our phone number">+33 7 1234576</span>
(or any variation using `title` instead of `aria-label`)
<i class="icon-phone" role="presentation"
aria-label="Our phone number">+33 7 1234576</i>
(or any variation using `title` instead of `aria-label`)
Please note that aria-label and title attributes should describe the content of the element. Not the next sibling element. So I feel like the following solution is not in accordance with the specs (even if most accessibility tools would actually have the same observable behavior as if the phone number were actually inside the span element) :
<span class="icon-phone"
title="Our phone number"></span>+33 7 1234576
You should use <span> or something along those lines instead. You can use the title="" attribute to give some text on hover, if that's what you're looking for. As far as providing accessability to screen readers, or SEO value, you could add the following CSS:
.icon-lock{
text-indent:-99999px;
}
And then write your markup like so:
<span class="icon-lock">What I want the screen reader to say</span>
I think the role for fonts that act like images should be reserved to role="img". This can then be used with aria-label="alt-text". It works because of the ARIA Accessible Name algorithm. See: Aria Techniques Using Img Role.
<i> tags are for marking up text. You are changing the semantic meaning of this tag to something that has nothing to do using italics (and even the italic tag is a bad idea).
You should be using a SPAN instead.
Italic elements do not support alt attributes, IMG elements do. If you want an ALT attribute, use an image.