HTML5/WAI-ARIA compliant navigation

Login to vote
The CSS List menu web part does a great many things for our Kentico sites but the markup is innaccessible with out changing source files and recompiling, a daunting task for sure and one we'd err on not attempting. In its place we'll use the even more versatile Repeater web part.

I won't go over how to set up the repeater to select the proper document and class names you want in the navigation but the WHERE condition is important

DocumentMenuItemHideInNavigation != 1

For your transformation, create one with the below code:

<%# DataItemIndex==0?"<ul role=\"menubar\">":"" %>
<li<%# IfEmpty(Eval("DocumentMenuClass"),""," class=\""+Eval("DocumentMenuClass")+"\"") %> role="menuitem">
<a href="<%# IfEmpty(Eval("DocumentMenuRedirectUrl"),GetDocumentUrl(),Eval("DocumentMenuRedirectUrl")) %>"<%# IfEmpty(Eval("DocumentMenuJavascript"),""," onclick=\""+Eval("DocumentMenuJavascript")+"\"") %>><%# IfEmpty(Eval("DocumentMenuCaption"),Eval("DocumentName"),Eval("DocumentMenuCaption"))%></a>
<%# DataItemIndex==DataRowView.DataView.Count-1?"</ul>":"" %>

In the HTML Envelope set the content before to:

<nav aria-labelledby="navigationlabel">
<h2 id="navigationlabel" class="assistive-text">Navigation Label</h2>

and the content after:


That was a very quick and dirty take on better markup for you front end developers but let me know your thoughts in the comments!

Posted by Josh Gipper on 1/10/2013 8:07:54 AM
Filed under: 508, aria, html5, markup, section
Blog post currently doesn't have any comments.