Testing accessible navgation strip

navigation.md

TEXT IN CAPS WILL BE LOCALISED

<nav role="navigation" aria-label="PAGENAVIGATION">
	<ul class="pagination-list">
		<li class="disabled">
			<a>
				<span class="icon-first" aria-hidden="true"></span>
			</a>
		</li>
		<li class="disabled">
			<a>
				<span class="icon-previous" aria-hidden="true"></span>
			</a>
		</li>
		<li class="active">
			<a aria-current="true" arial-label="PAGE1">
				1
			</a>
		</li>
		<li>
			<a title="2" href="#" class="pagenav" aria-label="GOTOPAGE2">
				2
			</a>
		</li>
		<li>
			<a title="3" href="#" class="pagenav" aria-label="GOTOPAGE3">
				3
			</a>
		</li>
		<li>
			<a title="4" href="#" class="pagenav" aria-label="GOTOPAGE4">
				4
			</a>
		</li>
		<li>
			<a href="#" class="pagenav" aria-label="GOTONEXT">
				<span class="icon-next" aria-hidden="true"></span>
			</a>
		</li>
		<li>
			<a href="#" class="pagenav" aria-label="GOTOEND">
				<span class="icon-last" aria-hidden="true"></span>
			</a>
		</li>
	</ul>
</nav>

I didnt find a good example with what to do with the disabled links

Remove role="pagination". Role uses controlled vocabulary from ARIA, and no such role is defined in the ARIA rec.

Change it to <nav> (or preferably <nav role="navigation"> if you want to support Internet Explorer, which doesn't implement implicit ARIA landmark roles for HTML5 elements).

confused. you say remove role=pagination and then you say preferably role=navigation

Use of aria-current="true" is great.

Note that in the WAI_ARIA 1.1 Candidate Rec, they've expanded this from a Boolean property to an enumerated type.

For the pagination links pattern, eventually aria-current="page" will be appropriate. It might be safe to start using this straight away. See https://www.w3.org/TR/wai-aria-1.1/#aria-current

Sorry, I conflated 2 things....

1. The main point: I meant that <nav role=pagination> is gibberish. Replace it with <nav role=navigation>.

2. An aside: note that validators (and purists) will fire a warning telling you that role="navigation" is redundant on <nav> elements. Ignore them. It's still preferable to keep the belt-and-braces <nav role="navigation">, because Internet Explorer needs it. If role="navigation" is omitted, IE will not recognize it as an ARIA Landmark Region. (See https://www.w3.org/TR/html51/dom.html#do-not-set - the relevant thing is that IE does not conform to HTML5.1 implicit ARIA semantics bit. The good news is that MSEdge does.)

ok understand you now - and yes i have to support ie

I wasn't sure about using aria-disabled on links, but it turns out that several screen readers support it. I confirmed that the demos at http://maxdesign.com.au/jobs/sample-accessibility/05-forms/attribute-disabled.html also work with ChromeVox (which says "link, disabled").

Caveats: your version of disabled links omit the href and aria-label attributes:

		<li class="disabled">
			<a aria-disabled="true">
				<span class="icon-first" aria-hidden="true"></span>
			</a>
		</li>

When an <a> lacks a href, it does not form a hyperlink. It will not be included in the keyboard tabbing sequence, and screen readers do not announce it as a link. (This is correct per HTML5.1) Omitting the aria-label here also means it doesn't have a name.

There are two ways you could improve your disabled pager links:

1. Simplify it. Remove the aria-disabled="true" attribute. The first/previous links follow the "Example 1" pattern at https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element. This approach means it is completely absent for a screen reader.

		<li class="disabled">
			<a>
				<span class="icon-first" aria-hidden="true"></span>
			</a>
		</li>

2. Double down and get more complicated. If you WANT to have a disabled link announced as such, it will need a label and a href, e.g.:

		<li class="disabled">
			<a href="?page=1" aria-disabled="true" aria-label="GOTOSTART">
				<span class="icon-first" aria-hidden="true"></span>
			</a>
		</li>

This version more closely resembles the demo at http://maxdesign.com.au/jobs/sample-accessibility/05-forms/attribute-disabled.html. Note that aria-disabled="true" only affects assistive tech. A sighted mouse user could still click the link, now that it has a href.

I think I get where you were going with role="pagination" - are you looking for a way to tel the user what the purpose of this set of link is? Your aria-label="PAGENAVIGATION" will achieve that.

yes that was my silly mistake with role=pagination

I didnt want the disabled links to be announced as that just didnt make sense to me.

I think I have now updated the gist with your correcctions

Thinking about the disabled links, I'd still include an aria-label on the link, even though it doesn't have a href and isn't operable.

<li class="disabled">
			<a aria-label="GOTOSTART">
				<span class="icon-first" aria-hidden="true"></span>
			</a>
		</li>

The reason for this is that even though this isn't a operable link, it is still content which is being presented to sighted users, so needs a text alternative.

There are two ways a screen reader user can encounter a link:

1. Focus mode - cycling though elements of a given type (links, in this case) by pressing TAB (or possibly other controls, varies between screen readers). Only operable links (with href) will be found this way; <a> elements without `href' will not be encountered this way.

2. Browse mode - going though any content, one block|line|word at a time. <a> elements with text content (inc. aria-label or nested <img alt>) will be read out. Operable <a href>links will be announced as links. Links without href will have their text read out, but not announced as links, they're just regular sentence text in this case.

So if you have a visible icon, you need a text fallback. The idea is that if a screen reader user finds "go to page 2" and is confused about not hearing about page one, they can still check adjacent non-link text to orient themselves and discover that the pager includes a disabled page one link.