When I completed my program at BCIT accessibility wasn’t even mentioned let alone taught to us. Recently we’ve had the opportunity to build sites that must comply with the WCAG guidelines to satisfy the requirements of AODA

While this might seem like a daunting task many of the guidelines are quite simple to implement and once you know what your doing it shouldn’t take any extra time to include these features. If you’re using a CMS such as Drupal or WordPress depending on the theme you’re using you might already be meeting a lot of the requirements.

Just as it’s now standard to make your site work on any size screen this is another step you can take to ensure your site reaches an even wider audience. There are a few tools you can use to see how well your website is doing. My favourite is Axe Accessibility but there is also WAVE Web Accessibility Evaluation Tool which does a pretty good job despite tripping up from time to time.

Accessibility for Designers and Developers

Provide sufficient contrast between foreground and background elements.

There are many tools that can help you ensure your design meets the standards. If you’re using Sketch to design, Cluse is a tool that will check your designs against WCAG 2.0 guidelines.

Create clear and consistent navigation

Ensure that your navigation appears the same and is positioned in the same place across all pages in the site. You can also provide alternative methods of navigation such as a global search and site map.

Labels for all form elements

Even if you don’t want a visible label for a form element you should be providing a one and then hiding it with CSS. Form elements without labels are confusing to users of screen readers, adding a label gives the element meaning.

Using for and matching it to the input id will tie the label to the input

<label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname">

If you want to hide the label you can do so with the class .visually-hidden

.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

Use markup that conveys meaning and structure

Using the correct markup for the elements of your page helps screen readers identify what is on the page and importance of each section. HTML5 makes this quite a bit easier with the use of their landmark elements and should be standard in all modern CMS themes.

Provide aria labels for non standard interactive elements

Aria labels provide information on the function of custom elements such as accordions and custom buttons. These labels tell the browser what the element is and what the function and current state of the element is, these labels should be adjusted when states of the element changes.

<nav aria-label="Main Navigation" role="navigation">
  <ul>
    <li><a href="...">Home</a></li> <li><a href="...">Shop</a></li>
    <li class="has-submenu"> <a aria-expanded="false" aria-haspopup="true" href="...">SpaceBears</a>
      <ul>
        <li><a href="...">SpaceBear 6</a></li> <li><a href="...">SpaceBear 6 Plus</a></li>
      </ul>
    </li>
    <li><a href="...">MarsCars</a></li> <li><a href="...">Contact</a></li>
  </ul>
</nav>

Ensure all interactive elements are keyboard accessible and flow in a logical order

Any elements on the page that must be interacted with using a mouse should be able to be tabbed through using the keyboard and the order in which they’re selected should make sense as you travel down the page.

If every element has tabindex=”0″ it will follow the normal hierarchy of the page, if you need to change the order you can use tabindex=”1″,tabindex=”2″,tabindex=”3″, etc. to force the tab order to change and tabindex=”-1″ will remove the ability to select the element through tabbing.

Accessibility for Content Managers

Create unique and informative page titles

Each page should have a title that distinguishes it from the rest of the content on the site. This should appear first in the content and use a proper heading element.

Use headings to convey structure of the page

Using heading elements in the correct order helps describe the structure of the content on the page and conveys the importance of each section’s content. There should only be one h1 per page and should contain the page title, you also shouldn’t skip headings so an h2 should appear before an h3 and so on.

Provide meaningful text alternatives for images

Every image should have alternative text that describes the image or in the event that the image is part of the function of the page the alt text should describe its function. Images that are purely decorative should not include alt text as this is more confusing than helpful.

Provide clear instructions on elements

Instructions, guidance, and in the event of an error a message that is clear and easy to understand will help users interact correctly with elements. Try to avoid overly technical language and describe requirements such as date or phone formats.

These tips should get you started on the road to good web accessibility but there is plenty more out there to learn and put into practice on your site. We can always do a better job at making our sites accessible to all users.