Accessibility: Using the Accessibility Wizard

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. Learn more about focus indicators.

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

'Skip to Main Content' links are an important part of a site's accessibility, as they provide visitors with quick access to the information they need. Learn more about 'Skip to Main Content'.

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

• Indicating the script / characters used in site text

• Determining the pronunciation of text content

• Allowing media players to show the correct captions

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:

• Delete Multilingual from the site, re-add it, and set it up with the language you want.

• Change the layout of the language menu to ensure the best experience for visitors.

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. Learn more about DOM order and accessibility

A page's title tag is the title that search engines usually display for the page in search results. It's taken from the name that you give the page, as well as the name of the site.

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

Page title tags provide visitors using assistive technology with important information about the page's content. In order to ensure the best experience, page titles should therefore be:

• Descriptive: The titles should accurately summarize the page's content and include any essential information.

• Unique: Titles should only be used on one page on the site, and not repeated across pages.

• Concise: Page titles should summarize the content while including relevant information and keywords.

Tip: Accurate page title tags are also an important part of your site's SEO.

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.

You can adjust many heading tags within the Accessibility Wizard. However, some elements are not currently fully integrated with the wizard, and need to be manually adjusted.

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):

• Small text: Text smaller than 24px (18pts):

  • AA: 4.5:1 and above

  • AAA: 7:1 and above

• Large text: Text bigger than 24px (18pts), or text over 18px (14pts) and bold:

  • AA: 3:1 and above

  • AAA: 4.5:1 and above

• Non-text components (e.g. icons):

  • AA: 3:1 and above

You can adjust the contrast of most site content within the Accessibility Wizard. However, some elements are not currently fully integrated with the wizard, and need to be manually adjusted. Learn more about adjusting color contrast.

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

The wizard may identify elements and content on the page that are not fully accessible to site visitors. Depending on the element type, you may be able to replace it with an alternative from the Add Elements panel. If there are no suitable options available, we recommend removing it from the site.

Some site visitors may have one or more disabilities or conditions that impact their vision and / or hearing. You can ensure media files are accessible providing alternatives (e.g. transcripts and audio descriptions) - making it easier for these visitors to access, understand, and enjoy the content. Learn more about media alternatives.

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.

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.

There may be color contrast on the site that the wizard does not identify. In order to ensure that all site content is clear and visible to visitors, we recommend manually reviewing the contrast of site content, and adjusting it as needed.