[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/5058/head
Sam Saccone 4 years ago committed by GitHub
parent e139bd4922
commit 2d5f1a6aa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -64,7 +64,7 @@
</style> </style>
<nav> <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" /> <Icon name="arrow-left" />
</a> </a>
@ -88,7 +88,7 @@
</select> </select>
</div> </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" /> <Icon name="arrow-right" />
</a> </a>
</nav> </nav>

Loading…
Cancel
Save