Top 10 Best Practices for Website Accessibility Design and Development

During development, we reference Siteimprove, a top-tier tool used by our clients at Stanford, UCSF, and UC Berkeley. Siteimprove is an excellent resource with a strong support section.

We also recommend adding an accessibility statement to all websites we design and build. This statement often includes a link to the official WCAG 2.1 standard, as well as contact information for users who may not be able to access some portion of the website.

Last but not least, remember to test your designs early and often with real people. There is no substitute for direct feedback from those who will be using the website. It's important to keep your users in mind during all stages of the design process. More than a nice-to-have, incorporating accessibility guidelines can make a significant difference in user experience.

There are many aspects of website design and development regarding accessibility that you should keep in mind, but the following are some commonly overlooked issues that we see on a daily basis.

We strive to ensure that all text meets a minimum contrast ratio of 4.5:1 (except for Large Text, Incidental Text, or Logotypes) so that it is legible for any user. This means that lighter colors should be used on darker backgrounds and vice versa—dark colors on light backgrounds. It often takes the practiced eye of a skilled design director to navigate the limitations of a client’s color palette and color requirements of accessible text.

The keyboard navigation should be easily accessible for all users—in other words, the "tab" key can be used to navigate through links and page elements so that users who cannot use a mouse or other pointing device can access content on the website in an intuitive way. A website developer must code the navigation elements to behave in an accessible way.

Heading structure is an important part of website accessibility because it helps users with disabilities navigate pages. Proper headings indicate the hierarchy of content, but also provide a way for screen readers to quickly understand the page's structure. It's important to include proper heading tags in all webpages and ensure that they are properly nested.

Alt text is an essential part of website accessibility, as it describes the content of images to visually impaired users. All images on a website should have alt text, which should clearly describe the image in question without being too verbose or repetitious. It's also important to exclude alt text for decorative images so that screen readers don't read them out loud. Too often, content managers neglect to add this text. We suggest making it a required field or including it in content management training.

Videos should have captions available for anyone who cannot hear the audio. If video is used to give directions, consider adding a written transcript as well.

Making sure that forms are easy to use for everyone includes ensuring that all fields are labeled correctly and that any error messages can be understood by all users.

Accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification creates accessible web experiences. ARIA landmarks are a useful way to identify specific regions of the page, such as navigation menus and banner sections. Screen readers can quickly identify these landmark areas and help users move through your website more efficiently.

Users with visual impairments may need to increase or decrease the size of page content. This should be done using relative sizing units like rems and ems instead of pixels to ensure that text remains properly sized regardless of screen resolution. It's also important that the page doesn't break.

Skipping navigation links allows screen reader users to bypass long lists of navigational links at the top of a web page. This also can help users who are not using a screen reader, as they can quickly jump to the content of the page without having to scroll past the navigation links. It's important to include skip links on all pages, even if there aren't many navigational elements present.

Semantic HTML is an essential aspect of web accessibility. By using tags that indicate the type and purpose of content, rather than just its appearance, semantic HTML aids in the interpretation of the website's structure by assistive technology. Using the correct semantic elements when marking up content can greatly improve the accessibility of your website.

In addition to keyboard access, users should also be able to tab through the content on a page. This will let them quickly find what they’re looking for without having to scroll down the entire page.

By following the above guidelines, you can help ensure that your website is accessible and usable by all users. With a few simple changes, you can make sure that your site is easy to use and navigate for everyone who visits it. Accessible websites not only improve usability, but also help to foster a welcoming and inclusive online environment.

As the Web changes, so do the tools and devices we design and build for. We encourage you to join us in conversation and conferences about accessibility online. Some of us from P6 enjoyed the Smashing SF Conference which had several sessions on accessibility, front-end design, boosting web performance, and more. There are many other resources as well, such as Accessibility for Teams, A11Y Style Guide, Web AIM, and more. Of course, WordPress Accessibility Day is September 27.

Contact us if you'd like an opinion about your website—there are often a few refinements that can be made to any site that go a long way to improving access to all.