We've been taking a look at how we use navigation (nav) tags in the HTML of our pages and seen some room for improvement.
Nav tags are used to identify blocks of links that share a common navigational theme. For example links to references used in an article.
It turns out some of our nav tags were redundant. They either added no extra meaning to the links they wrapped or were unnecessary as user agents got the same information from the links' context instead.
Among those that were needed, the navigational theme that grouped their contents was sometimes unclear.
The above came out of an accessibility review by Léonie Watson. In it she explained that having too many nav tags devalued their use for screen reader users. It was suggested that when multiple ones were necessary we could help those users find the links they needed by identifying them properly.
Reviewing the existing nav tags
Most of our pages contained at least 2 nav tags with some having up to 6.
In an effort to reduce the overall amount we removed nav tags from:
- Single links such as skiplinks or those that had enough meaning on their own such as links to the previous or next page
- groups of links already given meaning by their context
An example of the later are groups of links in the footer block. These will be assumed to go to pages about the site just by being in that block.
Improving identification
Having just a single nav tag outside of the main content block of your document implies it is the navigation of your site. Similarly, an extra one inside your main content block will be assumed to represent the navigation within that block. Once you get more than one nav tag sharing the same context it becomes less clear what each is for.
Luckily WAI-ARIA can be used to label navigation blocks, in the same way that labels do for form elements. There are two ways to do this.
You can use the aria-labelledby attribute to use another element to name your navigation block:
<h2 id="references">References</h2> <nav aria-labelledby="references">...</nav>
You can also name it explicitly using aria-label:
<nav aria-label="References">...</nav>
Léonie Watson has blogged about using the aria-labelledby attribute to do this: http://tink.co.uk/2012/06/enhancing-aria-landmarks-with-aria-labelledby/
Using the above techniques we were able to name groups of links such as those related to the page subject and those that link to the parts of our guides. (For examples of both, see the 'Money and tax' section and the numbered items at the top of the page on https://www.gov.uk/tax-codes.)
We'll be doing more work on improving our use of HTML in the near future and will be sure to report on it as we go. Keep an eye out for more updates.
2 comments
Comment by Stephanie posted on
Is the ARIA labelling better than simply expanding the nav tags to include the headings (like the Inside Government heading)?
Comment by Mat Harden posted on
Thanks Tom, that's good to know and interesting to see the working example.