+
+
+
+### The HTML element with an assigned `accesskey` attribute does not have an associated label
+
+
+
+An HTML element with an assigned `accesskey` attribute must have an associated label
+
+
+
+
+
+
+### Why is this important?
+
+The label of an HTML element with an `accesskey` attribute allows the user agent to display a list of access keys with a name describing each access key’s function. It also allows voice control users to speak the label to activate its function.
+
+
+
+### What to do
+
+ * Provide a label using a `title` attribute (e.g. `Activities`);
+ * **Or**, use `
+
+
+### About this requirement
+
+* [IBM 3.3.2 Labels and Instructions](https://www.ibm.com/able/requirements/requirements/#3_3_2)
+
+### Who does this affect?
+
+ * People using a screen reader, including blind, low vision and neurodivergent people
+ * People who physically cannot use a pointing device
+ * People with dexterity impairment using voice control
+
+
+
+
+
+
+
+### Verify that non-decorative static text or image content within the element with role of `"application"` is accessible
+
+
+
+Non-decorative static text and image content within an element with role of `"application"` must be accessible
+
+
+
+
+
+
+### Why is this important?
+
+Within an element with the role `"application"`, only focusable elements are accessible to users of some assistive technologies by default. Therefore, to ensure access to any non-decorative static text or image content that does not receive focus by default, it must be implemented in an accessible way.
+
+
+
+### What to do
+
+* Verify that the content is decorative;
+* **Or**, associate the content with a focusable element using the `aria-labelledby` or `aria-describedby` attribute;
+* **Or**, place the content in a focusable element that has role `"document"` or `"article"`;
+* **Or**, manage the focus of descendants as described in [Managing Focus](https://w3c.github.io/aria-practices/#managingfocus) by updating the value of `aria-activedescendant` to reference the element containing the focused content.
+
+
+
+
+### About this requirement
+
+* [IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+* [ARIA practices - Application Role](https://w3c.github.io/aria-practices/#application)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+* People with low vision who have trouble finding or tracking a pointer indicator on the screen
+* People who physically cannot use a pointing device
+
+
+
+
+
+
+
+### ARIA widget with an `"img"` role has no label or an empty label
+
+
+
+Element with an `"img"` role must have a non-empty label
+
+
+
+
+
+
+### Why is this important?
+
+A component with an `"img"` role can contain important information as well as multiple image files. When viewed together, these elements give the impression of a single image. Providing a text alternative makes the same information accessible through audio or other channels.
+
+
+
+### What to do
+
+* Add an `aria-labelledby` attribute to the element with a `role="img"`. It must point to visible text on the page that is meaningful as a label;
+* **Or**, add an `aria-label` attribute to the element with a `role="img"`;
+* **Or**, only if the design cannot have a visible label, use the `title` attribute to provide a label
+
+Example:
+
+<div role="img" aria-labelledby="image1"> ... <p id="image1">Text that describes the group of images.</p></div>
+
+
+
+
+### About this requirement
+
+* [IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+* [WCAG technique ARIA6](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)
+* [WCAG technique ARIA16](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+* People who turn off image-loading on their web browsers
+* People using text-based browsers (e.g., Lynx) or audio interfaces
+
+
+
+
+
+
+
+### HTML5 attribute is in conflict with the associated ARIA attribute used on an input element
+
+
+
+HTML5 attributes must not conflict with the associated ARIA attribute used on an input element
+
+
+
+
+
+
+### Why is this important?
+
+Using both an HTML5 attribute and the associated ARIA attribute with the same semantic meaning on an `` element can cause a conflict that allows one of the attributes to override the other. This can lead to unexpected and confusing assistive technology behavior.
+
+
+
+### What to do
+
+Remove one of the conflicting HTML5 or ARIA attributes from the `` element.
+
+Example using HTML5:
+
+<label for="phone">* Phone number: </body>
+<input type="text" id="phone" name="phone" required>
+
+Example uses both HTML5 and ARIA attribute indicating the input is required without any conflict:
+
+<label for="phone">* Phone number: </body>
+<input type="text" id="phone" name="phone" required aria-required="true">
+
+
+
+
+### About this requirement
+
+* [IBM 3.3.2 Labels and Instructions](https://www.ibm.com/able/requirements/requirements/#3_3_2)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+
+
+
+
+
+
+
+### ARIA widget with a graphics role has no label or an empty label
+
+
+
+Element with a graphics role must have a non-empty label
+
+
+
+
+
+
+### Why is this important?
+
+A component with a graphics role can contain important information as well as multiple image files. When viewed together, these elements give the impression of a single image. Providing a text alternative makes the same information accessible through audio or other channels.
+
+
+
+### What to do
+
+* Add an `aria-labelledby` attribute to the element with a `role="graphics-*"`. It must point to visible text on the page that is meaningful as a label;
+* **Or**, add an `aria-label` attribute to the element with a `role="graphics-*"`;
+* **Or**, only if the design cannot have a visible label, use the `title` attribute to provide a label
+
+Example:
+
+<svg xmlns="http://www.w3.org/2000/svg"> ... <circle role="graphics-symbol" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg>
+
+
+
+
+### About this requirement
+
+* [IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+* [ARIA Graphics Module](https://www.w3.org/TR/graphics-aria/)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+* People who turn off image-loading on their web browsers
+* People using text-based browsers (e.g., Lynx) or audio interfaces
+
+
+
+
+
+
+
+### Check media using `
+
+
+
+
+### Why is this important?
+
+HTML5 `
+
+
+### About this requirement
+
+* [IBM 2.1.1 Keyboard](https://www.ibm.com/able/requirements/requirements/#2_1_1)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+* People with low vision who have trouble finding or tracking a pointer indicator on the screen
+* People who physically cannot use a pointing device
+
+
+
+
+
+
+
+### Check background image have a text alternative in system high contrast mode
+
+
+
+Background images that convey meaning must have a text alternative that describes the image
+
+
+
+
+
+
+### Why is this important?
+
+When background images convey meaning, the information is lost when the background images do not render in system high contrast mode. A text alternative can provide that information for people who use system high contrast.
+
+
+
+### What to do
+
+* Do not use background images to convey information;
+* **Or**, if the background image conveys meaning, verify the information is available as text when viewing content in system high contrast mode;
+* **Or**, use the `title` attribute to provide a text alternative.
+
+
+
+
+### About this requirement
+
+* [IBM 1.1.1 Non-text content](https://www.ibm.com/able/requirements/requirements/#1_1_1)
+* [WCAG technique C9](https://www.w3.org/WAI/WCAG21/Techniques/css/C9)
+
+### Who does this affect?
+
+* People with visual impairment using color contrast enhancement
+
+
+
+
+
+
+
+### Verify accessibility of the `
+
+
+
+
+### Why is this important?
+
+The HTML5 `
+
+
+### About this requirement
+
+* [IBM 1.1.1 Non-Text Content](https://www.ibm.com/able/requirements/requirements/#1_1_1)
+* [IBM 2.1.1 Keyboard](https://www.ibm.com/able/requirements/requirements/#2_1_1)
+* [IBM 2.4.7 Focus Visible](https://www.ibm.com/able/requirements/requirements/#2_4_7)
+* [IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+
+### Who does this affect?
+
+ * People who rely on keyboard control
+ * People using a screen reader, including blind, low vision and neurodivergent people
+
+
+
+
+
+
+
+### Initial DOM focus is not correctly set on the combobox
+
+
+
+Initial DOM focus on the combobox must be set on the `` input
+
+
+
+
+
+
+### Why is this important?
+
+A combobox is a UI interactive component that combines an input and another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. When a combobox receives focus, the focus should be set on the `` input element that can either display the current value or supports editing, so people who use assistive technologies are able accurately navigate and interact with the content.
+
+
+
+### What to do
+
+* Set the initial DOM focus only on the combobox’s `` input element. (Note: This was necessary for the Combobox using ARIA 1.1 implementation which should be avoided due to problems with implementation. Follow the guidance for combobox in [ARIA 1.2](https://w3c.github.io/aria-practices/#combobox) which has changed significantly.)
+
+
+
+
+### About this requirement
+
+* [IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+* [ARIA practices - Combobox](https://w3c.github.io/aria-practices/#combobox)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+
+
+
+
+
+
+
+### The text input `role` or number of lines is not valid for a combobox
+
+
+
+A combobox must have a single line text input element with a valid `role`
+
+
+
+
+
+
+### Why is this important?
+
+A combobox combines a text input element and a popup element that helps the user set the value of the input. The text input element must be a single line text field with an appropriate role, otherwise assistive technologies may not be able to present and control the content correctly.
+
+
+
+### What to do
+
+ * Code the combobox as in the ARIA 1.2 example below;
+ * **Or**, if the text input element is multi-line (e.g. `