Grow your CSS skills. Land your dream job.

use of role=”navigation”

  • # February 6, 2013 at 12:00 am

    hello every one,

    please tell me how to use role=”navigation” and what is the benefit of it.

    thnx in advance

    # February 6, 2013 at 1:40 am

    hello siyajoshi,

    I think you you are not getting me mean to say **role** works like class and ID or only indicate your navigation section?

    # February 6, 2013 at 1:54 am

    That depends a lot on how you mean, honestly.

    It can be used in CSS/JS as a hook, which could be described as a it working like “class” or “ID”, but it’s role (pun not intended) is quite different.

    # February 6, 2013 at 2:34 am

    It is an XHTML attribute.

    Here’s what the W3C say about it.

    >The attribute describes the role(s) the current element plays in the context of the document. This can be used, for example, by applications and assistive technologies to determine the purpose of an element. This could allow a user to make informed decisions on which actions may be taken on an element and activate the selected action in a device independent way. It could also be used as a mechanism for annotating portions of a document in a domain specific way (e.g., a legal term taxonomy). Although the role attribute may be used to add semantics to an element, authors SHOULD use elements with inherent semantics rather than layering semantics on semantically neutral elements.

    http://www.w3.org/TR/xhtml-role/

    # February 6, 2013 at 9:12 am

    There’s a nice little ARIA landmark roles cheatsheet on A11YProject. Doesn’t give you a whole lot of info, but it’s handy in a pinch.

    # February 6, 2013 at 9:53 am

    @howlermiller

    That has nothing to do with ‘role’ as such.

    Aria roles have their own attribute ‘aria’.

    # February 6, 2013 at 10:37 am

    @Paulie_D The question was how to use role=”navigation” and *why*. I have found that article useful for clarifying how and why to use roles in the past, so I talked about it.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".