ObservePoint Automated WCAG Accessibility Testing

Overview of Accessibility Guidelines and ObservePoint's Solution

To ensure that web pages adhere to the Web Content Accessibility Guidelines (WCAG) standards, our application performs automatic checks on various HTML attributes.

The table below lists the different attributes that our system can automatically check for, along with descriptions of each. By identifying and addressing potential accessibility issues, our platform helps improve the user experience for individuals with disabilities.

WCAG - short for Web Content Accessibility Guidelines - is categorized into three levels of conformance to meet the needs of different groups and situations: A (lowest), AA (mid-range), and AAA (highest).

We support all levels of conformance with current versions of WCAG: 2.0, 2.1, and 2.2. Conformance at higher levels indicates conformance at lower levels. For example, a web page that conforms to AA meets both the A and AA conformance levels. Most organizations set their standards at level AA because it is both achievable and meaningful, without being too disruptive to the design and development process of a website.

Within each version and conformance level we also support four levels of severity:

Critical issues are accessibility problems that significantly hinder or completely block the ability of people with disabilities to access and use web content.
Serious issues are problems that significantly impact the usability of web content for people with disabilities, causing considerable inconvenience or difficulty without completely blocking access.
Moderate issues are problems that impact the usability of web content for people with disabilities, creating noticeable challenges that can be overcome with some effort.
Minor issues are problems that have a small impact on the usability of web content for people with disabilities, causing minor inconveniences or deviations from best practices without significantly hindering access

Most customers tell us they focus on WCAG 2.1 AA Critical and Serious Issues.

In addition to automated functional testing, which verifies that content functions as expected, usability testing is recommended to determine how well people can use the content for its intended purpose. It is recommended that users with disabilities be included in test groups when performing usability testing.

View the results within audits at the page detail level.

Supported HTML Attributes

