Accessibility
Checklist
- Every page should have a meaningful title, like "BRAND, PAGE_NAME" e.g. "chessmail, Lobby"
- Use Landmarks <header>, <nav>, <main>, <footer>...
- Pages should have a correct heading structure
- Every page should have an <H1>, which in worst case could be visually hidden
- Make all interactive page elements accessible via "tab"
What is the most used screen-reader
Test your web pages with the most used screen reader, it is Apples "Voice Over". "Voice Over" is build into every Mac, iPad and iPhone.
Testing your web pages with "Voice Over", will open your eyes.
Accessible SVG
ARIA-Attributes
Does a logo needs an alt-text?
How to label links
"skip to content" link
Do screen readers read the page title?
"Visually hidden" is the new "screenreader only"
The css code for .visually-hidden
.visually-hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
See also: https://webaim.org/techniques/css/invisiblecontent/
aria-hidden
Adding aria-hidden="true"
to an element removes that element and all of its children from the accessibility tree. This
can improve the experience for assistive technology users by hiding:
- Purely decorative content, such as icons or images
- Duplicated content, such as repeated text
- Offscreen or collapsed content, such as menus
Aria labelling
<div role="dialog" aria-labelledby="dialogheader">
<h2 id="dialogheader">Choose a File</h2>
... Dialog contents
<button aria-label="close" aria-describedby="descriptionClose"
onclick="myDialog.close()">X
</button>
...
<div id="descriptionClose">
Beim Schließen diese Fensters werden eigegebenen Daten verworfen.
Sie werden zur Hauptseite zurückgeleitet.
</div>
</div>
aria-labelledby
: id of the labelaria-describedby
: id of the description (optional)aria-label
: The label, should be in the websites language
Newline in alt attribute or title
HTML
<img src="image.jpg" alt="Line 1
Line 2"/>
CSS
img {
white-space: pre
}
Role Attribute
Definition of roles
https://www.w3.org/TR/2014/REC-wai-aria-20140320/roles#role_definitions