WP ADA Compliance Online evaluates content for Section 508, WCAG 2.1 Level A and AA Web Accessibility Standards. For each issue that is detected, easy to follow instructions are provided along with error references and links to additional information to improve understanding of the problem.
Since not all issues can be automatically detected, we have included a list of manual checks that are required to reach full compliance. As Web Accessibility standards evolve WP ADA Compliance Online will be updated to include the latest requirements.
A Skip link was not found, is not the first link on the page or points to a non-existent id attribute. Skip links are required to allow screen reader users to bypass navigation links and go directly to the main content. The skip link target id should be the id for the main landmark on the page and should include the H1 for the page. A skip link should be the first link in a page and are normally hidden from view but should become visible when in focus. Include skip navigation links.
A meta element was found to be using a refresh attribute to refresh or redirect after a time limit. People who are blind may not have enough time for their screen readers to read the page before the page refreshes or redirects. Sighted users may also be disoriented by the unexpected refresh. You should remove this element or provide a mechanism for users to stop the refresh. If a mechanism has already been provided this issue may be ignored.
PREMIUM CHECK – Multiple ways should be provided for users to locate information on your website. In order to meet this requirement each page should include a Search box or a link labeled "Search" that takes the user to a search feature. Another way to meet this requirement is to include a link labeled "Site Map" or "Sitemap" that provides links to different sections of the site.
HTML element is missing the language attribute. Without the language attribute the language of each Web page can be programmatically determined. Include a language attribute on the html element. e.g. <html lang="en-US">
Some of the content appears to be in a different language but does not include a lang attribute to distinguish the change in language. Add a lang attribute to the enclosing html tag.
An audio or video element is set to auto play. If any audio plays automatically for more than 3 seconds or video includes motion that lasts for more than 5 seconds a mechanism must be available to pause or stop the media. Switch to text view, locate the affected code and remove the autoplay attribute. If the affected code is an Iframe with an MP3 or MP4 source the Iframe should be replaced with an audio of video tag.
An image map area tag was found to be missing alternate text. Each area tag inside an image map must include an alt attribute with text describing the purpose of the linked area. Locate the affected code and insert an alt attribute for each area tag.
An anchor tag includes a title attribute that duplicates the content within the body of the link, an aria-label or the alt text on an image. This creates redundancy, therefore the title attribute should be removed.
An image was found with invalid alternate text. This could mean that it includes "image of", "graphic of", "link to", "click this image" or a similar phrase that would have no meaning to a screen reader user. It is usually apparent to the user that it is an image or that the image includes a link. If the fact that an image is a photograph or illustration is important, it may be useful to include it in the alternative text and this error can be ignored.
An images was found with alternate text that is the same as the text provided in the image caption or body of a link. This creates redundancy and should be avoided by leaving the alt attribute blank.
Page title is used for more than one page. The first thing screen readers read when a user goes to a different web page is the page title. Good page titles are important to help people know where they are on a website. To avoid confusion for screen reader users, consider using a different page title.")
Page title is blank, missing or invalid. The first thing screen readers read when a user goes to a different web page is the page title. Good page titles are important to help people know where they are on a website. To correct this issues add a title to this page.
An audio or video element may be missing equivalent text. Equivalent text should be provided in the form of a track tag including captions or subtitles or a text transcript may be included instead of using captions or subtitles. If closed captioning is provided, the accuracy of the closed captioning should be verified. If a transcript is provided in some other way or the multimedia includes audio with accurate captions this error may be ignored.
Image is being added using the CSS background-image property. The CSS background-image property provides a way to include images in the document without any reference in the HTML code. The CSS background-image property is intended for decorative purposes only and does not provide a means to associate alternative text. Using background images also makes it possible for color contrast failures to go un-noticed. Verify that the affected images do not include any textual content and that their is enough contrast between the color of the image and any text that is displayed over the background image.
PREMIUM CHECK – An audio or video player from a remote source was found. This is only a problem if equivalent text is not provided in the form of captions, subtitles or a text transcript. Many Youtube videos include closed captioning that can not be identified automatically. For videos with closed captioning, the accuracy of the closed captioning should be verified. If a transcript is provided or the multimedia includes accurate captions this error may be ignored.
A form field was found to be missing labels. Without labels screen reader users may not be able to use the form. Add a label tag with a "for" attribute matching an "id" attribute in the form field. If more than one field requires the same label aria-labelledby may be used instead of a label with the for attribute.
A form label was found to be missing a for attribute or includes a for attribute and no form field id. Each form field should include a label with a for attribute set to the value of the id of the form field. Set the for attribute to the correct field id.
An absolute font size was found. Using your browser, verify that text can be scaled up to 200% without loss of content or functionality. To ensure compatibility with older web browsers consider using relative units (such as percents or ems) to specify font sizes rather than absolute units (such as pixels or points)
No alternate content was found for an embedded object. Add a textual equivalent between the OBJECT elements (e.g. <OBJECT>equivalent text</OBJECT>).
No TITLE attributes found for this frame. Add a TITLE attribute with appropriate text to describe the purpose and/or content of the frame to each FRAME and IFRAME element (e.g. <iframe TITLE="Main Content">). Without a TITLE some screen readers read out the FRAME filename, which is usually meaningless.
An empty heading was encountered. Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion. To correct this issue locate and remove the empty tag.
This page has no headings. This is not a problem if the page does not actually include sections of content but each section of content should begin with an H2 heading element and sub-sections should include subheadings (H3, H4, H5 or H6). Headings should not be used for decorative purposes such as to display text in bold. Check the page for content that should include section headers and add headings as required.
The headings on this page are not nested correctly (ie… H1 before H2, H2 before H3 etc…). Headings communicate the organization of the content on the page and can be used to provide in-page navigation. There should only be one H1 element and it should enclose the page title. Each section of content should begin with a heading H2 element followed by sub-sections marked with subheadings (H3, H4, H5 or H6). Headings should not be used for decorative purposes such as to display text in bold. Edit the page to ensure headings are included in the correct nested order (ie… H1 before H2, H2 before H3 etc…) and that there is only one H1 element and it encloses the page title. The one exception is the home page which may have the website title enclosed in the H1 element.
An empty link was encountered. 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. To correct this issue locate and remove the empty tag. If the link includes an image that is missing alternate text, add alt text to the image.
An anchor tag with an empty href attribute was encountered. If clicking a link results in no action it will create confusion for screen reader users. If no longer needed remove the link or if this link is used as a trigger to display dynamic content such as a menu or accordion this error can be ignored.
A link was encountered with ambiguous link text. Links should make sense out of context. Using a URL as link text or phrases such as "click here", "more", "click for details" are ambiguous when read out of context. Ensure this link is included in a paragraph, list or table cell with preceding text that describes its purpose or is in a table cell with a header that explains the purpose of the link. If a link encloses an image the image alt text should include the purpose of the link and should not include words such as "logo" unless linking to a full size logo. To increase accessibility use existing words or text in your page as the link rather than the ambiguous phrase. (e.g. Rather than click here to view the annual report, use View the annual report.
Image found without alternate text. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable. Each image that conveys meaning or is used as link content must include alternate text unless including the alternate text would create redundancy (e.g. when text is also included in an image caption or text inside the body of a link) or the image is included for decoration. Add alt text to the image.
Image found with empty alternate text. Empty alt text is not a problem if the image does not convey meaning, is not inside an anchor tag, used for form input or is for decoration only. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable. Each image that conveys meaning or is used as link content must include alternate text unless including the alternate text would create redundancy (e.g. when text is also included in an image caption or text inside the body of a link) or the image is included for decoration. Add alt text to the image.
Image found with empty alternate text but non-empty title or arial-label attributes. Empty alt text is not a problem if the image does not convey meaning, is not inside an anchor tag or is for decoration only. If the image includes content that should be read aloud include alternate text unless including the alternate text would create redundancy (e.g. when text is also included in an image caption or as text inside the body of a link). Remove any title or aria-label attributes or add alternate text to the image as applicable.
Table is marked with role="presentation" but has table headings, a summary, caption or other feature that should only be present in a data table. If not a data table and used only for layout remove headings, caption and summary attributes, otherwise
Table without Headers was encountered. If this is a data table, headings and scope should be added to the appropriate cells. If this is not a data table and used only for layout,
Table with header attributes on cells referencing a non-existent header ID was encountered. To correct this issue, associate each data cell with a header cell by adding header attributes that correspond to an id attribute in the header cell.
Table without data cells was encountered. Data tables should have only table headers marked as "Header cells". Header cells are normally in the first row or column of a table and all other cells are normally data cells.
Table with header cell ids that are not used inside a headers attribute was encountered. Associate each data cell with a header cell by adding header attributes that correspond to an id attribute in the header cell.
Complex table was found with header cells that are missing the scope attribute or that includes an incorrect value. Headers cells on tables with more than one header row or column should include a scope attribute. The scope attribute should be set to "Column" if the header applies to data in a column and "Row" if the data is in a row.
An anchor tag is set to open a new window. Opening a new window without first notifying the user can disorient users. Remove the target attribute or add a notice such as (opens in a new window) to the link text or title attribute. CSS may be used to show the notice when the link is active or a small icon may be used inside the anchor tag with the alternate text set to "opens in a new window". (e.g. <a href="http://www.google.com" >Link text <img src="images/newwindow.png" alt="opens in a new window" > <a>.
This page appears to be generating a popup window while loading or by other actions within the page. Opening a new window without first notifying the user can disorient users. Remove the code that is generating the popup or ensure the user is notified prior to the window being opened.
PREMIUM CHECK – A form field triggers a context change without notice. When changes to the value of a field or its focus triggers a new window to open or the form to submit users can become disoriented. Instead of using onchange or onclick attributes on form fields use a submit button.
A page element uses a pointing device event handler but fails to include an equivalent keyboard event handler. Users without vision rely on the keyboard for navigation, without a keyboard event handler they are unable to navigation your pages. To correct this issues add an equivalent keyboad event handler. (i.e… onkeypress, onkeydown, onblur, etc…)
PREMIUM CHECK – An anchor tag was found with the underline removed using a text-decoration style. While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Ensure that all links are visually identifiable via some other means such as location in page, underlined, bolded, italicized, sufficient difference in lightness (minimum contrast of 3:1).
A fieldset was found without a legend. The first element inside the FIELDSET must be a LEGEND element, which provides a label or description for the group.
A nested fieldsets was found. Nesting fieldsets can lead to confusion for screen reader users and should be avoided.
A list appears to include incorrect markup. Bulleted and Numbered lists should use html markup (ie…<ul><ol><li>) rather than numbers and dashes. Without html markup screen readers are unable to determine the relationship of the content. To resolve this issue use the list tools to create a bulleted list or unordered list whichever is appropriate for the situation
An images was found linking to itself. This is not a problem unless the image does not include alternate text indicating the purpose of the link and content of the linked image. Review the alternate text for this image to ensure it clearly conveys the purpose of the link and content of the image. Consider removing the link if it is not required.
A table was found with a summary attribute that duplicates the content inside the caption tag. The summary tag is deprecated in HTML5 and should be removed.
PREMIUM CHECK – An animated image was found. Animated images that repeat non-stop or more than 3 times in one second should be avoided. Check that the image does not repeat nonstop or flash more than 3 times in one second. Consider replacing animated images with static images.
An element was found with an aria-labelledby or aria-describedby attribute referencing an invalid, duplicate or non-existent id. Locate and correct the attribute, remove any duplicate ids or add the missing id.
PREMIUM CHECK – An element was found to not have a contrast ratio of at least 4.5:1 between the foreground and background colors. Verify that both foreground and background colors are specified at some level by stylesheets or through inheritance rules and that the contrast ratio is at least 4.5:1. It is not necessary that the foreground and background colors both be defined on the same CSS rule. Use the WAVE by WebAim color contrast checker for greater accuracy.
A form field has more than one associated label. Screen reading software may not read the appropriate label. Ensure that at most one label element is associated with each form field. If multiple form labels are necessary, use aria-labelledby
An element was found with an html blink tag or having CSS text-decoration: blink applied. When applied it causes any text inside the element to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a preference. The blinking continues as long as the page is displayed. Locate the affected code and remove the blink tag or CSS text-decoration rule.
An element was found to be using extra white space to create padding or other visual formatting. The use of white space between words for visual formatting is not a failure, since it does not change the interpretation of the words but using white space between letters of a word or to create the visual effect of a table are failures. Remove the affected code if necessary and use CSS or tables to display the text.
A CSS style was found to be removing or obscuring visual indications that the link or form field is selected. Change the style to avoid obscuring the focus outline around links or form field. Using a border or outline style that obscures the focus indicator causes problems for keyboard-only users.
An element was found to be using an event handler such as onclick to emulate a link. A link created in this manner cannot be tabbed to from the keyboard and does not gain keyboard focus like other controls and/or links. Change this element to an anchor tag or include role="link" and tabindex="0" as attributes.
An element was found with a tabindex attribute. The tabindex attribute is used to manually specify the order links and form fields should receive focus when using the tab key on the keyboard. Use of tabindex is not always a problem but because its use can become unmaintainable very quickly and it is easily forgotten when content is changed, its use should be avoided. Check that the tab order specified by the tabindex attributes follows relationships in the content or remove the tabindex attribute from your pages.
A layout table with spanned cells was found. Complex tables can result in screen readers reading content in an unintended order which is confusing to screen reader users. Verify that the table content is read in the intended order. Often complex tables can be formatted differently to avoid spanning cells or consider using a CSS based layout to improve accessibility.
A data table was found with multiple header rows. This is not a problem if the second header row is a sub heading of the first one. Ensure the second table header relates to the first one. If it does not, the second table header and its content should be moved to a seperate table.
An empty button was encountered. If a button contains no text, the function or purpose of the button will not be presented to the user. This can introduce confusion for keyboard and screen reader users. Locate and remove the empty tag or add an aria-label or title attribute with descriptive text. If the button includes an image that is missing alternate text, use the edit image option to add alt text to the image.
Image found with non-empty alternate text but hidden from screen reader users using aria-hidden="true" or role="presentation". Since this image is hidden it will be ignored by screen readers. If the image does not convey meaning or if including it would create redundancy you may ignore this alert or alternatively edit the image to remove the alternate text. If the image does convey meaning remove role="presentation" or aria-hidden="true" from the image tag.
PREMIUM CHECK – This form has no fields marked as required. If no fields are required this alert may be ignored. Review the form to determine if required fields as present and if so ensure they are marked in a way other than color such as an asterisk, the word required, or by including aria-required="true" in the form control.
Text was found to be justified. Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). Use either "left" or "right" alignment or remove it all together.
A nested table was found. Nested tables are confusing to screen reader users. Consider moving the nested table outside of the outer table cell.
A link was found with event handlers and no href attribute. Without an href attribute links are ignored by screen readers. To correct this issues set the href value or add a role attribute that is set to "link". (i.e… role="link" or href="http://www.google.com")
A link was found to be inaccessible to keyboard users. Links should be enclosed in an anchor tag and make sense when read out of context. Unless it is an email address the URL itself should never be used as link text as it would be ambiguous to screen reader users. To correct this issue, create clickable links with these urls.
One or more anchor tags were found adjacent to one another with the same link text and destination. This can be confusing to screen reader users. Consider removing redundant links, adding a title attribute with additional descriptive text or combine the links into a single anchor tag enclosing both elements. When combining links that include an image tag the image alt attribute should be set to empty i.e… alt="".
A table header cell contains no text. Table headers associate table data with the correct table header so that screen reader users can understand the data presented. If this is a header cell, include text in the cell to describe the column or row. If it is not a table header, change the <th> tag to <td> and remove any scope attributes.
Related form fields were found to not be grouped using a fieldset and legend. This is not a problem if the label includes a sufficient description but often simple one word answers such as "Yes" or "No" are used and do not provide enough information for complete understanding. Ensure the label text provides clear understanding of its purpose. When additional descriptive text is required it can be included in the field label or may be added by wrapping related form fields in a fieldset with a legend to provide the additional instruction.
An anchor tag points to non html content such as to a PDF or MS Word document. Unless authored with accessibility in mind these files often have accessibility issues or may be opened in a separate application causing confusion for users. Edit the link to add a notice such as (PDF) to the link text or title attribute. Ensure that the document complies with accessibility standards. ADA compliance for these documents must be verified using the native software such as Adobe Acrobat or MS Word.
PREMIUM CHECK – This page does not appear to include an option to allow users to report accessibility problems on the website. While not a violation, a link should be provided to a page that describes your efforts to meet accessibility standards and that includes a link to an accessible form or phone number to report problems. Enable the Web Accessibility Widget to quickly resolve this issue.
An embed tag was found. Embed tags must include a title attribute containing alternate text however most screen readers ignore the title attribute on embed tags resulting in inaccessible content. Switch to text view and change the embed tag to iframe.
An empty option tag was encountered. Locate and remove the empty tag or add an aria-label or title attribute with descriptive text.
One or more images were found with identical alt text. Alt text should be unique and accurately describe the content of the image. Edit the alt text for each image to provide unique and descriptive alternate text. If the images are included in a slideshow and are for decoration only, do not provide information and are not enclosed in links, remove the alt text or add role="presentation" to the image tag. Alternatively the slideshow may be hidden from screen reader users using aria-hidden="true".
PREMIUM CHECK – A link was found to not have a contrast ratio of at least 3:1 between it and the surrounding text. Ensure all links are visually identifiable via some other means such as location in page (i.e…menu), underlined, bolded, italicized, sufficient difference in lightness (minimum color contrast ratio of 3:1). If color difference is used, a visual highlight must be used when hovering over the link. Acceptable effects include underline, bold or italics or increased font size.
PREMIUM CHECK – This page is missing one or more required landmark regions. Landmark regions programmatically identify sections of a page and allow assistive technology users to navigate to various sections of the page. Not all landmark types will be applicable to every page and it is not necessary to add landmarks if they are not applicable to a page but normally each page will have at least one banner, navigation, main and contentinfo region. Other regions that may be applicable include complementary, form and search. If more than one landmark of the same type exists the aria-label attribute should be used to describe its purpose. Landmarks may be added using either html5 elements or the role attribute. Review the page structure and add any applicable landmarks.
PREMIUM CHECK – One or more landmarks were found without proper labeling. Form landmarks should be identified using the aria-labelledby attribute set to the id of a visible heading element (e.g. an h1-h6 element) or if more than one landmark of the same type exists the aria-label attribute should be used to describe the purpose of each landmark. Refer to the affected code for more details. Correctly label any applicable landmarks. The autocorrect feature found on the content filters tab may also be used to add labels to landmarks.
PREMIUM CHECK – This navigation menu may not be fully accessible to screen reader users. View the affected code for specific instructions. Verify that the menu is marked up using list markup (ul and li). If a link to the current page is included in the menu, ensure that it includes the aria-current attribute and that CSS is used to visually identify the page as selected. Ensure links that open a submenu include a visual indication that they open a submenu and aria-expanded attributes. When activated the triggering links aria-expanded attribute must change to "true", when deactivated it must change back to "false". Ensure submenus do not open when tabbing to a link, if the triggering link is used to open a webpage in addition to opening a submenu a seperate button must be used to trigger the submenu. Ensure that the "enter" or "space" key can be used to open submenus without triggering a link to open.
PREMIUM CHECK – One or more adjacent anchor tags were found with the same link text but with different destinations. Ensure this link is included in a paragraph, list or table cell with preceding text that describes its purpose or are in a table cell with a header that explains the purpose of the link. Consider changing the link text to distinguish the links from one another or add a title attribute with supplemental text. The aria-label attribute may also be used and will replace the link text for screen readers.
PREMIUM CHECK – An unlabeled dialog or dialog that may be missing required markup was found. Include an aria-label attribute with descriptive text or use aria-labelledby set to the id of a heading inside the dialog to provide the necessary label. Verify that the dialog element includes the attribute role="dialog". The following additional requirements apply to modal dialogs: Verify that the dialog element includes the attribute aria-modal="true". When the dialog is activated, check that focus is set to an element in the container. When the dialog is active, check that focus is never set to an element that is not in the container. When the dialog is deactivated, check that focus is set to the control that originally activated the dialog.
An element was found to have focus removed by a script when focus is received. Use the keyboard to verify that you can get to all interactive elements. Check that when focus is placed on each element, focus remains there until user moves it.
Manual checks are checks that can not be completed automatically. Visit the linked reference to learn more about the requirement or choose Read More for a complete description and information on how to correct the issue.
F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS.
F7: Failure of Success Criterion 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks for more than five seconds.
F8: Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important sound effects.
F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type.
F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image.
F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location.
F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information
F31: Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages.
F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized.
F58: Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically redirect pages after a time-out
F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link.
F66: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages.
F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information.
F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured.
F70: Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup. Verify that elements have complete start and end tags, are nested according to their specifications, do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features. Use the free html validator plugin to identify and correct these errors. HTML validator links are also included on the page/post list as well as the WordPress editor screen.
F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative.
F74: Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative
F75: Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page.
Broken links are a common problem on websites. While not specifically identified as a violation, broken links loosely violate principle 2 – Operable and may result in content on your website not being evaluated for accessibility by the WP ADA Compliance plugin. Consider installing a link check plugin to monitor and correct broken links.
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Logotypes: Text that is part of a logo or brand name has no contrast requirement. Choose "Evaluate with Wave" under the Web Accessibility tab and then click on the "Contrast" tab.