"a_links_dont_open_new_window","Links should not open a new window without warning","
Links which open a new window using the ""target"" attribute should warn users.
<a href=""webpage.html"">View this page</a>
<a href=""webpage.html"">View this page (opens in new window)</a>
Because many users of screen readers use links to navigate the page, providing links with no text (or with images that have empty 'alt' attributes and no other readable text) hinders these users.
","1" "area_dont_open_new_window","No ""area"" elements should open a new window without warning","No area
elements should open a new window without warning.
<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm"" target=""_blank"" alt=""Human skull""/> </map>
<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm"" target=""_blank"" alt=""Human skull (opens in new window)""/> </map>
All area
elements within a map
should have an ""alt"" attribute.
<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm""/> </map>
<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm"" alt=""Human skull""/> </map>
Links should be descriptive of the content they're linking to, such as 'Project guidelines' rather than 'guidelines.html' or 'Click here'.
<a href=""webpage.html"">Click here</a>
<a href=""webpage.html"">View Project guidelines here</a>
The basefont
tag is deprecated and should not be used. CSS properties should be used instead.
The blink
tag should not be used, as it can hinder some users with cognitive disabilities or photosensitive epilepsy or eyesight issues.
<blink>Important text</blink>
<strong>Important text</strong>
The b
(bold) element provides no emphasis for non-sighted readers. Use the strong
tag instead.
<p>This is <b>really important text</b>.</p>
<p>This is <strong>really important text</strong>.</p>
For content longer than 3000 words, consider splitting it up into multiple documents. This makes it easier for students to navigate, process and retain the information, especially those with memory, concentration, reading or mental health issues.
","3" "css_text_has_contrast","Insufficient text color contrast with the background","Text color should be easily viewable and should not be the only indicator of meaning or function. Color contrast should have at least a 4.5:1 ratio for small text and 3:1 ratio for large text.
","1" "embed_has_associated_no_embed","All ""embed"" elements have an associated ""noembed"" element","Because some users cannot use the embed
element, provide alternative content in a noembed
element.
<embed src=""multimedia.mov""/>
<embed src=""multimedia.mov""/><noembed>Multimedia with <a href=""multimedia.html"">an available transcript</a>.</noembed>
Well-structured documents are easier for all users to navigate. The title of a page should have a heading level of H2, each section should have a heading level of H3, each sub-section should be H4, etc.
","3" "headers_have_text","Headings should contain text","Sighted and screen reader users depend on headings to organize and navigate the content on the page. Headings should not be empty and should represent an accurate outline of the relevant content
","1" "i_is_not_used","The ""i"" (italic) element is not used","The i
(italic) element provides no emphasis for non-sighted readers. Use the em
tag instead.
The i
(italic) element only conveys appearance, wheras the em
element conveys meaning.
<p>This is <i>really important text</i>.</p>
<p>This is <em>really important text</em>.</p>
Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief description of the image for a screen reader user. Note: It should not be the image file name.
","1" "img_alt_is_too_long","Alternative Text is more than the maximum allowed characters","Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. It should be concise, relevant, meaningful, and no longer than 125 characters ideally.
","1" "img_alt_not_empty_in_anchor","Alt text for all img elements used as source anchors should not be empty","Alternative Text (Alt Text) is an alternative (non-visual) way to describe the destination of an image within an anchor link. Please provide a brief description of the image link destination for a screen reader user.
","1" "img_alt_not_place_holder","Images should not have a simple placeholder text as an ""alt"" attribute","Any image that is not used for decorativon or which is purely for layout purposes cannot have an ""alt"" attribute that consists solely of placeholders. Placeholders include:
<img src=""dog.jpg"" alt=""image"">
<img src=""dog.jpg"" alt=""A photograph of a dog"">
Alternative Text (Alt Text) is an alternative (non-visual) way to describe the meaning of an image. Please provide a brief description of the image for a screen reader user. Note: It should not be the image file name.
","1" "img_with_map_has_use_map","Any image with an ""ismap"" attribute have a valid ""usemap"" attribute","If an image has an ""ismap"" attribute, it should also have a ""usemap"" attribute.
","1" "legend_text_not_empty","""Legend"" text should not contain just whitespace","If a legend
element is used in a fieldset, the legend
should not contain empty text.
<fieldset> <legend> </legend> <label for=""name"">Name:</label> <input type=""text"" size=""30"" id=""name""/><br /> <label for=""email"">Email:</label> <input type=""text"" size=""30"" id=""email""/><br /></fieldset>
<fieldset> <legend>Personal Information:</legend> <label for=""name"">Name:</label> <input type=""text"" size=""30"" id=""name""/><br /> <label for=""email"">Email:</label> <input type=""text"" size=""30"" id=""email""/><br /></fieldset>
The marquee
element is difficult for users to read and is not a standard HTML element. Try to find another way to convey the importance of this text.
<marquee>This is really hard to read</marquee>
<strong>This is much easier to read</strong>
If appropriate, add headings to the page to organize the content for sighted and screen reader users. The headings should represent an accurate outline of the content
","3" "object_must_have_embed","Every object should contain an ""embed"" element","Every object
element should also contain an embed
element.
<object data=""movie.mov""></object>
<object data=""movie.mov""><embed src=""movie.mov""></embed></object>
All object
elements should contain a ""title"" attribute.
<object src=""widget.html""></object>
<object src=""widget.html"" title=""A small web widget""></object>
All object
elements should have a ""title"" attribute which is not empty.
<object src=""widget.html"" title=""""></object>
<object src=""widget.html"" title=""A small web widget""></object>
The strike
element is deprecated and should not be used. It provides no text meaning for non-sighted readers. Use the del
(deleted) tag instead.
<p><strike>(10 remaining)</strike> All sold out!</p>
<p><del>(10 remaining)</del> All sold out!</p>
Add a table header because it provides a description of the table structure for sighted and screen reader users.
","1" "table_summary_does_not_duplicate_caption","Table ""summary"" elements should not duplicate the ""caption"" element","The summary and the caption should be different, as both provide different information. A caption
","1"
"table_td_should_not_merge","Tables should have no merged cells","
Tables which contain merged cells are more problematic for accessibility tools such as screen readers to read correctly.
","1" "table_th_should_have_scope", "No row or column scopes declarations found in headers of the table", "Scope declarations in headers organize and define table data by row/column for sighted and screen reader users.
", "1"