Lawsuits filed under Title III of the Americans with Disabilities Act (ADA) related to web accessibility increased 177% from 2017 to 2018. Court decisions as recent as October 7, 2019 have left businesses open to more accessibility lawsuits. While public entities have had to comply with web accessibility for decades, the topic has quickly become more of a concern for private businesses than it has ever been. Unfortunately, not every private business has the resources to address these concerns. Luckily, there are some general principles and low-hanging fruit that you can address to make an effort to improve the accessibility of your website. Here are five of them:
Every business should strive to deliver a web experience that translates to any user. This includes users with visual impairment, deafness and hard-of-hearing, motor impairment, cognitive disabilities, and any other users of assistive technology (AT). Setting aside the fact that it’s the right thing to do, accounting for these users also increases your target audience, increases your overall website usability, improves SEO, and helps your reputation.
Web accessibility is deeply tied to the context of the content. It shouldn’t be a feature of your website; it should be an inherent part of it, like copy or navigation. As such, assessing accessibility should be part of the design process when designing, redesigning, or updating your website.
The long and the short of it is, there is no “right” or “wrong” way to make your site accessible. If you stick to the standards and guidelines that exist, you’ll be almost all the way there, but keep in mind that context dictates how usable your solution is. There are some general principles and low-hanging fruit that you can address to make an effort to improve the accessibility of your website. Here are five of them:
1. Structure Your Content
This is just a web development best practice. Make sure your content is well-structured and semantic. This means – at the very least – providing proper headings. They don’t even have to be visible. Popular front-end frameworks like Bootstrap and Foundation have built-in classes that allow you to provide useful headings without impacting a visually complex design.
While it’s a good idea to have visible headings, it’s not completely necessary. What is necessary is that the headings follow the appropriate level order. This means they should be in order of h1, h2, h3, h4, h5, h6; not h1, h2, h5. You don’t need to use all 6 heading levels,
Using HTML5 sectioning elements helps define semantic regions of a page. As an added bonus, these regions have default ARIA landmark roles (e.g., aside = complimentary). These elements provide contextual, semantic information that helps AT users navigate a given page.
Assistive technology interprets the content of a page in accordance with the flow of the source, not how it is organized visually. This is important to keep in mind when considering accessibility.
Benefit for everyone: Not only will this ensure your site is accessible, but it will also help with your SEO. It’s a win-win, but it’s also good web development.
2. Alternative Text for Images
This is web accessibility 101: make sure all your images have alt attributes. They don’t even need to have content in some situations, they can just be blank. The bottom line is alt attributes need to be there. If an image is purely decorative, it can have a blank alt attribute and be given a role=”presentation” to let AT programs know that it can be ignored because it provides no significant content value.
Benefit for everyone: There are situations where all users can benefit from alt attributes on images. For example, if images don’t load because of a broken link or slow connection, the alt attribute is used as replacement text, so the meaning of that image is not lost. Further, appropriate alt attributes can have a positive impact on SEO.
3. Descriptive Links
A frequent pattern for an AT user is to listen to a list of links on a given page. This makes it supremely important for those links to provide information as to what their destination is. For example, many sites use “Learn More” or (in the case of e-commerce) “Shop Now”. This leads to AT users getting a list of a dozen links that all say the same thing. Learn more about what? Shop what kinds of products now?
Benefit for everyone: All users benefit from descriptive links. It reduces cognitive load and limits time-on-task by letting the user know where the link goes out of the context of its surroundings.
4. Allow Users to Skip to Main Content
This is so easy to do, it’s almost embarrassing. All you need is a link at the beginning of the body of your markup that anchors to the beginning of your main content. This allows keyboard and AT users to easily skip the header and navigation that are on every page and get to the good stuff.
The link can always be visible or only hidden until it receives keyboard focus. If you’re using a front-end framework, utility classes may already exist that can be leveraged, such as Bootstrap’s .sr-only-focusable class. If you’re not using a front-end framework, there are plenty of resources with CSS you can leverage to accomplish the same thing, such as WebAIM’s “Skip to main content” solution.
Benefit for everyone: More users navigate websites using the keyboard than one would think. It may not always benefit all users, but the benefit to AT users far outweighs the minimal effort development it would take. This is low-hanging fruit that can make a big difference.
5. Regularly Spot-check Your Website
Most websites are constantly updated. Sometimes, these updates include features or pages that were hastily designed and developed, and accessibility was not accounted for. It’s always a good idea to spot-check your website to ensure you’re meeting the technical requirements. It can even be included in your QA process so that everyone is thinking about accessibility and universal design.
There are plenty of tools out there that allow you to see where you’re technically falling short on accessibility. WebAIM’s WAVE tool is one of the most popular. While it will check for images missing alt attributes, empty headings, skipped heading levels, etc., it will not be able to provide the contextual feedback that’s required to adhere to accessibility guidelines fully. In these cases, it’s necessary to have someone with domain knowledge to interpret the tool’s results. They can then turn those results into actionable tasks for remediation. Tools like this, however, are a great way to smoke test your site for glaring issues that may require investigation.
Benefit for everyone: These spot-checks are a good way to ensure you are hitting the mark with all of the tips outlined above. It’s a general best practice as a business to periodically assess your web presence to make sure you are hitting the mark for your users and/or customers.
Bonus Tip: Follow Good Visual Design Principles
There are a lot of sites out there that fall short in their visual design when it comes to color contrast and general readability. Throughout your visual design process, it’s important to keep in mind users with common visual impairments such as color blindness and macular degeneration. This means providing adequate contrast between foreground text and background colors and images. Keeping text legible and readable is something every user can appreciate. Tools like The Paciello Group’s Colour Contrast Analyser can help designers stay honest when it comes to contrast between text and backgrounds.
Benefit for everyone: Not only does it help the accessibility of your website, but it improves the delivery of your visual content to users with perfect vision.
What To Do Next
There’s a chance that you already follow some of these tips, which is fantastic. There is, however, always room for improvement. A review of your site to assess its accessibility is a great way to make sure you stay on top. Tallan offers an Accessibility Audit to help identify opportunities for improvement, provide remediation recommendations, and even provide an estimate for what it would take to perform that remediation.