<p><a href="https://github.com/glamrock"><img src="https://avatars.githubusercontent.com/u/452041?" align="left" width="96" height="96" hspace="10" style="max-width:100%;"></a> <strong>Issue by <a href="https://github.com/glamrock">glamrock</a></strong><br><em>Friday Nov 01, 2013 at 14:37 GMT</em><br><em>Originally opened as <a href="https://github.com/opentechinstitute/luci-theme-commotion/issues/1" class="issue-link" title="Accessibility enhancements">opentechinstitute/luci-theme-commotion#1</a></em></p>

<hr><p>We should make accessibility enhancements to make the theme more usable for the visually impaired and people who use accessibility devices. </p>

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

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

<p>References:</p>

<ul class="task-list">
<li><a href="http://www.w3.org/TR/aria-in-html/">http://www.w3.org/TR/aria-in-html/</a></li>
<li><a href="http://www.w3.org/WAI/PF/aria-implementation">http://www.w3.org/WAI/PF/aria-implementation</a></li>
<li><a href="http://blog.paciellogroup.com/2012/06/html5-accessibility-chops-using-aria-notes/">http://blog.paciellogroup.com/2012/06/html5-accessibility-chops-using-aria-notes/</a></li>
</ul>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br>Reply to this email directly or <a href="https://github.com/opentechinstitute/luci-commotion/issues/250">view it on GitHub</a>.<img alt="" height="1" src="https://github.com/notifications/beacon/3074564__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxODczMjYzOCwiZGF0YSI6eyJpZCI6MzQ5ODA2Mzd9fQ==--c2458dc85661b5ec33c7e163cae29ade93b3882e.gif" width="1" /></p>