Accessibility
Zachary Winnie, Senior Interface Designer
Hiding Content Visually
The following CSS class hides content from the UI but allows screen readers to access/speak text.
.sr-only {
border: 0;
clip: rect(0,0,0,0);
clip-path: inset(1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
visibility: hidden;
white-space: nowrap;
width: 1px;
}
Skip To Content & Navigation
One of the easiest but highest impact pieces of code is adding skip links right after your <body> tag.
<a href="#main" class="sr-only">Skip to content</a>
<a href="#nav" class="sr-only">Skip to navigation</a>
Color Contrast
For Mercury applications, strive for WCAG level AA or better color contrast ratio. That means 4.5:1 for normal text and 3:1 for large text.
Tools for checking color contrast:
- https://webaim.org/resources/contrastchecker/
- http://leaverou.github.io/contrast-ratio/
- https://contrastchecker.com/
- http://accessible-colors.com/
UX States
Don’t rely only on color for showing the state of your UI. For best results:
- Use an icon (check for success, warning triangle for warning, stop sign for error, etc.)
- Use clear and descriptive text
- Use color, background color, and border color
Example:
<div class="alert alert--error-color" role="alert">
<span class="icon icon-error" aria-hidden="true"></span> An error has occurred in the application.
</div>
Icon Fonts
Some screen readers and voice over programs will try to speak icon fonts, but this can have awkward results. Your best bet is to hide icons from these programs via aria-hidden="true", then let it speak a piece of visually hidden text.
How to use an icon as text:
<p>I <span class="icon icon-heart" aria-hidden="true"></span><span class="sr-only">love</span> web development</p>.
How to use an icon font inside a button:
<button type="button" class="button">
<span class="icon icon-heart" aria-hidden="true"></span> Like
</button>
Or, if you don’t want to show the text:
<button type="button" class="button">
<span class="icon icon-heart" aria-hidden="true"></span><span class="sr-only">Like</span>
</button>
Focus Styling
This one is simple. Don’t remove outline focus styling on elements that can be tabbed to.
Don’t just blindly do this:
:focus { outline: none; /* or outline: 0 */ }
If you need to remove outline styling, add in alternate styling:
- Change the
background-color - Change the
border-color - Change the
color - Add
text-decoration: underline
More information about the outline styling and accessibility:
- http://www.outlinenone.com/
- WCAG Accessibility Guidelines for Keyboard Focus
- Detect user input methods with What Input
- Remove outline only on mousedown with outline.js
Optimize For Keyboard Accessibility
Tabindex
To add an element into the tab order of a page, set the HTML attribute tabindex="0". Zero will tell the browser to tab into the element in sequential order. You may also specify the order by setting different numbers.
To remove an element from the tab order, set the tabindex attribute to -1: tabindex="-1".
Elements that are naturally in sequential tab order (and do not need tabindex="0" added) include: <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.
Access Keys
Access keys provide shortcuts to developer defined elements. Example:
<a href="/home" accesskey="h">Home</a>
There is no standard for setting access keys, but fairly common convention includes:
accesskey="1"oraccesskey="h"for homepage linkaccesskey="2"for skip to contentaccesskey="3"for sitemapaccesskey="4"for search field focusaccesskey="5"for advanced search, if availableaccesskey="6"for site nav treeaccesskey="9"for contact informationaccesskey="0"for access key details or menu
Access keys are activated differently by different browsers.
Esc Key
Don’t forget to add JS to allow the escape key to close obtrusive UI elements such as modals.
With jQuery:
$(document).on('keyup',function(e) {
if (e.keyCode === 27) {
// Hide your modal
}
});
With vanilla JS:
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode === 27) {
// Hide your modal
}
};
Accessible HTML
ARIA Attributes
Learn your ARIA (Accessible Rich Internet Applications) attributes:
Tables
Use table captions to describe your tabular data:
<table>
<caption>Names and emails of Mercury New Media employees.</caption>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>Don Bickel</td>
<td>dbickel@mercurynewmedia.com</td>
</tr>
<tr>
<td>Chris Karlo</td>
<td>ckarlo@mercurynewmedia.com</td>
</tr>
</table>
Headings
Learn how to use headings and sectioning elements properly: http://accessiblehtmlheadings.com/.
Screen Readers
A good indication of how a screen reader will speak content on your site is to view your site as text. You can use a tool like Textise to try this out.