Skip to content

Commit

Permalink
[a11y] Make anchor tag tutorial nav accessible (sveltejs#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 and taylorzane committed Dec 17, 2020
1 parent 930efae commit 0c4a81e
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 0c4a81e

Please sign in to comment.