Website Accessibility Tips For Designers And Developers

There are a lot of misconceptions about website accessibility so let's cover a few facts first:

• All websites, even small ones, should be ADA compliant. While it’s true that lawyers mostly focus on companies with deeper pockets, personal bloggers are at risk of ADA compliance lawsuits too. All sites should strive to be inclusive of all of their visitors regardless of the possibility of legal action.
• WordPress sites are not already ADA compliant. WordPress does its best to ensure that its own themes are accessible and include a lot of markup to help establish that, but there’s a lot that’s not addressed. If you’re using a custom theme, or installing plugins, there is also no guarantee that those are 100% compliant.
• Accessibility is not just for the blind. Website accessibility is for anyone with disabilities that may cause difficulty navigating a website. This can also include those with motor control issues including arthritis, dyslexia, partial blindness, seizure disorders, and even many mental health disabilities, learning disabilities, and mood disorders.
• Accessibility is not just a developer’s responsibility. The business owner, designer, and other stakeholders of the site ALL have a responsibility for keeping the website accessible and ADA compliant.

As web designers and developers, it is our responsibility to inform our clients of what website accessibility is, why it’s important to them and what they need to do to achieve ADA compliance. Besides resolving the threat of a possible lawsuit (3,255 lawsuits in 2022 alone), making a website accessible also potentially provides access to a larger audience and improves the user experience for everyone. Not to mention, an obvious commitment to inclusivity is a huge loyalty and reputation builder for your clients!

So now that you have a better idea what website accessibility is and why you should want to achieve it, what can you do? To achieve 100% full website accessibility, there’s a lot of work involved (which we’re not going to cover here) but there are many simple techniques and tips you can adopt into your workflows now to make your websites much more accessible. The idea is that with just a little time and mindfulness, we can make a big difference with our design and development.

• Use readable fonts and font sizes for body text. Always use sans-serif fonts such as Arial, Helvetica, or Roboto for body text. Since headlines are typically larger, you can use more decorative font faces for them, but they should still be readable. Generally speaking, font sizes for your copy should be at least 16px / 1em. Make sure that no text is smaller than 12px / .75em.
• Keep high contrast between text and the background. Make sure text contrasts are at least a 4.5:1 ratio for standard text and 3:1 ratio for headline text. Use WebAIM’s Contrast Checker or another tool to test.
• Design identifiable links. It should be obvious that each link is actionable and can be clicked. Links that only have a color difference can easily be missed, especially by those with poor or color blindness. Style your links to stand out by using underlines, font weight, buttons, or other visual cues.
• Make hover and focus states noticeable. When a site user mouses over a link or button, that element should visually change in a noticeable manner. In most cases, you can make your focus state (when a user tabs to the element) the same style as the hover state.
• Don’t design images with words. Wherever possible, avoid using text within your images. If you do need to include words in an image though, make sure to include that same text as alt text when the page is built.
• Design forms that show which fields are required. If a form field is required, make it obvious. At a minimum, show a bold asterisk after the input label but an even better approach is to append “(required)” after the label to make it more clear.
• Design for re-sizeable text. Users need to be able to resize the text of a website without affecting the overall layout or functionality, as some readers may require larger text for readability.
• Design for scalability. Ensure that your design is scalable and works well across different devices and screen sizes. Responsive design principles contribute to a more inclusive user experience.
• Test in high-contrast mode. Some users rely on high-contrast settings for better visibility. Does all of your content remain accessible and readable in this mode?
• Consider cognitive accessibility. Design interfaces with cognitive accessibility in mind. Use clear and simple language, provide consistent navigation, and minimize distractions. Break content into digestible chunks and offer options for customization, such as font size and spacing.

• Add alt tags to all images. All meaningful images should have a descriptive alt tag added to provide an alternative to being able to see that image. For images that are purely decorative, you should still include an empty alt text attribute. This will tell screen readers that the image was not important for conveying information.
• Make links descriptive. Users relying on screen readers navigate through links, so having clear link text helps them understand the purpose of each one. Avoid using link labels like “click here” or “view more” and instead use descriptive labels that tell the user where that link will take them. If you have to use a generic link label, add an aria label attribute for screen readers.
• Use semantic HTML; especially the correct heading hierarchy. To make it easier for screen reader users, all headings should be in order on your page. Avoid using headings based on their styles. Instead, use the correct heading and apply CSS rules to implement the desired style.
• Use tags for their intended purposes. Use the correct tag for the job. For example, don’t use bolded text where a heading should be used, or a blockquote where you should use a style to indent text.
• Implement ARIA Roles and Attributes. Use Accessible Rich Internet Applications (ARIA) roles and attributes to enhance the accessibility of dynamic content, such as single-page applications. ARIA can help convey information to assistive technologies about the roles and states of interactive elements.
• Create keyboard-friendly navigation. Ensure that all interactive elements, such as links and buttons, are keyboard accessible. Users with motor disabilities may rely on keyboards or other input devices, so it's essential that they can navigate and interact with your site without a mouse if necessary.
• Add skip links. Include skip links for screen reader users to skip the main header and navigation and easily get to the page content. There are some free widgets and WordPress plugins that will automatically add skip links for you.
• Program forms with clear error messages. Tell your users clearly what steps are needed to fix their form entries.
• Include a sitemap or search functionality. Either approach will provide more than one way to navigate to all pages on your site. Unless it’s a small site, why not include both?
• Set the site language. Add the "lang" attribute to your html tag on each page to specify the language that the page is in. For example,  for an English-language page, the lang value is "EN".
• Add Subtitles to YouTube videos. For all videos uploaded to YouTube, make sure that subtitles are generated. As time allows, listen to the video to make sure generated subtitles match the video - this can be updated within YouTube manually if necessary.

Even if you're not a web designer or developer, it is everyone's responsibility at a company to help foster a workplace culture of paying attention to accessibility concerns, and ensuring that you're caring for your clients with an eye for inclusivity. Here's how you can help:

• Familiarize yourself with the Web Content Accessibility Guidelines (WCAG). These guidelines, developed by the W3C, provide a set of recommendations for making web content more accessible. Understanding the principles and success criteria outlined in WCAG is crucial for creating inclusive websites.
• Integrate accessibility testing tools into your workflow. Accessibility is everyone’s responsibility. There are various tools available that can help identify potential accessibility issues, such as Axe Accessibility Checker, Wave, or Lighthouse. You can even use some of these as Chrome extensions.
• Regularly test with real users. Conduct usability testing with people who have disabilities. Real-world testing with individuals who use assistive technologies can provide valuable insights into your user experience.
• Stay informed and updated. Accessibility standards and best practices evolve. Stay informed about the latest developments and updates in web accessibility to ensure your workflows align with the most current recommendations.
• Educate team members. Foster a culture of accessibility within your development team. Educate team members about the importance of accessibility and provide training on accessible design and development practices.

By integrating these accessibility tips into their engineering workflows, web designers and developers will not only enhance the usability of their websites, but also foster inclusivity for all users, regardless of their abilities. Recognizing accessibility as a fundamental aspect of design and development underscores the importance of equitable access to information and services online. When accessibility is prioritized from the outset - woven into every stage of the process, rather than treated as a post-build consideration - we can streamline our processes and save ourselves time in the long run. Embracing accessibility as a core principle not only aligns with ethical standards, but also ensures your website reaches its full potential by warmly including a diverse audience.

Let this be the moment you commit to making a meaningful difference; start weaving accessibility into your projects today and open your digital doors to everyone.