Skip to content

Commit

Permalink
[a11y] Make anchor tag tutorial nav accessible (#5055)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
samccone authored Jun 23, 2020
1 parent e139bd4 commit 2d5f1a6
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions site/src/routes/tutorial/[slug]/_TableOfContents.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

0 comments on commit 2d5f1a6

Please sign in to comment.