Last week, while giving a presentation on digital marketing, I was discussing how important it is to communicate to all segments of your audience properly. Accommodating users with accessibility needs will improve both your ability to reach all of your customers and your website's SEO. Accessibility guidelines give you a common-sense structure which presents your digital content in a manner that is easier for everyone to consume.
In my presentation, I mentioned that screen readers are a useful tool that can help determine if your site is accessible to all users. I was met with some confusion and realized afterward that the majority of my audience had never heard of screen readers prior to my presentation. Since May is accessibility month, I thought it might be helpful to provide an overview of how screen readers can improve the experience and accessibility of your site.
Put simply, a screen reader is a form of assistive software that interprets pieces of information on a webpage (text, images, links) and translates them to a format that can be consumed by users with visual impairments (text-to-speech, speakers, headphones, or braille). For a list of free screen readers, click here.
Things you need to consider when using a screen reader:
1. Properly setting up heading tags
Headings must be functional and not just used as design elements. When used properly, headings can help organize your site and improve user experience. Screen readers use the heading structure to navigate through content on your site, moving from <h1> to <h2>, and so forth.
Examples of proper use:
- Use <h1> for the main title of each page. Avoid using <h1> for anything other than the title of the website and the title of individual pages.
- Do not skip heading tags (e.g., go from an <h1> to an <h3>), as screen reader users will assume there is missing content.
2. Include proper alt tags for images
Alt tags should be added to help users understand what an image is trying to convey and its relevance in context with the page. Sometimes, images are used purely for aesthetic purposes (like on a blog post). In this case, make sure you either provide a quick description of the picture or skip over it entirely as it could cause confusion for the reader. If an image includes text, the text should also be included within the alt tag.
3. Give links unique and descriptive names
Those using a screen reader interact with web pages similarly to everyone else- they scan pages for links to click through and pay attention to descriptive text. With this in mind, each link on your website should have corresponding text describing where the link will take the user. This means simple terms like “Read More” or “See More Here” will create accessibility issues. Writing “click here to learn more about our products” is more valuable than “Learn about our products by clicking our Products page”.
4. Be careful with colour
Previously on our blog we discussed how meeting AODA colour contrast standards can improve your business and revealed that a significant portion of the population has a form of colour deficiency. When it comes to the use of colour, websites must have distinguishable content, meaning colours must accommodate people with limited colour vision or colour blindness. You can run your website through a free colour contrast checker to ensure it is accessible.
5. Ensure forms are designed for accessibility
Unlabeled form fields will likely be overlooked by a screen reader. Ensure you have descriptive labels and use a <label tag> to provide field descriptions. If a form contains mandatory fields, indicate that they are mandatory in the label. You can test if your forms are built correctly by running them through a screen reader on your beta site.
6. Try and ensure a keyboard can access all content logically
Many users with accessibility needs can only interact with a website using their keyboard, pressing the tab button to navigate through the site in order of what content appears first. This means that the journey through your website should be built in a logical way for someone to tab continuously through each heading, text block, image, etc. If there is long-form text on your site, anchors should be created so users can skip large passages or easily find sections that are relevant to them.
Additionally, be wary of content that only becomes active when a mouse hovers over it. For example, when menu items only reveal a sub-menu upon hover. Of course, keyboard interactions do not behave this way, so each menu item must be coded to ensure users can tab through them.
Using a screen reader may seem challenging at first, but it is our job as designers to make the web accessible for everyone. In January 2021, all websites must meet AODA accessibility standards (Web Content Accessibility Guidelines 2.0 Level AA). Give us a call and we can check if your website is screen reader-friendly and provide feedback on how you can make your website AODA compliant for the 2021 deadline.