Skip to content

Commit

Permalink
Merge pull request #1776 from IBMa/phill-951-grammar-review
Browse files Browse the repository at this point in the history
fixrule(all_rules): Improve grammar and consistency across messages and help content
  • Loading branch information
ErickRenteria authored Jan 10, 2024
2 parents cfa7949 + 9d411a9 commit 853bfd0
Show file tree
Hide file tree
Showing 238 changed files with 1,187 additions and 949 deletions.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# equal-access

This Git repository hosts tools and supporting components that are part of the [IBM Equal Access Toolkit](https://ibm.com/able/toolkit).
This Git repository hosts tools and supporting components of the [IBM Equal Access Toolkit](https://ibm.com/able/toolkit).

## Overview

Expand All @@ -14,7 +14,7 @@ The tools have been deployed to the various stores and NPM so they can be easily

* [Chrome accessibility-checker-extension](https://chrome.google.com/webstore/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp) : web browser extension that integrates automated accessibility checking capabilities into the Chrome Developer Tools
* [Firefox accessibility-checker-extension](https://addons.mozilla.org/en-US/firefox/addon/accessibility-checker/) : web browser extension that integrates automated accessibility checking capabilities into the Firefox Web Developer Tools
* [Node accessibility-checker](https://www.npmjs.com/package/accessibility-checker): automated accessibility testing within a continuous integration pipeline such as Travis CI for Node-based test environments such as Selenium, Puppeteer, Playwright, and Zombie; the ability to validate results against baseline files, and scan local files
* [Node accessibility-checker](https://www.npmjs.com/package/accessibility-checker): automated accessibility testing within a continuous integration pipeline, such as Travis CI for Node-based test environments, such as Selenium, Puppeteer, Playwright, and Zombie; the ability to validate results against baseline files, and scan local files
* [karma-accessibility-checker](https://www.npmjs.com/package/karma-accessibility-checker): automated accessibility testing for the Karma environment
* [cypress-accessibility-checker](https://www.npmjs.com/package/cypress-accessibility-checker): wrapper of the `accessibility-checker` in the Cypress environment

Expand Down Expand Up @@ -83,7 +83,7 @@ $ npm run build
* ace-node-debug.js: uncompressed javascript library to be used in a NodeJS environment for development
* ace-node.js: compressed javascript library to be used in a NodeJS environment for production
* In the equal-access/accessibility-checker/package directory
* java script source that can be installed or deployed as npm package that works with an HTML parsing engines such as Selenium, Puppeteer, Playwright, or Zombie to allow developers to perform integrated accessibility testing within a continuous integration pipeline such as Travis CI. Please view more [details](accessibility-checker/src/README.md).
* JavaScript source that can be installed or deployed as npm package that works with an HTML parsing engines, such as Selenium, Puppeteer, Playwright, or Zombie to allow developers to perform integrated accessibility testing within a continuous integration pipeline, such as Travis CI. Please view more [details](accessibility-checker/src/README.md).
* In the equal-access/karma-accessibility-checker/package directory
* javascript source that can be used as a Karma plugin, see more [details](karma-accessibility-checker/README.md).

Expand Down
4 changes: 2 additions & 2 deletions accessibility-checker-engine/README-RULES.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Multiple objects are needed for a rule to fire and show up in the tool results:

### Rule object

The basic rule format is defined by the Rule type in [src/v4/api/IRule.ts](src/v4/api/IRule.ts). Rule implementation is located in [src/v4/rules](src/v4/rules). The rule context, including DOM object hierarchies, attributes, explicit/implicit CSS and ARIA attributes, that may trigger a rule, are defined in [src/v2/common/Context.ts](src/v2/common/Context.ts).
The basic rule format is defined by the Rule type in [src/v4/api/IRule.ts](src/v4/api/IRule.ts). Rule implementation is located in [src/v4/rules](src/v4/rules). The rule context, including DOM object hierarchies, attributes, explicit/implicit CSS and ARIA attributes, that may trigger a rule, are defined in [src/v2/common/Context.ts](src/v2/common/Context.ts).

#### Messages

Expand Down Expand Up @@ -81,7 +81,7 @@ Help integrates the following:

### Rule sets and Mappings

* Rule sets such as `IBM Accessibility v7.2`, `WCAG 2.2 (A & AA)`, etc. and mappings of the latest rules to the standards (Requirement and Rule IDs), the individual failure messages (by Reasons ID), and links to the Help files are listed in the published [Checker rule sets](https://www.ibm.com/able/requirements/checker-rule-sets)
* Rule sets, such as `IBM Accessibility v7.2`, `WCAG 2.2 (A & AA)`, etc. and mappings of the latest rules to the standards (Requirement and Rule IDs), the individual failure messages (by Reasons ID), and links to the Help files are listed in the published [Checker rule sets](https://www.ibm.com/able/requirements/checker-rule-sets)
* `npm run build:help` in the `.../accessibility-checker-engine` directory creates `dist/help/rules.html` that can be reviewed
* Each build creates the `Rules listing` artifact in **Actions** that can be reviewed prior to deployment.

Expand Down
2 changes: 1 addition & 1 deletion accessibility-checker-engine/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This README covers topics for developers who want to better understand the rules

The `"IBM Accessibility"` ruleset is based on the [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/), which is unified list of worldwide standards and regulations as described in the [release notes](https://www.ibm.com/able/requirements/release-notes).

The rules test conformance against the standards and specifications such as the [Accessible Rich Internet Applications (ARIA) specification](https://www.w3.org/TR/wai-aria-1.2/).
The rules test conformance against the standards and specifications, such as the [Accessible Rich Internet Applications (ARIA) specification](https://www.w3.org/TR/wai-aria-1.2/).
The rules are harmonized with open rules published by the [W3C ACT-Rules Community](https://www.w3.org/community/act-r/) group as reported in the [IBM Equal Access Accessibility Checker ACT implementation report](https://wai-wcag-act-rules.netlify.app/standards-guidelines/act/implementations/equal-access/).
`Rulesets` are also provided for `"WCAG 2.1 (A,AA)"` and `"WCAG 2.0 (A,AA)"`.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,17 @@ <h3 id="ruleMessage"></h3>

### Why is this important?

When text and its background colors have less than a 4.5 to 1 contrast ratio it can be difficult for people with moderately low vision to read the text without a contrast-enhancing technology. For larger text of 18 points or more, or bold 14 point text, the text and background colors must give at least a 3 to 1 contrast ratio.
When text and its background colors have less than a 4.5 to 1 contrast ratio, it can be difficult for people with moderately low vision to read the text without contrast-enhancing technology.
For the larger text of 18 points or more or bold 14 point text, the text and background colors must give at least a 3 to 1 contrast ratio.

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

### What to do

* Text should always have a solid background (i.e. not a color gradient or a background image) where possible;
* **Or**, when that is not possible (which is very rare), manually check the contrast ratio of the text against the lightest and the darkest colors of the background with a [Color Contrast Analyzer](https://www.ibm.com/able/toolkit/verify/manual/#color). For regular text it must be at least 4.5 to 1. For large text at least 18 point or at least 14 point when bold, the contrast ratio must be at least 3 to 1. If less, adjust the colors.
Adjust the colors:
* Text should have a solid background (i.e., not a color gradient or a background image) where possible.
* **Or**, when that is not possible (which is rare), manually check the contrast ratio of the text against the lightest and the darkest colors of the background with the [Color Contrast Analyzer](https://www.ibm.com/able/toolkit/verify/manual/#color). For regular text, it must be at least 4.5 to 1. For large text at least 18 point or at least 14 point when bold, the contrast ratio must be at least 3 to 1.

</script></mark-down>
<!-- End main panel -->
Expand All @@ -70,8 +72,8 @@ <h3 id="ruleMessage"></h3>

### WCAG techniques

* [G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG22/Techniques/general/G18)
* [G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG22/Techniques/general/G145)
* [G18: Regular text contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG22/Techniques/general/G18)
* [G145: Large text contrast ratio of at least 3:1](https://www.w3.org/WAI/WCAG22/Techniques/general/G145)

### Who does this affect?

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,17 @@ <h3 id="ruleMessage"></h3>

### Why is this important?

Elements with a role of `"article"` must have an associated label. This information helps people using assistive technologies to find and navigate the content. The HTML `<article>` element has an implicit role of `"article"`.
Elements with a role of `"article"` must have an associated label.
This information helps people using assistive technologies to find and navigate the content.
The HTML `<article>` element has an implicit role of `"article"`.

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

### What to do

* If there is visible text that appropriately describes the purpose of the article, set the element's `aria-labelledby` attribute value to the `id` value of that text (example below);
* **Or**, use the `aria-label` attribute to add a label directly to the element with the `"article"` role.
* If there is visible text that appropriately describes the purpose of the article, set the element's `aria-labelledby` attribute value to the `id` value of that text (example below)
* **Or**, use the `aria-label` attribute to add a label directly to the element with the `"article"` role

For example:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,17 @@ <h3 id="ruleMessage"></h3>

### Why is this important?

An HTML `<details>` element or an element with an explicit `"group"` role is used to form a logical collection of items in a component, such as a collection of siblings in a hierarchy. A group label helps people using assistive technologies to find and navigate the logical collections.
An HTML `<details>` element or an element with an explicit `"group"` role is used to form a logical collection of items in a component,
such as a collection of siblings in a hierarchy.
A group label helps people using assistive technologies to find and navigate the logical collections.

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

### What to do

* If there is visible text that appropriately describes the purpose of the group content, set the element's `aria-labelledby` attribute to the `id` value of that text (example below);
* **Or**, use the `aria-label` attribute to add a label directly to the element with the `"group"` role.
* If there is visible text that appropriately describes the purpose of the group, set the element's `aria-labelledby` attribute to the `id` value of that text (example below)
* **Or**, use the `aria-label` attribute to add a label directly to the element with the `"group"` role

For example:

Expand Down
11 changes: 6 additions & 5 deletions accessibility-checker-engine/help-v4/en-US/a_target_warning.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,16 @@ <h3 id="ruleMessage"></h3>

### Why is this important?

Changes in context can confuse or disorient users who cannot easily perceive the change. If activating a link opens a new popup or a window, informing the user in advance helps people who use assistive technologies be aware of the change in context.
Changes in context can confuse or disorient users who cannot easily perceive the change.
If activating a link opens a new popup or a window, informing the user in advance helps people who use assistive technologies be aware of the change in context.

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>

### What to do

* Include a warning in the label advising the user that the link opens in a new window;
* **Or**, use CSS to provide a warning before opening a new window (see Example 2 in [WCAG technique G201](https://www.w3.org/WAI/WCAG22/Techniques/general/G201)).
* Include a warning in the label advising the user that the link opens in a new window
* **Or**, use CSS to provide a warning before opening a new window (see Example 2 in [WCAG technique G201](https://www.w3.org/WAI/WCAG22/Techniques/general/G201))

</script></mark-down>
<!-- End main panel -->
Expand All @@ -67,11 +68,11 @@ <h3 id="ruleMessage"></h3>
### About this requirement

* [IBM 3.2.2 On Input](https://www.ibm.com/able/requirements/requirements/#3_2_2)
* [WCAG technique G201: Giving users advanced warning when opening a new window](https://www.w3.org/WAI/WCAG22/Techniques/general/G201)
* [G201: Giving users advanced warning when opening a new window](https://www.w3.org/WAI/WCAG22/Techniques/general/G201)

### Who does this affect?

* People using a screen reader, including blind, low vision and neurodivergent people
* People using a screen reader, including blind, low vision, and neurodivergent people
* People with low vision who use magnification
* People with cognitive limitations

Expand Down
13 changes: 7 additions & 6 deletions accessibility-checker-engine/help-v4/en-US/a_text_purpose.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,17 @@ <h3 id="ruleMessage"></h3>

### What to do

* Ideally, add unique link text as the content of the hyperlink that describes the purpose of the hyperlink;
* **Or**, if it’s not possible to use unique link text (e.g. multiple ‘Read more..’ links for different topics), use the `aria-labelledby` attribute to point to text visible on the page that identifies the link purpose. The following example shows how the `aria-labelledby` provides additional context by adding the text 'Breaking News' from the header to the link text 'Read more..':
* Ideally, add unique link text as the content of the hyperlink that describes the purpose of the hyperlink
* **Or**, if it’s not possible to use unique link text (e.g., multiple ‘Read more.’ links for different topics), use the `aria-labelledby` attribute to point to text visible on the page that identifies the link purpose.
The following example shows how the `aria-labelledby` provides additional context by adding the text 'Breaking News' from the header to the link text 'Read more.':

### Example

```
<h2 id="topic1">Breaking News</h2>
<p>
The central bank cut interest rates by half a
percentage to protect economy.
percentage to protect the economy.
<a
id="p1"
href="news.html"
Expand All @@ -83,12 +84,12 @@ <h2 id="topic1">Breaking News</h2>
### About this requirement

* [IBM 2.4.4 Link Purpose (in Context)](https://www.ibm.com/able/requirements/requirements/#2_4_4)
* [WCAG technique H30: Providing link text that describes the purpose of a link for anchor elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H30)
* [WCAG technique ARIA7: Using aria-labelledby for link purpose](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA7)
* [H30: Link text that describes the purpose of a link](https://www.w3.org/WAI/WCAG22/Techniques/html/H30)
* [ARIA7: aria-labelledby for link purpose](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA7)

### Who does this affect?

* People using a screen reader, including blind, low vision and neurodivergent people
* People using a screen reader, including blind, low vision, and neurodivergent people
* People with low vision using screen magnification

</script></mark-down>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ <h3 id="ruleMessage"></h3>

### Why is this important?

Alternative text on `<applet>` elements is important for users who do not have a Java-capable browser or have disabled Java™. In addition, providing a text alternative makes the same information accessible through audio or other channels.
Alternative text on `<applet>` elements is important for users who do not have a Java-capable browser or have disabled Java™.
In addition, providing a text alternative makes the same information accessible through audio or other channels.

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
Expand All @@ -59,7 +60,7 @@ <h3 id="ruleMessage"></h3>

```
<applet CODE="banner.class" ALT="Scrolling news banner" WIDTH="200" HEIGHT="200">
Banner showing three things:
Banner shows three things:
<ol>
<li>The Dow Jones Industrial Average climbed 300 points today in heavy trading.</li>
<li>G8 Summit to start in Washington tomorrow.</li>
Expand All @@ -80,11 +81,11 @@ <h3 id="ruleMessage"></h3>
### About this requirement

* [IBM 1.1.1 Non-text content](https://www.ibm.com/able/requirements/requirements/#1_1_1)
* [WCAG technique H35: Providing text alternatives on applet elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H35)
* [H35: Text alternatives on applet elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H35)

### Who does this affect?

* People using a screen reader, including blind, low vision and neurodivergent people
* People using a screen reader, including blind, low vision, and neurodivergent people
* People using text-based browsers (e.g., Lynx) or audio interfaces

</script></mark-down>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ <h3 id="ruleMessage"></h3>

### 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.
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.

<!-- This is where the code snippet is injected -->
<div id="locSnippet"></div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@ <h3 id="ruleMessage"></h3>
<img src="welcome.gif" usemap="#map1" alt="Areas in the library. Select an area for more information on that area." />
<map id="map1" name="map1">
<area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference" />
<area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab" />
<area shape="rect" coords="34,34,100,100" href="media.html" alt="Audiovisual lab" />
</map>
```

Note: Example code includes material copied from or derived from [WCAG technique H24: Providing text alternatives for the area elements of image maps](https://www.w3.org/WAI/WCAG22/Techniques/html/H24) Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang).
Note: Example code includes material copied from or derived from [H24: Text alternatives for the area elements of image maps](https://www.w3.org/WAI/WCAG22/Techniques/html/H24) Copyright © [2013-2017] W3C® (MIT, ERCIM, Keio, Beihang).

</script></mark-down>
<!-- End main panel -->
Expand All @@ -78,11 +78,11 @@ <h3 id="ruleMessage"></h3>
### About this requirement

* [IBM 1.1.1 Non-text content](https://www.ibm.com/able/requirements/requirements/#1_1_1)
* [WCAG technique H24: Providing text alternatives for the area elements of image maps](https://www.w3.org/WAI/WCAG22/Techniques/html/H24)
* [H24: Text alternatives for the area elements of image maps](https://www.w3.org/WAI/WCAG22/Techniques/html/H24)

### Who does this affect?

* People using a screen reader, including blind, low vision and neurodivergent people
* People using a screen reader, including blind, low vision, and neurodivergent people
* People who turned off image-loading on their web browsers
* People using text-based browsers (e.g., Lynx) or audio interfaces

Expand Down
Loading

0 comments on commit 853bfd0

Please sign in to comment.