A website is more than a piece of artwork, a digital billboard for your brand. It is a tool your site visitors use to learn more about you, what you offer and how to engage with you. But not everyone is able to interact in the physical or digital world in the same way. That’s why it is so important to think about web accessibility and how best to create an inclusive website experience.

What is Web Accessibility?

Web accessibility speaks to websites, tools and technologies that are designed and developed so people with disabilities can use them. Laws like the Americans with Disabilities Act (ADA) have contributed to higher overall accessibility for people with disabilities, allowing them to better contribute, understand, navigate and interact with the web. We’ve written in detail before about ADA regulations and the various levels of compliance on our blog. 

Tips You Can Use Today

As we continue to learn more about accessibility, we put together some tips for designers and web developers to help create a strong and accessible web platform. Please feel free to share with your internal or external design and development teams.

TIPS FOR DESIGNERS

ADA color contrast

Color Contrast


Provide high contrast between background images and overlaid text and between adjacent colors.

4.5:1 – Text contrast ratio between text and background

3:1 – Non-text contrast ratio between text and background

list of website heading styles

Headings


Use proper header semantic tags, ensuring all content uses logical heading structure.

Text size icon in circle

Size


Use adequate font size, making text optimal to read. Preview your site at 200% before launching to see if improvements can be made.

text as image over gradient background

Graphics


Don’t use images of text – true text enlarges and responds better, loads faster and is easier to translate.

video player icon in circle

Animation and Video


Use clear navigation for sliders, galleries and videos – arrows, play and pause buttons, etc.

link icon in circle

Links


Underline text links – distinguishing links from body copy using more than just color.

Avoid read more or click here links – this does not describe where the link goes for screen readers.

TIPS FOR DEVELOPERS

form field icon

Forms


Use labels outside of input fields.

Use logical tabbing order.

Clearly identify input errors.

video player icon in circle

Video


Embed videos from hosting platforms like YouTube to include captioning.

Include an option for downloading the script.

image with alt tag graphic

Images


Use descriptive alt tags, unless the image is merely decorative.

one speech bubble with Chinese character and one speech bubble with English letter A

Language


Assign a language for the site.

Keyboard graphic with three keys with color fill

Keyboard Accessibility


Be sure a mechanism is available to “skip-to” main content – bypassing repeatable content like header and navigation.

When navigating with the keyboard, the focused item must visually stand out using a “keyboard focus indicator.”


We’re Here to Help

We take seriously the accessibility and usability of the website we build. If you need help creating a site or even updating a current site to meet today’s guidelines, let us know how we can help support you on your journey.

Contact Us