Add landmarks (#564)

Use HTML semantic elements to set the landmarks of the page.

This is helpful for assistive technologies to determine the different regions of content. In our case it's useful for jumping between the different islands that we use to group the form controls.
This commit is contained in:
Guillermo Peralta Scura 2020-01-26 17:14:31 -03:00 committed by GitHub
parent fc350f2ecd
commit 67eca2bda1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 757 additions and 697 deletions

View file

@ -81,35 +81,38 @@
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<h1 class="visually-hidden">Excalidraw</h1>
<header>
<h1 class="visually-hidden">Excalidraw</h1>
</header>
<div id="root"></div>
<!-- https://github.com/tholman/github-corners -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 250 250"
style="position: absolute; top: 0; right: 0"
>
<a
href="https://github.com/excalidraw/excalidraw"
target="_blank"
aria-label="GitHub repository"
<aside>
<!-- https://github.com/tholman/github-corners -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 250 250"
style="position: absolute; top: 0; right: 0"
>
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
<path
class="octo-arm"
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
style="transform-origin: 130px 106px"
fill="#fff"
/>
<path
class="octo-body"
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
fill="#fff"
/>
</a>
</svg>
<a
href="https://github.com/excalidraw/excalidraw"
target="_blank"
aria-label="GitHub repository"
>
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
<path
class="octo-arm"
d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
style="transform-origin: 130px 106px"
fill="#fff"
/>
<path
class="octo-body"
d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
fill="#fff"
/>
</a>
</svg>
</aside>
</body>
</html>