I use RDFa to add linked data to my webpage. I also occasionally use the rel attribute in various tags for non-semantic purposes, such as triggering a javascript tooltip. I am wondering the there is something I can do to distinguish the uses.
For instance, I have RDFa around my social network icons like so:
<a rel="foaf:account" alt="twitter" href="https://twitter.com/cboettig"><i class="icon-twitter" rel="tooltip" title="follow me on twitter (reading, discussing)"></i></a>
<a rel="foaf:account" alt="github" href="https://github.com/cboettig"><i class="icon-github" rel="tooltip" title="follow me on Github (code, research)"></i></a>
Where rel in the anchor tag is used semantically but rel the icon tags is used by twitter-bootstrap javascript to add a tooltip. Magically, in this example, tools such as http://any23.org intelligenty ignore the rel in the icon. However, when encountering a rel="tooltip" in a span element (used to add a tooltip to a button):
<span rel="tooltip" title="switch to dark theme">
<a onclick="switch_style('dark');" class="btn btn-mini"></a>
</span>
This creates an mostly meaningless ntriple such as:
<http://any23.org/tmp/> <http://any23.org/tmp/tooltip> <http://any23.org/tmp/> .
Of course it's not a huge problem, but I'm not sure why this happens with the span elements and not the other examples, or how to avoid it.
It's always a good idea to avoid non-semantic uses of attributes, especially rel.
One way to avoid this is to use a class (perhaps class="tooltip") instead of a rel.
Related
I need to use a font awesome icon inside an anchor element. The anchor element does not contain anything rather than the icon.
Ex:
<a href="#" aria-label="List">
<i className="fa fa-list-ul"
title="List View"
aria-hidden="true"
title="List View">
</i>
</a>
What I want to know is is it wrong to put aria-hidden="true" to the icon since there is no other text or content inside the anchor tag(In this case tag becomes informational so I think it is ok to use aria-hidden="false" here).
Is there any rules related to this so we all can follow ?
You have two things to consider:
people not using assistive technologies (=not relying on ARIA)
What alternative text will have people not using assistive technologies? A title attribute should be added to the a[href] tag.
This will help for instance, people with cognitive deficience, people with low vision, people with bad computer knowledge to understand the meaning of the icon. If you can show the tooltip on keyboard focus, it would also be nice.
people using assistive technologies
The Fourth rule of ARIA says:
Do not use role="presentation" or aria-hidden="true" on a visible focusable element
Perfect here, only the a[href] is focusable. This does not prevent you from adding the aria-hidden attribute on the i element as long as you keep an aria-label for valid alternative for assistive technologies.
How can I add accessibility to this
Text:
Buttons and Images and anchors:
<div class="btn-group" role="group">
<button class="btn btn-default">
<img class="profile-img">
<span id="user-name">john</span>
</button>
<button class="btn btn-default">
Log out
<i class="fa fa-sign-out fa-lg"></i>
</button>
</div>
<div>
Change recipient
</div>
Too little information provided. Context needed. That being said:
Add an alt attribute to the <img>,
make sure the link has a valid href,
don't rely on FontAwesome icons to convey critical information,
maybe dump the role attribute as it may not be needed (context necessary to know if needed).
Only you are suited to properly add semantics to your code and content, so we really can't do this for you. But, here are some important things to remember/do/follow:
Your HTML is not event valid, so start by correcting that.
Don't ever use an HTML element because of the way it makes the
visible page look (i.e. using a heading like <h4> to make text
small and bold). CSS should be used for all layout and presentation.
Use the most appropriate HTML elements to convey the semantics of the content you have. For
example, go ahead and use the <table> element if you actually are
trying to display tabular data and use <ul> and <li> to make menus.
Despite the (many) myths, the HTML5 sectioning elements (section,
article, nav, aside) are not recognized by most screen readers. Their use actually makes creating a valid document outline much more difficult.
The proper use of heading (<h1>...<h6>) elements is the best
thing you can do to convey a proper document structure.
Use WAI-ARIA landmark roles where applicable as that has been a
standard for many years and all the major screen readers understand
it.
For images, provide the alt attribute to the <img> tag, which is a description of the image. For example, <img class="profile-img" alt="profile picture">.
For semantics, use <em> instead of <i> and <strong> instead of <b>.
Also, look into ARIA (Accessible Rich Internet Applications). A useful ARIA attribute is the role attribute. It provides extra content about the element's purpose and functionality.
<a href='' itemscope itemtype='http://schema.org/Brand' itemprop='brand'><i class="logo" itemprop='logo'></i></a>
The above class='logo' applies a font to the icon element. Can we apply the 'glyph' defined in the class (e.g., font-family: 'AnyFont'; content: '/e600') as a Microdata Markup DataType "Brand > Logo" to render the Logo in a rich-snippet the same as a image would render in the rich-snippet?
This doesn't seem likely as an image has a URL based src="..." property and a font character does not, none the less I've been researching this I've found no documentation or discussion on this and need to know if the community is aware of a way to make this work if it does't already work. Or do we have to forfeit the many well-known benefits of using an icon-font to display a logo in rich-snippets?
As validation to the common application of microdata to an image and not an font-character we see that this heavily used microdata generator doesn't give us an option to apply microdata to an element with a font applied to it. And based on the 'Brand > Logo' documentation, the only options are ImageObject and URL (which many very well may believe this answers the question (there's bound to be a way to do this without having to go back 4 years and use an image instead of a font)).
You could use a link element (which may be used in the body in HTML5+Microdata) to provide the URL of the logo:
<a itemprop="brand" href="" itemscope itemtype="http://schema.org/Brand">
<span class="logo"></span>
<link itemprop="logo" href="logo.png" />
</a>
(I used span instead of i. And for the record, I don’t agree that it’s a good idea to include a site’s logo via CSS instead of HTML.)
Is there any reason to use <a href> instead of <button> to display a button using foundation ?
It seems to work properly using <button>, but docs mention <a href> (http://foundation.zurb.com/docs/components/buttons.html). What are the consequence if I use <button> instead of <a href> ?
CSS Tricks answers this well here: http://css-tricks.com/use-button-element/
<button> is a form element and as such can't go to a link, but it can fire a form's action, for example.
My guess would be progressive enhancement. If (for whatever reason) Foundation fails to load on a user's device, an anchor tag with a link will still function as a link, while a button will not. This will allow the user to still use the website, which is an advantage :)
Is the "content" attribute valid for span tag? If so is it a good practice?
I'll be applying microdata (schema.org) on my site pages.
I want to add microdata on some elements of my page.
This is my current code:
<span itemscope itemtype="http://schema.org/Product">
<a itemprop="url" class="list-items" href="/product/286/cryptomate64-usb-cryptographic-token/" title="CryptoMate64 USB Cryptographic Token">
<span itemprop="name">CryptoMate64 USB Cryptographic Token</span>
<span class="hidden">
<span itemprop="productid"/>286</span>
<span itemprop="model" content="ACOS5T-B2-SCZ" />ACOS5T-B2-SCZ</span>
</span>
</a>
</span>
As you can see, I have a div with class "hidden" there because the model and id shouldn't be displayed on the page.
I want to minify the code by doing this:
<span itemscope itemtype="http://schema.org/Product">
<a itemprop="url" class="list-items" href="/product/286/cryptomate64-usb-cryptographic-token/" title="CryptoMate64 USB Cryptographic Token">
<span itemprop="name">CryptoMate64 USB Cryptographic Token</span>
<span itemprop="productid" content="286" /> </span>
<span itemprop="model" content="ACOS5T-B2-SCZ" /> </span>
</a>
</span>
I can use meta instead of span so that the content is not visible. But I think it won't be a good practice since I'll be having a lot of items. What can you suggest? Thanks.
I tested your updated code with Google's richsnippets test tool and it works fine with the content attribute on the span.
However, this isn't good practice since there is no content inside the last 2 spans anyway. It is perfectly appropriate in this case to use metas.
<meta itemprop="productid" content="286">
<meta itemprop="model" content="ACOS5T-B2-SCZ">
No, it’s not valid.
Neither HTML5 nor Microdata define a content attribute for span. (RDFa does, but you are not using it.)
If you want to markup content with Microdata that should not be visible, either
use usual HTML and hide it with CSS, or
use link elements (for URIs) and meta elements (for anything else); both elements are allowed in the body, and typically hidden by default browser stylesheets.
I’d prefer the latter variant (meta/link), but it’s not possible everytime (e.g., if you need to add new items with itemscope).