Accessibility - WCAG20 Validation Rules

From MemberWiki

Contents 1 Structure of the document 1.1 Violation levels 2 Rule definitions supporting WCAG 2.0 2.1 Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive 2.2 Principle 2: Operable - User interface components and navigation must be operable 2.3 Principle 3: Understandable - Information and the operation of user interface must be understandable 2.4 Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

Structure of the document

The accessibility validation rules enumerated in this document directly support WCAG 2.0, some with reference to the Document Object Model (DOM) and some with reference to the WAI-ARIA specification and WAI-ARIA best practices. Rules are divided according to the four principles of WCAG 2.0:

1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive
2. Operable - User interface components and navigation must be operable
3. Understandable - Information and the operation of user interface must be understandable
4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

Within each section representing a WCAG 2.0 principle is a table that contains:

1. the guideline number, linked to that guideline in WCAG 2.0
2. the success criterion
3. the list of validation rules that apply to that criterion along with a suggested rule id for each rule
4. a suggested violation level for each rule
5. relevant techniques for implementing the success criterion or passing the given rules

For more information about the structure of WCAG 2.0 and an explanation of principles, guidelines, success criteria, and techniques, see WCAG 2.0 Layers of Guidance. Also, note that this document currently restricts itself to A and AA compliance for WCAG 2.0. Future work may include validation rules for AAA-level success criteria.

Note that, although this document enumerates rules that directly support WCAG 2.0, there is no reason that the rule logic for evaluating each rule could not be reused in testing the items in other checklists. Indeed, one of the chief aims of this task force is to produce reusable rule objects that are readily-consumable and to help tool venders avoid duplicating rule logic.

Also, the rule ids used in this document are only suggestions. The importance of an id is to identify a piece of rule logic that, when executed successfully, indicates that that rule for a given success criterion has been met. Most tool venders and open-source tool developers will already have their own rule ids in place or an algorithm for adding other rule ids. Again, the hope is that rule logic will be reused and that the use of WCAG 2.0-oriented rule ids in this document does not discourage this practice.

Violation levels

Only one of the following violation levels may be assigned to a rule in this document:

Violation (V)

indicates a direct violation of a success criterion or undermines a technique for implementing a success criterion

Recommendation (R)

indicates direct violation of or nonconformance to a best practice

Potential Violation (PV)

high probability that a condition for a violation has been met and that user intervention is required

Potential Recommendation (PR)

high probability of a violation of best practice conformance and user intervention is required (e.g. keyboard handler exists but cannot tell if the developer met best practices for keyboard styling)

Manual test (M)

indicates that a manual test by a user is required to determine whether or not a success criterion or best practice has been violated

As in the case of rule ids, The above violation levels are only suggestions but will be used throughout this document to indicate the impact to a piece of content or to an application of a particular rule's failing. Tool venders are free to map these levels to their own violation levels and to add additional violation levels as they see fit.

Rule definitions supporting WCAG 2.0

Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive

Guideline	Success criterion	Rule	Severity	Techniques	Rule Triggers
1.1	1.1.1 non-text content	[111.V01] alt attribute is missing from images that can be determine to be non-decorative or that are lacking WAI-ARIA role='presentation'	V
		[111.V02] alt text is found to have any common file extensions (e.g., .pdf, .doc, etc.) indicating that the alt attribute contains a file name. See other possible file name extensions in the notes below. [5]	V
		[111.V03] link text must be comprised of alphanumeric characters[1].	V
		[111.V04] text content of an object or applet element is empty[1] unless marked as role="presentation"	V
		[111.V05] Unless an image is marked with a role of presentation, the alt attribute cannot be an exact match to any of the following words (i.e., "image", "picture", "graph"). This is language specific.[2].	V
		[111.V07] alt attribute is missing from area elements (client side image maps, and areas marked as an ARIA image)	V
		[111.V08] alt attribute is missing from an input with type="image"	V
		[111.PV01] Unless an image is marked with a role of presentation, the alt attribute must have a length that is within a certain range. This is language specific.[2].	PV
		[111.PV02] the longdesc attribute (if present) must point to a legitimate alternative resource (e.g. an .html file).	PV
		[111.R01] image is marked with a role of presentation but alt or title attributes present	R - Remove Title and/or alt text
		[111.R02] image is found with null alt text (i.e. either no alt attribute or alt="") but title attribute is present	R - Indicate to the author that if the image is a presentational only convert the image to a CSS background image or mark the image with role="presentation." Indicate to the author that if the image represents content to supply alt text for the image.
		[111.M01] text content for an object or applet element does not describe object or applet	M
