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.
Related
First of all, I realize that styling in HTML should be handled by CSS, and I don't want to change that.
I just want a solid tag I can use for underline, a tag that is meant for underlined text, or one that makes sense to use as such. Then I can style it with CSS.
Now where is that tag?
Why is strong, b, em, i etc. perfectly fine (and often auto-styled in browsers), but underlined is the forbidden fruit?
I would hate to write
<span style="blabla: underline">some underlined text</span>
OR <span class="underlined">some text</span>
when I can just use
<u>hello</u>
and style it?
The u element was meant for underlining, ever since HTML 3.2. HTML 4.01 frowns upon it by “deprecating” it, and HTML5 proposes to redefine its meaning in an obscure manner. Yet, in reality, it works in all browsers, and will keep working, and has the exact effect of underlining.
Whether you should underline anything but links on web pages is a different issue. So is the question whether you should think in terms of logical structure rather than visual rendering.
Underlining text is generally a bad idea because it should be exclusively reserved for links. Users just generally expect to be able to clock on underlined text and have something happen.
That said, there is one main exception I can think of:
Price: <del>£12.34</del> <ins>£9.87</ins>!
Most, if not all browsers will render the new price there with an underline, and people will understand it to be an insertion.
I think the whole issue is better approached if we try to understand what the HTML spec writers are trying to accomplish.
On the early days, HTML was basically the only tool to create hypertext documents so it tried to provide all the necessary stuff. As the web grew up it soon become obvious that this all-in-one solution did not scale. Mixing content and presentation didn't provide full control on either. So two steps were taken:
A new language was created to take care of visuals
HTML itself was cleaned up to focus on content definition
The problem with underline is that it doesn't really have any meaning by itself. It will have a meaning if you assign it one in your app context (you can decide, for instance, that underline text will be used for book authors in your on-line library catalogue). So when the guys at W3C created HTML tags for several content types (titles, abbreviations, dates...) they simply didn't consider underlining: it was deliberately outside the language scope. There's no HTML tag for "underline" for the same reason that there's no tag for "red circle" or "uppercase Comic-Sans text".
Of course, in fact there is a <u> tag but underline is only a serving suggestion because the important part is the semantics—like printing <h1> with a large font.
It is not forbidden , but a better practice not to use it ,as underline tag is deprecated in HTML 4 http://www.w3.org/TR/REC-html40/present/graphics.html#edef-U so won't validate.
Underline an element is more a style quetion. So, it's better to give a class like "underline_style" and in the CSS give the correct rules.
The u element you can still use for underlining but because it's more complex than b, i,strong and em you will need CSS to style it in detail. Underline has style and color property which is not the case with other mentioned elements. You have more on this topic here.
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.
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.
Are both <h1><a ...> ... </a></h1> and <a ...><h1> ... </h1></a> valid HTML, or is only one correct? If they are both correct, do they differ in meaning?
Both versions are correct. The biggest difference between them is that in the case of <h1><a>..</a></h1> only the text in the title will be clickable.
If you put the <a> around the <h1> and the css display property is block (which it is by default) the entire block (the height of the <h1> and 100% of the width of the container the <h1> resides in) will be clickable.
Historically you could not put a block element inside of an inline element, but this is no longer the case with HTML5. I would think that the <h1><a>..</a></h1> approach is more conventional though.
In the case where you want to put an anchor on the header, a better approach than <a id="my-anchor"><h1>..</h1></a> would be to use either the id or the name attribute like this: <h1 id="my-anchor">..</h1> or <h1 name="my-anchor">..</h1>
In pre HTML 5 this one
<a><h1>..</h1></a>
will not validate. You can use it in HTML 5.
However, i would use this:
<h1><a>..</a></h1>
unless you need to add more than < h1 > inside the < a >
<a><h1></h1></a> is not W3C valid... Basically, you can't put block elements inside inline elements
<h1><a>..</a></h1> and <a><h1>..</h1></a> have always behaved almost the same, when style sheets do not affect the rendering. Almost, but not quite. If you navigate using the tab key or otherwise focus on a link, a “focus rectangle” appears around the link in most browsers. For <h1><a>..</a></h1>, this rectangle is around the link text only. For <a><h1>..</h1></a>, the rectangle extends across the available horizontal space, since the markup makes the a element a block element in rendering, occupying 100% width by default.
The following shows how a focused <a href=foo><h1>link</h1></a> is rendered by Chrome:
This implies that if you style elements e.g. by setting a background color for links, the effects differ in a similar manner.
Historically, <a><h1>..</h1></a> was declared invalid in HTML 2.0, and subsequent HTML specifications followed suit, but HTML5 changes this and declares it as valid. The formal definition has not affected browsers, only validators. However, it is remotely possible that some user agents (probably not normal browsers, but e.g. specialized HTML renderers, data extractors, converters, etc.) fail to handle <a><h1>..</h1></a> properly, since it has not been allowed in the specifications.
There is seldom a good reason to make a heading or text in a heading a link. (It’s mostly illogical and bad for usability.) But a similar question has often arised when making a heading (or text in a heading) a potential destination for a link, using e.g. <h2><a name=foo>...</a></h2> versus <a name=foo><h2>...</h2></a>. Similar considerations apply to this (both work, there may be a difference since the latter makes the a element a block, and before HTML5, only the former is formally allowed). But in addition, both ways are outdated, and using the id attribute directly on the heading element is now recommended: <h2 id=foo>...</h2>.
H1 elements are block level elements, and anchors are inline elements. You are allowed to have an inline element within a block level element but not the other way around. When you consider the box model and the HTML spec this makes sense.
So in conclusion the best way is:
<h1>Link</h1>
do you want to use a hyperlink <a href="…">/a:link, or do you want to add an anchor to your heading? if you want to add an anchor, you can simply assign an id <h1 id="heading">. you can then link it as page.htm#heading.
if you want to make the heading clickable (a link), use <h1><a></a></h1>/h1 > a – blocklevel elements first, and inline elements inside
Also, there is style hierarchy differences. If you have it as <h1>Heading here</h1>, The styles of the anchor will overrule the styles of the h1 element. Example:
a {color:red;font-size:30px;line-height:30px;}
WILL OVERRULE
h1 {color:blue;font-size:40px;line-height:40px;}
I think the <h1>text</h1> is the least problematic with weak or old browsers, but modern browsers and powerful search engines are supporting both it and <h1>text</h1>; So it's a good freedom and useful to use both to improve our web page.
«Hope that could be useful»
Both are correct. They depend on the sizing of the anchor tag which you want and how you want your website laid out.
You can do <h1>Home Page</h1>, in which case it would return: Home Page But with an Anchor.
Or you can do <h1>Home Page</h1> and it would return a H1 hyperlink instead of just heading an anchor to the H1, like so:
Home Page
However, mostly you cannot add links within H1 because it will just render it as an anchor onto the h1 rather than adding a hyperlink. However, I think I'm right in saying that you could see a difference in behaviour for this on different browsers.
But correct me if I am wrong. :)
What non-deprecated tags in html are commonly misused? How should they be used/what should they be replaced with? It would be awesome if we had some sort of guide to help people learning HTML.
An answer should include:
The html tag in prominent text
how it is commonly misused
how we can avoid misusing it
Please only one tag per question. If you already see your tag in a post, please don't double post and instead edit your other mis-usage comments into that answer.
<div> and <span> <!-- no, really -->
I've seen a fair number of pages that use <div> and <span> tags with attached CSS classes or even inline CSS to the complete exclusion of more semantically charged tags like <p>, <h2> and <em>, even when the semantically charged tags would be more appropriate. The only time the semantic tags are even thought of is when someone comes back and thinks about SEO.
<a>
The anchor tag should only be used to link to another location, NOT to trigger javascript. If I try to open a link in a new window and get some random javascript in my url bar instead, I'm not going to be happy. Inline javascript in the href attribute is even worse.
<a href='javascript:document.getElementById("foo").style.display="block"'>this is bad!</a>
Instead, use buttons as 'hooks' for javascript.
Also, avoid non-helpful text inside anchor tags. "Click Here!" and "Go to the page" are almost always poor choices. Use something like "visit Stackoverflow" if the link needs to stand on its own. Otherwise, weave it into the content itself. The Stackexchange Blog has great examples of this, as does this post. Using better link text can help SEO, accessibility with screen readers, general usability, AND maintainability.
See more on proper use of the anchor tag
<table>
People constantly use it for page layout rather than displaying data.
<label>
Not specifying the for attribute if the radio/checkbox is not within the tags.
<b>
<i>
It's not egregious, but use of <b> and <i> instead of <strong> and <em>, respectively.
There are edge cases where <b> and <i> are preferable, but in nearly all cases, <strong> and <em> should be used, as they convey the meaning (strong or emphasized) rather than the particular styling that is associated with how they are to be displayed.
HTML tags are supposed to signify the structure and semantic meaning of a document, not provide a means for styling it. The method by which <em> gets styled is up to the stylesheet. It could be defined as em { font-weight: strong; font-variant: normal;}, and that's ok, since the design can dictate that that is how emphasized text should be styled. To use a <i> tag suggests that the text is italicized, and becomes semantically meaningless if you apply the same rules as above (where <i>this is bold not italics<i>).
<font>
There are much more efficient ways of modifying text (ideally CSS).
Edit: I guess IS deprecated but I'll still leave it up for the sole reason that this tag should be killed entirely :D
And to hopefully compensate for my mistake I present my new answer:
<small>/<big>
Ohhh, here we go!
<center></center>
<h7></h7> <!-- People think these things go on forever ;) -->
Just Google it: http://www.maximumpc.com/article/features/the_7_most_misused_html_tags_and_how_fix_them
<meta> Plenty of site still try to put keywords into meta tags. As far as I can tell, having meta keywords actually hurts your Google ranking because not only does Google ignore your meta keywords, it hurts your code to content ratio. While seldom used, they are evel more seldom useful. meta description is one exception - Search engines will sometimes reference it for a quick description.
<img> doesn't rank that high, but think of every time you saw an image of content, with no alt text...
And again when it's used for layout instead of actually displaying an image to aid the text.
Most of the people don't seem aware that if you want to display an image that has no functionality, you should put it in your CSS.
<h*>
Multiple, and ridiculous, uses of <h1> on any given page. Maybe the HTML spec should shed some light on this topic.
Is there even a need for <h6> on a website? (Maybe if you were writing a report with multiple nested headings?)
<imagemap>
The <imagemap> is basically a linking tag where different parts of the image can be clicked to go to different links. It might look appealing but considering a first time user who goes to the website, he / she might not know where to click and which part of the image will take the person where. If the user’s internet bandwidth is less and the picture could not be loaded, it makes things all the more worse.
Hence this tag should be used only at places where the image is self-explanatory, maps for example.
It's a bit old data, but I guess it could be mostly accurate for today: http://code.google.com/webstats/2005-12/elements.html
According to this the most used presentational elements are br and table with its children.
<iframe>
Not Good:
<iframe src ="my_whole_site.html" width="100%" height="1500"></iframe>
Better:
<iframe src ="a_subsection_of_my_site.html" width="100%" height="300"></iframe>
Bare <li> tags are misused a lot because every browser will give you a workable list, without properly wrapping them in the ordered / unordered list tags, or finishing them properly.
heck, it works here.
see!