Merge pull request #463 from IBMa/2021.07.21-archive

2021.07.21 Archive

rule-server/src/static/archives.json

@@ -4,11 +4,16 @@
         "name": "Latest Deployment",
         "path": "/archives/latest"
     },
+    {
+        "id": "21July2021",
+        "name": "21 July 2021 Deployment",
+        "path": "/archives/2021.07.21",
+        "latest": true
+    },
     {
         "id": "16June2021",
         "name": "16 June 2021 Deployment",
-        "path": "/archives/2021.06.16",
-        "latest": true
+        "path": "/archives/2021.06.16"
     },
     {
         "id": "27April2021",

rule-server/src/static/archives/2021.07.21/doc/HAAC_Accesskey_NeedLabel.mdx

@@ -0,0 +1,52 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Accesskey_NeedLabel"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### The HTML element with an assigned `accesskey` attribute does not have an associated label
+
+<div id="locLevel"></div>
+
+An HTML element with an assigned `accesskey` attribute must have an associated label
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### 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.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+ * Provide a label using a `title` attribute (e.g. `<a title="Activities" accesskey="A" href="/Consortium/activities">Activities</a>`);
+ * OR, use `<label for="">` or `aria-labelledby` to designate visible text as the label;
+ * OR, use an input embedded in a `<label>` (e.g. `<label><input type="checkbox" accesskey="A"/>foo</label>`);
+ * OR, if the element does not have a visible label, provide a label using the `aria-label` attribute (e.g. `aria-label="Activities"`).
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### 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
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.07.21/doc/HAAC_ActiveDescendantCheck.mdx

@@ -0,0 +1,63 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_ActiveDescendantCheck"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### The `aria-activedescendant` property of the component does not reference the `id` of a valid child element.
+
+<div id="locLevel"></div>
+
+The `aria-activedescendant` property must reference the `id` of a non-empty, non-hidden active child element.
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+In a composite component where the child elements are not normally able to take keyboard focus, the `aria-activedescendant` attribute can be used to identify the child element that currently has focus. This enables proper keyboard control of the component, and allows assistive technologies to gather information about the component and its state.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+* Verify that the `aria-activedescendant` attribute value is the `id` of the currently active child element;
+* AND, verify that the child element is not hidden;
+* AND, verify that the child element is either a descendant of this element, or is owned by this element (indicated by using the aria-owns attribute on this element).
+
+The following example* shows a radio group using `aria-activedescendant` to indicate the active radio button, which is coded as a DOM descendant:
+
+<CodeSnippet type="multi" light={true}> 
+   &lt;h3 id="group_label_1"&gt;Pizza Crust&lt;/h3&gt;
+   &lt;ul id="rg1" class="radiogroup" role="radiogroup" aria-labelledby="group_label_1" aria-activedescendant="rb11" tabindex="0"&gt;
+     &lt;li id="rb11" role="radio" aria-checked="false"&gt;Regular crust&lt;/li&gt;
+     &lt;li id="rb12" role="radio" aria-checked="false"&gt;Deep dish&lt;/li&gt;
+     &lt;li id="rb13" role="radio" aria-checked="false"&gt;Thin crust&lt;/li&gt;
+   &lt;/ul&gt; 
+   </CodeSnippet> 
+
+* 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).
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+[WAI-ARIA v1.2: Managing Focus in Composites Using aria-activedescendant](https://www.w3.org/TR/wai-aria-practices-1.2/#kbd_focus_activedescendant)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.07.21/doc/HAAC_Application_Role_Text.mdx

@@ -0,0 +1,53 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Application_Role_Text"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### Verify that non-decorative static text or image content within the element with role of `"application"` is accessible
+
+<div id="locLevel"></div>
+
+Non-decorative static text and image content within an element with role of `"application"` must be accessible
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### 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.
+
+<div id="locSnippet"></div>
+
+### 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://www.w3.org/TR/wai-aria-1.2/#managingfocus) by updating the value of `aria-activedescendant` to reference the element containing the focused content.
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+[WAI ARIA 1.2: Application Role](https://www.w3.org/TR/wai-aria-1.2/#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
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.07.21/doc/HAAC_Aria_ErrorMessage.mdx

@@ -0,0 +1,63 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Aria_ErrorMessage"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### Custom error message has invalid reference `id`
+
+<div id="locLevel"></div>
+
+A custom error message must reference a valid `id` and when triggered the message must be appropriately exposed
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+When a user input is detected as invalid, users expect to be informed about the error. Using a custom error message and making the content of the error message available and exposed programmatically makes the error message accessible through audio or other channels.
+
+<div id="locSnippet"></div>
+
+### What to do
+* If the `aria-errormessage` attribute does not reference a valid `id`, update the value to reference a valid `id`;
+* OR, if the `aria-errormessage` attribute references a valid `id`, verify the content is in a container that is not hidden when the message is triggered.
+
+Example:
+
+<CodeSnippet type="multi" light={true}>&lt;!-- Initial valid state --&gt;
+&lt;label for="startTime"&gt;Please enter a start time for the meeting:&lt;/label&gt;
+&lt;input id="startTime" type="text" aria-errormessage="msgID" value="" aria-invalid="false"&gt;
+&lt;span id="msgID" aria-live="off" style="visibility:hidden"&gt;Invalid time:  the time must be between 9:00 AM and 5:00 PM&lt;/span&gt;
+
+&lt;!-- User has entered an invalid value --&gt;
+&lt;label for="startTime"&gt;Please enter a start time for the meeting:&lt;/label&gt;
+
+&lt;input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30" PM&gt;
+&lt;span id="msgID" aria-live="assertive" style="visibility:visible"&gt;Invalid time:  the time must be between 9:00 AM and 5:00 PM&lt;/span&gt;</CodeSnippet>
+
+Note: Example code includes material copied from or derived from W3C WAI-ARIA 1.1 Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang)
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 3.3.1 Error Identification](https://www.ibm.com/able/requirements/requirements/#3_3_3)
+[WCAG 2.1 technique G85](https://www.w3.org/WAI/WCAG21/Techniques/general/G84)
+
+### Who does this affect?
+
+* People using a screen reader, including blind, low vision and neurodivergent people
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.07.21/doc/HAAC_Aria_ImgAlt.mdx

@@ -0,0 +1,57 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Aria_ImgAlt"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### WAI-ARIA widget with an `"img"` role has no label or an empty label
+
+<div id="locLevel"></div>
+
+Element with an `"img"` role must have a non-empty label
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### 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.
+
+<div id="locSnippet"></div>
+
+### 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:
+
+<CodeSnippet type="single" light={true}>&lt;div role="img" aria-labelledby="image1"&gt; ... &lt;p id="image1"&gt;Text that describes the group of images.&lt;/p&gt;&lt;/div&gt;</CodeSnippet>
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### About this requirement
+
+[IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
+[WCAG 2.1 technique ARIA16](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16)
+[WCAG 2.1 technique ARIA6](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6)
+
+### 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
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)

rule-server/src/static/archives/2021.07.21/doc/HAAC_Aria_Or_HTML5_Attr.mdx

@@ -0,0 +1,57 @@
+---
+title: "Accessibility Checker Rule Help: HAAC_Aria_Or_HTML5_Attr"
+---
+import "../../../styles/ToolHelp.scss"
+import { CodeSnippet, Tag } from "carbon-components-react";
+
+<div className="toolHelp">
+<Row>
+<Column colLg={16} colMd={8} colSm={4} className="toolHead">
+
+### HTML5 attribute is in conflict with the associated WAI-ARIA attribute used on an input element
+
+<div id="locLevel"></div>
+
+HTML5 attributes must not conflict with the associated WAI-ARIA attribute used on an input element
+
+</Column>
+</Row>
+<Row>
+<Column colLg={11} colMd={5} colSm={4} className="toolMain">
+
+### Why is this important?
+
+Using both an HTML5 attribute and the associated ARIA attribute with the same semantic meaning on an `<input>` 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.
+
+<div id="locSnippet"></div>
+
+### What to do
+
+Remove one of the conflicting HTML5 or ARIA attributes from the `<input>` element.
+
+Example using HTML5:
+
+<CodeSnippet type="multi" light={true}>&lt;label for="phone"&gt;* Phone number: &lt;/body&gt;
+&lt;input type="text" id="phone" name="phone" required&gt;</CodeSnippet>
+
+Example uses both HTML5 and ARIA attribute indicating the input is required without any conflict:
+
+<CodeSnippet type="multi" light={true}>&lt;label for="phone"&gt;* Phone number: &lt;/body&gt;
+&lt;input type="text" id="phone" name="phone" required aria-required="true"&gt;</CodeSnippet>
+
+</Column>
+<Column colLg={5} colMd={3} colSm={4} className="toolLeft">
+
+### 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
+
+</Column>
+</Row>
+</div>
+
+export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)