ADA compliance refers to the Americans with Disabilities Act that states that all tech and internet sites need to be made available to people with disabilities. There are different levels of ADA compliance, depending on how many of the guidelines you follow. Studio Simpatico does not guarantee ADA compliance on our sites (we recommend you hire an accessibility firm to do a proper audit of your website), but we are constantly learning and improving the way we design and develop our sites.

Making your website accessible is probably the most important thing you can do for your users. Accessibility is important because it ensures that everyone, regardless of disability, can use your website which also ensures that you get the most traffic as possible. It can also greatly boost your SEO, simply because of the amount of descriptive content it uses and the HTML standards it requires. It’s not expensive to make your site more accessible, it just requires a few extra steps that you’ll eventually learn to do automatically. Accessibility matters in every step of the web design process: from the design itself, to the code, to the content you add.

You might think that you don’t have a lot of “need” to make your site accessible – but did you know that around 20% of all internet traffic has some sort of disability? A disability can range from something permanent like blindness, deafness, loss of limb, color blindness or bad eyesight or it can even be a temporary accessibility like a broken arm or carpel tunnel syndrome. Accessibility even helps out people without special needs – think of a mother with a newborn baby on her hip that needs to access your site with one hand and half her attention. Also, you can be sued for having a website that isn’t accessible to disabled people!

Accessibility matters in every step of the web design process from the design itself, to the code, to the content you add. Let’s take a look at some things you can do to improve your site’s accessibility.

Design Accessibility

Color contrast

Color contrast is the difference in luminance and color between two objects, usually text and it’s background. Contrast is low when you have, for example, light gray text on a white background. Contrast is high when you have black text on a white background. Having low contrast means people with bad eyesight (aka yours truely!) can’t read or distinguish the text from the background. Use a color checker to test your site’s colors for enough contrast.

Colors

Color blindness can also affect users, so when you have charts and graphs that rely on colored bars, make sure you have a fallback like differing symbols on each bar, in case the user can’t discern the different colors. It’s also good practice to make sure no part of your site relies on color to be understood. If your site was plain black and white, would it still be readable and understandable?

Text sizes and line heights

Along with color, the size of your text can be a major barrier in accessibility. While it depends on the typeface itself, a general good rule of thumb is never have important text smaller than 16px, and the larger the better (although giant text can also present it’s own problems). Line heights, or the spacing between lines of text is also important – make sure not to cram your text to close to each other, or to have them too spaced out that it’s uncomfortable to read.

Text line length

It isn’t just the size of your text that matters, but the length of each line of text. Too small or too long can be uncomfortable for users to read. The optimal line length depends on the size of your text and the amount of text. You can find some more information on optimal line length at Baymard Institute .

Code Accessibility

Semantic HTML

Accessibility issues can easily arise from code problems. HTML is, by default, accessible, so this happens when a developer doesn’t follow proper standards when coding a website. Making sure your website is using semantic HTML alone can help prevent many issues often seen on websites today. Semantic HTML refers to using proper tags for the right kind of content and proper ordering of heading tags (h1, h2, h3, etc). Headings should follow the right order – an H2 tag should come before an H3, etc.

The biggest issue I’ve seen over the years from other developers come from links. Links are text or visual-looking buttons that go to an actual url and should be formatted with an <a> tag. You should never, ever, use Javascript for something like this.(I’ve seen an onclick=”” event on a <li> tag for a plain menu before!)

Buttons are text or visual looking buttons that perform an action, like opening/closing a popup or accordions, but don’t actually take you to a different url. Those should be formatted with the <button> tag.

Keyboard Tabbing

Tabbing order needs to be maintained for proper accessibility, which means anyone should be able to easily navigate your site by using the “tab” key on their keyboard instead of a mouse. This is great for all kinds of users, not just people with disabilities. Using semantic HTML means this should never be an issue, but care needs to be taken when interrupting tabbing, such as for popup windows or tab modules. Carnegie Museums has a fantastic guide on making accessible Javascript modules.

Voice Readers

Some people use assistive technologies that will read the website to them. These are already built into devices that use iOS, Mac OS, and Android, but can also be a third-party application that’s been installed. Using semantic HTML and proper ordering of heading tags, as well as descriptive image alt attributes ensures that your website’s content will be read properly to the user. We suggest turning on these features on your device to test this out. Some things to watch for:

Does it read content out of order?
Does it make sense?
Does it repeat content unnecessarily?
Can the user easily skip to what they’re looking for?

Visual Order vs Code Order

There’s a new CSS property for Grid and Flexbox called “order” that lets you change the visual order of the elements instead of moving around the HTML. This property should be used sparingly, as it can mess up tab order and cause the user to jump all over the place. I you do need to change the visual order, proper hierarchy at the code level is more important to ensure the content makes sense when a user is navigating via a voice reader.

Javascript

Javascript is often not accessible, due to the changing nature of content. Make sure your popups, lightboxes, tabbing modules, accordions, etc all maintain proper keyboard tab order and can be navigated as easy as possible.

Carnegie Museums has a fantastic guide on making accessible Javascript modules, along with some code examples you can grab and use.

Content Accessibility

While a lot of accessibility can be done in the design and development stages, the guidelines don’t stop there. Your content also needs to be accessible.

Content is Text

The easiest thing you can do to improve your website’s accessibility is by making sure all of your content is real text, not saved inside of an image. Text in an image is unreadable by assistive devices. Make sure your content is descriptive and helps the user navigate around your website.

Descriptive Links

Ideally, your link text should be descriptive. Instead of “click here”, try “Read the accessible guide to popup windows”. Links do not need title tags, which are usually a duplicate of the link text and get in the way for users using voice readers.

Image ALT Attributes

All images that serve a purpose (i.e. not just for decoration like a flourish), should have a descriptive alt attribute. This is not the place to stuff a bunch of SEO keywords in, but should describe what is in the image. For example “A dachshund wearing a hot dog costume swimming in a pool”.

Audio & Videos

All videos should have captions for deaf users. Videos and audio ideally should not autoplay, especially with sound, and a lot of browsers block autoplaying videos with sound. Autoplaying videos and audio can eat up user’s internet data limits and potentially be an issue for users with seizure disabilities or auditory/visual problems.

Audio should also be transcribed for deaf or hard-of-heading users (or even users who aren’t in a place to have sound!). All audio and video should have full controls so the user can start, stop, or scrub.