1.2	1.2.1 Audio-only and Video-only (Prerecorded)	[121.V01] a multimedia file is present and the alternative content is a separate file that does not validate	V
		[121.PV01] if an audio file is present and there is an aria-describedby relationship to the transcription or caption, the alternative text has: an aria-labelledby relationship to the label containing the text "transcript" or "open caption" as appropriate a role="log" or aria-live ="assertive" in the case of an open caption or the audio file has a label containing "media alternative for text" and has an aria-describedby relationship from the text to the audio the author passes the test and receives an indication that he/she has passed Otherwise, it is a potential violation requiring a manual test as the captioning must be embedded in the audio or video.	PV
		[121.PV02] a video file is present and an alternative format cannot be determined	PV
	1.2.2 Captions (Prerecorded)	[122.M01] [122.PV01] Captions are provided for all pre-recorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such. Should a video media object support a form of timed text and a reference to a timed text file is provided then this checkpoint is satisfied. If the media object supports timed text and none is provided it is a potential violation If media object does not support a timed text equivalent parameter it requires a manual test.	PV, M	WCAG20-SM11, WCAG2-SM12
	1.2.3 Audio Description or Media Alternative (Prerecorded)	[123.PV01] If an aria-describedby is provided to text on the page then there is no violation. Otherwise, perform a manual test to see if an audio description is included or there is a media alternative for text.	PV	WCAG2-SM6, WCAG2-SM7, WCAG2-SM1, WCAG2-SM2
	1.2.4 Captions (Live)	[124.M01] Perform a manual test to see if a caption is provided	M
	1.2.5 Audio Description (Prerecorded)	[125.M01] Perform a manual test to see if an audio description is provided	M
	1.2.6 Sign Language (Prerecorded)	[126.M01] Perform a manual test to see if a sign language video stream is included	M
	1.2.7 Extended Audio Description (Prerecorded)	[127.M01] Perform a manual test to see if an extended audio description is provided.	M
	1.2.8 Media Alternative (Prerecorded)	[128.M01] Perform a manual test to see if a link is provided to the actual alternative content.	M
	1.2.9 Audio-only (Live)	[129.V01] If aria-describedby is provided on the audio object and it references a text equivalent section on the page and the section describing the content is marked with aria-live="assertive" then the test passes. Otherwise it is a violation.	V
		[129.M01] If this information is provided, provide a manual test to see if the alternative matches the audio	M
1.3	1.3.1 Info and Relationships	[131.V01] use of any stylistic, deprecated HTML markup (e.g. b (bold), blink, marquee, u (underlined text), i (italicize), etc.)	V
		[131.V02] A form field does not have an aria-labelledby or there is not an HTML <label> with a label.for property referencing the form field	V
		[131.V03] If an element with role="log" does not have an element with aria-controls set to the ID of the element with role="log"	V
		[131.V04] If an element with role="textbox" does not have an aria-labelledby property with an idref representing a label	V
		[131.V05] layout table[6] has a descendent th element, a caption, or a summary or aria-describedby attribute	V
		[131.V06] data table[7] does not contain either a summary or aria-describedby attribute	V
		[131.PV01] style attribute is found on an element and no ARIA role is provided[3]	PV
		[131.PV02] If a large image does not have an aria-describedby attribute specified. Need to specify a minimum size	PV
		[131.PV03] table contains a descendent th element but no summary or aria-describedby attribute or vice versa	PV
		[131.PV04] HTML pre element is encountered. The pre element may indicate manual formatting	PV
		[131.PR01] data table contains a caption element[8]	PR
		[131.M01] If an action causes content to change in another area of a page, there must be an aria-controls relationship between the element causing the action and the element containing the changed content.	M		Focus change only
1.4	1.4.1 color usage	[141.PV01] style attribute on an element, color is a style attribute, and the style is not formed using a CSS attribute selector tied to a known attribute in the host language or a WAI-ARIA state and property[4]	PV
	1.4.2 audio control	[142.M01] If an object element sources a sound file[5] and it plays for more than 3 seconds, a mechanism must be available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level	M

Notes:

1. the value of an attribute or textual content of an element is trimmed (i.e. whitespace characters are removed from either side of any non-whitespace content). Also, when creating rules make sure we clearly identify the list of characters so that we properly define the regular expression.
2. If have a single word that is not in this list mark as a "potential violation." We should look to expand this list. Note: for other languages, language equivalents are violations
3. Because we are testing dynamically, we believe that testing formal document structure semantics through HTML and ARIA analysis for widgets and live regions should suffice vs. using a test referring to document.write() and innerHTML to indicate a failure. (The WCAG WG agrees that we will not test for the use of document.write and inner.html.)
4. Later browsers support attributed CSS attribute selectors
5. rules should include the set of audio file types to limit the number of potential violations
   1. MP3 (.mp3)
   2. Apple QuickTime Audio (.mov)
   3. MIDI (.mid)
   4. RealMedia/RealAudio (.rm, .ra)
      1. RealMedia meta file (.ram)
      2. RealMedia player embedded in a Web page via the object tag (.rpm)
   5. Windows Media (.wma, .asf)
   6. AVI (.avi)
   7. MPEG (mpg, mpeg)
   8. Flash (.swf)
