Wix Harmony Editor: 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 selection / reading order of page elements (i.e., the order in which elements are read by screen readers, and highlighted when using the Tab key).

The DOM order is also impacted by the direction of your site's language. We recommend organizing the DOM order with the wizard to ensure that the reading and visual order of your elements are aligned. Learn more about DOM order and accessibility.

Note: This task is only displayed if the DOM order and site language direction do not match.

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.

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.

The DOM refers to the loading and reading order of elements on your site pages, and is important for visitors using screen readers and other assistive technologies. You can organize the DOM order with the wizard to ensure that the reading and visual order of your elements are aligned. Learn more about DOM order and accessibility.

Note: This task is only displayed if auto DOM is disabled on one or more of the page sections.

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.

The wizard scans most of the site's content. This includes regular site pages, and pages that are part of business solutions (e.g. the Calendar page in Wix Bookings).

However, some of the content on these pages may require manual reviews or fixes. Additionally, some site pages are not scanned / supported by the wizard.

The Accessibility Wizard doesn't support:

• The Content Management System (CMS)

• External and third-party apps

• Velo

• Password protected pages:

  • Learn more about password protecting pages in the Wix Editor.

  • Learn more about password protecting pages in the Studio Editor.

• The side cart

• Checkout pages (Wix Stores, Wix Bookings etc.)

• The Wix Online Programs Thank You page

• Wix Site Search

• Wix Gift Cards

• Wix Music

• Wix Reviews

• Wix Referral Program

• Wix Loyalty Program

• Wix Pricing Plans

• Wix Podcast Player

• Wix Table Reservations

• Wix Restaurant Orders

We recommend going through these pages and apps with our checklist to see how you can make them more accessible.

After using the Accessibility Wizard, there are a few ways you can keep making your site more accessible for visitors:

• Go through our accessibility checklist.

• Use the Accessibility Monitor from the dashboard.

• Consult an accessibility expert.