I’ve been doing some work with existing websites to ensure they comply with the Accessibility for Ontarians with Disabilities Act (AODA). As of 2015, businesses in Ontario of a certain size must comply with the act, which more specifically means their websites must comply with the Web Content Accessibility Guideline (WCAG) developed by the World Wide Web Consortium (W3C).
There are many tools you can use to review your code for accessibility (I’ve been using FireEyes), but the best way to ensure your site is accessible is just writing good code. It all comes down to intuitive organization and proper labeling. Below are the top 4 issues I’ve run into with easy fixes for each.
The primary language of this document has not been set. Add
<html lang="en">(exchange “en” for your primary language if it is not English) just below
<!DOCTYPE html>at the top of your HTML doc and save a lot of people a lot of trouble. Here’s a great article on the importance of including the “lang” tag.
Pages do not have enough headings. This is fixed with proper use of your h1-h6 tags. Be sure there is only one
<h1>tag on each page and that the remaining header tags are used according to the importance of the header, and not for styling purposes. Best practice is to have the
<h1>as your brand name at the top of every page. You may think you’re covered with a logo in lieu of an h1 tag, but screen readers can not read what your image says, neither can search engines for SEO purposes. The best way to handle this situation is including
<h1>BRAND NAME HERE<h1>in your html doc and then in your CSS make your h1 tag
display:noneso it’s there but not visible to the eye.
- HTML links or elements that act as links MUST have a visible name or text alternative for image as well as an HREF. Make sure you include “alt” tags on all links and images throughout your site. Alt tags should be descriptive – for links, alt tags should explain where the link will take the user, for images, alt tags should tell the user what is in the image.
Poor visibility between text and background colors. This one is all about styling and is probably not a favourite of designers everywhere who want to make colours subtle and text petite. Design be damned, it’s important that everyone can read the text on a site. All it takes is making sure the contrast is stark enough that all your text is clearly legible.
That’s it! I’m not an accessibility expert, but I do think it’s an important part of web development and we should all be advocating for clean, organized code.
Image source: Bell Blog