[a11y] Make anchor tag tutorial nav accessible (#5055)

Since the anchor tags only contain svg icons it makes these navigational elements not accessible by screen readers.

> aria-label. Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.

https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose
pull/7738/head
Sam Saccone 5 years ago committed by GitHub
parent 3f434acd62
commit 62f15c17ac

@ -64,7 +64,7 @@
</style>
<nav>
<a rel="prefetch" class="no-underline" href="tutorial/{(selected.prev || selected).slug}" class:disabled={!selected.prev}>
<a rel="prefetch" aria-label="Previous tutorial step" class="no-underline" href="tutorial/{(selected.prev || selected).slug}" class:disabled={!selected.prev}>
<Icon name="arrow-left" />
</a>
@ -88,7 +88,7 @@
</select>
</div>
<a rel="prefetch" class="no-underline" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}>
<a rel="prefetch" aria-label="Next tutorial step" class="no-underline" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}>
<Icon name="arrow-right" />
</a>
</nav>

Loading…
Cancel
Save