Accessibility: Using the Accessibility Wizard in the Studio Editor

Focus indicators are blue rectangles that appear around interactive elements (like buttons or links) when visitors use a keyboard to navigate through the live site.

They allow the visitor to see where their current position is - and are therefore crucial to site accessibility. As a result, focus indicators are automatically enabled on all Studio Editor sites and cannot be turned off. 

'Skip to Main Content' is a feature that allows visitors using keyboard navigation to bypass the topmost sections of a site (such as menus and page headings) and skip directly to the main content of the page. 

A 'Skip to Main Content' link is automatically added to all sites you build in the Studio Editor, and cannot be turned off.

Setting the site's main language provides assistive technologies with the information they need to accurately render the content. It does this by: 

It is therefore important to set the site's main language, as it ensures visitors using these technologies get the best experience.

If you have added Wix Multilingual to your site, the main language chosen during set-up cannot be changed.  

However, you can:

The Document Object Model (DOM) order of a site determines the "reading" order of elements on the page.

Some site visitors use screen readers and other assistive technologies to navigate a site.

Screen readers, for example, scan the site content, and "read" it aloud to the visitor. These visitors, as well as those with mobility needs, may also use the Tab key to navigate through site content. 

Organizing a site's DOM order is therefore important for accessibility, as it ensures that visitors using these assistive and additional technologies can browse and navigate the site in a logical order.

The wizard prompts you to change the title of a page when the title is 'New page' (the default assigned to new pages you add to a site), or the title contains 'Copy of' (the default assigned to duplicate pages).

Site visitors frequently use page titles to direct them to specific content / information. In order to ensure the best experience, page titles should be:

Heading tags are elements in a site's HTML code that determine the hierarchy / structure of text content on a page. Heading tags follow a top-down order, from Heading 1 (H1) to Heading 6 (H6), and then paragraph text (P).

Assistive technologies use heading tags to know the order of page content. For example, screen readers read H1 content first, followed by H2, H3, etc. 

An accurate heading structure is therefore important, as it provides a clear, logical experience for visitors using these technologies. Learn more about heading tags

Alternative (alt) text is a textual description of an image on a web page.

Some visitors may use assistive technologies such as screen readers to navigate through sites. These read the site's content aloud to the visitors - including the alt text. 

Alt text is therefore an important part of a site, as it ensures that visitors using these technologies can access the content, and understand what the image contains. Learn more about alt text and accessibility 

Color contrast is a measure of the difference in perceived brightness between two colors, and is expressed as a ratio ranging from 1:1 (no contrast) to 21:1 (strong contrast).. Having a strong contrast ensures site content is easy to see and read. 

The required color contrast ratio depends on the element's type and the Web Content Accessibility Guidelines (WCAG) level you want to achieve - AA (the minimum requirement), or AAA (enhanced):

Note: Only level AA is currently required in the Accessibility Wizard.

Text or elements that link to other pages, sections, or websites should be as descriptive as possible. For example, 'Read more about our latest research' is clearer than 'Read more'. They should also be clear if they lead to an action, such as submitting a form. Read the Web Content Accessibility Guidelines (WCAG) document on Link Purpose

Information conveyed by color should also have separate indicators, such as patterns, font style, and icons. For example, linked text should be underlined, and graphs should also display data with different patterns or textures. Read the Web Content Accessibility Guidelines (WCAG) document about Use of Color

Text in images (such as photos of signs or slogans) cannot be read by screenreaders. We recommend replacing these images with real text where possible. 

If the image text is an important part of the site's content, or is essential in conveying information, include the text in the image's description (alt text). Learn more about text in images

If the site contains media (e.g. videos, GIFs, and audio files), you should ensure that it is accessible to all site visitors.

You can do this by adding alternatives, such as transcripts and captions. These ensure that all site visitors can access and enjoy the content. Learn more about media alternatives 

Some video and audio players may be set to play automatically when the page loads. However, this can cause confusion and distraction for visitors, and may interfere with assistive technologies. For example, an audio player that starts automatically can override or 'speak' over a screen reader. 

We therefore advise providing visitors with option to stop / pause, and mute the content. Learn more about adding controls

Site elements / components should still be visible if the browser is zoomed. This is to ensure that users with visual conditions can magnify the site, and still see all of the page's content. You can check this by previewing the site, and changing your browser's zoom to 200%. Learn more about zoomed content

Web accessibility is a legal requirement in several countries. However, even if it is not a legal requirement in your region, we recommend adding the statement. These demonstrate the site / your client's commitment to providing a website that can be enjoyed by all visitors. Read more about accessibility statements