e.g. with comma

accessibility-checker-engine/help-v4/en-US/a_target_warning.html

@@ -54,7 +54,7 @@ <h3 id="ruleMessage"></h3>
 ### 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 [G201](https://www.w3.org/WAI/WCAG22/Techniques/general/G201))
+* **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 -->

accessibility-checker-engine/help-v4/en-US/a_text_purpose.html

@@ -53,16 +53,16 @@ <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..':
+* **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"

accessibility-checker-engine/help-v4/en-US/aria_activedescendant_tabindex_valid.html

@@ -53,7 +53,7 @@ <h3 id="ruleMessage"></h3>
 The `tabindex` value defines the order (sequence) in which elements will receive focus when users navigate via the keyboard:
 * `"-1"` will remove the element from the tab sequence (ignored during tabbing) but may remain focusable
 * `"0"` will be handled in the order (tab sequence) as it appears in the DOM source code order
-* `">0"` (positive number) [creates a relative ordering](https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute) that starts from the element(s) with the lowest value (e.g. 1) and then proceeds to the element(s) with the next higher value
+* `">0"` (positive number) [creates a relative ordering](https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute) that starts from the element(s) with the lowest value (e.g., 1) and then proceeds to the element(s) with the next higher value
 
 <!-- This is where the code snippet is injected -->
 <div id="locSnippet"></div>

accessibility-checker-engine/help-v4/en-US/aria_content_in_landmark.html

@@ -52,8 +52,8 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
-* Enclose the content within an HTML5 sectioning element with an implicit landmark role (e.g. `<main>Content</main>`);
-* **Or**, use the `"role"` attribute on an enclosing element to specify an appropriate ARIA landmark value (e.g. `<div role="contentinfo">...</div>`).
+* Enclose the content within an HTML5 sectioning element with an implicit landmark role (e.g., `<main>Content</main>`);
+* **Or**, use the `"role"` attribute on an enclosing element to specify an appropriate ARIA landmark value (e.g., `<div role="contentinfo">...</div>`).
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/aria_main_label_unique.html

@@ -45,7 +45,7 @@ <h3 id="ruleMessage"></h3>
 
 ### Why is this important?
 
-The `<main>` element has an implicit landmark role of `"main"` that represents the central topic of the document. This provides a non-obtrusive alternative for a “skip to main content” link. It is possible, but not desirable, to have more than one element with a `"main"` role, for example through DOM nesting (e.g. a document within a document) or by use of the `aria-owns` attribute. In this situation, an associated unique label that describes each area of main content is needed to allow users of assistive technologies to understand the purpose of each main area, and navigate to them. Ideally the author SHOULD mark no more than one element with the `"main"` role.
+The `<main>` element has an implicit landmark role of `"main"` that represents the central topic of the document. This provides a non-obtrusive alternative for a “skip to main content” link. It is possible, but not desirable, to have more than one element with a `"main"` role, for example through DOM nesting (e.g., a document within a document) or by use of the `aria-owns` attribute. In this situation, an associated unique label that describes each area of main content is needed to allow users of assistive technologies to understand the purpose of each main area, and navigate to them. Ideally the author SHOULD mark no more than one element with the `"main"` role.
 
 <!-- This is where the code snippet is injected -->
 <div id="locSnippet"></div>

accessibility-checker-engine/help-v4/en-US/aria_widget_labelled.html

@@ -54,7 +54,7 @@ <h3 id="ruleMessage"></h3>
 * Use the `aria-labelledby` attribute to reference existing visible text on the page that can clearly identify the purpose of the component;
 * **Or**, use the `aria-label` attribute with a short description as its value that can clearly identify the purpose of the component when a visual label is not available;
 * **Or**, use the `title` attribute to provide a name when the design cannot accommodate a visual label;
-* **Or**, if the element's role allows it to derive a label from its content, provide the label text as the inner content of the element (e.g. `<button type="submit">Search</button>`).
+* **Or**, if the element's role allows it to derive a label from its content, provide the label text as the inner content of the element (e.g., `<button type="submit">Search</button>`).
 
 The following code snippet shows a tree widget labelled with an `aria-labelledby` attribute to reference the heading text:
 

accessibility-checker-engine/help-v4/en-US/element_accesskey_labelled.html

