"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.

Example

Wrong

<a href=""webpage.html"">View this page</a>

Right

<a href=""webpage.html"">View this page (opens in new window)</a>

","1" "a_must_contain_text","Links should contain text","

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.

Example

Wrong

<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm"" target=""_blank"" alt=""Human skull""/> </map>

Right

<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm"" target=""_blank"" alt=""Human skull (opens in new window)""/> </map>

","1" "area_has_alt_value","All ""area"" elements should have an ""alt"" attribute","

All area elements within a map should have an ""alt"" attribute.

Example

Wrong

<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm""/> </map>

Right

<map name=""anatomymap""> <area shape=""rect"" coords=""0,0,82,126"" href=""skull.htm"" alt=""Human skull""/> </map>

","1" "a_suspicious_link_text","Link text should be descriptive","

Links should be descriptive of the content they're linking to, such as 'Project guidelines' rather than 'guidelines.html' or 'Click here'.

Example

Wrong

<a href=""webpage.html"">Click here</a>

Right

<a href=""webpage.html"">View Project guidelines here</a>

","1" "basefont_is_not_used","The ""Basefont"" tag should not be used","

The basefont tag is deprecated and should not be used. CSS properties should be used instead.

","1" "blink_is_not_used","The ""blink"" tag should not be used","

The blink tag should not be used, as it can hinder some users with cognitive disabilities or photosensitive epilepsy or eyesight issues.

Example

Wrong

<blink>Important text</blink>

Right

<strong>Important text</strong>

","1" "bold_is_not_used","The ""b"" (bold) element should not be used","

The b (bold) element provides no emphasis for non-sighted readers. Use the strong tag instead.

Example

Wrong

<p>This is <b>really important text</b>.</p>

Right

<p>This is <strong>really important text</strong>.</p>

","1" "content_too_long","Content length should not exceed 3000 words.","

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.

Example

Wrong

<embed src=""multimedia.mov""/>

Right

<embed src=""multimedia.mov""/><noembed>Multimedia with <a href=""multimedia.html"">an available transcript</a>.</noembed>

","1" "header_h3","The header following an h3 should be h1, h2, h3 or h4","

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.

Impact

The i (italic) element only conveys appearance, wheras the em element conveys meaning.

Example

Wrong

<p>This is <i>really important text</i>.</p>

Right

<p>This is <em>really important text</em>.</p>

","1" "img_alt_is_different","Alternative Text should not be the image filename","

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:

Example

Wrong

<img src=""dog.jpg"" alt=""image"">

Right

<img src=""dog.jpg"" alt=""A photograph of a dog"">

","1" "img_has_alt","Image elements should have an ""alt"" attribute","

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.

Example

Wrong

<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>

Right

<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>

","1" "marquee_is_not_used","The ""marquee"" tag should not be used","

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.

Example

Wrong

<marquee>This is really hard to read</marquee>

Right

<strong>This is much easier to read</strong>

","1" "no_headings","Consider adding headings to your document to create more structure","

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.

Example

Wrong

<object data=""movie.mov""></object>

Right

<object data=""movie.mov""><embed src=""movie.mov""></embed></object>

","1" "object_must_have_title","Objects should have a title attribute","

All object elements should contain a ""title"" attribute.

Example

Wrong

<object src=""widget.html""></object>

Right

<object src=""widget.html"" title=""A small web widget""></object>

","1" "object_must_have_valid_title","Objects should not have an empty title attribute","

All object elements should have a ""title"" attribute which is not empty.

Example

Wrong

<object src=""widget.html"" title=""""></object>

Right

<object src=""widget.html"" title=""A small web widget""></object>

","1" "strike_is_not_used","The ""strike"" (strike-through) element should not be used","

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.

Example

Wrong

<p><strike>(10 remaining)</strike> All sold out!</p>

Right

<p><del>(10 remaining)</del> All sold out!</p>

","1" "table_data_should_have_th","No table headers found","

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"