As a website owner or content marketer, you have probably heard about Accessibility but aren’t sure what it exactly is, or perhaps you’re a bit intimidated by it and don’t know where to start. You may also be somewhat versed on Accessibility but think it’s more of a technical concern best left with the designers and developers.
If so, then this article is for you!
There is so much we could cover here when it comes to Accessibility for the web, but for now we can focus on learning more about what it is, why it matters, and what you can do to ensure your site is complying with at least the minimal requirements. It's also one of the many website design and development services we provide to our clients.
Don’t worry, links to resources are available at the end of this article that expand on everything we’ll be reviewing here.
What is Accessibility, anyway?
In a nutshell, Accessibility refers to the set of rules and guidelines for ensuring that everyone, regardless of visual or cognitive impairments, can consume and interact with websites, whether it’s reading a blog post, subscribing to a service, or making a purchase.
The World Wide Web Consortium (W3) is a community-driven initiative dedicated to the education and implementation of web standards, including Accessibility. Provincial, state, and federal Accessibility laws are based on WCAG 2.0 AA guidelines, some of which we will detail later in this article.
Accessibility is a social issue
While we all strive to ensure equal opportunity for everyone in the real world, it’s also important that the same attitude be taken when it comes to using the web. This means providing access to all users regardless of their physical or cognitive challenges, as well as those with various age-related issues that affect their ability to use the web.
Laws and standards are in place in most provinces and states that ensure compliance with Accessibility guidelines. Here in Ontario, the Accessibility for Ontarians with Disabilities Act (AODA) is responsible for compliance for all sites owned by and served to Ontarians and is not limited to government agencies or large corporations. They routinely audit websites to ensure compliance and will fine site owners who are in violation of the Act. Needless to say, organizations like the AODA take Accessibility very seriously.
Accessibility can help your SEO
When your website adheres to Accessibility best practices, you're ensuring that its structure and content is clean, semantic, and can even help keep your page load times lower. This can affect your site's SEO as well, as you're making it easier for search engines to index your content more effectively. Google also factors in your performance (page loading time) in its rankings, so you could end up with another win there as well.
Accessibility can affect your profit margin
When your website complies with Accessibility guidelines, you're expanding your reach to as many people as possible by lowering the barriers that may otherwise prevent them from viewing and interacting with your content. This is especially important for business owners and marketers whose products and services are sold to the general public, such as online stores or personal and home services. If you're not including people with disabilities or health issues that affect their online experience as part of your web strategy, they will go elsewhere.
Getting started with making your website accessible
Now that we understand the what and why of Accessibility, let's get into some more of the how. I'm going to get a tad more technical here, but will stick to the essentials just to help get you started. Further details and instructions can be found in the resources offered at the end of this article.
An Accessible website begins with a structurally sound website. This means your pages are built using valid HTML and that the elements used are used semantically, meaning with purpose and for the purpose they were intended. This is especially important for users who rely on screen readers.
Some rules of thumb for proper use of HTML includes:
- Never using HTML tables for page layout or anything other than displaying tabular data
- Using cascading headers (h1-h6) in the correct order
- Ensuring the right attributes are used for elements such as images (ALT) and icons (ARIA: Accessible Rich Internet Applications)
- Checking that form elements include labels, including action-based values for submit buttons
- Verifying that your content should remain visible and readable in the event your CSS doesn’t load in the browser
- Steering clear from inline styling in your HTML and leaving your styling in your CSS files
Often overlooked, it is important that users can get around your site without having to rely on using a mouse. Allowing them to ‘tab’ through your site and know where they are by visually indicating so (using the :focus selector in CSS or as displayed by browser default), navigating content and pages should be pretty straightforward. You can also use the tabindex attribute to assign a tab order for your users so they don’t get lost while using your site.
Properly structuring your site’s navigation menu helps users with screen readers and other assistive tools to identify the menu as navigation and with understanding the number of items in that menu.
When using a menu icon (AKA the “hamburger”, although if you ask me, it looks more like a hot dog), it’s important to use the proper ARIA label to identify the icon properly, otherwise it may be disregarded by screen readers as a decorative element and break the flow of navigation for the user.
It’s also recommended to add a ‘skip navigation’ link at the top of your pages for those navigating your site using a keyboard or screen reader.
If you’re a content editor, you’ve probably heard to always use ALT text for images. The ALT attribute should be used with every image on your site, and the text displayed in that attribute should accurately describe what is in the image, which is important both for screen readers and the colour-blind. Or if for some reason the image doesn’t load on the page and you want to avoid that mysterious “X” error in its place. (Which doesn’t tell you anything other than something is broken.)
As well, images that include text should also have that text in its ALT attribute, especially if that image contains instructions important to the visitor’s user experience.
Yes, you should still use descriptive ALT text even if you’re also adding a caption under your image.
Whether as part of your site’s navigation system, social media links, or for purely decorative purposes, use of proper ARIA attributes is important because it allows screen readers to identify the purpose of the icon and any instructions it may need to communicate.
If you’re using icon fonts, check out this article on formatting the markup of your icon elements for Accessibility.
Text on your site should be readable, well-spaced, and use colours that comply with WCAG 2.0 AA colour contrast requirements. As stated, use cascading headers, beginning with an h1 that contains the title of your page.
When applying links to your text, it should be obvious to the user that it is a hyperlink, which typically involves the inherent underline effect or, say, a styled bottom border, as well as a colour other than your default text colour.
Calls to action
When making use of calls to action on your site, the labels used should be instructional or action-based so users know what the action will do when selected. It also allows screen readers to accurately communicate it to the user. Simply labeling an action with ‘click here’ provides no context and can result in a communication dead stop for the user.
Use of colour
As a baseline, your website’s use of colour should have an appropriate amount of contrast that ensures your text and associated content is readable and usable by everyone, particularly those with visual impairments such as colour blindness. Using a colour contrast checker is essential to designing your site’s branding and ensuring Accessibility compliance as you create content.
When using forms on your site, be sure to use a label for each field that clearly informs the user what information should be entered into that field. Some designers make use of the placeholder attribute to display the label information inside the field itself, however this doesn’t comply with Accessibility requirements. Placeholder text is best used to provide an example of what could be entered into that field.
As mentioned, submit buttons should be action-based so users know what happens when it’s selected.
Audio and video
As mentioned, audio and video players embedded on your site should have accessible controls.
Using Closed Captioning (subtitles) on your videos allows for hearing-impaired users to understand what's being said and is also a convenient option for those who wish to keep the audio muted.
For audio and video, be sure to include a transcript available in text or document format (PDF) for users who are hearing-impaired. If offering a transcript in PDF format, ensure the PDF itself is also accessible.
Use of animation
Animation on a website refers to any element that changes colour, moves, blinks, or flickers. It also applies to image transitions used in carousels and sliders.
Animated elements used for decorative purposes should only keep animating for a limited period of time. The purpose here is to ensure those with visual disabilities are able to allow their eyes to ‘settle’ as they view your content.
As well, it is important when using animation to be mindful of those viewing your site that may have seizure or vestibular disorders which could be triggered by movement such as flickering and fast-moving elements and colours.
For additional information and tools to help solve your Accessibility woes, we recommend the following:
- Accessibility for Ontarians with Disabilities Act
- Web Accessibility Laws & Policies for Canada
- Why Standards Harmonization is Essential to Web Accessibility
- W3’s Web Content Accessibility Guidelines
- W3’s article on Accessible Rich Internet Applications (ARIA)
- IDI Web Accessibility Checker
- WAVE Web Accessibility Evaluation Tool
- WebAIM Accessibility Colour Contrast Checker
Don’t worry, we can help!
If this seems a bit daunting or you’re not sure where to begin in ensuring your own website meets Accessibility requirements, get in touch with us and we’ll be glad to lead the way! Also check out our Services section for more details on everything we have to offer!