Tools for developers
If only there was a guide on how to improving the code so that we include more people... Wait, there is!
Article meta
Design principles
Do's and don'ts
Do's and don'ts
Follow these simple examples to improve your products accessibility.
1. Doctype & lang
Use doctype and lang attribute. If the doctype is not specified, the browser will have a problem to properly parse the page. And if there is no lang attribute, search engines and screen readers will have a problem to interpret the content
<!DOCTYPE html>
<html lang="en">2. Alt attribute
Always use the alt attribute. It is key for SEO, but more importantly, it makes a big difference for users with visual disabilities.
If the image is used for design or is not relevent for the content, use an empty alt attribute rather than none at all.
<img alt="Cute cat" src="/catimage.jpg">
<img alt="" src="/design-element.jpg">Don't
<img src="/catimage.jpg">3. Labels
Use labels correctly. Labels play an important role for how a user can interact with a form.
<label for="usernameinput">Username</label>
<input type="text" id="usernameinput" name="username">Don't
<label>Username: <input type="text" id="usernameinput" name="username"></label>
<div>Username: <input type="text" name="username"></div>4. Buttons
Use button elements when implementing interactive actions. Using a link that doesn't go anywhere is bad practice and confusing. Use a regular button instead!
<button class="closemodal" aria-label="Close the modal">X</button>Don't
<a href="#" onclick="...">X</a>5. Title
Use title attribute on icon button/links. If a button only contains a icon (such as on a share link or a close button) we need to indicate what the button actually does.
<button class="share-facebook" aria-label="Share this page on facebook">(Facebook icon)</button>6. Active state
Do preserve active state. Make sure selectable elements have a indication for when a user has navigated to a link/button using the keyboard
button:hover, button:focus,button:active{ border:2px solid #666;}7. Keep outline
Don't remove outline. If you have not made a specific visual indication you should not remove outline
Don't
a { outline: 0; }Test your markup!
This is how you ensure your markup is valid
Paste your markup into the W3C Validator (https://validator.w3.org/#validate_by_input) and make sure it is valid.
Invalid markup is extra problematic for screen reader software.
Run an audit in Chrome
This test also works on locally hosted websites (event localhost).
- Navigate to the website you want to test in Chrome
- Open up Developer Tools (Ctrl + Shift + I or F12)
- Open the Audit tab
- Click on the "Perform an audit..." button
- Select only "Accessibility"
- Click the Run audit button
Check each item that did not pass. Most issues have a read more link that will take to you a in depth description of the problem and how to progress with the issue.
More tools
Section 508 Checklist: https://www.hhs.gov/web/section-508/making-files-accessible/checklist/html/index.html
W3C Accessbility Evaluation Tools List: https://www.w3.org/WAI/ER/tools/