ADA Compliance

Compliance and Accessibility. Two things that are often overlooked and not considered when it comes to web design and digital marketing but can have a huge impact on a large portion of today’s web users. According to the UN, there are over 1.5 billion, yes billion, people in the world that deal with a disability of some kind on a day to day basis. And yet, we are out here creating websites, social media posts and marketing campaigns that don’t appeal to their needs. This is where compliance comes in.

At Sland Studios, we strive to create sites for our clients that incorporate the best practices for accessibility and compliance. But what does that mean? How do you do that? 

ADA stands for the Americans with Disability Act and incorporates rules and guidelines that were outlined in 1990 by the US. It contains 2 regulations that help businesses understand the needs of users with disabilities. 1. Creating accessible work environments for their employees with disabilities and 2. Creating accessible products for their customers with disabilities. When it comes to websites, ADA isn’t exactly clear on what needs to be included for users with disabilities, however, that’s where yet another acronym comes in, WCAG or Web Content Accessibility Guidelines. These guidelines include a few things that you need to consider to ensure your work is inclusive for users with disabilities:

• Is your website Perceivable? 
  • Include captions for videos, fonts and texts that are legible and easy to read, consider colours and contrasting that work for all screens and proper spacing and formatting. 

Good design is accessible design! There are lots of free online resources that can help with ADA Compliance such as colour contrast checkers and accessibility plugins for WordPress websites.

Figure 1: Here’s a screenshot from our website maestropress.io that uses video captions directly below the video to describe MaestroPress features. There is also an example of part of the style guide. The colours used for the MaestroPress website pass the contrast ratio check.

Source: maestropress.io

• Is your website Operable?
  • Is your website easy to use and navigate? Try not to overcomplicate with animations and graphics that slow down scrolling or make it difficult to navigate around. Consider mobile/tablet users and how your website translates to a smaller screen. Ensure your website can be navigated by not only a user with a mouse but also with keyboard commands to support users with limited mobility.

Less is more. Calgary Philharmonic’s website is easy to navigate making it a great user experience for everybody.

Figure 2: This is a screenshot of Calgary Philharmonic’s open mega menu navigation. This is accessible by pressing the tab key, and the navigation will dropdown with all the sub navigation items highlighted as you continue to press tab. Give it a try! 

Source: calgaryphil.com

• Is your website Understandable? 
  • Avoid using technical jargon and terminology that most users won’t understand. Consider using a copywriter or outside user to read your text and copy to ensure someone with a basic understanding of your product can understand what you are trying to portray. 

Big words aren’t needed to sound fancy and professional. In fact, users are more likely to connect with your website when everyone can understand that the business is offering.

Figure 3: FRANK Architecture’s new homepage now features more descriptions that easily describe their business, where they are located, and what they offer. Even though this is a visual-heavy website, the copy and Alt texts are easy to understand for all users.

Source: frankarchitecture.ca

• Is your website Robust?
  • Robust websites incorporate clean and easy to understand HTML and CSS code that meets and recognizes most web standards. These standards ensure your website can be understood by screen readers and devices that help users with disabilities navigate and understand your website. This is where hiring a developer with experience and understanding of this can come in handy. 

Clean and easy to understand HTML and CSS is not only good for accessibility, but it’s also great for the site’s speed and function. Search engines also favour websites that follow good web standards.

Figure 4: Performing Arts Houston approached Sland for a full rebuild of their latest site. While working on this project, we were able to make sure the foundation of this website was robust and highly functional. Here are some screenshots of Performing Arts Houstons’ homepage that feature animations on scroll.

Source: performingartshouston.org

It can be hard to design and develop a website that is usable and accessible for all persons. However, it is of utmost importance to be inclusive in the work that you create and hiring a team that understands this will set your product apart and ensure success of your website.  Chat with us if you have any questions about compliance or are considering making your website more accessible, we are here to help.