We have detected 7 alerts on this page
These alerts should be looked into and fixing them will help improve the accessibility of your site
- Very low contrast - 7 alerts
Summary: Very low contrast between text and background colors.
Purpose: Adequate contrast of text is necessary for all users, especially users with low vision.
Details: Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text with CSS transparency, gradients, or filters.
Actions: Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
Guidelines: 1.4.3 Contrast (Minimum) (Level AA)
We have detected 7 alerts on this page
These alerts should be looked into and fixing them will help improve the accessibility of your site
- Skipped heading level - 1 alerts
Summary: A heading level is skipped.
Purpose: Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.
Details: A heading level is skipped (e.g., an <h1> is followed by an <h3>, with no intermediate <h2>). Note that an <h1> is not required to be the first heading within the document.
Actions: Restructure the document headings to ensure that heading levels are not skipped.
Guidelines: 1.3.1 Info and Relationships (Level A) - Redundant link - 1 alerts
Summary: Adjacent links go to the same URL.
Purpose: When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.
Details: Two adjacent links go to the same URL.
Actions: If possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt="").
Guidelines: 2.4.4 Link Purpose (In Context) (Level A) - Noscript element - 1 alerts
Summary: A <noscript> element is present.
Purpose: Content within <noscript> is presented if JavaScript is disabled. Because nearly all users (including users of screen readers and other assistive technologies) have JavaScript enabled, <noscript> cannot be used to provide an accessible version of inaccessible scripted content.
Details: A <noscript> element is present.
Actions: Ensure that scripted content is accessible. The <noscript> content will be presented to very few users, but must be accessible if used.
- Redundant title text - 4 alerts
Summary: Title attribute text is the same as text or alternative text.
Purpose: The title attribute value is used to provide advisory information. It typically appears when the users hovers the mouse over an element. The advisory information presented should not be identical to or very similar to the element text or alternative text.
Details: A title attribute value is identical to element text or image alternative text.
Actions: In most cases the title attribute can be removed, otherwise modify it to provide advisory, but not redundant information. Note that the title text may or may not be read by a screen reader and is typically inaccessible to sighted keyboard users.
We have detected 5 features on this page
These features are helping make your page ADA compliant
- Null or empty alternative text - 1 alerts
Summary: Alternative text is null or empty (alt="").
Purpose: If an image does not convey content or if the content of the image is conveyed elsewhere (such as in a caption or nearby text), the image should have empty/null alternative text (alt="") to ensure that it is ignored by a screen reader and is hidden when images are disabled or unavailable.
Details: An image has alt="".
Actions: Ensure that the image does not convey content or that the content of the image is conveyed in nearby text (e.g., a caption).
Guidelines:
1.1.1 Non-text Content (Level A)
- Linked image with alternative text - 3 alerts
Summary: Alternative text is present for an image that is within a link.
Purpose: Including appropriate alternative text on an image within a link ensures that the function and purpose of the link and the content of the image is available to screen reader users or when images are unavailable.
Details: An image element has non-empty alternative text, is within a link, and no other text (or images with alternative text) is present within the link.
Actions: Ensure that the alternative text presents the content of the image and/or the function of the link. If the full content and function of the link is presented in text within the link (an image and a text caption both within the same link, for example), then the image should generally be given empty/null alternative text (alt="") to avoid redundancy.
Guidelines:
1.1.1 Non-text Content (Level A)
2.4.4 Link Purpose (In Context) (Level A)
- Language - 1 alerts
Summary: The language of the document or a page element is identified.
Purpose: Identifying the language of the page or portion of page (if different from the page itself) allows screen readers to read the content appropriately.
Details: A document or an element has a valid lang attribute value.
Actions: Ensure the language is properly identified for the page (e.g., <html lang="en">). If content within the page is in a language different than the page's language, identify it using a valid lang attribute value (e.g., <p lang="fr">).
Guidelines:
3.1.2 Language of Parts (Level AA)
We have detected 17 Structural Elements on this page
- Heading level 1 - 1 alerts
Summary: A first level heading (<h1> element) is present.
Purpose: Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document. First level headings should contain the most important heading(s) on the page (generally the document title).
Details: An <h1> element is present.
Actions: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline.
Guidelines:
1.3.1 Info and Relationships (Level A)
2.4.1 Bypass Blocks (Level A)
2.4.6 Headings and Labels (Level AA)
- Heading level 2 - 5 alerts
Summary: A second level heading (<h2> element) is present.
Purpose: Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document.
Details: An <h2> element is present.
Actions: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline.
Guidelines:
1.3.1 Info and Relationships (Level A)
2.4.1 Bypass Blocks (Level A)
2.4.6 Headings and Labels (Level AA)
- Heading level 3 - 1 alerts
Summary: A third level heading (<h3> element) is present.
Purpose: Headings facilitate page navigation for users of assistive technologies. They also provide semantic and visual meaning and structure to the document.
Details: An <h3> element is present.
Actions: Ensure that the text in question is truly a heading and that it is structured correctly in the page outline.
Guidelines:
1.3.1 Info and Relationships (Level A)
2.4.1 Bypass Blocks (Level A)
2.4.6 Headings and Labels (Level AA)
- Unordered list - 4 alerts
Summary: An unordered (bulleted) list (<ul> element) is present.
Purpose: Ordered lists present a group of related, parallel items. Users of many assistive technologies can navigate by and within lists.
Details: A <ul> element is present.
Actions: Ensure that an unordered (bulleted) list is appropriate for the context. If list items are sequential or numbered, an ordered list (<ol>) is likely more appropriate.
Guidelines:
1.3.1 Info and Relationships (Level A)
- Inline frame - 2 alerts
Summary: An inline frame (<iframe>) is present.
Purpose: The content of an inline frame is read as if it were part of the page that contains it. The content of the iframe must be accessible. A title attribute value for the iframe will generally be read by a screen reader when the iframe is encountered.
Details: An <iframe> element is present.
Actions: Ensure that the content within the iframe is accessible. Optionally, a title attribute value can be added to provide a brief, advisory description of the iframe.
Guidelines:
- Header - 1 alerts
Summary: A <header> element or banner landmark is present.
Purpose: Headers identify page introduction or navigation. They typically surrounds the site or page name, logo, top navigation, or other header content. Headers facilitate page semantics and navigation.
Details: A <header> element or role="banner" is present.
Actions: Ensure the header surrounds and defines page header content.
Guidelines:
1.3.1 Info and Relationships (Level A)
2.4.1 Bypass Blocks (Level A)
- Navigation - 1 alerts
Summary: A <nav> element or navigation landmark is present.
Purpose: The navigation identifies a section of navigation links and can facilitate page semantics and navigation.
Details: A <nav> element or role="navigation" is present.
Actions: Ensure the element defines page navigation. Multiple navigation elements on one page can be differentiated with ARIA labels.
Guidelines:
1.3.1 Info and Relationships (Level A)
2.4.1 Bypass Blocks (Level A)
- Main content - 1 alerts
Summary: A <main> element or main landmark is present.
Purpose: The <main> element or role="main" attribute identifies the main content for the page. This facilitate page semantics and navigation.
Details: A <main> element or role="main"is present.
Actions: Ensure the element surrounds and defines page main content.
Guidelines:
1.3.1 Info and Relationships (Level A)
2.4.1 Bypass Blocks (Level A)
- Footer - 1 alerts
Summary: A <footer> element or contentinfo landmark is present.
Purpose: Footers identify a footer for the page or a page section. It typically identifies authorship, related links, copyright date, or other footer content. Footers facilitate page semantics and navigation.
Details: A <footer> element or role="contentinfo" is present.
Actions: Ensure the element surrounds and defines page or page section footer content.
Guidelines:
1.3.1 Info and Relationships (Level A)
2.4.1 Bypass Blocks (Level A)
We have detected 16 HTML5 and ARIA on this page
- ARIA - 1 alerts
Summary: An ARIA role, state, or property is present.
Purpose: ARIA provides enhanced semantics and accessibility for web content.
Details: An ARIA role, state, or property is present, excluding landmark roles, aria-labelledby, or aria-describedby which are distinct WAVE items.
Actions: Ensure the ARIA role, state, or property is used correctly. Use standard HTML accessibility features when possible. Be aware that support for ARIA is limited in older browsers and assistive technologies.
Guidelines:
4.1.2 Name, Role, Value (Level A)
- ARIA label - 7 alerts
Summary: An aria-label or aria-labelledby attribute is present.
Purpose: ARIA labels define accessible names to be read by screen readers for interface elements. They may be used when HTML associations (label, alternative text, etc.) are not sufficient.
Details: An aria-label or aria-labelledby attribute is present.
Actions: Ensure the aria-label value or element referenced by aria-labelledby provides a descriptive, accurate label. When possible, use standard HTML <label> or other markup to make the association.
Guidelines:
1.1.1 Non-text Content (Level A)
1.3.1 Info and Relationships (Level A)
2.4.6 Headings and Labels (Level AA)
4.1.2 Name, Role, Value (Level A)
2.5.3 Label in Name (Level A)
- ARIA tabindex - 4 alerts
Summary: A tabindex value of 0 or less is present.
Purpose: Tabindex can facilitate keyboard navigation for interactive elements. A tabindex attribute value of 0 places an item into the keyboard navigation order (i.e., you can navigate to it using the Tab key). A value of less than 0 (typically -1) removes an element from the keyboard flow (you cannot Tab to it), but allows it to receive programmatic focus (e.g., via scripting).
Details: A tabindex attribute is present and has a value of 0 or less.
Actions: Ensure that tabindex is being used correctly by navigating and interacting with the elements using only the keyboard. Positive tabindex values specify a distinct tab order and should typically be avoided.
Guidelines:
2.1.1 Keyboard (Level A)
- ARIA alert or live region - 1 alerts
Summary: An ARIA alert role or live region is present.
Purpose: ARIA live regions and alerts can be used to dynamically inform screen reader users of content updates.
Details: A role="alert", role="alertdialog", or aria-live attribute is present.
Actions: Ensure the live region is properly tested and presents important, succinct content updates. A live region should not be used if focus is set to the updated page element.
Guidelines:
3.3.1 Error Identification (Level A)
4.1.3 Status Messages (Level AA)
- ARIA hidden - 3 alerts
Summary: Content is hidden with ARIA.
Purpose: Content hidden with aria-hidden="true" is not presented to screen reader users.
Details: An element with aria-hidden="true" is present.
Actions: Ensure the content is intended to be hidden from screen reader users. The hidden content must not contain any navigable elements (such as links or form controls).
Guidelines:
4.1.2 Name, Role, Value (Level A)
We have detected 7 HTML5 and ARIA on this page
- Very low contrast - 7 alerts
Summary: Very low contrast between text and background colors.
Purpose: Adequate contrast of text is necessary for all users, especially users with low vision.
Details: Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. WCAG requires that page elements have both foreground AND background colors defined (or inherited) that provide sufficient contrast. When text is presented over a background image, the text must have a background color defined (typically in CSS) that provides adequate text contrast when the background image is disabled or unavailable. WAVE does not identify contrast issues in text with CSS transparency, gradients, or filters.
Actions: Increase the contrast between the foreground (text) color and the background color. Large text (larger than 18 point or 14 point bold) does not require as much contrast as smaller text.
Guidelines:
1.4.3 Contrast (Minimum) (Level AA)