Use ARIA roles to designate behaviour

[naasking]

Like most CSS frameworks, you use classes to designate various controls which your JS enhances with dynamic behaviour. That works fine, but isn't great for accessibility.

I suggest an alternate, more semantic approach using ARIA roles to designate behaviour with the CSS and JS selecting on the role attribute, ie. [role~="tab"] to designate the clickable tabs, [role~="tabpanel"] for the panel with the content, use the aria-expanded attribute to track the state, etc.

Then you leave class attributes only for purely visual styling, like font, color, grids, whitespace, etc. The idea is basically something like this:

http://heydonworks.com/practical_aria_examples/

The roles attribute is supported all the way back to IE 8, which preserves your range of supported browsers. So this approach doesn't lose any behaviour or introduce extensibility problems, but you get proper accessibility for all of your core components for free.

[radogado]

Hi @naasking yes absolutely. It's been on my to-do list, because natUIve is all about accessibility and works on IE8, functional without JS, readable without CSS etc. Thanks!

[radogado]

Some aria attributes used for the new drop down nav.