@@ -52,10 +52,10 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
- * Provide a label using a `title` attribute (e.g. `<a title="Activities" accesskey="A" href="/Consortium/activities">Activities</a>`);
+ * 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"`).
+ * **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"`).
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/element_scrollable_tabbable.html

@@ -46,8 +46,8 @@ <h3 id="ruleMessage"></h3>
 ### Why is this important?
 
 Many users need to be able to use the keyboard and keyboard-like emulators to navigate to and operate scrollable elements – such as scrolling up-down and left-right with arrow keys – to reveal all the visible content. 
-Only some browsers (e.g. Firefox) will automatically include _**any**_ scrollable element in the tab-order (tabbable sequence) to ensure keyboard accessibility. 
-Browsers will automatically make scrollable elements tabbable when they _**contain**_ tabbable elements (e.g. buttons) without requiring an explicit `tabindex`attribute on the container element. 
+Only some browsers (e.g., Firefox) will automatically include _**any**_ scrollable element in the tab-order (tabbable sequence) to ensure keyboard accessibility. 
+Browsers will automatically make scrollable elements tabbable when they _**contain**_ tabbable elements (e.g., buttons) without requiring an explicit `tabindex`attribute on the container element. 
 However, setting the `tabindex` attribute on a scrollable container itself to a negative value excludes it and its tabbable content from the tab-order, 
 effectively making it keyboard inaccessible and blocking many users.
 

accessibility-checker-engine/help-v4/en-US/form_font_color.html

