Accessibility Errors in Google Lighthouse

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

<dl>s do not contain only properly ordered <dt> and <dd> groups, <script>, or <template> elements

<frame> or <iframe> elements do not have a title

<html> element does not have a [lang] attribute

<html> element does not have a valid value for its [lang] attribute

<input type="image"> elements do not have [alt] text

<th> elements and elements with [role="columnheader"/"rowheader"] do not have data cells they describe

<video> elements do not contain a <track> element with [kind="captions"]

ARIA IDs are not all unique

Background and foreground colors do not have a sufficient contrast ratio

Buttons do not have an accessible name

Cells in a <table> element that use the [headers] attribute refer to an element id not found within the same table

Custom controls have ARIA roles

Custom controls have associated labels

Definition list items are not wrapped in <dl> elements

Document doesn't have a <title> element

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children

Form elements do not have associated labels

Form fields have multiple labels

HTML5 landmark elements are used to improve navigation

Heading elements are not in a sequentially-descending order

Image elements do not have [alt] attributes

Interactive controls are keyboard focusable

Interactive elements indicate their purpose and state

Links do not have a discernible name

List items (<li>) are not contained within <ul> or <ol> parent elements

Lists do not contain only <li> elements and script supporting elements (<script> and <template>)

Not all ARIA input fields have accessible names

Not all ARIA toggle fields have accessible names

Offscreen content is hidden from assistive technology

Presentational <table> elements do not avoid using <th>, <caption>, or the [summary] attribute

Some elements have a [tabindex] value greater than 0

The document uses <meta http-equiv="refresh">

The page does not contain a heading, skip link, or landmark region

The page has a logical tab order

The user's focus is directed to new content added to the page

User focus is not accidentally trapped in a region

Visual order on the page follows DOM order

[accesskey] values are not unique

[aria-*] attributes are not valid or misspelled

[aria-*] attributes do not have valid values

[aria-*] attributes do not match their roles

[aria-hidden="true"] elements contain focusable descendants

[aria-hidden="true"] is present on the document <body>

[id] attributes on active, focusable elements are not unique

[lang] attributes do not have a valid value

[role] values are not valid

[role]s are not contained by their required parent element

[role]s do not have all required [aria-*] attributes

[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is greater than 5

[lang] attributes do not have a valid value

To create a [lang] attribute for a short piece of text

‍

1. Go to Webflow Designer

2. Select the text you want to change the language

3. Click on Wrap with Span icon

4. Create a class name such as .language-span-wrapper

5. Click on Settings (S)

6. Click on Custom Attributes

7. Create Name = "lang"

8. Create Value = language code (ES, FR, RU)

9. Click on Save

‍

To create a [lang] attribute for a section

‍

1. Select the Section, give it a class, and change the attribute, as above.

Google Lighthouse says

To ensure correct pronunciation, screen readers use a different sound library for each language they support. Screen readers can switch between these language libraries easily, but only if a web page specifies which language to read for a given piece of content. If the language changes within your page, you must specify a valid BCP 47 language to ensure that the section in the new language is pronounced correctly.