[Commotion-admin] [luci-commotion] Accessibility enhancements (#250)

[oti-tech]

<a href="https://github.com/glamrock"><img src="https://avatars.githubusercontent.com/u/452041?" align="left" width="96" height="96" hspace="10"></img></a> **Issue by [glamrock](https://github.com/glamrock)**
_Friday Nov 01, 2013 at 14:37 GMT_
_Originally opened as https://github.com/opentechinstitute/luci-theme-commotion/issues/1_

----

We should make accessibility enhancements to make the theme more usable for the visually impaired and people who use accessibility devices. 

We could make this happen with a combination of stylesheets and ARIA markup.  The most commonly used screen readers offer support for ARIA and *some* automatically select a speech/aural stylesheet if one is offered.  (`aural` was offered for CSS2, `speech` is the variety used in CSS3. Listing it as either media type will still work, however).

Aria example: if H1 is styled to look like a button in css, the code could read `<h1 role=button>Events</h1>`. This would appear normally to average users, but would be `<button>Events</button>` in the [accessibility tree](http://www.w3.org/WAI/PF/aria-implementation/#def_accessibility_tree).

References:
* http://www.w3.org/TR/aria-in-html/
* http://www.w3.org/WAI/PF/aria-implementation
* http://blog.paciellogroup.com/2012/06/html5-accessibility-chops-using-aria-notes/

<!---
@huboard:{"order":7.5}
-->



---
Reply to this email directly or view it on GitHub:
https://github.com/opentechinstitute/luci-commotion/issues/250
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.chambana.net/pipermail/commotion-admin/attachments/20140618/d6ca2a32/attachment.html>