Accessability Testing

 

Level	Issue	Description
A	Decorative and spacer images must have a null alt attribute.	Images used for decoration only should have alt='' or role=presentation so they can be ignored by screen readers.
A	Identify row and column headers in data tables using th elements, and mark layout tables with role=presentation.	Data tables allow screen reader users to understand column and row relationships. Layout tables read cells as a series of unrelated paragraphs with no tabular structure. Without th or role, screen readers apply heuristics to decide whether a table is a layout table or data table. These heuristics vary greatly between screen readers, and are affected by browser being used, window size, and font size (so the outcome is very unpredictable without th or role). If a data table has headers marked up using td, then change these to th. If a data table has no headers, add th elements describing each row and/or column. If the table is only used for layout add role=presentation to the table element.
A	img elements must have an accessible name.	Add an alt attribute describing the image, which screen readers voice instead of the image. Spacer images and purely decorative images should use alt="" without any global ARIA attributes. Do not use alt text containing only spaces since that's voiced as an unlabeled image.
A	This page uses nested tables, which do not make sense when read in a screen reader.	Add role='presentation' if the inner table is a layout table, otherwise modify the inner table to present the same data without nesting tables.
A	Removing the underline from links makes it hard for colorblind users to see them.	Remove the text-decoration:none property from your link styles, or add other style attributes in addition to color changes to make links visible to people without color vision.
A	Use semantic markup like strong instead of using the CSS font-weight property.	Use the strong element instead of the span element for bold text.
A	Use HTML headings instead of applying CSS heading styles to non-headings.	Screen reader users rely on headings to navigate within pages. Either add role=heading with aria-level or use h1- h6 elements to identify the element as a heading to screen readers
AA	If you set any of the colors on the body or a elements you must set all of them.	In HTML the color attributes are text, bgcolor, link, alink and vlink. In CSS the attributes are color and background-color. Some users have browser defaults set to white text on a black background, so setting one color without setting the others can result in black text on a black background. 1.4.3 1.4.6 1.4.8 The colors used are: color: rgb(0,0,0) from browser settings and background: rgb(245,245,245).
AA	Avoid specifying a new window as the target of a link with target=_blank.	Displaying new windows without warning can be very confusing to non-sighted and mobile users. Some screen readers and mobile devices give very little indication a new tab or window has opened. If you cannot avoid displaying a new window, insert an "opens in a new window" warning into the link text or add the warning to the link using a title attribute or ariadescribedby attribute.