Let’s say that a good friend tells you about a website with great prices for a product you use regularly. But when you visit the site, there’s no way in. You can’t read the headings, find contact info—or read the content because there isn’t enough site contrast.
These barriers to website accessibility keep people with disabilities from using your clients’ services, making purchases or simply enjoying a website. And it’s all in how the site content is written and organized. In addition to compliance with international regulations, building accessible sites for your clients can be an important way for them to develop their business.
Many website designers aren’t aware of the diversity of user abilities online, and the breadth of their disabilities. In fact, 17% of the population needs some assistance. This article will help you follow the best practices for website accessibility so you meet this widespread demand.
Then, consider learning more about how to make a website accessible or how to make a website.
11 steps to help your website meet accessibility best practices
01. Prepare websites for screen readers
Screen readers transform text into speech and help those who are visually impaired by allowing them to navigate websites with a keyboard. There are several ways you can prepare websites for screen readers, including defining the site's language, changing the site’s order to be more logical and adding alt text to images. Wix is optimized for the most common readers including NVDA, Voiceover and Talkback.
02. Create the site structure
The hierarchy of your clients’ sites, meaning the content structure, helps web browsers and screen readers understand how the site is organized, and how to present the content. You can organize the site structure by adding tags to the different content elements on your client’s site including headings (H1), second-level headings (H2), paragraphs, lists, quotes, images and so on. You can add descriptive heading tags to each text element, which is also important for SEO.
If you're not sure where to start, learn how to design a website with AI, which can serve as a second pair of eyes.
03. Write alt text for images and galleries
It’s important to write alt text for visitors who use screen readers to browse websites. Alt text describes the appearance and function of an image or gallery on the screen. For example, if your client has an image of a house on the website, you should write “White house with blue shutters,” for your alt text. This text helps screen readers describe images to visitors who are unable to see them. Adding alt text to site images is also great for SEO.
04. Use the right color palette
Visitors with limited vision might find it difficult to tell the difference between the foreground and background of your clients’ pages. To increase website accessibility we recommend using specific color contrast ratios between text and background, graphics and user interface components and other contrast ratios to conform to Level AAA regulations. Use a color palette picker or generator to help you.
05. Choose clear fonts
Choosing clear fonts for your client sites can make all the difference. Fonts that are easier to read and larger are better for website accessibility. There’s no perfect font for website accessibility, but the US Department of Health and Human Services suggests using familiar fonts like Times New Roman, Verdana, Arial, Tahoma, Helvetica and Calibri. In addition, use text elements to write content rather than images, reduce formatting and use a font color that has a high contrast with the background.
06. Reduce unnecessary motion
It’s confusing for most of us when websites have elements that move at different speeds. And it’s even worse for those with motion-related disorders, such as motion sickness, epilepsy and ADHD. For website accessibility, we recommend reducing unnecessary motion. You can do this by limiting autoplay, avoiding parallax scrolling and enabling visitors to disable motion if they want.
07. Enable visual indicators
Visual indicators or “focus” are blue rectangles that appear when visitors use a keyboard to navigate your client sites. This tool allows visitors to see their location on the page and guides them through the site’s navigation. When building a site with code, you’ll need to manually code “focus” with the right color contrast. But if you’re using Wix, you can enable visual indicators to add focus to your client sites automatically.
08. Make videos and audio accessible
If you’ve added audio and video to your client’s site, you can make them accessible by adding subtitles and a transcript. You can also add an audio description of the visuals on the screen.
09. Set the site language
Website visitors with disabilities often have their own preferences for assistive technology, such as alternative keyboards, switches or scanning software. You don’t have to create special pages to be accessible for them. But it’s important to set the site’s language in “Settings”, for example, “English - United States,” so that assistive technologies can interpret your site correctly. These technologies then adjust the accent, pitch and speaking rate of the content to suit the defined language.
10. Make documents accessible
If your clients have documents on their websites, make them accessible so more visitors can use them. Whether the document is in HTML, Word or a PDF, you can make it more accessible by using headings, lists, useful hyperlinks, alt text and indicating the document’s language. For PDFs, a predefined action automates many tasks, checks accessibility, and provides instructions for items that require manual fixes. Make your PDF files and Word documents accessible with these step-by-step guides.
11. Add a website accessibility statement
Feature an accessibility statement on your client websites that describes your clients’ policy, goals and accomplishments related to accessibility.* Make the website accessibility statement easy to find on their sites by linking it to a visible button. You may want to create a separate page for it, or add it to a lightbox that pops up when visitors arrive on site.
*These guidelines about accessibility statements should not be taken as legal advice; they are only recommendations. We advise that you seek legal advice to help you understand and to assist you in the creation of your accessibility statement.