More than 56 million people in the United States (nearly 1 in 5) and more than 1 billion people worldwide have a disability. This fact alone underscores the importance of web accessibility. With the rapid increase of country-specific legislation, along with the recent release of the international Web Content Accessibility Guidelines (WCAG), web accessibility is becoming a critical topic. The Australian Federal Disability Discrimination Act, for example, mandates that any organization developing a website in Australia has a “legal responsibility” to make it accessible.
Interestingly, an accessible site is also good for your business. Studies show that accessible websites reach a larger audience, encourage good coding practices, have better usability, and will actually improve your site’s SEO. Almost without exception, Google more strongly ranks websites using accessibility techniques in organic search. This is because search engine crawlers can’t see or hear. They only use a keyboard, similar to many people with disabilities. Additionally, many institutions and fund managers follow Socially Responsible Investing (SRI) guidelines and look favorably on companies that demonstrate accessibility.
With all of this in mind, here are 7 best practices to make sure your website — IR, corporate, or otherwise — is compliant for accessibility.
1. Make sure your site is keyboard accessible
Keyboard navigation is one of the most important components of web accessibility. Visually impaired people who depend on screen readers, individuals with motor disabilities, people that don’t have precise muscle control, and even your power users, are reliant on their keyboard to navigate content. Your IR site should, therefore, be fully accessible without a mouse.
A good practice is testing your site using only a keyboard. Use the “Tab” key to navigate and the “Enter” key to interact with an element. If you can move through your site without a mouse, you’re starting from a good place!
2. Design for intuitive navigation
Ensure that your site navigation is intuitive and concise. The tab order should follow the visual flow of the page: left to right, top to bottom. This is important for keyboard accessibility. Keeping your navigation concise also ensures a better experience for individuals who are tabbing through or using a screen reader.
As well, make sure to include proper structural elements to better allow screen readers to interact with your site. Well-structured web pages should include:
- Tables that include relevant information about their content
- Images that carry an “alt text” description
- Links with clear text
Screen readers can read the code of a page. You should make certain commands available, such as listening to a list of headings, jumping the content, or navigating directly to top-level headings.
3. Limit automatic content
Eliminating automatic content provides a better user experience for all audiences. Although the Web Content Accessibility Guidelines give the option of having pop-ups, scrolling, and blinking content, they strongly recommend giving the user the ability to pause, stop, or hide this kind of content. So, proceed with caution.
4. Provide alternative ways to consume site content
People with vision impairments tend to make use of screen readers to listen to the text that’s displayed on the screen. To support screen readers and provide the best experience to users, it’s crucial to provide visual alternatives. For video files, include “Closed Captioning” and “Text Transcripts.” For images, ensure you add “Alt Text.” Also, try to provide context and explain what is happening in the image and why it’s relevant. If you don’t provide any “Alt Text,” some screen readers will read the file name aloud, which clearly doesn’t make for a good user experience.
5. Leverage color contrasting
The World Health Organization (WHO) estimates that there are 217 million web users who have moderate to severe vision impairment. With this in mind, it’s critical to have high contrast between text and backgrounds. This is because if there is low contrast between text and background color, people with poor vision find it difficult to read online text. According to the W3C, the contrast ratio between text and background should be at least 4.5 to 1. Though a lower ratio can be acceptable with larger and heavier fonts, since they’re easier to read at lower contrast.
Hamilton Beach Brands’ IR site features high contrast focus indicators on interactive components, such as “See More” and “Contact Us” buttons. For users with poor vision, focus indicators show users what’s “clickable” and help identify elements on the page. In Hamilton Beach’s case, the focus indicators fit seamlessly into the design of the site and compliment the branding and color theme.
6. Use multiple visual cues (not just color)
Color-blindness affects nearly 10% of the population. With this in mind, it’s important to use multiple visual cues to emphasize information or prompt action. To make information stand out, consider adding an icon or another visual cue such as font weight or underlined text formatting.
Elements with more complex information, like diagrams, can be particularly hard to read when you only use color to differentiate the data. Use other visual components to communicate information like shape, labels and size. You can also include patterns to make the differences more noticeable.
Argonaut Gold’s IR site makes use of visual design to communicate key information. Their gray-scale stock chart also includes shapes and labels to help distinguish the data.
If you’re ever in doubt about designing for the visually-impaired, look at your interface through a black-and-white filter. A great example is Goldcorp IR site’s colorblind toggle. When turned on, users get a gray-scale version of their entire website. This offers the best of both worlds, as they can also keep their original brand colors.
7. Ensure that your text is scalable
The biggest obstacle for visually impaired users is text clarity, so you should make every effort to increase legibility (clarity of letters) and readability (clarity of text blocks). Body text should be a minimum of 16 pixels and should be able to be resized by up to 200% without loss of functionality. The spacing between lines should be at least 25% of the font size. For example, with the recommended 16-pixel minimum body text size, spacing should be 4 pixels or more.
There are many best practices when it comes to web accessibility. Failing to be compliant may even put you at risk for a lawsuit. In fact, nearly every well-known brand, including Amazon, has faced one. In 2017 in particular, there were 814 website accessibility lawsuits filed in US courts, involving such brands as Dominos Pizza, SeaWorld, Bang
Allyce Maclaren is Q4’s Marketing Specialist and enjoys writing about trends in IR, communications and marketing.