6. layout table detection:
   1. WAI-ARIA role="presentation" on table
   2. a 1x1 table
7. data table detection:
   1. http://html.cita.uiuc.edu/nav/dtable/dtable-rules.php
   2. Some test pages for data tables: http://test.cita.illinois.edu/html-bp/nav/dtable/
8. The group is concerned about using the caption element due to problems with the way ATs process the caption element. aria-labelledby is more consistent across HTML and other markup languages.
9. All rules trigger on load and on focus change (onblur/onfocus) unless otherwise noted

Principle 2: Operable - User interface components and navigation must be operable

Guideline	Success criterion	Rule	Severity	Techniques	Rule Triggers
2.1	2.1.1 Keyboard accessible	[211.V01] A non-form (e.g. <input>, <button>, <select> and <textarea> elements) or non-anchor element (e.g. <a> element) has a onKeyXXX, onMouseXXX or onClick event handler and does not have a role attribute or the role value is not a valid ARIA role value	V
		[211.V02] An element that includes onMouseXXX event handlers and ACTIVE-DESCENDANT attribute defined, must have a onKeyDown or onKeyPress event handlers	V
		[211.V03] An element with the ACTIVE-DESCENDANT attribute defined, must have a role attribute with a valid ARIA container role value	V
		[211.V04] An element with ACTIVE-DESCENDANT attribute defined and is not disabled (e.g. aria-disabled=true), must have a tabindex value greater than or equal to 0	V
		[211.V05] An element with a role attribute with a container role value, is not disabled (e.g. aria-disabled=true) and does NOT have the ACTIVE-DESCENDANT attribute defined, must have at least one child element with a tabindex value greater than or equal to 0	V
		[211.V06] An element with a role attribute with a container role value, is not disabled (e.g. aria-disabled=true) and does NOT have the ACTIVE-DESCENDANT attribute defined, must have at least an onKeyDown or onKeyPress event on the element or on at least one of the child role elements	V
		[211.M01] Anchor (e.g. <a> element) elements with onMouseOver and onMouseOut event handlers must either move hover effects to CSS include onFocus and onBlur event handlers that emulate the effects	M
		[211.M02] Elements with container roles (e.g. grid, tree, tablist, menubar, menu, button, checkbox, listbox, list, etc.) must include keydown or keypress event handlers. You would not put tests on treeitem, menuitem, or gridcell. Note: the managed roles may have mouse handlers on them for which we don't want to check for keyboard equivalents.)	M
