Read Me Page
HTML5 / XHTML / WCAG / Section 508 / CSS / Links / Spelling

WCAG 2.0 Level A

Issues due to failing to meet the WCAG 2.0 Level A and US Section 508 accessibility guidelines

Code
Summary
Details
[WCAG2 1.1.1 (A)] When using images, specify a short text alternative
If there is no alternative text, then assistive technologies are not able to identify the image or to convey its purpose to the user. So add an 'alt', 'title', 'aria-label' or 'aria-labelledby' attribute as appropriate. See https://www.w3.org/TR/WCAG20-TECHS/F65.html (displayed in new window).
[WCAG2 1.1.1 (A)] When using the <area> element, specify a short text alternative with the 'alt' attribute
Ensure the <area> element 'alt' attribute value is displayed in response to attaining focus (including keyboard focus), and that this applies when images are loaded and not loaded. See https://www.w3.org/TR/WCAG20-TECHS/H24.html (displayed in new window).
[WCAG2 1.1.1 (A)] When using a text alternative it must be meaningful
If the text in the 'text alternative' cannot be used in place of the non-text content without losing information or function then it fails because it is not, in fact, an alternative to the non-text content. See https://www.w3.org/TR/WCAG20-TECHS/F30.html (displayed in new window).
[WCAG2 1.1.1 (A)] The 'title', 'aria-label' and 'aria-labelledby' attributes should be missing or empty
When using <img>, it is valid to have an empty 'alt' attribute for images that have no content, but the 'title', 'aria-label' and 'aria-labelledby' attributes should be missing or empty as well. See https://www.w3.org/TR/WCAG20-TECHS/H67.html (displayed in new window).
[WCAG2 1.1.1 (A)] Applets should have a text alternative in an 'alt' attribute and in the body text
When using <applet>, you should provide an 'alt' attribute with a non-blank value and provide a text alternative in the body text of the applet. See https://www.w3.org/TR/WCAG20-TECHS/H35.html (displayed in new window).
[WCAG2 1.1.1 (A)] Objects should have a text alternative
When using <object>, you should provide a text alternative in the body text of the object. See https://www.w3.org/TR/WCAG20-TECHS/H53.html (displayed in new window).
[WCAG2 1.1.1 (A)] Do not use the 'alt' attribute here
Although HTML may allow the 'alt' attribute here, it should only be used on image submit buttons. User agent support for this attribute on other types of form controls is not well defined. Other mechanisms are available to label these controls. See https://www.w3.org/TR/WCAG20-TECHS/H36.html (displayed in new window).
[WCAG2 1.1.1 (A)] Use 'alt' text for short descriptions
The 'alt' text you specified was at least 100 characters long. For long descriptions you should use the 'longdesc' (if available) or 'aria-describedby' attributes, or a separate descriptive link. See https://www.w3.org/TR/WCAG20-TECHS/H45.html (displayed in new window).
[WCAG2 1.1.1 (A)] Use an 'aria-label' to provide an accessible name
The button label used may not indicate the intended use for unsighted users. Use an 'aria-label' to make its purpose clear. See https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html (displayed in new window).
[WCAG2 1.1.1 (A)] When using a text alternative it must not include ASCII art or smileys
If the text in the 'text alternative' when read aloud does not sound meaningful then it fails because it is not, in fact, an alternative to the non-text content. See https://www.w3.org/TR/WCAG20-TECHS/F72.html (displayed in new window).
[WCAG2 1.1.1 (A)] Embedded objects should have a text alternative
When using <embed>, specify a short text equivalent with the 'alt', 'title', 'aria-label' or 'aria-labelledby' attribute. See https://www.w3.org/TR/WCAG20/#text-equiv (displayed in new window).
[WCAG2 1.1.1 (A)] Is the 'alt' text deliberately empty?
When using <img>, it is valid to have an empty 'alt' attribute for images that have no content; such as spacers and parts of larger images that have been broken up or used for other layout purposes. You may wish to check that in this case the 'alt' text has not simply been forgotten. See https://www.w3.org/TR/WCAG20-TECHS/F30.html (displayed in new window).
[WCAG2 1.1.1 (A)] When using images, specify a short text alternative with the 'alt' attribute
If there is no 'alt' attribute, then assistive technologies are not able to identify the image or to convey its purpose to the user. This is only a warning and not an error because of the presence of the 'generator-unable-to-provide-required-alt' attribute. See https://www.w3.org/TR/WCAG20-TECHS/F65.html (displayed in new window).
[WCAG2 1.1.1 (A)] Use 'alt' text for short descriptions
The 'alt' text you specified was at least 75 characters long. For long descriptions you should use the 'longdesc' (if available) or 'aria-describedby' attributes, or a separate descriptive link. See https://www.w3.org/TR/WCAG20-TECHS/H45.html (displayed in new window).
[WCAG2 1.1.1 (A)] The corresponding <noembed> element is missing or misplaced
For each <embed> element you should provide either a nested <noembed> element or a <noembed> element immediately following it. See https://www.w3.org/TR/WCAG20-TECHS/H46.html (displayed in new window).
[WCAG2 1.1.1 (A) Is the 'aria-label' text deliberately empty?
The 'aria-label' attribute is used to provide a label for objects that can be read by assistive technology, but in this case it has been found to be empty. You may wish to check that the aria-label text has not simply been forgotten. See https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html (displayed in new window).
[WCAG2 1.1.1 (A)] Duplication of alternative text
Two nearby images with the same alternative text, often indicates redundancy. Consider removing the alternative text from one of them, especially if they are grouped together. See https://www.w3.org/TR/WCAG20-TECHS/G196.html (displayed in new window).
[WCAG2 1.1.1/1.3.1/3.3.2/4.1.2 (A)] User interface controls without a label should have an accessible name
Use the 'title', 'aria-label' or 'aria-labelledby' (or where appropriate 'value') attributes to label form controls when the visual design cannot accommodate the label (for example, if there is no text on the screen that can be identified as a label) or where it might be confusing or not possible to use a label. User agents, including assisting technology, can use these attributes. See https://www.w3.org/TR/WCAG20-TECHS/F68.html (displayed in new window).
[WCAG2 1.1.1/2.4.4 (A)] Link text is missing
Describe the purpose of a link by providing descriptive text as the content of the <a> element, or provide an 'aria-label' or 'aria-labelledby' attribute. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive. See https://www.w3.org/TR/WCAG20-TECHS/H30.html (displayed in new window).
[WCAG2 1.1.1/4.1.2 (A)] Do not use images as frame targets, always point to web pages
Rather than point directly to an image, embed the image in a web page so that if the content of the frame is changed the text-alternative can follow this change. See https://www.w3.org/TR/WCAG20-TECHS/F20.html (displayed in new window).
[WCAG2 1.2.1 (A)] Add a text alternative to describe the audio/visual media
Provide a text alternative to describe the audio/visual media that is being linked to or played by using text within this element, or a 'title', 'aria-label' or 'aria-labelledby' attribute. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html (displayed in new window).
[WCAG2 1.2.1 (A)] Add a parent <video> element to provide better accessibility
The HTML5 <video> element provides better support for captions and text transcripts. So either replace this element with <video>, or wrap it within <video> if you still need to support legacy browsers.
[WCAG2 1.2.1 (A)] Add a parent <audio> element to provide better accessibility
The HTML5 <audio> element provides better support for text transcripts. So either replace this element with <audio>, or wrap it within <audio> if you still need to support legacy browsers.
[WCAG2 1.2.1 (A)] Ensure there is a text description of this audio
Text can be made accessible to everyone. So unless this is a media alternative for text (and is clearly labelled as such), provide a text description or transcript. This may be done by adding a link to the description (immediately following this), or by adding an 'aria-describedby' attribute. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html (displayed in new window).
[WCAG2 1.2.2 (A)] Where possible ensure that captions for video are provided and accessible
If there is a caption track for the video then use the <track> element to refer to it. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html (displayed in new window).
[WCAG2 1.2.2 (A)] Where possible ensure that captions for video are provided and accessible
f there is a caption track for the video then ensure that the video player can display them and they are in sync with the video. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html (displayed in new window).
[WCAG2 1.2.3 (A)] Ensure there is a text description of this video
Text can be made accessible to everyone. So unless this is a media alternative for text (and is clearly labelled as such), provide a text description or transcript. This may be done by adding a link to the description (immediately following this), or by adding an 'aria-describedby' attribute, or with the <video> element if a descriptive track exists, you can refer to it using the <track> element. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html (displayed in new window).
[WCAG2 1.3.1 (A)] The 'summary' and 'caption' are the same
Making the 'caption' and 'summary' the same is unnecessarily confusing. See https://www.w3.org/TR/WCAG20-TECHS/H39.html (displayed in new window).
[WCAG2 1.3.1 (A)] The accessible name and description must be different
The name is used to identify and/or provide a summary, the description describes the table in more detail. The name is taken from 'aria-labelledby' > 'aria-label' > caption > 'title' > 'summary'. The description is taken from 'aria-describedby' > caption > 'title' > 'summary'. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html (displayed in new window).
[WCAG2 1.3.1 (A)] Invalid value for 'scope' attribute
The 'scope' attribute must have one of the following values: row, col, rowgroup, or colgroup. See https://www.w3.org/TR/WCAG20-TECHS/H63.html (displayed in new window).
[WCAG2 1.3.1 (A)] Unique accessible name required. See matching tag on line: LINE_NUMBER
Data tables must have unique accessible names to help identify them and to differentiate between each table on the page. The accessible name is provided by 'aria-labelledby' > 'aria-label'> caption > 'title' > 'summary'. If two tables contain the same information then number them in the accessible name. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html (displayed in new window).
[WCAG2 1.3.1 (A)] For complex data tables explicitly associate data cells and header cells
For complex data tables you must use markup to explicitly associate data cells and header cells, and no such markup was found. See https://www.w3.org/TR/WCAG20-TECHS/F91.html (displayed in new window).
[WCAG2 1.3.1 (A)] Nest headings properly (H1 > H2 > H3)
Heading elements must be ordered properly. For example, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Developers should not skip levels or use headings for presentation effects. See https://www.w3.org/TR/WCAG20-TECHS/F43.html (displayed in new window).
[WCAG2 1.3.1 (A)] Associate form controls with <label> tags using the 'id' attribute
Associate labels properly with their controls. See https://www.w3.org/TR/WCAG20-TECHS/F68.html (displayed in new window).
[WCAG2 1.3.1 (A)] Associate <label> tags with form controls using the 'for' attribute
Associate labels properly with their controls. See https://www.w3.org/TR/WCAG20-TECHS/F68.html (displayed in new window).
[WCAG2 1.3.1 (A)] Label text is missing
Associate labels properly with their controls. See https://www.w3.org/TR/WCAG20-TECHS/F68.html (displayed in new window).
[WCAG2 1.3.1 (A)] Associate labels with just one form control
Associate labels properly with their controls. See https://www.w3.org/TR/WCAG20-TECHS/F68.html (displayed in new window).
[WCAG2 1.3.1 (A)] Layout tables cannot have data table elements and/or attributes
The role attribute has been used to mark a layout table, but this table contains elements and/or attributes that must only be used with data tables. Layout tables must not have any description and can only contain <tr> and <td> elements. See https://www.w3.org/TR/WCAG20-TECHS/F46.html (displayed in new window).
[WCAG2 1.3.1 (A)] Use CSS for presentation effects, use <em> or <strong> for emphasis
Tags that are being used purely to create a visual presentation effect should not be used. You should use CSS to control layout and presentation so that users and their aids may control it. See https://www.w3.org/TR/WCAG20-TECHS/G140.html (displayed in new window).
[WCAG2 1.3.1 (A)] Reference to a missing or incorrect 'id' attribute
References to other parts of the same document must exist to ensure that Web pages can be interpreted properly. Note that certain attributes such as 'for' can only reference certain elements in the same <form>. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html (displayed in new window).
[WCAG2 1.3.1 (A)] Heading with no content
Ensure that all headings contain informative content. This is necessary because users may navigate or search by headings. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html (displayed in new window).
[WCAG2 1.3.1 (A)] Distinguish between navigation groups using an ARIA label
When the <nav> element is employed more than once on a page, distinguish between the navigation groups by using an 'aria-label' or 'aria-labelledby' attribute. See https://www.w3.org/TR/WCAG20-TECHS/H97.html (displayed in new window).
[WCAG2 1.3.1 (A)] Heading markup should be used if this is a heading
This paragraph of text is all bold/strong or all italic/em text and so will look like a heading on screen. Use heading markup if that is the intention, so that accessibility aids will recognise it as such. See https://www.w3.org/TR/WCAG20-TECHS/H42.html (displayed in new window).
[WCAG2 1.3.1 (A)] Using <pre> is often a bad idea
Using <pre> implies the content has structure, which screen readers may not be able to convey. If the structure is important then consider using other markup that screen readers can properly interpret such as lists or tables, or provide alternative text to inform users about the structure. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html (displayed in new window).
[WCAG2 1.3.1 (A)] Provide an accessible description for complex data tables
Provide either a <caption> or use 'aria-describedby', 'title' or 'summary' attributes to describe the table. This must be a proper description and not a short one. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html (displayed in new window).
[WCAG2 1.3.1/3.3.2 (A)] The <fieldset> element should only be used within a form
Using a <fieldset> outside of a form usually indicates it is being used for presentation effects. See https://www.w3.org/TR/WCAG20-TECHS/H71.html (displayed in new window).
[WCAG2 1.3.1/3.3.2 (A)] The <fieldset> element should be used to group radio buttons and checkboxes
Because groups of radio buttons and checkboxes are multiple controls, it is particularly important that they be grouped semantically so they can be more easily treated as a single control. See https://www.w3.org/TR/WCAG20-TECHS/H71.html (displayed in new window).
[WCAG2 1.3.1/3.3.2 (A)] Each <fieldset> should have a <legend> element that includes a description of that group
The first element inside the <fieldset> should be a <legend>, which provides a label or instructions for the group. See https://www.w3.org/TR/WCAG20-TECHS/H71.html (displayed in new window).
[WCAG2 1.3.1/4.1.1 (A)] Duplicate 'accesskey' value. See matching tag(s) on line(s): LINE_NUMBERS
Access keys must have unique values in order to be useful. See https://www.w3.org/TR/WCAG20-TECHS/F77.html (displayed in new window).
[WCAG2 1.3.1/4.1.1 (A)] Missing 'id' attribute corresponding to the 'axis' attribute
If you specify an 'axis' attribute you must also specify an 'id' attribute and this 'id' attribute must also exist in at least one 'headers' attribute in another table cell. See https://www.w3.org/TR/WCAG20-TECHS/F77.html (displayed in new window).
[WCAG2 1.3.2 (A)] Nested tables are difficult to for screen readers to read
Screen readers can struggle to read out tables sensibly, and nesting them makes them almost impossible to understand when read out. Either combine the tables into one, or use alternative markup to represent them. See https://www.w3.org/TR/WCAG20-TECHS/F49.html (displayed in new window).
[WCAG2 1.3.2 (A)] Layout tables must represent their content in a meaningful sequence
Screen readers can struggle to read out tables sensibly, so it is often better to use alternative markup and CSS to layout content. Try disabling the table markup to see if it still makes sense. See https://www.w3.org/TR/WCAG20-TECHS/F49.html (displayed in new window).
[WCAG2 2.1.1 (A)] Server-side image maps are not keyboard accessible
Server-side image maps are not keyboard accessible. Consider an accessible alternative instead. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html (displayed in new window).
[WCAG2 2.1.1 (A)] <a> or <area> without an 'href' cannot receive keyboard focus
If there is no link then there must be no alternative text provided. So remove any 'alt', 'title', 'aria-label' or 'aria-labelledby' attributes. See https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable (displayed in new window).
[WCAG2 2.1.1 (A)] Non-interactive element with onkey* attribute
You must add a 'tabindex' attribute to non-interactive elements that have onkey* event handlers to make them focusable. Otherwise users will not be able to tab to it to be able to fire the onkey* event. See https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable (displayed in new window).
[WCAG2 2.1.1/2.1.2 (A)] Ensure that there is keyboard support and no trap for interactive elements
All interactive items on a page must provide keyboard support so they can be used without a mouse. In addition you should be able to use the keyboard to exit the item to the web page the item is embedded in, so the user does not become trapped in it. A common way of avoiding traps is to add 'tabindex=-1' to the element so users cannot accidentally tab into it. See https://www.w3.org/TR/WCAG20/#operable (displayed in new window).
[WCAG2 2.1.1/3.2.1 (A)] Do not remove focus when focus is received
The system focus indicator is an important part of accessibility for keyboard users. Removing focus entirely means the content can only be accessed by a pointer device. See https://www.w3.org/TR/WCAG20-TECHS/F55.html (displayed in new window).
[WCAG2 2.2.1 (A)] You should not use a non-zero page refresh or redirect
It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. See https://www.w3.org/TR/WCAG20-TECHS/F41.html (displayed in new window).
[WCAG2 2.2.1 (A)] You should not use a non-zero page redirect
It is important that the time-out is set to zero, to avoid content being displayed before the new page is loaded. See https://www.w3.org/TR/WCAG20-TECHS/F40.html (displayed in new window).
[WCAG2 2.2.2 (A)] Do not use this tag. Consider <em> or using CSS instead
Using blink causes any text inside the element to blink at a predetermined rate, which cannot be interrupted by the user or disabled. See https://www.w3.org/TR/WCAG20-TECHS/F47.html (displayed in new window).
[WCAG2 2.2.2 (A)] Do not use this tag. Consider an alternative instead
With the <marquee> element there is moving or scrolling content that cannot be paused and resumed by users. Some users with low vision or cognitive disabilities will not be able to perceive the content. See https://www.w3.org/TR/WCAG20-TECHS/F16.html (displayed in new window).
[WCAG2 2.4.1 (A)] Use heading elements to convey structure
Many assistive technologies provide navigation using headings, including skipping navigational links. If your document has any structure you should use heading markup to to convey the structure of the content. Even a single header will make it easier for users. See https://www.w3.org/TR/WCAG20-TECHS/H69.html (displayed in new window).
[WCAG2 2.4.1 (A)] Skip navigation links should be the first link on a page
A skip navigation link was detected but it was not the first link on the page. Unless it is the first link then it may defeat the point for users. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html (displayed in new window).
[WCAG2 2.4.1 (A)] Skip navigation links should not be hidden within images
Hidden skip navigation links may not be accessible. You should consider replacing this with a visible link and using CSS to hide it until the tab key is used. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html (displayed in new window).
[WCAG2 2.4.1 (A)] Add a skip navigation link as the first link on the page
If your document has structure then you should add header elements and/or a skip navigation link to make it easier for accessible users to get to the page's content. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html (displayed in new window).
[WCAG2 2.4.1/4.1.2 (A)] Add a 'title' attribute to facilitate identification and navigation
Title each <frame> and <iframe> to facilitate identification and navigation. See https://www.w3.org/TR/WCAG20-TECHS/H64.html (displayed in new window).
[WCAG2 2.4.2 (A)] Add a <title> tag to the page to describe it
You should always provide a <title> element in the head section that defines in a simple phrase the purpose of the document. See https://www.w3.org/TR/WCAG20-TECHS/F25.html (displayed in new window).
[WCAG2 2.4.2 (A)] Add a concise, meaningful <title> tag to the page to describe it
The <title> should contain a concise, meaningful description, less than 150 characters long. See https://www.w3.org/TR/WCAG20-TECHS/F25.html (displayed in new window).
[WCAG2 2.4.4 (A)] Unnecessary duplication of link text. See matching tag on line: LINE_NUMBER
A 'stuttering' effect occurs when you have two adjacent links with the same link text. Consider combining the links into one and removing any redundant link text. See https://www.w3.org/TR/WCAG20-TECHS/H2.html (displayed in new window).
[WCAG2 2.4.4 (A)] Unnecessary duplication of link text. See matching tag on line: LINE_NUMBER
A 'stuttering' effect occurs when you have attributes or 'alt' text of images within the link with the same link text. Consider removing the 'alt' text of the image where the link text already provides the context for the image. See https://www.w3.org/TR/WCAG20-TECHS/H2.html (displayed in new window).
[WCAG2 2.4.4 (A)] Is the 'title' text deliberately empty?
The 'title' attribute is used to provide additional information to help clarify or further describe the purpose of a link, but in this case it has been found to be empty. You may wish to check that the title text has not simply been forgotten. See https://www.w3.org/TR/WCAG20-TECHS/H33.html (displayed in new window).
[WCAG2 2.4.4 (A)] Identical adjacent links that use different link text may be confusing. See matching tag on line: LINE_NUMBER
If you have adjacent links to the same place with different link text it can be confusing to the user. You should consider combining these into one link and removing any redundant link text. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (displayed in new window).
[WCAG2 2.4.4 (A)] Different links that use the same link text may be confusing. See matching tag on line: LINE_NUMBER
If you have different links with the same link text it can be confusing to the user. So you should either change the link text or add a unique 'title', 'aria-label' or 'aria-labelledby' attribute to each link. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (displayed in new window).
[WCAG2 3.1.1 (A)] Use the 'lang' or 'xml:lang' attribute to denote the primary language of the document
You should always identify the primary natural language of a document. See https://www.w3.org/TR/WCAG20-TECHS/H57.html (displayed in new window).
[WCAG2 3.2.2 (A)] The submit button is missing
You must provide a mechanism that allows users to explicitly request changes of context. The intended use of a submit button is to generate an HTTP request that submits data entered in a form, so it is an appropriate control to use for causing a change of context. See https://www.w3.org/TR/WCAG20-TECHS/H32.html (displayed in new window).
[WCAG2 3.2.2 (A)] Using 'onchange' with selections may prevent keyboard operation
Using 'onchange' with selections may prevent keyboard operation, because the handler fires as the selection is changed using the keyboard. See https://www.w3.org/TR/WCAG20-TECHS/F36.html (displayed in new window).
[WCAG2 3.3.2 (A)] The matching <label> text must appear before/after the control
Associate labels properly with their controls. See https://www.w3.org/TR/WCAG20-TECHS/H44.html (displayed in new window).
[WCAG2 4.1.1 (A)] Duplicate 'id' value found. See matching tag(s) on line(s): LINE_NUMBERS
IDs must be unique within a document to ensure that Web pages can be interpreted consistently. See https://www.w3.org/TR/WCAG20-TECHS/F77.html (displayed in new window).
[WCAG2 4.1.1/4.1.2 (A)] No HTML validation was selected
You should always select a HTML Validation to ensure that the page does not have any issues which may prevent accessibility aids from properly representing the page. See https://www.w3.org/TR/WCAG20-TECHS/H88.html (displayed in new window).

top

WCAG 2.0 Level AA

Issues due to failing to meet the WCAG 2.0 Level AA and US Section 508 accessibility guidelines

Code
Summary
Details
[WCAG2 1.4.3 (AA)] Large text within this element has a low contrast ratio. Detected ratio: RATIO
Ensure that the visual presentation of large text has a contrast ratio of at least 3:1, so that's it's easy to read. Note that our contrast ratio calculation does not account for background images, gradients or text shadows. See https://www.w3.org/TR/WCAG20/#visual-audio-contrast (displayed in new window).
[WCAG2 1.4.3 (AA)] Text within this element has a low contrast ratio. Detected ratio: RATIO
Ensure that the visual presentation of text has a contrast ratio of at least 4.5:1, so that's it's easy to read. Note that our contrast ratio calculation does not account for background images, gradients or text shadows. See https://www.w3.org/TR/WCAG20/#visual-audio-contrast (displayed in new window).
[WCAG2 1.4.3 (AA) Contrast checking was not performed on some text
Some of the text had a partially transparent foreground and/or background colour specified using the rgba() or hsla() functions. Because these colours cannot be properly tested this text has been ignored to prevent false positive and false negative results. So you should perform a manual contrast check on this text.
[WCAG2 1.4.4 (AA)] Use relative, rather than absolute units
Using relative units helps the page to be rendered correctly at different resolutions and allows people with sight difficulties to 'zoom in' to pages to read them. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html (displayed in new window).
E879
[WCAG2 2.4.6 (AA)] Unique accessible name required. See matching tag on line: LINE_NUMBER
Data tables must have unique accessible names to help identify them and to differentiate between each table on the page. The accessible name is provided by 'aria-labelledby' > 'aria-label'> caption > 'title' > 'summary'. If two tables contain the same information then number them in the accessible name. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html (displayed in new window).
E898
[WCAG2 2.4.6 (AA)] Heading with no content
Ensure that all headings contain informative content. This is necessary because users may navigate or search by headings. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html (displayed in new window).
[WCAG2 2.4.6 (AA)] Form control labels must be unique
Use unique labels so that users can distinguish between form controls on the same page. Alternatively, place them within different <fieldset> with unique <legend> labels, because the legend text is read out along with the label text. See https://www.w3.org/TR/WCAG20/#navigation-mechanisms-descriptive (displayed in new window).
[WCAG2 2.4.6 (AA)] Provide descriptive text
Any descriptive text supplied should be clear. See https://www.w3.org/TR/WCAG20-TECHS/G131.html (displayed in new window).
E887
[WCAG2 2.4.7 (AA)] Do not remove focus when focus is received
The system focus indicator is an important part of accessibility for keyboard users. Removing focus entirely means the content can only be accessed by a pointer device. See https://www.w3.org/TR/WCAG20-TECHS/F55.html (displayed in new window).

top

WCAG 2.0 Level AAA

Issues due to failing to meet the WCAG 2.0 Level AAA accessibility guidelines

Code
Summary
Details
[WCAG2 1.4.6 (AAA)] Large text within this element has a low contrast ratio. Detected ratio: RATIO
Ensure that the visual presentation of large text has a contrast ratio of at least 4.5:1, so that's it's easy to read. Note that our contrast ratio calculation does not account for background images, gradients or text shadows. See https://www.w3.org/TR/WCAG20/#visual-audio-contrast7 (displayed in new window).
[WCAG2 1.4.6 (AAA)] Text within this element has a low contrast ratio. Detected ratio: RATIO
Ensure that the visual presentation of text has a contrast ratio of at least 7:1, so that's it's easy to read. Note that our contrast ratio calculation does not account for background images, gradients or text shadows. See https://www.w3.org/TR/WCAG20/#visual-audio-contrast7 (displayed in new window).
W873
[WCAG2 1.4.6 (AAA) Contrast checking was not performed on some text
Some of the text had a partially transparent foreground and/or background colour specified using the rgba() or hsla() functions. Because these colours cannot be properly tested this text has been ignored to prevent false positive and false negative results. So you should perform a manual contrast check on this text.
[WCAG2 1.4.8 (AAA)] You should not use justified text
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). See https://www.w3.org/TR/WCAG20-TECHS/F88.html (displayed in new window).
E887
[WCAG2 2.1.3 (AAA)] Do not remove focus when focus is received
The system focus indicator is an important part of accessibility for keyboard users. Removing focus entirely means the content can only be accessed by a pointer device. See https://www.w3.org/TR/WCAG20-TECHS/F55.html (displayed in new window).
E891
[WCAG2 2.1.3 (AAA)] Server-side image maps are not keyboard accessible
Server-side image maps are not keyboard accessible. Consider an accessible alternative instead. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html (displayed in new window).
E901
[WCAG2 2.2.4 (AAA)] You should not use a non-zero page redirect
It is important that the time-out is set to zero, to avoid content being displayed before the new page is loaded. See https://www.w3.org/TR/WCAG20-TECHS/F40.html (displayed in new window).
E882
[WCAG2 2.2.4/3.2.5 (AAA)] You should not use a non-zero page refresh or redirect
It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. See https://www.w3.org/TR/WCAG20-TECHS/F41.html (displayed in new window).
E867
[WCAG2 2.4.9 (AAA)] Unnecessary duplication of link text. See matching tag on line: LINE_NUMBER
A 'stuttering' effect occurs when you have two adjacent links with the same link text. Consider combining the links into one and removing any redundant link text. See https://www.w3.org/TR/WCAG20-TECHS/H2.html (displayed in new window).
E868
[WCAG2 2.4.9 (AAA)] Unnecessary duplication of link text. See matching tag on line: LINE_NUMBER
A 'stuttering' effect occurs when you have attributes or 'alt' text of images within the link with the same link text. Consider removing the 'alt' text of the image where the link text already provides the context for the image. See https://www.w3.org/TR/WCAG20-TECHS/H2.html (displayed in new window).
P871
[WCAG2 2.4.9 (AAA)] Link text is missing
Describe the purpose of a link by providing descriptive text as the content of the <a> element. The description lets a user distinguish this link from other links in the Web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive. See https://www.w3.org/TR/WCAG20-TECHS/H30.html (displayed in new window).
[WCAG2 2.4.9 (AAA)] Provide descriptive link text
You should always provide a way of allowing users to know the destination from the link text alone. See https://www.w3.org/TR/WCAG20-TECHS/F84.html (displayed in new window).
W861
[WCAG2 2.4.9 (AAA)] Is the 'title' text deliberately empty?
The 'title' attribute is used to provide additional information to help clarify or further describe the purpose of a link, but in this case it has been found to be empty. You may wish to check that the title text has not simply been forgotten. See https://www.w3.org/TR/WCAG20-TECHS/H33.html (displayed in new window).
W869
[WCAG2 2.4.10 (AAA)] Use heading elements to convey structure
Many assistive technologies provide navigation using headings, including skipping navigational links. If your document has any structure you should use heading markup to to convey the structure of the content. Even a single header will make it easier for users. See https://www.w3.org/TR/WCAG20-TECHS/H69.html (displayed in new window).
[WCAG2 3.1.4 (AAA)] Add a 'title' attribute to the element to describe it
Ensure that <abbr> and <acronym> elements have a 'title' attribute that describes the abbreviation/acronym. See https://www.w3.org/TR/WCAG20-TECHS/H28.html (displayed in new window).

top