This website was created on Editor X.

Best practices for website accessibility



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.


Follow these 11 steps to help your clients meet website accessibility standards:


1. Prepare websites for screen readers

2. Create the site structure

3. Write alt text for images and galleries

4. Use the right color palette

5. Choose clear fonts

6. Reduce unnecessary motion

7. Enable visual indicators

8. Make videos and audio accessible

9. Set the site language

10. Make documents accessible

11. Add a website accessibility statement



First, plan the website to meet accessibility standards

1. 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.


2. 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.


3. 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.



Next, design the website’s accessibility experience

4. 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.


5. 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.

6. 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.


7. 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.


8. 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.


Lastly, add the finishing touches to make your client sites compliant for accessibility


9. 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.



Watch this video to learn how to make your website accessible on Wix:



To get a more in-depth look at each step and how to make your Wix websites accessible, follow this accessibility checklist.



*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.


#Experts #UserExperience



0 comments

See how your agency can grow with Wix

Stay up on the latest trends and insights for agencies

I've read the Wix Privacy Policy and agree to receive emails from the Partner Blog and Partner Team.