2.2	2.2.2 Pause, Stop, Hide	[222.M01 For any auto-updating information that: starts automatically is contained within a region marked with an aria-live property is presented in parallel with other content there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential[5]	M
		[222.M02] For any moving, blinking or scrolling information that: is marked with an aria-live property starts automatically lasts more than five seconds is presented in parallel with other content there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential[5]	M
2.4	2.4.1 bypass blocks	[241.V01 at least one main content area defined by a region with an ARIA role="main" or "skip to main content" link is defined	V
		[241.V02] non-application WAI-ARIA landmarks have a tabindex="0" set so that they are in the navigation order and place a user at the start of the navigation section[1]	V
		[241.V03] WAI-ARIA landmarks are labeled by an aria-labelledby relationship to the appropriate label text	V[2]
		[241.V04] a Frame does NOT have a TITLE attribute defined or is marked as ROLE=PRESENTATION	V[3]
		[241.PV01] navigation links are discovered and no navigation landmark is found	PV		Load only
	2.4.2 page titled	[242.V01] page does not have a title describing the topic or purpose	V		Load only
		[242.V02] page has invalid text within title element	V		Load only
	2.4.4 link purpose and context	[244.V01] link text is empty after normalization and trim	V
		[244.R01] an image that is the entire content of a link is less than 16x16 pixels in size	R
		[244.R02] alt attribute content of the img element nested in a link (if any) should not repeat the text content of the link. Images that are used as icons to help users identify the purpose of a link should have their alt attribute set to empty or be included in the graphical rendering as a CSS background image.	R
		[244.R03] Links pointing to different URLs who share the same LI, P, TD or TH container element must have unique text content within the container element and satisfy one of the following conditions: The text content of the containing LI, P, TD, TH must be unique when compared to other links or calculated context, The text content of the link when combined with the first preceding heading element content must be unique when compared to other links or calculated context, If a link is the child of nested LI elements, the parent and grand parent LI content when combined must be unique from other links or calculated context on the page The TITLE or ARIA-DESCRIBEDBY content for the link is unique	R
	2.4.6 headings and labels	[246.PV01] class attribute has "head" as part of the class name (e.g., heading1, heading2, head1, etc.) and the element is not a heading element (e.g., h1, h2, etc.)	PV
		[246.R01] text is wrapped in HTML decorative tags followed or preceded by a "br" tag, thus attempting to simulate headings[4]	R
		[246.R02] page does not have one or only one H1 element	R
		[246.R03] H1 element does not contain valid text	R
		[246.R04] H1 element does not contain text of title	R
		[246.R05] Labels for widgets and form controls must be unique	R
		[246.R06] Headings on the same level must be unique	R
	2.4.7 Focus visible	[247.M01] elements with roles that imply keyboard management have a keyboard focus indicator that is visible	R

Notes

1. Ideally, there should be styling to highlight the landmark region when it has focus (such as an outline border)
2. should this be a violation or recommendation? Answer: It should be a recommendation. Updated rule 2.4.7 (focus visible) to recommendation. See supporting documentation.
3. In general, using frame titles is a poor navigation technique. Headers and other landmark roles are much better because they make it easier for people with disabilities to navigate a page. Also, if the frame content is rendered (not hidden), the TITLE content should describe the contents of the frame (manual check).
4. should this be under 2.4.6 or 2.4.10? Chose 2.4.6 bc 2.4.10 is AAA.
5. Consider rules for static content from the University of Illinois and used by their Accessibility Evaluator and their Accessibility Extension
6. All rules trigger on load and on focus change (onblur/onfocus) unless otherwise noted

Information from original not yet processed:

• Rules validating against use of tabindex and keyboard accessibility including the WAI-ARIA enhancement to the host language for tabindex=0 and -1
• If possible, Rules validating against use of the WAI-ARIA keyboard style guide
• define a set of criteria by which role of "document" and an "application" are set to assist screen readers with the navigation. For example, a role="application" would tell a screen reader to disable its browser keys and let the application take over.
• validate that the "Focus order" follows the document order for ARIA widget containers, links, and form elements.
• If innerHTML, outerHTML or document.write is found, generate a warning that DOM functions should be used to add content to a page.
• Proposed Rules 2.4.4
  • If the Link text has a URL generate a Violation. MAS: Isn't this a little stringent? Think of the references at the beginning of every W3C spec or note.
  • If the link has an image the above rules apply for alternative text

Principle 3: Understandable - Information and the operation of user interface must be understandable

Guideline	Success criterion	Rule	Severity	Techniques	Rule Triggers
3.1	3.1.1	[311.V01] html element missing lang attribute	V		Load only
		[311.R01] lang attribute of different elements within same document not set correctly when switched	R		Focus change only

Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

Guideline	Success criterion	Rule	Severity	Techniques	Rule Triggers
4.1	4.1.1 parsing	[411.V01] document type is not provided	V
		[411.V02] document does not validate	V		Load only
		[411.V03] document elements have incomplete start or end tags	V		Load only
		[411.V04] Document elements contain duplicate attributes	V
		[411.V05] elements are not nested according to their specifications	V
		[411.V06] an element does not have a unique id within the document (i.e. has an id that matches the id of another element in the same document)[1]	V
	4.1.2 Name, role, value	[412.V01] invalid or incorrect WAI-ARIA role given RDF definition of roles	V
		[412.V02] A container role (tree, grid, menu, etc.) must have at least one child with an applicable role as defined by WAI-ARIA	V
		[412.V03] an assigned WAI-ARIA state or property is not compatible with the global or role-specific WAI-ARIA states and properties for a given WAI-ARIA role	V
		[412.V04] an accessible name cannot be computed for a specified WAI-ARIA role	V
		[412.V05] aria-valuenow, aria-valuemin, and aria-valuemax are not used for widgets with WAI-ARIA roles that are capable of accepting such properties (e.g. slider, progressbar)	V
		[412.V06] aria-valuenow is outside the range of aria-valuemin and aria-valuemax	V
		[412.V07] a web application incorrectly change the value of a role attribute	V		Focus change only
		[412.PV01] A container role must follow particular design patterns as implied by the WAI-ARIA Best Practices Guide	PV
		[412.PV02] appropriate WAI-ARIA states or properties are not used for form controls (e.g. '*' is used rather than aria-required)	PV
		[412.PV03] a WAI-ARIA aria-invalid attribute is added to a form field when invalid data is entered into that field	PV		Focus change only
		[412.PV04] a large image does not have an aria-describedby attribute whose value is a unique id within the document	PV
		[412.M01] If an action causes content to change in another area of a page, there must be an aria-controls relationship between the element causing the action and the element containing the changed content (e.g. between a button that sends a chat message and the window element, presumably with a role of log, where the message appears)	M		Focus change only

Notes:

1. All validation/parsing related checks may be completed upon document load except for the validation of unique element ids
2. All rules trigger on load and on focus change (onblur/onfocus) unless otherwise noted