From MemberWiki
OAA Rules Home |
WCAG 2.0 Summary of Rules |
Rule Category Summary of Rules |
Abbreviation Rules |
Audio Rules |
Color Rules |
Embedded Application Rules |
Form Control Rules |
Heading Rules |
Image Rules |
Landmark Rules |
Language Rules |
Layout Rules |
List Rules |
Link Rules |
Page Navigation Rules |
Scripting Rules |
Table Rules |
Timing Rules |
Title Rules |
Video Rules |
Widget Rules
Image Rule Details
Image Rule 1: Image must/should has alternative
| Property
| Value(s)
| Up To Date
|
| Definition
| Each image must/should have an text alternative
| yes
|
| Summary
| Image must/should has alternative
| yes
|
| Purpose
|
- Accessible name provides a description of an image for people who cannot see the image, usually the accessible name comes from an alt attribute
- Accessible name that is an empty string is ignored by assistive technologies and indicates an image is being used for styling rather than meaningful content
| yes
|
| Rule ID
| IMAGE_1
| yes
|
| NLS Rule ID
| Image Rule 1
| yes
|
| Techniques
|
- Text alternatives should describe the purpose of images as succinctly as possible (e.g. usually less than ~100 characters)
- The ALT attribute is the preferred and most commonly used way to provide a text alternative for IMG and AREA elements
- The ARIA-LABELLEDBY attribute can be used to provide a text alterniatve when images can be described using visible captions associated with the image
- The ARIA-LABEL attribute should only be used to provide a text alternative in special cases when an element has ROLE="IMG" attribute
| yes
|
| Manual Checks
| none
| yes
|
| Scope
| Element
| yes
|
| WCAG 2.0 Primary
| 1.1.1
| yes
|
| WCAG 2.0 Related
| none
| yes
|
| Language Dependency
| empty string
| yes
|
| Rule Category
| Image
| yes
|
| Target Resources
|
| yes
|
| Target Resources Description
| IMG, AREA and [role="img"]
| yes
|
| Resource Properties
|
- accessible_name
- alt
- aria_label
- aria_labelledby
- title
- is_visible_to_at
| yes
|
Image Rule 1: Rule Result Messages
| Property
| Value(s)
| Up To Date
|
| All Pass: Singular
| Image element has text alternative
| yes
|
| All Pass: Plural
| All %N_P image elements have text alternatives
| yes
|
| Manual Check: Singular
| empty string
| yes
|
| Manual Check: Plural
| empty string
| yes
|
| Some Fail
| %N_F out of %N_T image elements do NOT have an text alternatives
| yes
|
| All Fail: Singular
| image element does NOT have text alternative
| yes
|
| All Fail: Plural
| All %N_F image elements do NOT have text alternatives
| yes
|
| Corrective Action: Singular
| add ALT, ARIA-LABELLEDBY or RIA-LABEL attribute to image element that describes the purpose of the image
| yes
|
| Corrective Action: Plural
| add ALT, ARIA-LABELLEDBY or RIA-LABEL attribute to each of the %N_F image elements that describes the purpose of each image
| yes
|
| Not Applicable
| No image elements found on this page
| yes
|
Image Rule 1: Node Result Messages
| Property
| Value(s)
| Up To Date
|
| Pass 1
| %1 element has ALT attribute
| yes
|
| Pass 2
| %1 element has ARIA-LABELLEDBY attribute
| yes
|
| Pass 3
| %1 element has ARIA-LABEL attribute
| yes
|
| Manual Check 1
| empty string
| yes
|
| Manual Check 2
| empty string
| yes
|
| Manual Check 3
| empty string
| yes
|
| Corrective Action 1
| Add a ALT, ARIA-LABELLEDBY or ARIA-LABEL attribute to the %1 element
| yes
|
| Corrective Action 2
| empty string
| yes
|
| Corrective Action 3
| empty string
| yes
|
| Hidden (i.e. thru css)
| %1 element is hidden from assistive technologies
| yes
|
| Presentation (i.e. role=presentation)
| empty string
| yes
|
| Other
| empty string
| yes
|
Image Rule 2: longdesc must/should be valid
| Property
| Value(s)
| Up To Date
|
| Definition
| The LONGDESC attribute must/should have a valid URI
| yes
|
| Summary
| LONGDESC must/should be valid
| yes
|
| Purpose
|
- Some images (i.e charts, bar graphs, organizational charts, complex pictures and images) need a longer text equivalent than can be provided with the alt text content
| yes
|
| Rule ID
| IMAGE_2
| yes
|
| NLS Rule ID
| Image Rule 2
| yes
|
| Techniques
|
- LONGDESC can be used to provide an internal link or extenal link to information that provides a extended and more detailed text equivalent of the image
| yes
|
| Manual Checks
| none
| yes
|
| Scope
| Element
| yes
|
| WCAG 2.0 Primary
| 1.1.1
| yes
|
| WCAG 2.0 Related
| none
| yes
|
| Language Dependency
| empty string
| yes
|
| Rule Category
| Image
| yes
|
| Target Resources
|
| yes
|
| Target Resources Description
| IMG
| yes
|
| Resource Properties
|
- longdesc
- longdesc_is_broken
- is_visible_to_at
| yes
|
Image Rule 2: Rule Result Messages
| Property
| Value(s)
| Up To Date
|
| All Pass: Singular
| IMG element with LONGDESC attribute has a valid URL
| yes
|
| All Pass: Plural
| All %N_P IMG elements with LONGDESC attribute have a valid URL
| yes
|
| Manual Check: Singular
| Manually verify IMG element with LONGDESC attribute is a valid URL
| yes
|
| Manual Check: Plural
| Manually verify %N_MC IMG elements with LONGDESC attribute have a valid URL
| yes
|
| Some Fail
| %N_F out of %N_T IMG elements with LONGDESC attribute do NOT have a valid URL
| yes
|
| All Fail: Singular
| IMG element with LONGDESC attribute does NOT have a valid URL
| yes
|
| All Fail: Plural
| All %N_F IMG elements with LONGDESC attribute do NOT have a valid URL
| yes
|
| Corrective Action: Singular
| update the IMG element with LONGDESC attribute to point to a valid URL that describes the image
| yes
|
| Corrective Action: Plural
| update the %N_F IMG elements with a LONGDESC attribute to point to a valid URL that describes the image
| yes
|
| Not Applicable
| No IMG elements with a LONGDESC attribute on this page
| yes
|
Image Rule 2: Node Result Messages
| Property
| Value(s)
| Up To Date
|
| Pass 1
| LONGDESC attribute is a valid URI
| yes
|
| Pass 2
| empty string
| yes
|
| Pass 3
| empty string
| yes
|
| Manual Check 1
| Use a browser to test if the LONGDESC attribute is a valid URL
| yes
|
| Manual Check 2
| empty string
| yes
|
| Manual Check 3
| empty string
| yes
|
| Corrective Action 1
| Change LONGDESC attribute to a valid URI
| yes
|
| Corrective Action 2
| empty string
| yes
|
| Corrective Action 3
| empty string
| yes
|
| Hidden (i.e. thru css)
| IMG element is hidden from asssistive technologies using CSS
| yes
|
| Presentation (i.e. role=presentation)
| empty string
| yes
|
| Other
| empty string
| yes
|
Image Rule 3: Don't use filename
| Property
| Value(s)
| Up To Date
|
| Definition
| The file name of the image must/should not be part of the accessible name
| yes
|
| Summary
| Don't use filename
| yes
|
| Purpose
|
- Text alternatives provide a description of images for people who cannot see the image and the file name is not useful information
- Empty text alternatives are ignored by assistive technologies and indicates an image is being used for styling rather than meaningful content
| yes
|
| Rule ID
| IMAGE_3
| yes
|
| NLS Rule ID
| Image Rule 3
| yes
|
| Techniques
|
- Text alternatives should describe the purpose of images as succinctly as possible (e.g. usually less than ~100 characters) and do not include the file name as part of the text alternative
- The ALT attribute is the preferred and most commonly used way to provide a text alternative for IMG and AREA elements
- The ARIA-LABELLEDBY attribute can be used to provide a text alterniatve when images can be described using visible captions associated with the image
- The ARIA-LABEL attribute should only be used to provide a text alternative in special cases when an element has ROLE="IMG" attribute
| yes
|
| Manual Checks
| none
| yes
|
| Scope
| Element
| yes
|
| WCAG 2.0 Primary
| 1.1.1
| yes
|
| WCAG 2.0 Related
| none
| yes
|
| Language Dependency
| empty string
| yes
|
| Rule Category
| Image
| yes
|
| Target Resources
|
| yes
|
| Target Resources Description
| IMG, AREA and [ROLE="IMG"]
| yes
|
| Resource Properties
|
- accessible_name
- file_name
- is_visible_to_at
| yes
|
Image Rule 3: Rule Result Messages
| Property
| Value(s)
| Up To Date
|
| All Pass: Singular
| Image element does not include the image file name as part of text alternative
| yes
|
| All Pass: Plural
| All %N_P image elements do not include the image file name as part of text alternative
| yes
|
| Manual Check: Singular
| empty string
| yes
|
| Manual Check: Plural
| empty string
| yes
|
| Some Fail
| %N_F out of %N_T image elements DO include the image file name as part of text alternative
| yes
|
| All Fail: Singular
| Image element DOES include the image file name as part of text alternative
| yes
|
| All Fail: Plural
| All %N_F image elements DO include the image file name as part of text alternatives
| yes
|
| Corrective Action: Singular
| update the text alternaitve (e.g. typically the alt attribute) of the image element to not use the image file name; the text alternative must succinctly describe the content and/or purpose of the image
| yes
|
| Corrective Action: Plural
| update the ALT attribute of the %N_F images to not use the image file name; the text alternative must succinctly describe the content and/or purpose of the image
| yes
|
| Not Applicable
| No IMG elements with a LONGDESC attribute on this page
| yes
|
Image Rule 3: Node Result Messages
| Property
| Value(s)
| Up To Date
|
| Pass 1
| text alternative does not contain the filename
| yes
|
| Pass 2
| empty string
| yes
|
| Pass 3
| empty string
| yes
|
| Manual Check 1
| empty string
| yes
|
| Manual Check 2
| empty string
| yes
|
| Manual Check 3
| empty string
| yes
|
| Corrective Action 1
| Change text alternative to succinctly describe the purpose and/or content of the image
| yes
|
| Corrective Action 2
| empty string
| yes
|
| Corrective Action 3
| empty string
| yes
|
| Hidden (i.e. thru css)
| %1 control is hidden from asssistive technologies using CSS
| yes
|
| Presentation (i.e. role=presentation)
| empty string
| yes
|
| Other
| empty string
| yes
|
Image Rule 4 (English): Text alternative length
| Property
| Value(s)
| Up To Date
|
| Definition
| Text alternatives must/should less than 100 characters
| yes
|
| Summary
| Text alternative length
| yes
|
| Purpose
|
- Text alternatives provides a description of the image for people who cannot see the image
- Long text alternatives can reduce usability by increasing the time it takes to read a web page and understand the purpose of an image in the web site
- Alt text that is an empty string is ignored by assistive technologies and indicates an image is being used for styling rather than meaningful content
| yes
|
| Rule ID
| IMAGE_4_EN
| yes
|
| NLS Rule ID
| Image Rule 4 (English)
| yes
|
| Techniques
|
- Text alternatives should describe the purpose of images as succinctly as possible (e.g. usually less than ~100 characters) and do not include the file name as part of the text alternative
- The ALT attribute is the preferred and most commonly used way to provide a text alternative for IMG and AREA elements
- The ARIA-LABELLEDBY attribute can be used to provide a text alterniatve when images can be described using visible captions associated with the image
- The ARIA-LABEL attribute should only be used to provide a text alternative in special cases when an element has ROLE="IMG" attribute
| yes
|
| Manual Checks
| none
| yes
|
| Scope
| Element
| yes
|
| WCAG 2.0 Primary
| 1.1.1
| yes
|
| WCAG 2.0 Related
| none
| yes
|
| Language Dependency
| empty string
| yes
|
| Rule Category
| Image
| yes
|
| Target Resources
|
| yes
|
| Target Resources Description
| IMG, AREA and [ROLE="IMG"]
| yes
|
| Resource Properties
|
- accessible_name
- accessible_name_length
- is_visible_to_at
| yes
|
Image Rule 4 (English): Rule Result Messages
| Property
| Value(s)
| Up To Date
|
| All Pass: Singular
| Image element has text alternative less than 100 characters
| yes
|
| All Pass: Plural
| All %N_P image elements have text alternatives less than 100 characters
| yes
|
| Manual Check: Singular
| empty string
| yes
|
| Manual Check: Plural
| empty string
| yes
|
| Some Fail
| %N_F out of %N_T image elements do have text equivalents GREATER than 100 characters
| yes
|
| All Fail: Singular
| image element text alternative is GREATER than 100 characters
| yes
|
| All Fail: Plural
| All %N_F image elements have text alternatives GREATER than 100 characters
| yes
|
| Corrective Action: Singular
| update the text alternatives of the image element to be less than 100 characters; succinctly describe the purpose and/or content of the image
| yes
|
| Corrective Action: Plural
| update the text alternatives of the %N_F images to be less than 100 characters; succinctly describe the purpose and/or content of the image
| yes
|
| Not Applicable
| No image elements on this page
| yes
|
Image Rule 4 (English): Node Result Messages
| Property
| Value(s)
| Up To Date
|
| Pass 1
| Text alternative is less than 100 characters
| yes
|
| Pass 2
| empty string
| yes
|
| Pass 3
| empty string
| yes
|
| Manual Check 1
| empty string
| yes
|
| Manual Check 2
| empty string
| yes
|
| Manual Check 3
| empty string
| yes
|
| Corrective Action 1
| Change text alternative to be less than 100 characters
| yes
|
| Corrective Action 2
| empty string
| yes
|
| Corrective Action 3
| empty string
| yes
|
| Hidden (i.e. thru css)
| Image element is hidden from asssistive technologies
| yes
|
| Presentation (i.e. role=presentation)
| empty string
| yes
|
| Other
| empty string
| yes
|
Image Rule 5: Small/decorative images set to presentation
| Property
| Value(s)
| Up To Date
|
| Definition
| If an image element has a height or width less than 6 pixels or its alt text set to empty, the image must/should set its role attribute to "presentation" or the image must/should be removed and CSS must/should should be used for positioning.
| yes
|
| Summary
| Small/decorative images set to presentation
| yes
|
| Purpose
|
- Small and decorative images (i.e. less than 6 pixels high or wide) can be ignored by assistive technologies
- Images with the ALT="" attribute should be set to the empty string
| yes
|
| Rule ID
| IMAGE_5
| yes
|
| NLS Rule ID
| Image Rule 5
| yes
|
| Techniques
|
- Small images are purely stylistic or decorative and the ALT text conent should be the empty string (i.e. ALT="")
| yes
|
| Manual Checks
| none
| yes
|
| Scope
| Element
| yes
|
| WCAG 2.0 Primary
| 1.1.1
| yes
|
| WCAG 2.0 Related
| none
| yes
|
| Language Dependency
| empty string
| yes
|
| Rule Category
| Image
| yes
|
| Target Resources
|
| yes
|
| Target Resources Description
| IMG
| yes
|
| Resource Properties
|
- accessible_name_length
- role
- height
- width
- is_visible_to_at
| yes
|
Image Rule 5: Rule Result Messages
| Property
| Value(s)
| Up To Date
|
| All Pass: Singular
| Small and decorative image elements (i.e. less than 6 pixels high or wide) have ROLE="PRESENTATION" or text alternative to an empty string (e.g. ALT="")
| yes
|
| All Pass: Plural
| All %N_P small and decorative image elements (i.e. less than 6 pixels high or wide) have ROLE="PRESENTATION" or text alternative to an empty string (e.g. ALT="")
| yes
|
| Manual Check: Singular
| empty string
| yes
|
| Manual Check: Plural
| empty string
| yes
|
| Some Fail
| %N_F out of %N_T small and decorative image elements (i.e. less than 6 pixels high or wide) do NOT have a ROLE=PRESENTATION or text alternative to an empty string (e.g. ALT="")
| yes
|
| All Fail: Singular
| Small or decorative image element (i.e. less than 6 pixels high or wide) does NOT have ROLE=PRESENTATION or text alterative to an empty string (e.g. ALT="")
| yes
|
| All Fail: Plural
| All %N_F small or decorative image elements (i.e. less than 6 pixels high or wide) do NOT have a ROLE=PRESENTATION or text alterative to an empty string (e.g. ALT="")
| yes
|
| Corrective Action: Singular
| add a ROLE=PRESENTATION or change text alterative to an empty string (e.g. ALT="")
| yes
|
| Corrective Action: Plural
| add a ROLE=PRESENTATION or change text alterative to an empty string (e.g. ALT="")
| yes
|
| Not Applicable
| No small or decorative images (i.e. less than 6 pixels high or wide) on this page
| yes
|
Image Rule 5: Node Result Messages
| Property
| Value(s)
| Up To Date
|
| Pass 1
| Image element has ROLE="PRESENTATION"
| yes
|
| Pass 2
| Image element has ALT=""
| yes
|
| Pass 3
| empty string
| yes
|
| Manual Check 1
| empty string
| yes
|
| Manual Check 2
| empty string
| yes
|
| Manual Check 3
| empty string
| yes
|
| Corrective Action 1
| Add ROLE="PRESENTATION" or change text alternative to empty string (i.e. ALT="")
| yes
|
| Corrective Action 2
| empty string
| yes
|
| Corrective Action 3
| empty string
| yes
|
| Hidden (i.e. thru css)
| Image element is hidden from asssistive technologies using CSS
| yes
|
| Presentation (i.e. role=presentation)
| empty string
| yes
|
| Other
| empty string
| yes
|
Image Rule 6: Verify decorative image
| Property
| Value(s)
| Up To Date
|
| Definition
| Verify image element is be used for styling or decoration
| yes
|
| Summary
| Verify decorative image
| yes
|
| Purpose
|
- If an image is purely decoration or used for styling users of screen readers do not need to know the image exists
- If an image does not have alt text content and contains information, users of assistive technology will not have access to the information
| yes
|
| Rule ID
| IMAGE_6
| yes
|
| NLS Rule ID
| Image Rule 6
| yes
|
| Techniques
|
- Use the attributes ALT="" or ROLE="PRESENTATION" to indicate an image is used purely for stylistic or decorative purposes
| yes
|
| Manual Checks
| none
| yes
|
| Scope
| Element
| yes
|
| WCAG 2.0 Primary
| 1.1.1
| yes
|
| WCAG 2.0 Related
| none
| yes
|
| Language Dependency
| empty string
| yes
|
| Rule Category
| Image
| yes
|
| Target Resources
|
| yes
|
| Target Resources Description
| IMG
| yes
|
| Resource Properties
|
- accessible_name
- role
- is_visible_to_at
| yes
|
Image Rule 6: Rule Result Messages
| Property
| Value(s)
| Up To Date
|
| All Pass: Singular
| empty string
| yes
|
| All Pass: Plural
| empty string
| yes
|
| Manual Check: Singular
| Verify IMG element with ALT="" or ROLE="PRESENTATION" is purely decorative
| yes
|
| Manual Check: Plural
| Verify %N_MC IMG elements with ALT="" or ROLE="PRESENTATION" are purely decorative
| yes
|
| Some Fail
| empty string
| yes
|
| All Fail: Singular
| empty string
| yes
|
| All Fail: Plural
| empty string
| yes
|
| Corrective Action: Singular
| empty string
| yes
|
| Corrective Action: Plural
| empty string
| yes
|
| Not Applicable
| No image elements identified as deecorative (i.e. ALT="" or ROLE="PRESENTATION") on this page
| yes
|
Image Rule 6: Node Result Messages
| Property
| Value(s)
| Up To Date
|
| Pass 1
| empty string
| yes
|
| Pass 2
| empty string
| yes
|
| Pass 3
| empty string
| yes
|
| Manual Check 1
| Verify the image is only used for styling or decoration
| yes
|
| Manual Check 2
| empty string
| yes
|
| Manual Check 3
| empty string
| yes
|
| Corrective Action 1
| empty string
| yes
|
| Corrective Action 2
| empty string
| yes
|
| Corrective Action 3
| empty string
| yes
|
| Hidden (i.e. thru css)
| Image element is hidden from asssistive technologies using CSS
| yes
|
| Presentation (i.e. role=presentation)
| empty string
| yes
|
| Other
| empty string
| yes
|
new rule nls id : new rule summary
| Property
| Value(s)
| Up To Date
|
| Definition
| definition
| NO
|
| Summary
| summary
| NO
|
| Purpose
|
- purpose 1
- purpose 2
- purpose 3
- purpose 4
| NO
|
| Rule ID
| rule id
| NO
|
| NLS Rule ID
| rule nls id
| NO
|
| Techniques
|
- technique 1
- technique 1 url
- technique 2
- technique 2 url
- technique 3
- technique 3 url
- technique 4
- technique 4 url
| NO
|
| Manual Checks
|
- manual check 1
- manual 1 url
- manual check 2
- manual 2 url
- manual check 3
- manual 3 url
- manual check 4
- manual 4 url
| NO
|
| Scope
| Element or Page
| NO
|
| WCAG 2.0 Primary
| X.X.X
| NO
|
| WCAG 2.0 Related
|
| NO
|
| Language Dependency
| empty string
| NO
|
| Rule Category
| Image
| NO
|
| Target Resources
|
| NO
|
| Target Resources Description
| target resource nls description
| NO
|
| Resource Properties
|
| NO
|
new rule nls id : Rule Result Messages
| Property
| Value(s)
| Up To Date
|
| All Pass: Singular
| empty string
| NO
|
| All Pass: Plural
| empty string
| NO
|
| Manual Check: Singular
| empty string
| NO
|
| Manual Check: Plural
| empty string
| NO
|
| Some Fail
| empty string
| NO
|
| All Fail: Singular
| empty string
| NO
|
| All Fail: Plural
| empty string
| NO
|
| Corrective Action: Singular
| empty string
| NO
|
| Corrective Action: Plural
| empty string
| NO
|
| Not Applicable
| empty string
| NO
|
new rule nls id : Node Result Messages
| Property
| Value(s)
| Up To Date
|
| Pass 1
| empty string
| NO
|
| Pass 2
| empty string
| NO
|
| Pass 3
| empty string
| NO
|
| Manual Check 1
| empty string
| NO
|
| Manual Check 2
| empty string
| NO
|
| Manual Check 3
| empty string
| NO
|
| Corrective Action 1
| empty string
| NO
|
| Corrective Action 2
| empty string
| NO
|
| Corrective Action 3
| empty string
| NO
|
| Hidden (i.e. thru css)
| empty string
| NO
|
| Presentation (i.e. role=presentation)
| empty string
| NO
|
| Other
| empty string
| NO
|
