This post outlines the known issues we will encounter when using HTML5 with MVC3 and issues around ARIA accessibility.
HTML5
Reset style sheet
We need to use a CSS reset style sheet for HTML5 so CSS can be used across multiple browsers in a consistent way with the new HTML5 elements. This is the best reset style sheet I found on the web: http://html5reset.org.
New elements and attributes
There are numerous new HTML5 elements like <section>, <nav>, <article>, <footer> etc. In order for older browsers to recognise and style them correctly we need to use HTML5Shiv – a JavaScript file which can be found here: http://html5shiv.googlecode.com/svn/trunk/html5.js.
One limitation I found was setting a percentage width on the <nav> element did not seem to work. You can however set a fixed pixel width.
HTML5 introduces new attributes like placeholder=““ and required=“required”. These attributes aren’t recognised in older browsers and are safely ignore. In newer browsers they kick in and provide nice UI functionality.
ARIA attributes
Here is a great list of the ARIA roles, properties and states with examples: http://www.oaa-accessibility.org/examples/.
ARIA attributes only need to be applied to elements that aren’t semantically descriptive. So you wouldn’t apply a role=“navigation” to a <nav> element as the <nav> element is semantically correct.
Some examples online use CSS3 selectors like this:
ul[aria-hidden=“true”]
{
display: none;
}
In order to use these selectors in older versions of IE you will need this JavaScript file: http://selectivizr.com/.
Forms
To make your forms accessible you can add ARIA attributes to your controls for example:
<input id=“name” type=“email” aria-required=“true” required=“required” />
Now screen readers will pick up the attribute and tell the user this input is required.
Validation
As you can see in the example above type=“email” and required=“required” attributes tell modern browsers to handle the validation of this control automatically. Firefox for example displays validation text should you fail to enter in a valid value.
The problem with browser validation is there is no way to style the generated validation text and pop-ups, and it’s not supported in older browsers. Until all browsers support this style of validation we will need to use jQuery validation with MVC3.
To turn off browser validation we need to set formvalidate=“formvalidate” on the submit button.
More info: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4.
AJAX
ARIA provides element attributes aria-live, aria-atomic, aria-relevant etc. (https://developer.mozilla.org/en/ARIA/Live_Regions) to tell screen readers of a live update on the page.
For example this element:
<div id=“notice” aria-relevant=“additions” aria-atomic=“true” aria-live=“polite” role=“log”></div>
Now we make a successful AJAX request and the call back JavaScript function updates this element to:
<div id=“notice” aria-relevant=“additions” aria-atomic=“true” aria-live=“polite” role=“log”>
You have successfully removed a product from your basket
</div>
This works find in Chrome but does have a problem in Firefox as the screen reader (NVDA) doesn’t announce it. So a work around is to change the role=“log” to role=“alert” and then the message is read.
There needs to be more testing done in using ARIA live regions in multiple browsers.
jQuery UI
As Microsoft now includes jQuery as part of its MVC3 solution it is natural to use jQuery UI to provide the user with nice UI controls.
Interactions/Widgets/Utilities/Effects
jQuery UI provides a few out of the box components which can be seen here: http://jqueryui.com/demos/. The problem with these components is that only a few e.g. Dialog have ARIA accessibility built into them.
A solution I think we should go for is the modified jQuery UI components. These have new and modified components that provide ARIA accessibility and avoid writing loads of custom code. You can see them here: http://hanshillen.github.com/jqtest/.
Currently these modified libraries use the latest jQuery library (1.7.2) but we are fixed to this version until it is updated on this site. These modifications will be making their way into the general release of jQuery UI in the future but until then we are stuck with these UI libraries.
The other annoyance is that the UI libraries are split into multiple JavaScript files and not nicely minified as the general release UI library is. We can minify them on deployment so not an issue. This is an example of the script includes required to work with the modified UI libraries:
<script type=“text/javascript” src=“jquery-ui/jquery-1.7.2.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.core.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.widget.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.tabs.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.position.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.button.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.menu.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.menubar.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.mouse.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.slider.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.progressbar.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.draggable.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.resizable.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.dialog.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.checkbox.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.accordion.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.tooltip.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.autocomplete.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.panel.js”></script>
<script type=“text/javascript” src=“jquery-ui/ui/jquery.ui.popup.js”></script>
<script type=“text/javascript” src=“jquery-ui/external/globalize.js”></script>
<script type=“text/javascript” src=“jquery-ui/external/globalize.culture.de-DE.js”></script>
<script type=“text/javascript” src=“jquery-ui/external/globalize.culture.ja-JP.js”></script>
<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/localization.js”></script>
<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/date.js”></script>
<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/picker.js”></script>
<script type=“text/javascript” src=“jquery-ui/datepicker-rewrite/jquery.tmpl.js”></script>
Menubar
One of the great components provided in the modified UI libraries in the menubar. This allows keyboard navigation on menu items and reduces a lot of custom code. There is however a problem I encountered with it.
You can’t have a root level menu item without it having a sub-menu. There is an error thrown in the JavaScript libraries. I’m sure there is a code work around but this needs to be mentioned.
Error on Home link example mark-up:
<ul id=“mainmenu” aria-label=“Main Menu”>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Products</a>
<ul aria-label=“Products”>
<li><a href=“#”>Product 1</a></li>
<li><a href=“#”>Product 2</a></li>
</ul>
</li>
</ul>
This works:
<ul id=“mainmenu” aria-label=“Main Menu”>
<li><a href=“#”>Home</a>
<ul aria-label=“Home”>
<li><a href=“#”>Home</a></li>
</ul>
</li>
<li><a href=“#”>Products</a>
<ul aria-label=“Products”>
<li><a href=“#”>Product 1</a></li>
<li><a href=“#”>Product 2</a></li>
</ul>
</li>
</ul>
Keyboard navigation
The main ARIA accessibility issues I found difficult and cumbersome to do was around keyboard navigation on elements like menus and tables. The modified jQuery UI provides keyboard navigation out the box and will save a load of time by not writing custom code. It’s also community driven and tested far more than in-house custom code could be.
The only custom code for keyboard navigation we might need to write is for table navigation. At the moment there is no jQuery library that provides this functionality. Online support is low as well. We could hack an example script http://oaa-accessibility.org/example/18/ to get it to work but this is again custom code.
Styling
No known issues for styling. We can use jQuery’s ThemeRoller http://jqueryui.com/themeroller/ to style any of the UI controls.
No comments:
Post a Comment