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>

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.