Guides and validation

If only there was a guide on how to improving the code so that we include more people... Wait, there is!

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 buttons instead of links. 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

a { outline: 0; }

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).

  1. Navigate to the website you want to test in Chrome
  2. Open up Developer Tools (Ctrl + Shift + I or F12)
  3. Open the Audit tab
  4. Click on the "Perform an audit..." button
  5. Select only "Accessibility"
  6. 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/