diff --git a/accessibility-checker-engine/help/HAAC_Accesskey_NeedLabel.mdx b/accessibility-checker-engine/help/HAAC_Accesskey_NeedLabel.mdx index 22cc724c2..feb695ba3 100644 --- a/accessibility-checker-engine/help/HAAC_Accesskey_NeedLabel.mdx +++ b/accessibility-checker-engine/help/HAAC_Accesskey_NeedLabel.mdx @@ -2,7 +2,7 @@ title: "Accessibility Checker Rule Help: HAAC_Accesskey_NeedLabel" --- import "../../../styles/ToolHelp.scss" -import { Tag } from "carbon-components-react"; +import { CodeSnippet, Tag } from "carbon-components-react";
diff --git a/accessibility-checker-engine/help/HAAC_ActiveDescendantCheck.mdx b/accessibility-checker-engine/help/HAAC_ActiveDescendantCheck.mdx index 2532a04d9..7abab20e7 100644 --- a/accessibility-checker-engine/help/HAAC_ActiveDescendantCheck.mdx +++ b/accessibility-checker-engine/help/HAAC_ActiveDescendantCheck.mdx @@ -2,7 +2,7 @@ title: "Accessibility Checker Rule Help: HAAC_ActiveDescendantCheck" --- import "../../../styles/ToolHelp.scss" -import { Tag } from "carbon-components-react"; +import { CodeSnippet, Tag } from "carbon-components-react";
@@ -38,14 +38,14 @@ The `aria-activedescendant` property must reference the `id` of a non-empty, non The following example* shows a radio group using `aria-activedescendant` to indicate the active radio button, which is coded as a DOM descendant: - ``` -

Pizza Crust

-
    - - - -
- ``` + + <h3 id="group_label_1">Pizza Crust</h3> + <ul id="rg1" class="radiogroup" role="radiogroup" aria-labelledby="group_label_1" aria-activedescendant="rb11" tabindex="0"> + <li id="rb11" role="radio" aria-checked="false">Regular crust</li> + <li id="rb12" role="radio" aria-checked="false">Deep dish</li> + <li id="rb13" role="radio" aria-checked="false">Thin crust</li> + </ul> + * Example code includes material copied from or derived from ARIA 1.2 Practices - Radio Group Example Using aria-activedescendant. Copyright © 2018-2019 W3C® (MIT, ERCIM, Keio, Beihang). diff --git a/accessibility-checker-engine/help/HAAC_Application_Role_Text.mdx b/accessibility-checker-engine/help/HAAC_Application_Role_Text.mdx index 4b083bbbd..af4c4a7ab 100644 --- a/accessibility-checker-engine/help/HAAC_Application_Role_Text.mdx +++ b/accessibility-checker-engine/help/HAAC_Application_Role_Text.mdx @@ -2,7 +2,7 @@ title: "Accessibility Checker Rule Help: HAAC_Application_Role_Text" --- import "../../../styles/ToolHelp.scss" -import { Tag } from "carbon-components-react"; +import { CodeSnippet, Tag } from "carbon-components-react";
diff --git a/accessibility-checker-engine/help/HAAC_Aria_ErrorMessage.mdx b/accessibility-checker-engine/help/HAAC_Aria_ErrorMessage.mdx index 0b29d4bc7..bda50084e 100644 --- a/accessibility-checker-engine/help/HAAC_Aria_ErrorMessage.mdx +++ b/accessibility-checker-engine/help/HAAC_Aria_ErrorMessage.mdx @@ -2,7 +2,7 @@ title: "Accessibility Checker Rule Help: HAAC_Aria_ErrorMessage" --- import "../../../styles/ToolHelp.scss" -import { Tag } from "carbon-components-react"; +import { CodeSnippet, Tag } from "carbon-components-react";
@@ -34,17 +34,16 @@ A custom error message must reference a valid `id` and when triggered the messag Example: -``` - - - - - - - - -Invalid time: the time must be between 9:00 AM and 5:00 PM -``` +<!-- Initial valid state --> +<label for="startTime">Please enter a start time for the meeting:</label> +<input id="startTime" type="text" aria-errormessage="msgID" value="" aria-invalid="false"> +<span id="msgID" aria-live="off" style="visibility:hidden">Invalid time: the time must be between 9:00 AM and 5:00 PM</span> + +<!-- User has entered an invalid value --> +<label for="startTime">Please enter a start time for the meeting:</label> + +<input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30" PM> +<span id="msgID" aria-live="assertive" style="visibility:visible">Invalid time: the time must be between 9:00 AM and 5:00 PM</span> Note: Example code includes material copied from or derived from W3C WAI-ARIA 1.1 Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang) diff --git a/accessibility-checker-engine/help/HAAC_Aria_ImgAlt.mdx b/accessibility-checker-engine/help/HAAC_Aria_ImgAlt.mdx index 7105f0885..bbd70b003 100644 --- a/accessibility-checker-engine/help/HAAC_Aria_ImgAlt.mdx +++ b/accessibility-checker-engine/help/HAAC_Aria_ImgAlt.mdx @@ -2,7 +2,7 @@ title: "Accessibility Checker Rule Help: HAAC_Aria_ImgAlt" --- import "../../../styles/ToolHelp.scss" -import { Tag } from "carbon-components-react"; +import { CodeSnippet, Tag } from "carbon-components-react";
@@ -38,9 +38,7 @@ Element with an `"img"` role must have a non-empty label Example: -``` -
...

Text that describes the group of images.

-``` +<div role="img" aria-labelledby="image1"> ... <p id="image1">Text that describes the group of images.</p></div> diff --git a/accessibility-checker-engine/help/HAAC_Aria_Native_Host_Sematics.mdx b/accessibility-checker-engine/help/HAAC_Aria_Native_Host_Sematics.mdx index affeea022..6f3cf63be 100644 --- a/accessibility-checker-engine/help/HAAC_Aria_Native_Host_Sematics.mdx +++ b/accessibility-checker-engine/help/HAAC_Aria_Native_Host_Sematics.mdx @@ -2,7 +2,7 @@ title: "Accessibility Checker Rule Help: HAAC_Aria_Native_Host_Sematics" --- import "../../../styles/ToolHelp.scss" -import { Tag } from "carbon-components-react"; +import { CodeSnippet, Tag } from "carbon-components-react";
@@ -36,15 +36,11 @@ WAI-ARIA roles and attributes must be valid for the element they are assigned to The following sample code correctly uses the HTML5 `