Posted by minneapolisdan on July 21, 2013 at 5:53pm
Do we still need to put site navigation markup in lists?
Have you read this article about site navigation and HTML markup? http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/
The discussion centers around this - everyone writes the code for site navigation in HTML Lists. But does it make sense and does it help with accessibility or hinder? The example code follows:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>Can you weight in on whether this is still needed?
The HTML markup to be used in Drupal 8 templates is currently being discussed, https://drupal.org/node/1980004, and some back and forth on whether to use HTML Lists for navigation, pagination, breadcrumbs, and other elements. I thought it would be helpful to have some more accessibility experts weigh in on this topic.
Comments
Let's be consistent, whatever we decide
Wow, there are hundreds of comments on that article you shared.
Are there any screenreader users out there in the Drupal community who can weigh in? Whatever we decide, we should be consistent throughout the D8 UI, across the front-end themes and the admin theme.
Thanks, @minneapolisdan for prompting this discussion!
www.pixotech.com
Navigation Lists
Traditionally, Lists have been used to block Navigation Links, and has worked well. With the transition to HTML5 and ARIA code, we now have many more options available to us. As screen readers become use to the new web page mark up, the List element within the "nav" will be redundant. However, Site Navigation containing groups of Links, like primary and secondary, should still be enclosed in the "ul" element, to distinguish the two groups. It is important to note that at the present, most screen reader users are using older user agents and browsers, and do not have the benefit of ARIA mark up and HTML5 tags. So, using "nav role=navigation" is a good best practice for now. I would also add, that the aria-labelledby or aria-label attribute must be considered if there is more than one Navigation region on the page. To accommodate the older user agents, it is wise to continue to include the "ul" element.
Navigation Markup
http://www.mit.edu/~rjc/aria/navigation.html
See the page at the above url. Essentially, as a screen reader user, I see little difference between using pure list markup, or a combination of div and span with appropriate roles. For simple navigation (i.e. no nesting) they are essentially equivalent with respect to verbosity and comprehension via screen reader.
For navigation with three or more levels of nesting, I recommend using headings to enable the user to easily traverse the structure. Screen readers provide rutamentary list navigation commands, but I find they don't always work well, and they do not associate a given list with its label in the structure.
I show three different ways of coding a simple navigation structure at the above URL, and provide a link to my demo which shows how one might code deeply nested navigation using collapsible lists and headings.
Please let me know if this is at all comprehensible from the perspective of a non screen reader user.
FYI: the audio captcha here does not work!!!
Lists probably the best way to go
It's really important to note that Chris wrote a follow-up article based on the 200 or so comments:
http://css-tricks.com/wrapup-of-navigation-in-lists/
After all the feedback on the original article, his general conclusion was that lists wrapped in < nav role=navigation > are probably the best way to go for accessibility.
I am sure there are plenty of potential ways to mark this up. However, using lists for nav is a long time convention, and I don't see anything in this article that makes a convincing case to make such a sharp break from recommended best practices.
What is the effect of the
What is the effect of the role=navigation on a nav element? It seems to me that nav already includes the meaning of role=navigation.
role="navigation"
Some browser / screen reader combinations do not properly indicate html5 nav elements.
Using
<nav role="navigation">is redundant, but will generally work with all browser / screen reader combinations.Definitely use lists
We definitely want to use lists for navigation that has (or could potentially have) more than two or three items.
As @mdrummond mentioned, Chris wrote a follow-up article that lists the pros & cons, and the consensus is to use lists in most situations.
There are quite a few comments in the original article that explain the benefits of using lists. Here are two good examples:
@dcmouyard on Twitter
Agreed - lists yes
I would fall on the side of using lists along with many of the folks in the posted articles, for the reasons they have stated better than I can.
Definately Use Lists, but do more if possible, especially for de
My point was not that we should drop lists, but that lists will only take you so far; we can do more.
-- Rich