andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update buttons and nav semantics

Browse Source 
the back to top button and menu button each lack appropriate accessible names.

The primary page navigation is presently contained within an `aside` rather than a `nav` element.

This commit adds accessible names to the previously mentioned buttons, so they will be appropriately conveyed to screen readers.  It also changes the navigation from an `aside` to `nav` and provides the navigation with an `aria-label=“table of contents”` as all the links are in page links to the different sections of this document.
This commit is contained in:
Scott O'Hara
2018-02-27 21:01:17 -05:00
parent c6543e1db8
commit 5177c4ee2b
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -8,9 +8,9 @@
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<button class="back-to-top-button">↑</button>
<aside class="sidebar">
<button class="hamburger hamburger--spin sidebar__menu" type="button">
<button class="back-to-top-button" aria-label="back to top">↑</button>
<nav class="sidebar" aria-label="Table of Contents">
<button class="hamburger hamburger--spin sidebar__menu" type="button" aria-label="Menu">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
@ -33,7 +33,7 @@
<a class="sidebar__link" href="#triangle">Triangle</a>
<a class="sidebar__link" href="#truncate-text">Truncate text</a>
</div>
</aside>
</nav>
<div class="content-wrapper">
<header class="header">
<div class="container">
@ -47,7 +47,7 @@
<a class="github-button header__github-button" href="https://github.com/atomiks/30-seconds-of-css" data-icon="octicon-star" data-size="large" aria-label="Star atomiks/30-seconds-of-css on GitHub">Star</a>
</div>
</header>
<main class="main">
<main class="main" id="main">
<div class="container">
<div class="snippet">
<h3 id="clearfix">Clearfix</h3>
@ -1039,4 +1039,4 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
</div>
<footer class="footer"></footer>
</body>
</html>
</html>