@@ -52,7 +52,7 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
-* If color is used to indicate required fields, also use the `required` attribute and an asterisk ('*') with text (e.g.  “required fields are red") to indicate required fields both programmatically and visually without color;
+* If color is used to indicate required fields, also use the `required` attribute and an asterisk ('*') with text (e.g.,  “required fields are red") to indicate required fields both programmatically and visually without color;
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/html_lang_exists.html

@@ -52,7 +52,7 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
-* Identify the default language of the HTML document by providing the `lang` attribute on the HTML element (e.g. `<html lang="en">`);
+* Identify the default language of the HTML document by providing the `lang` attribute on the HTML element (e.g., `<html lang="en">`);
 * **Or**, if serving an XML document only (ie. using a MIME type such as application/xhtml+xml), identify the default language by providing the `xml:lang` attribute alone. The `lang` attribute is not needed (`<html xml:lang="fr" xmlns="https://www.w3.org/1999/xhtml">`)
 * **Or**, if serving XHTML 1.x or polyglot pages as text/html, use both the `lang` attribute and the `xml:lang` attribute and ensure the values for both attributes are identical (`<html lang="fr" xml:lang="fr" xmlns="https://www.w3.org/1999/xhtml">`)
 

accessibility-checker-engine/help-v4/en-US/html_skipnav_exists.html

@@ -55,7 +55,7 @@ <h3 id="ruleMessage"></h3>
 * Provide headings for each content section using `<h1>` ... `<h6>`;
 * **And/or** provide landmarks to identify blocks of content on the page;
 * **And/or** use links to skip blocks of repeated content by linking from the top of the page to the main content, or from the start of the repeated content to the end of the block;
-* **And/or** group blocks of repeated content using structural elements (e.g. `<map>`, `<ul>` or `<ol>`), or `<frame>` elements with a `"title"` attribute, or an expandable and collapsible menu.
+* **And/or** group blocks of repeated content using structural elements (e.g., `<map>`, `<ul>` or `<ol>`), or `<frame>` elements with a `"title"` attribute, or an expandable and collapsible menu.
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/imagebutton_alt_exists.html

@@ -48,7 +48,7 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
-* Use the `alt` attribute on the `<input>` element to provide a short text that describes the input element’s function.(e.g. `<input type="image" alt="submit">`)
+* Use the `alt` attribute on the `<input>` element to provide a short text that describes the input element’s function.(e.g., `<input type="image" alt="submit">`)
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/img_alt_misuse.html

@@ -52,8 +52,8 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
-* If the image conveys meaning, the value of the `"alt"` attribute should be a short description that serves the same purpose as the image. Include any important words from the image in the short description (e.g. `<img alt="submit">`). Do not use a file name;
-* **Or**, if the image is decorative or the same information is also available in text, use the `"alt"` attribute with an empty string as its value (e.g.  `<img alt="">`).
+* If the image conveys meaning, the value of the `"alt"` attribute should be a short description that serves the same purpose as the image. Include any important words from the image in the short description (e.g., `<img alt="submit">`). Do not use a file name;
+* **Or**, if the image is decorative or the same information is also available in text, use the `"alt"` attribute with an empty string as its value (e.g.,  `<img alt="">`).
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/img_alt_redundant.html

@@ -54,7 +54,7 @@ <h3 id="ruleMessage"></h3>
 
 * If a link has text and a redundant image, set the image `alt` attribute to `alt=“”` (null alt without any spaces);
 * **Or**, if a link has text and an image that adds important information to the text, set the image `alt` attribute to convey the added information.
-  (e.g. `<a><img alt="urgent">new mail</a>`);
+  (e.g., `<a><img alt="urgent">new mail</a>`);
 * **Or**, if adjacent links have different targets but the same text, change the link text or the `alt` attribute on the image to distinguish the purpose of each link;
 * **Or**, if adjacent links have the same target, combine them into a single link and set the image `alt` attribute to `alt=“”`.
 

accessibility-checker-engine/help-v4/en-US/input_checkboxes_grouped.html

@@ -45,7 +45,7 @@ <h3 id="ruleMessage"></h3>
 
 ### Why is this important?
 
-Grouping related radio buttons and checkboxes enables assistive technology to convey the group relationship to users (e.g. "group of 5 radio buttons").
+Grouping related radio buttons and checkboxes enables assistive technology to convey the group relationship to users (e.g., "group of 5 radio buttons").
 
 <!-- This is where the code snippet is injected -->
 <div id="locSnippet"></div>

accessibility-checker-engine/help-v4/en-US/input_label_exists.html

@@ -52,10 +52,10 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
-* If the control is a [labelable](https://html.spec.whatwg.org/multipage/forms.html#category-label) element, add a `for` attribute to a visible label with the `id` of this control (e.g. `<label for="controlID">`);
+* If the control is a [labelable](https://html.spec.whatwg.org/multipage/forms.html#category-label) element, add a `for` attribute to a visible label with the `id` of this control (e.g., `<label for="controlID">`);
 * **Or**, if the  control is a labelable element, put the control inside a visible `<label>` element;
 * **Or**, add an `aria-labelledby` attribute to the control. It must point to visible text on the page that is meaningful as a label;
-* **Or**, if the design cannot have a visible label, provide a label using the `aria-label` attribute (e.g. `aria-label="Activities"`);
+* **Or**, if the design cannot have a visible label, provide a label using the `aria-label` attribute (e.g., `aria-label="Activities"`);
 * **Or**, if the design cannot have a visible label, use the `title` attribute to provide a label.
 
 </script></mark-down>

accessibility-checker-engine/help-v4/en-US/list_markup_review.html

@@ -53,7 +53,7 @@ <h3 id="ruleMessage"></h3>
 ### What to do
 
  * Verify that the content is not a list;
- * **Or**, if this is a list, use HTML list elements (e.g. `<ol>`, `<ul>`, `<li>`) to create the list and CSS to style the list as desired.
+ * **Or**, if this is a list, use HTML list elements (e.g., `<ol>`, `<ul>`, `<li>`) to create the list and CSS to style the list as desired.
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/meta_refresh_delay.html

@@ -52,7 +52,7 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
- * Remove the `<META>` tag that causes an automatic page refresh (e.g. `<META HTTP-EQUIV="Refresh" CONTENT="10">`) and use a different method to update information on the page;
+ * Remove the `<META>` tag that causes an automatic page refresh (e.g., `<META HTTP-EQUIV="Refresh" CONTENT="10">`) and use a different method to update information on the page;
  * **Or**, provide an option to turn off, extend, or adjust the timing of the page refresh;
  * **Or**, at the top of the page, provide a single line of explanation and link to a non-refreshing page. For example "This page automatically reloads every 10 seconds. A `<a href="..."> non-updating equivalent page </a>` with a refresh button is available."
 

accessibility-checker-engine/help-v4/en-US/skip_main_described.html

@@ -52,7 +52,7 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
- * If this link skips content on the page, verify the link text communicates where it skips to (e.g. "Jump to site navigation");
+ * If this link skips content on the page, verify the link text communicates where it skips to (e.g., "Jump to site navigation");
  * **Or**, if this link goes to the main content on the page, set the link text to "Skip to main content".
 
 For example:

accessibility-checker-engine/help-v4/en-US/style_background_decorative.html

@@ -54,7 +54,7 @@ <h3 id="ruleMessage"></h3>
 
 * If the background image contains important text, use real text rather than an image of text;
 * **Or**, if the background image conveys important information, use the `<img>` element with an `"alt"` attribute instead of a background image;
-* **Or**, provide a text alternative for the information that shows if the CSS image is not displayed (e.g. for users using alternate backgrounds and users using high contrast mode).
+* **Or**, provide a text alternative for the information that shows if the CSS image is not displayed (e.g., for users using alternate backgrounds and users using high contrast mode).
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/style_color_misuse.html

@@ -52,8 +52,8 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
-* If color is used to indicate required fields, also use an asterisk ('*') to visually indicate required fields without color (e.g.  “required fields are red and indicated with '*' ") and indicate them programmatically with the `required` attribute;
-* **Or**, if use of color conveys other meaning or information, check that there is another visual indicator together with programmatic or text information that conveys the same information (e.g. use “green checkmarks” and “red crosses” instead of just “red” and “green” indicators).
+* If color is used to indicate required fields, also use an asterisk ('*') to visually indicate required fields without color (e.g.,  “required fields are red and indicated with '*' ") and indicate them programmatically with the `required` attribute;
+* **Or**, if use of color conveys other meaning or information, check that there is another visual indicator together with programmatic or text information that conveys the same information (e.g., use “green checkmarks” and “red crosses” instead of just “red” and “green” indicators).
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/table_headers_exists.html

@@ -56,7 +56,7 @@ <h3 id="ruleMessage"></h3>
  * **Or**, identify the table as layout with `role="presentation"`  or `role="none"`;
  * **Or**, if this is a simple data table, use the `<th>` element to identify headers in the first row;
  * **Or**, if this is complex data table, add the `scope` attribute to the `<th>` element to identify headers and define the scope of the header for each data cell;
- * **Or**, if this is a complex table with multiple rows or columns as headers, use the `id` attribute with the `<th>` element and the `headers` attribute with the `<td>` element to identify multiple headers for each data cell (e.g. `<td headers="h1 h2">`).
+ * **Or**, if this is a complex table with multiple rows or columns as headers, use the `id` attribute with the `<th>` element and the `headers` attribute with the `<td>` element to identify multiple headers for each data cell (e.g., `<td headers="h1 h2">`).
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/table_headers_related.html

@@ -54,8 +54,8 @@ <h3 id="ruleMessage"></h3>
 
  * If this is not a data table (no relational data), use CSS instead of a `<table>` element to lay out your content (highly recommended); 
  * **Or**, identify the table as layout with `role="presentation"`  or `role="none"`;
- * **Or**, use the `id` attribute to provide an identifier for header cells (e.g. `<th id="school">`);
- * **And**, use the `header` attribute on data cells to identify the appropriate header cells (e.g. `<td headers="school teacher grade">`).
+ * **Or**, use the `id` attribute to provide an identifier for header cells (e.g., `<th id="school">`);
+ * **And**, use the `header` attribute on data cells to identify the appropriate header cells (e.g., `<td headers="school teacher grade">`).
 
 </script></mark-down>
 <!-- End main panel -->

accessibility-checker-engine/help-v4/en-US/text_block_heading.html

@@ -52,7 +52,7 @@ <h3 id="ruleMessage"></h3>
 
 ### What to do
 
- * If this text is intended to be a heading, use the `<h>` elements (h1-h6) rather than style alone to define heading text (e.g. `<h2>Section 1</h2>`);
+ * If this text is intended to be a heading, use the `<h>` elements (h1-h6) rather than style alone to define heading text (e.g., `<h2>Section 1</h2>`);
  * **Or**, use other markup so the element's semantic meaning is exposed to assistive technology that is appropriate for the content of the element.
 
 </script></mark-down>