Building an accessible site

Making your site accessible

Accessibility: Preparing Your Site Structure

Your site's hierarchy (its structure) helps web browsers and screen readers understand how the site content should be organized. You can add HTML tags to site text to indicate its place in the site's order and provide a clear experience for visitors.

Good to know:

Webpage content is "read" by the DOM order of your site pages. You can check this order and adjust it if needed. Learn more about organizing your site's order.

Recommendations for preparing text

We recommend keeping the following guidelines in mind when preparing site text:

Use HTML tags for your text: Every page should have an H1 heading, and following that, the HTML tags on each page should be sequential. For example, if the main heading on the page is an H1 tag, the subtitle should be H2, and so on. This is so visitors with visual impairments can toggle through your content in a logical order.
The headings should be descriptive: Think of the headings as labels for the text below (this is also important for SEO).
Spacing is important: While editing your text, if you want to break a heading into multiple lines, use the Shift + Enter keys to insert a line break, instead of Enter which creates a new heading element on each line.
Add headings to the page body: H1s added to a site header will appear on all pages where the header is displayed. We therefore recommend adding headings to the page body instead.
Tip: If you have a one-page site with no additional pages, you can ignore this recommendation.

Adding HTML tags to text from your editor

Add HTML tags to site text to define its hierarchy. If you're building a site with the Wix Editor, you can select the tag from the text settings. If you're working with the Studio Editor, you can find it in the Inspector panel. The option is also available in the design options of text in Wix Harmony Editor.

Wix Editor

Select the relevant text in your editor.
Select Edit Text.
Select SEO & Accessibility.
Choose an HTML tag from the drop-down menu.

The design tab of the text settings panel is open. The cursor is clicking the HTML tag drop-down menu.

Studio Editor

Select the relevant text in your editor.
Click the Open Inspector icon
at the top right of the editor.
Click the Design tab
.
Choose an HTML tag from the drop-down menu.

The design tab of the inspector panel is open. The cursor is clicking the HTML tag drop-down menu.

Wix Harmony Editor

Go to your editor.
Select the relevant text element.
Click the All design options icon
on the action bar.
Click SEO & Accessibility.
Select a HTML tag from the drop-down.

The design options panel is open for text in the Harmony Editor. The cursor is clicking the HTML tag drop-down.

Adding HTML tags to text from the Accessibility Wizard

Scan a site with the Accessibility Wizard to find and adjust tags on your text elements. The wizard is available in all of our site builders, so you can improve the accessibility of any site you're working on.

With most text, you can make changes within the wizard itself. However, some text elements (e.g. app text) are not currently fully integrated with the wizard, and may need to be manually adjusted.

Wix Editor

Go to your editor.
Click Settings at the top.
Select Accessibility Wizard.
Select Scan Site.
Click the Detected issues tab.
Select the relevant page.
Click Organize heading structure.
Select the relevant text element.
Depending on whether the text is supported in the wizard, follow one of the below methods. You can also choose whether to update the heading tags yourself, or with our AI tool.

Optimize with AI

Click the Optimize with AI button to resolve all heading tag issues on the page in bulk. This may be especially helpful for pages with multiple heading structure issues, as it saves you from needing to change each one individually.

If the page contains text that isn't supported by the wizard, the AI also suggests manual changes. Click Show me to see the suggestion, and follow the steps in the panel to update the tag.

Note: We recommend checking the heading tags after to make sure everything is correct.

Choose the tag in the wizard

Quickly change the text's tag from the Accessibility Wizard:

Click the Heading tag drop-down.
Select the relevant tag from the drop-down.
Click Apply.

Manually adjust the tag

If the text is not supported in the Accessibility Wizard, you can manually organize its structure from the Settings panel in your editor:

Click the text element in your editor.
Click the Settings icon
.
Go to SEO & accessibility.
Click the Change heading tag drop-down and select the new tag.
Save the site.
Click Scan Again in the Accessibility Wizard to see the reflected changes.

A new heading tag has been selected for a text element. The cursor is clicking Apply.

Studio Editor

Click Site Checker
on the left side of your editor.
Select Fix Accessibility Issues.
Click Scan Site.
Click the Detected issues tab.
Select the relevant page.
Click Organize heading structure.
Select the relevant text element.
Depending on whether the text is supported in the wizard, follow one of the below methods. You can also choose whether to update the heading tags yourself, or with our AI tool.

Optimize with AI

If the page contains text that isn't supported by the wizard, the AI also suggests manual changes. Click Show me to see the suggestion, and follow the steps in the panel to update the tag.

Note: We recommend checking the heading tags after to make sure everything is correct.

Choose the tag in the wizard

Quickly change the text's tag from the Accessibility Wizard:

Click the Heading tag drop-down.
Select the relevant tag from the drop-down.
Click Apply.

A H1 tag has been selected for the text. The cursor is clicking Apply.

Manually adjust the tag

If the text element is not supported in the Accessibility Wizard, organize its structure in your editor. Depending on the element, you may be able to change this option from the Inspector panel, or in the element's settings:

Inspector panel:
1. Click the text.
2. Click the Open Inspector icon
  at the top right of the editor.
3. Go to HTML tag settings.
4. Click the HTML tag drop-down and select the new tag.
5. Save the site.
6. Click Scan Again in the Accessibility Wizard to see the reflected changes.
Settings panel:
1. Click the text element.
2. Click Settings (or the Settings icon
  ).
3. Go to SEO & accessibility.
4. Click the Change heading tag drop-down and select the new tag.
5. Save the site.
6. Click Scan Again in the Accessibility Wizard to see the reflected changes.

Wix Harmony Editor

Go to your editor.
Click your site’s name at the top left of the editor.
Scroll down to Accessibility and click Fix Issues.
Click Scan Site.
Click the page you want to work on.
Click Organize heading structure.
Click the Edit icon
next to the relevant text element.
Depending on whether the text is supported in the wizard, follow one of the below methods.

Choose the tag in the wizard

Quickly change the text's tag from the Accessibility Wizard:

Click the Select a heading drop-down.
Select the relevant tag from the drop-down.
Click Apply.

Manually adjust the tag

If the text is not supported in the Accessibility Wizard, manually organize its structure from your editor. For most text elements, you can change the heading tag from the design options. For text elements that are part of apps (Wix Stores, Wix Forms etc.), you may be able to change the tag from the settings:

Regular text:
1. Click the text element in your editor.
2. Click the All design options icon
  on the action bar.
3. Click SEO & Accessibility.
4. Select a HTML tag from the drop-down.
5. Click Apply.
6. Click Scan Again in the Accessibility Wizard to see the reflected changes.
App text:
1. Click the app widget in your editor.
2. Click the Settings icon
  on the action bar.
3. Click the Design tab.
4. Select the relevant text element.
5. Click SEO & Accessibility.
6. Select a HTML tag from the drop-down.
7. Click Apply.
8. Click Scan Again in the Accessibility Wizard to see the reflected changes.