Top 6 Tips for Improving Website Accessibility
Blog Post
In Canada, where approximately 22% of individuals aged 15 and over live with a disability, failing to design websites with accessibility in mind means excluding a significant percentage of the population. Inaccessible websites can only be used effectively by smaller share of users compared to an accessible website, resulting in fewer users and less engagement. For businesses, that can result in a loss of potential customers which can seriously impact the bottom line.
To create a more inclusive online world, we all must strive to create digital environments that everyone can access.
The rise of the internet and improvements in digital technologies have created new efficiencies and made content more accessible. However, we must remain aware that not everyone has equal access to digital resources. Persons living with disabilities may not be able to navigate websites efficiently, or at all, if important accessibility features are not implemented.
Why should I care about website accessibility?
- It’s ethical: All persons deserve equal access to resources, regardless of any disability.
- It’s a legal requirement: Depending on your geographic location and company size, failure to offer an accessible website experience can result in fines. Be sure to research web accessibility laws for your area and make sure you meet the minimum requirements.
- SEO: Website accessibility is a contributor to search engine optimization and can lead to improved page rankings in search results for Google and other search engines.
- Increases reach: Improving website accessibility allows your website to be used by more people, increasing your access to potential customers.
- Improves user experience: No one likes a difficult-to-use website. Accessible websites are easier for all people to use and can lead to more sales and other website conversions. WCAG 2.1 (Web Content Accessibility Guidelines 2.1) provides an extensive list of requirements and techniques to help website managers make their websites accessible.
From this list, here are our top six tips for improving website accessibility:
1. Headings
Visually, headings help guide users around webpages. Proper use of headings benefits everyone and can be particularly helpful for individuals with cognitive disabilities. They can also benefit those using screen readers because they can navigate the page according to its heading structure.
Do:
- Ensure that headings are logically structured on webpages to create logical hierarchies.
- Start webpages with an H1 heading, followed by H2, H3, H4, and so on as sub-sections require.
Don’t:
- Skip levels in the heading hierarchy (e.g., skip directly from H1 to H3 without an H2 heading).
- Use headings simply to style copy while ignoring the hierarchy.
For more information on headings, accessibility, and best practices:
2. Colours
For content to be effective and accessible, all users must be able to easily read all of the copy on webpages.
Do:
- Ensure that colours contrast sufficiently.
- Verify that colours meet or exceed minimum accessibility standards (e.g., WCAG AA, WCAG AAA).
Don’t:
- Use low contrast colours for headings, text, or hyperlinks that might cause difficulty for low vision or colour blind readers - reds are especially problematic.
Colour Contrast Checker Tools:
For more information about contrast and colour accessibility:
3. Alt text
Alternative text (alt text) refers to “invisible” text that provides a brief, but meaningful description of an image on a page. This “invisible” text (a.k.a. alt tag) can be read aloud by screen readers to users with a visual impairment or other cognitive disability. Alt text helps users understand the purpose and context of images as well as other multimedia and other non-text content.
Do:
- Ensure all images have alt tags and that the alt text is meaningful, accurate, and concise.
- Use alt text to provide the context of photos in relation to the subject matter.
Don’t:
- Omit alt text. While some images might be purely decorative, it is better to err on the side of caution and include.
- Avoid including “picture of” or “photo of” as that is already understood by the screen reader and will be redundant text.
- Don’t just use the default image name (e.g. IMG_1234567 or IStock_1234567) as the alt tag.
For more information about alt text:
4. Hyperlinks
Hyperlinks are an essential part of any website. They can help refer users to related resources and contribute to a website’s SEO rank, but this only works well when links are easy to understand. Users with disabilities may choose to navigate a webpage by having a screen reader, which can create problems when they read inaccessible hyperlinks.
Do:
- Use very specific text in hyperlinks that lets screen readers identify the purpose of the link (e.g., “read more about cryptocurrency”).
- Use link text with specific context:
- Accessible: Download “A booming force in law: The millennial lawyer”
- Less accessible: Download now
- Not accessible: Click here
- Use relevant keywords in the link text to assist with SEO and accessibility.
Don’t:
- Use repetitive generic text with no context (e.g. “Download PDF”, “Learn more”, or “Click here”)
- Simply include the URL as the link:
- Accessible: View our case studies
- Not accessible: https://www.cubiclefugitive.com/our-work/case-studies
For more information about hyperlinks:
5. Video and Animation
Video and animation are increasingly becoming more and more popular on websites. They can be a great way to increase visual interest and increase user engagement; however, for individuals with certain disabilities, video and animation can be an overwhelming and unwelcome distraction.
Do:
- Include a media player that allows users to play/pause/stop videos at their convenience. Volume levels should also be adjustable wherever applicable.
- Provide closed captions for any media containing audio.
Don’t:
- Forget to include a way for users to manually control media. On top of making the content less accessible or challenging for those with disabilities, it can disrupt a person’s experience on your website and deter them from returning.
For more information about video and animation:
6. Capitalization
Capitalization can be an effective way to add emphasis to text; however, typing text using all capital letters in a content editor may present a challenge for those that use screen readers. Some screen readers interpret a string of capital letters as acronyms and will read them letter-by-letter instead of pronouncing the word, which can confuse the meaning of words, sentences, and entire webpages.
Do:
- Avoid using all caps as a form of emphasis.
- Common acronyms (e.g. DNA, RSVP, SOS) are okay.
Colour contrast checker tools:
- If you need to use all caps, use CSS and/or text-transform to make the letters all caps instead of using caps lock or the shift key. This ensures that the text can be read by screen readers in the way it was intended.
For more information about capitalization and accessibility:
Some final Do’s and Don’ts of web accessibility
To help with your accessibility journey, we have some final do’s and don’ts for the road:
Do:
- Use a variety of resources to evaluate your website. Tools like SiteImprove and Wave are great at detecting and reporting common AODA (Accessibility for Ontarians with Disabilities Act) issues. Authors should use their preferred tool regularly to evaluate their content, either as a part of their publication workflow or until they have learned to spot these issues without aid.
- Try navigating your site without the use of a mouse. Using keyboard navigation or a screen reader will allow you to experience your website from a different perspective and make you aware of pain-points that you didn't know exist. There is no better way to understand the hurdles faced by users of Assistive Technology on your website than to try it for yourself. NVDA is a popular, free screen reader which you can use to try this yourself.
Don’t:
- Take the results of your site-checker as gospel. There is only so much an automated tool can tell you for certain. Most software-generated reports will contain some amount of false positives, false negatives, and warnings that are difficult to interpret and fix. You should consult a professional to get recommendations tailored to your unique website and content.
- Look at AODA-compliance as a limitation to your creativity on the web. Just because some features and media types are inaccessible to some users does not mean that it cannot be used on your website. It simply means that you must ensure that there is an alternative available for users employing assistive tech. AODA is all about providing alternatives and removing stumbling blocks. It's about providing more options for your users, not less.
If you’re feeling overwhelmed at all of these do’s and don’ts, that’s okay! There are plenty of resources online that can help you make sure that your web content is accessible. Make sure to also check the specific guidelines for your geographic region, as different Canadian provinces and U.S. states have different accessibility laws.
Nobody said that web accessibility would be easy, but you can rest easy at night knowing that you’re playing a part in making the web a more inclusive and accessible space. If you’re looking for assistance, contact us to speak with our website strategists and digital marketers.