HTML Attribute	Description & Rule
area-alt	Ensures <area> elements of image maps have alternate text Active <area> elements must have alternate text
aria-allowed-attr	Ensures an element's role supports its ARIA attributes Elements must only use supported ARIA attributes
aria-braille-equivalent	Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent aria-braille attributes must have a non-braille equivalent
aria-command-name	Ensures every ARIA button, link and menuitem has an accessible name ARIA commands must have an accessible name
aria-conditional-attr	Ensures ARIA attributes are used as described in the specification of the element's role ARIA attributes must be used as specified for the element's role
aria-deprecated-role	Ensures elements do not use deprecated roles Deprecated ARIA roles must not be used
aria-hidden-body	Ensures aria-hidden="true" is not present on the document body. aria-hidden="true" must not be present on the document body
aria-hidden-focus	Ensures aria-hidden elements are not focusable nor contain focusable elements ARIA hidden element must not be focusable or contain focusable elements
aria-input-field-name	Ensures every ARIA input field has an accessible name ARIA input fields must have an accessible name
aria-meter-name	Ensures every ARIA meter node has an accessible name ARIA meter nodes must have an accessible name
aria-progressbar-name	Ensures every ARIA progressbar node has an accessible name ARIA progressbar nodes must have an accessible name
aria-prohibited-attr	Ensures ARIA attributes are not prohibited for an element's role Elements must only use permitted ARIA attributes
aria-required-attr	Ensures elements with ARIA roles have all required ARIA attributes Required ARIA attributes must be provided
aria-required-children	Ensures elements with an ARIA role that require child roles contain them Certain ARIA roles must contain particular children
aria-required-parent	Ensures elements with an ARIA role that require parent roles are contained by them Certain ARIA roles must be contained by particular parents
aria-roledescription	Ensure aria-roledescription is only used on elements with an implicit or explicit role aria-roledescription must be on elements with a semantic role
aria-roles	Ensures all elements with a role attribute use a valid value ARIA roles used must conform to valid values
aria-toggle-field-name	Ensures every ARIA toggle field has an accessible name ARIA toggle fields must have an accessible name
aria-tooltip-name	Ensures every ARIA tooltip node has an accessible name ARIA tooltip nodes must have an accessible name
aria-valid-attr-value	Ensures all ARIA attributes have valid values ARIA attributes must conform to valid values
aria-valid-attr	Ensures attributes that begin with aria- are valid ARIA attributes ARIA attributes must conform to valid names
audio-caption	Ensures <audio> elements have captions <audio> elements must have a captions track
autocomplete-valid	Ensure the autocomplete attribute is correct and suitable for the form field autocomplete attribute must be used correctly
avoid-inline-spacing	Ensure that text spacing set through style attributes can be adjusted with custom stylesheets Inline text spacing must be adjustable with custom stylesheets
blink	Ensures <blink> elements are not used <blink> elements are deprecated and must not be used
button-name	Ensures buttons have discernible text Buttons must have discernible text
bypass	Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content Page must have means to bypass repeated blocks
color-contrast-enhanced	Ensures the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds Elements must meet enhanced color contrast ratio thresholds
color-contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds Elements must meet minimum color contrast ratio thresholds
css-orientation-lock	Ensures content is not locked to any specific display orientation, and the content is operable in all display orientations CSS Media queries must not lock display orientation
definition-list	Ensures <dl> elements are structured correctly <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
dlitem	Ensures <dt> and <dd> elements are contained by a <dl> <dt> and <dd> elements must be contained by a <dl>
document-title	Ensures each HTML document contains a non-empty <title> element Documents must have <title> element to aid in navigation
duplicate-id-aria	Ensures every id attribute value used in ARIA and in labels is unique IDs used in ARIA and labels must be unique
form-field-multiple-labels	Ensures form field does not have multiple label elements Form field must not have multiple label elements
frame-focusable-content	Ensures <frame> and <iframe> elements with focusable content do not have tabindex=-1 Frames with focusable content must not have tabindex=-1
frame-title-unique	Ensures <iframe> and <frame> elements contain a unique title attribute Frames must have a unique title attribute
frame-title	Ensures <iframe> and <frame> elements have an accessible name Frames must have an accessible name
html-has-lang	Ensures every HTML document has a lang attribute <html> element must have a lang attribute
html-lang-valid	Ensures the lang attribute of the <html> element has a valid value <html> element must have a valid value for the lang attribute
html-xml-lang-mismatch	Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page HTML elements with lang and xml:lang must have the same base language
identical-links-same-purpose	Ensure that links with the same accessible name serve a similar purpose Links with the same name must have a similar purpose
image-alt	Ensures <img> elements have alternate text or a role of none or presentation Images must have alternate text
input-button-name	Ensures input buttons have discernible text Input buttons must have discernible text
input-image-alt	Ensures <input type="image"> elements have alternate text Image buttons must have alternate text
label-content-name-mismatch	Ensures that elements labelled through their content must have their visible text as part of their accessible name Elements must have their visible text as part of their accessible name
label	Ensures every form element has a label Form elements must have labels
link-in-text-block	Ensure links are distinguished from surrounding text in a way that does not rely on color Links must be distinguishable without relying on color
link-name	Ensures links have discernible text Links must have discernible text
list	Ensures that lists are structured correctly <ul> and <ol> must only directly contain <li>, <script> or <template> elements
listitem	Ensures <li> elements are used semantically <li> elements must be contained in a <ul> or <ol>
marquee	Ensures <marquee> elements are not used <marquee> elements are deprecated and must not be used
meta-refresh-no-exceptions	Ensures <meta http-equiv="refresh"> is not used for delayed refresh Delayed refresh must not be used
meta-refresh	Ensures <meta http-equiv="refresh"> is not used for delayed refresh Delayed refresh under 20 hours must not be used
meta-viewport	Ensures <meta name="viewport"> does not disable text scaling and zooming Zooming and scaling must not be disabled
nested-interactive	Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies Interactive controls must not be nested
no-autoplay-audio	Ensures <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio <video> or <audio> elements must not play automatically
object-alt	Ensures <object> elements have alternate text <object> elements must have alternate text
p-as-heading	Ensure bold, italic text and font-size is not used to style <p> elements as a heading Styled <p> elements must not be used as headings
role-img-alt	Ensures [role="img"] elements have alternate text [role="img"] elements must have an alternative text
scrollable-region-focusable	Ensure elements that have scrollable content are accessible by keyboard Scrollable region must have keyboard access
select-name	Ensures select element has an accessible name Select element must have an accessible name
server-side-image-map	Ensures that server-side image maps are not used Server-side image maps must not be used
svg-img-alt	Ensures <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text <svg> elements with an img role must have an alternative text
table-fake-caption	Ensure that tables with a caption use the <caption> element Data or header cells must not be used to give caption to a data table
target-size	Ensure touch target have sufficient size and space All touch targets must be 24px large, or leave sufficient space
td-has-header	Ensure that each non-empty data cell in a <table> larger than 3 by 3 has one or more table headers Non-empty <td> elements in larger <table> must have an associated table header
td-headers-attr	Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table Table cells that use the headers attribute must only refer to cells in the same table
th-has-data-cells	Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe Table headers in a data table must refer to data cells
valid-lang	Ensures lang attributes have valid values lang attribute must have a valid value
video-caption	Ensures <video> elements have captions <video> elements must have captions

Page Details Report

Creating Journeys

ClickAll+ Solution Implementation Guide

Limitations of All Automated WCAG Accessibility Testing