Skip to main content
All CollectionsAudits
ObservePoint Automated WCAG Accessibility Testing
ObservePoint Automated WCAG Accessibility Testing

ObservePoint Accessibility Guidelines Testing solution

Product Enablement avatar
Written by Product Enablement
Updated over a week ago

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.

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.

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

Did this answer your question?