ADA Errors: | Related to: | Accessibility Checker will return error if: | Why fix this? | How to fix: |
This element contains CSS-generated content. | CSS | CSS element does not have image text alternative. | This element uses CSS-generated content. CSS-generated content tends to behave unpredictably in some screen readers and could be hidden in certain high-contrast modes.
If the content is intended to convey meaning to users, add it to the actual page content to make it more accessible to assistive technology. If the content is intended to be purely decorative apply `aria-hidden="true"` to the element. | Provide a text alternative for CSS images which convey content |
This actionable element is smaller than the minimum required size. | CSS | Content may not be legible. | This actionable element is smaller than the stated minimum defined by all mobile platform developer guides. Minimum sizes for actionable elements ensure that those elements can be operated by people with vision, motor, and cognitive disabilities.
Even if this system is not explicitly intended for mobile use, it should be enlarged with CSS to meet minimum requirements and improve usability for users with vision, motor, and cognitive disabilities. | Ensure content is legible. |
This long string of text is in all caps. | Font | Text may not be legible. | This element contains a long passage of text that is capitalized either in the text itself or via CSS text-transform. Capitalized text can be very difficult to read for users with dyslexia. | Ensure content is legible.
Modify this passage of text so that it is no longer all in upper-case. Changing this to sentence case will result in significant improvements in readability. |
Contrast | Font color | Very low contrast between text and background colors. | Adequate contrast of text is necessary for all users, especially users with low vision. | 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. |
This element has insufficient color contrast (Level AA). | Font color | Color contrast is insufficient. | This element has insufficient contrast between the foreground color (the text) and the background color when measured against the WCAG 2.0 Level AA requirements.
Sufficient color contrast is important for users who have low-vision or are color-blind because text with a low contrast ratio may be difficult or impossible for such users to see. Increase the contrast of this content.
This can be done by adjusting the color(s) used by either the foreground content or background content – or both. | Provide sufficient color contrast
Avoid using color as the only visual means of conveying information |
This long string of text is in italics. | Font formatting | Text may not be legible. | This element contains a long passage of text that is italicized. Long strings of italicized text can be very difficult for people to read especially those with dyslexia. | Ensure content is legible.
Modify this passage of text so that it is no longer italicized. This will result in significant improvements in readability. |
Very small text found. | Font size | Text may not be legible. | This text's CSS `font-size` is set very small. This text is going to be difficult to read especially for those who are partially sighted or have low-vision. | Ensure content is legible.
Update the CSS `font-size` value to use a larger value. |
Suspicious use of multiple headings | Heading | Multiple sequential headings of the same level with nothing in between. | Headings are used by some users as a way of understanding the structure of the page's content. When the heading structure is malformed users will be unable to rely on them as a wayfinding cue.
| Structure content appropriately through headings
Ensure that the heading structure of the page makes sense and that headings properly convey the structure of the page. |
CSS underline on text has been detected that is not a link. | Hyperlink | Text may not be legible. | The text in this passage has been styled to display underlined but it is not a link. Underlined text on the web or on apps is universally accepted as signifying that the relevant text is a link.
Applying underline to text that is not a link is likely to confuse many users and especially people with cognitive impairments learning disabilities or dyslexia. | Ensure content is legible.
Remove the underlining from this passage of text. |
Link empty | Hyperlink | A link contains no text. | If a link contains no text the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users. | Remove the empty link or provide text within the link that describes the functionality and/or target of that link. |
This link has no text inside it. | Hyperlink | Link text and alternate text for any images that are used as links does not describe the the destination or purpose of the link. | The text inside of a link informs the user of the purpose or destination of the link. Because this link has no text, users will not know what the link does or where it takes them.
This poses a problem for users of screen readers and voice dictation. | Make sure that link text (and the alternate text for any images that are used as links) describes the destination or purpose of the link.
Add text within this link to make it usable and understandable for all users. |
Link redundant | Hyperlink | Adjacent links go to the same URL. | 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. | 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="). |
These links have the same text but different destinations. | Hyperlink | Information may not be clearly conveyed. | This link has the same text as another link that goes to a different place. Using the same text for multiple links which point to different pages is ambiguous and may be confusing for users reliant on assistive technology or may have a cognitive disability.
Link text should tell the user where they will go if they follow the link. | Don't reuse the same link text for links that have different destinations
If two links on a page go to two different destinations, use different link text that accurately and concisely describes their destination. |
When links point to an on-page anchor the anchor must exist. | Hyperlink | In-page links do not point to actual location on page | This link points to a target that does not exist on the page. In-page links must point to an actual location on the page.
When an internal page link refers to an element on the page the target element should exist and be focusable. Otherwise, activating the link with the keyboard will scroll the page, but will not move the focus position. | Use the `a` element for links and make sure that each link has a valid `href` attribute.
Ensure the link points to a target or if there is no intended target remove the link |
Link internal broken | Hyperlink | A link to another location within the page is present but does not have a corresponding target. | A link to jump to another position within the the page assists users in navigating the web page but only if the link target exists. | Ensure that the target for the link exists or remove the the same-page link. |
Alt redundant | Image | The alternative text for an image is the same as nearby or adjacent text. | Alternative text that is the same as nearby or adjacent text will be presented multiple times to screen readers or when images are unavailable. | Change either the alternative text or the adjacent text to eliminate the redundancy. In most cases you can give the image empty/null alternative text (alt=") because the content of the image is already provided in context through text.
Linked images may often be combined with the adjacent text into one link in which case the image may be given null/empty alternative text (alt="). |
This list item has no meaningful content. | List | Empty markup | This `<li>` element does not appear to contain any meaningful content. It may be being used for purely presentational purposes. Lists provide an important way for users of assistive technology to access structured information.
Using lists for presentation purposes only disrupts the content order for users of assistive technology. If the list item is intended to have no content and be used for presentation purposes only, remove it and use CSS to achieve the same effect semantically. | Use list markup (such as `ol` `ul` and `dl`) for lists and any sub-lists and ensure list markup is appropriate for the content being conveyed |
List possible | List | Text is structured like a list but lacks proper list semantics. | Ordered and unordered lists when properly defined provide useful information to users such as an indication of the list type and number of list items. When text alone is used to present list structures and content, these benefits are lost. | If list content is presented use <ul> or <ol> markup to semantically define the list. |
This list item element is empty or has no usable text in it. | List | Empty markup | This list item element is empty or has no usable text in it. Assistive technologies rely on content in list items to correctly announce the number of list items and their content. | Avoid empty markup
If the list item is intended to convey content ensure that it is not empty. If it is not intended to convey content remove the list item. |
This text is justified. | Paragraph formatting | Paragraphs are justified. | This text has been styled with CSS to display as justified. Justified text causes readability problems for people with visual and learning disabilities.
Long passages of fully justified text creates inconsistent spacing between word and letter boundaries that can make reading justified text very difficult. | Avoid using justified text
Ensure that text is not styled to be fully justified (aligned to both the left and the right margins). |
These table headers are blank. | Table | Information in table cells may not be clearly conveyed | This table-header cell is blank. Blank `th` elements can often create confusion when they become announced by assistive technologies. | Avoid using empty table headers
When you use `th` elements they should not be empty and they should have text within them that tells users what sort of content they label. For `th` cells that are intentionally blank change them to `td`. If this is meant to be a header put some informative content within it. |
This `<table>` has only table header cells. | Table | Information in table cells may not be clearly conveyed | This `<table>` has only `<th>` elements. Often this means that the table's headers do not exist in the same `<table>` as the relevant data. When data tables do not have appropriate structural headers and attributes it may be more difficult for assistive technology users to navigate the table and to understand the relationships between cells. | Ensure that tables that have header cells also have data cells.
When you're creating scrollable or sortable tables make sure that their header cells are in the same table as their data cells |
This `<table>` is too complex. | Table | Information in table cells may not be clearly conveyed | The structure of this `<table>` is very complex. Understanding the content and layout of this `<table>` may be too difficult for users especially screen reader users who lack the visual context to understand the layout and relationships between the data in the `<table>`.
| Avoid nesting data tables
Break the `<table>` into two or more `<tables>` with less complex layout each communicating one of the overall points of the larger more complex `<table>`.
Use a sectioning element to wrap these `<tables>` so that it is clear they are related to each other. |
These tables are nested. | Table | Information in table cells may not be clearly conveyed | Tables should not contain sub-tables. Tables are intended to organize sets of data according to their structure. This structure is in turn conveyed to users of assistive technologies.
When you nest tables within other tables those relationships can become difficult or impossible to discern. Ensure that nested tables are not used and that the structure of the table makes sense. | Avoid nesting data tables within another table |
Table layout | Table | A layout table is present. | Layout tables exist merely to position content visually - to create columns insert spacing or align content neatly for sighted users. Their content is not at all tabular in nature.
Layout tables should not be used in HTML5. They can introduce reading and navigation order issues. Screen readers may interpret them as data tables (i.e. announcing column and row numbers) especially if they contain table header (<th>) cells. This introduces significant overhead on screen reader users. | In almost every case layout tables can be replaced with other HTML elements and styled with CSS to achieve the desired visual presentation. If the table contains tabular data provide appropriate header (<th>) cells.
If the layout table remains verify that the reading and navigation order of table content (based on underlying source code order) is logical and give it role="presentation" to ensure it is not identified as a table to screen reader users. |
Table caption possible | Table | Text appears to be a table caption but is not a caption element. | A table caption should be associated with a table using the <caption> element so it will be read by a screen reader with the table content. | If the text is a description of the table associate the text with the table using the <caption> element (<caption> should be the first element within the <table>). |
ADA Suggestions | Related to: | Accessibility Checker will return suggestion if: | Why fix this? | Action |
Overlapping text found | CSS | Text may not be legible. | This page contains overlapping text. Text that overlaps with other text is difficult or impossible to read for many users especially users with low vision or cognitive disabilities. | Adjust the CSS for the overlapping text so that the text no longer overlaps. |
Underline | Font formatting | Underlined text is present. | Underlines almost universally indicates linked text. Consider removing the underline from the non-link text. Other styling (e.g. bold or italics) can be used to differentiate the text. | Unless there is a distinct need for the underlined text remove the underline from it. |
Text small | Font size | Text is very small. | Text which is very small is difficult to read particularly for those with low vision. | Increase the text to a more readable size. |
Th empty | Heading | A <th> (table header) contains no text. | The <th> element helps associate table cells with the correct row/column headers. A <th> that contains no text may result in cells with missing or incorrect header information. | If the table cell is a header provide text within the cell that describes the column or row. If the cell is not a header or must remain empty (such as the top-left cell in a data table) make the cell a <td> rather than a <th>. |
This link opens in a new window without user control. | Hyperlink | Notify the user when links will open new windows or tabs | This link opens in a new window without user control. Opening a new window or new tab unexpectedly can cause confusion for users particularly for blind users and those with low vision cognitive impairments or learning disabilities. | Notify the user when links will open new windows or tabs.
Avoid opening links in new windows or tabs. If it is unavoidable give the user warning via text or a properly marked up and appropriate icon. |
There are no means to skip past repetitive content such as navigation links. | Hyperlink | Give users a way to skip past repetitive navigation links and make sure the location is relevant | No means to skip past repetitive content such as navigation links was found. Without a way to easily bypass large sections of repetitive content (page navigation sidebars etc.) navigating using text-to-speech software is tedious and time-consuming.
A skip link placed high up in the document source order will allow users to bypass repetitive content and jump to the page's main content area. | Give users a way to skip past repetitive navigation links and make sure the location is relevant |
The layout or sizing of this page causes horizontal scrolling. | Objects | Layouts or objects result in horizontal scroll. | This page is too wide causing horizontal scrolling (at the tested viewport size). Horizontal scrolling will cause difficulties for users with low vision especially if they have their monitor set to a low resolution. | Avoid layouts that result in horizontal scroll
Review HTML CSS and page element sizes to ensure 100% width is not exceeded. |
Text justified | Paragraph formatting | Fully justified text is present. | Large blocks of justified text can negatively impact readability due to varying word/letter spacing and 'rivers of white' that flow through the text. | Remove the full justification from the text. |
This paragraph element is empty or has no usable text in it. | Paragraph formatting | Markup is empty. | This paragraph element is empty or has no usable text in it. Empty paragraph elements are often used for layout control rather than conveying content. Assistive technologies do not ignore empty paragraphs and can announce them as being blank which can be confusing and disorienting for users. | Avoid empty markup
If the paragraph is intended to convey content ensure that it is not empty. If it is intended to control layout only remove it and use CSS instead. If it is not intended to convey content or control layout remove it. |
Multiple consecutive `<br>` tags next to each other simulating paragraphs. | Paragraph formatting | Content may not be easily read or understood | This section of code contains multiple consecutive `<br>` elements probably used to simulate paragraphs or add whitespace. `<br>` elements are often announced as "blank" for users of text-to-speech software multiple times in sequence which increases cognitive load for these users.
Also it will not identify these sections as paragraphs. Remove the `<br>` elements. Replace them with `<p>` elements and use CSS to control whitespace. | Ensure content is easy to read and understand |
This `<table>` does not have any headers. | Table | Information in table cells may not be clearly conveyed | To be accessible to assistive technology as navigation tools a hypertext link must have a valid `href` attribute. An empty `href` attribute does not provide a valid navigation target and is inaccessible. It is important to use `<th>` for cells that are table headers instead of `<td>` to semantically associate the header cells with the columns or rows of data cells that they label. | Provide headers for data tables
Ensure that tables intended to display tabular data have header cells as well as data cells. |
This `<th>` element is not marked up to associate the `<table>` header cell with related data cells. | Table | Information in table cells may not be clearly conveyed | This `<th>` element is not marked up to associate the `<table>` header cell with related data cells. Users of assistive technology rely on the `<th>` elements of a `<table>` to obtain information necessary to understand the table.
Either the `scope` attribute should be applied to the `<th>` with an appropriate value or `id` and `headers` attributes should be used to programmatically connect the appropriate header and data cells. | Provide markup to convey the relationships between header cells and data cells |
The headers in this `<table>` don't exist or are not correctly structured. | Table | Information in table cells may not be clearly conveyed | This `<table>` does not have headers structured to meaningfully convey the relationship between header cells and data cells. A `<table>` without structural markup to differentiate and properly link header and data cells creates accessibility barriers for user of assistive technology including screen readers which rely on headers to give users proper context and custom stylesheets which rely on headers to render tabular data in accessible formats.
For simple tables use the `scope` attribute to declare the scope of the header (usually `row` or `col`). For a complex table identify the relationship using `id` and `headers` attributes. The `<th>` element should have an `id` attribute. The corresponding data cells should have `header` attribute values that correspond to the relevant `<th>` element's `id`. | Provide markup to convey the relationships between header cells and data cells |
This is an implicit table header. | Table | Information in table cells may not be clearly conveyed | The text in these table cell is visually styled to look like table headers instead of using proper table header markup with `<th>` elements. When data tables do not have appropriate structural headers and attributes it may be more difficult for assistive technology users to navigate the table and to understand the relationships between cells. | Provide headers for data tables
If these table cells are intended to be headers use `<th>` elements. |
Roles and Permissions: Please note that Administrators, Staff and Guest Contributors all have the ability to run compliance checks. However, a Guest Contributor, is specifically limited to running and resolving ADA errors/suggestions for documents/sections they have been given access to. Read below to learn more!
