Rephrase inline code elements (#4623)

This ports @patrickhlauke's changes that were originally applied on top
of #4611, which are beyond the scope of removing unused classes.

---------

Co-authored-by: Patrick H. Lauke <[email protected]>
Co-authored-by: Mike Gower <[email protected]>
Co-authored-by: Adam Page <[email protected]>

Author: 4 people

techniques/aria/ARIA21.html

@@ -8,8 +8,8 @@
  </ul>
 <div class="note"><p>One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the <code>required</code> property.</p></div>   
 <p>While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set <code>aria-invalid</code> to <code>"true"</code> on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has <code>aria-invalid</code> set to “true”, VoiceOver in Safari announces <samp>invalid</samp> data when the field gets focus; JAWS and NVDA notify the error as an <samp>invalid entry</samp>.</p>
-<p>This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting <code>aria-invalid</code> to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.</p>
-<p>When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting <code>aria-invalid</code> to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.</p>
+<p>This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting <code>aria-invalid</code> to <code>"false"</code> is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.</p>
+<p>When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting <code>aria-invalid</code> to <code>"true"</code> is not required from a strict compliance standpoint but may still provide helpful information for users.</p>
       </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Using aria-invalid on required fields</h3>
@@ -64,7 +64,7 @@ <h3>Using aria-invalid on required fields</h3>
       <section class="example">
          <h3>Identifying errors in data format</h3>
 
-            <p><code>Aria-invalid</code> and <code>aria-describedby</code> are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using <code>aria-describedby</code>, and <code>aria-invalid</code> makes it easier to programmatically find fields with errors.</p>
+            <p><code>aria-invalid</code> and <code>aria-describedby</code> are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using <code>aria-describedby</code>, and <code>aria-invalid</code> makes it easier to programmatically find fields with errors.</p>
             <p>Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of [email protected]), the HTML code is:</p>
 <pre xml:space="preserve"><code class="language-html">&lt;div class="control"&gt;
   &lt;div&gt;

techniques/aria/ARIA22.html

@@ -31,7 +31,7 @@ <h3>Including a search results message</h3>
 			</section>
 			<section class="example">
 				<h3>Updating the shopping cart status</h3>
-				<p>After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <code>&lt;p&gt;</code>) is marked with the role of <code>status</code>. Because it adds visual context, the shopping cart image &#8212; with succinct and accurate <code>alt</code> text &#8212; is also placed in the container. Due to the <code>aria-atomic</code> value, a screen reader will announce "Shopping cart, six items".</p>
+				<p>After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <code>&lt;p&gt;</code>) is marked with <code>role="status"</code>. Because it adds visual context, the shopping cart image &#8212; with succinct and accurate <code>alt</code> text &#8212; is also placed in the container. Due to the <code>aria-atomic</code> value, a screen reader will announce "Shopping cart, six items".</p>
 <pre xml:space="preserve"><code class="language-html">&lt;p role="status" aria-atomic="true"&gt;
   &lt;img src="shopping-cart.png" alt="Shopping Cart"&gt;
   &lt;span id="cart"&gt;0&lt;/span&gt; items

techniques/aria/ARIA23.html

@@ -28,7 +28,7 @@ <h2>Examples</h2>
 			<section class="example">
 				<h3>Updating the contents of a chat conversation</h3>
 				<section class="description">
-					<p>Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role of <code>log</code> so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).</p>
+					<p>Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with <code>role="log"</code> so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).</p>
 				</section>
 <pre xml:space="preserve"><code class="language-html">&lt;div id="chatRegion" role="log" aria-labelledby="chatHeading"&gt;
   &lt;h4 id="chatHeading"&gt;Chat History&lt;/h4&gt;
@@ -40,7 +40,7 @@ <h3>Updating the contents of a chat conversation</h3>
 			</section>
 			<section class="example">
 				<h3>Updating the log of a server</h3>
-				<p>An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with the role of <code>log</code> so that the new additions are announced by the ATs. (The default value for the <code>aria-relevant</code> attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.)  When each new log entry is added, a screen reader announces it.</p>
+				<p>An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with <code>role="log"</code> so that the new additions are announced by the ATs. (The default value for the <code>aria-relevant</code> attribute is <code>"additions"</code>, so the removal of the old top entries due to log size limitations will not be announced.)  When each new log entry is added, a screen reader announces it.</p>
 <pre xml:space="preserve"><code class="language-html">&lt;div id="activityLog" role="log"&gt;
   &lt;h4 id="logHeading"&gt;Recent activity&lt;/h4&gt;
   &lt;ul id="logentries""&gt;

techniques/aria/ARIA24.html

@@ -181,7 +181,7 @@ <h4>Working example:</h4>
 
             <h3>Multiple Icon Fonts as part of another sematic element WITH visible text</h3>
 
-            <p>This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute <code>aria-hidden=&quot;true&quot;</code> is used so the font icons will be ignored by assistive technologies.</p>
+            <p>This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute <code>aria-hidden="true"</code> is used so the font icons will be ignored by assistive technologies.</p>
 			<section>
             <h4>Author CSS</h4>
             <pre xml:space="preserve"><code class="language-css">/* default class for fonts-face with icons */

techniques/client-side-script/SCR35.html

@@ -25,7 +25,7 @@ <h2>Examples</h2>
       <section class="example">
 				<h3>Link that runs a script and has no fallback for non-scripted browsers</h3>
 				<p>This approach should only be used when script is relied upon as an Accessibility Supported Technology.</p>
-				<p>Even though we do not want to navigate from this link, we must use the href attribute on the <code>a</code> element in order to make this a true link and get the proper eventing. In this case, we're using <code>"#"</code> as the link target, but you could use anything. This link will never be navigated.</p>
+				<p>Even though we do not want to navigate from this link, we must use the <code>href</code> attribute on the <code>a</code> element in order to make this a true link and get the proper eventing. In this case, we're using <code>href="#"</code> as the link target, but you could use anything. This link will never be navigated.</p>
 				<p>The "<code>return false;</code>" at the end of the <code>doStuff()</code> event handling function tells the browser not to navigate to the <abbr title="Uniform Resource Identifier">URI</abbr>. Without it, the page would refresh after the script ran.</p>
 
 <pre xml:space="preserve"><code class="language-html">&lt;script&gt; 

techniques/client-side-script/SCR38.html

@@ -31,7 +31,7 @@ <h2>Examples</h2>
       <section class="example">
 				<h3>Using JavaScript</h3>
 				<p>The example uses JavaScript in the "accToggle.js" file to store the initial pre-enhanced version of the web page, created solely from the HTML in the source code, so that it can act as a "conforming alternate version" for any later enhanced versions of the web page; and inserts a toggle link into all enhanced versions of the web page which allows a user to revert the web page back to the stored pre-enhanced "Conforming Alternate Version". Note: The "sayhello.js" file is simply there as an example payload external file, and is to be replaced by any other external scripts which are desired.</p>
-				<p>The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2 conforming alternate version" link (inserted as the first child of the <code>body</code> element in any enhanced versions) changes the url to include the postfix "#accessible" which then resets the html located in the <code>body</code> element and the <code>head</code> element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a url typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).</p>
+				<p>The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix <code>#accessible</code>. Clicking the "WCAG 2 conforming alternate version" link (inserted as the first child of the <code>body</code> element in any enhanced versions) changes the URL to include the postfix <code>#accessible</code> which then resets the html located in the <code>body</code> element and the <code>head</code> element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a URL typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).</p>
 				<section id="the-javscript">
 				<h4>acctoggle.js JavaScript:</h4>
 <pre xml:space="preserve"><code class="language-javascript">window.onload = function(event) {

techniques/css/C18.html

@@ -17,7 +17,7 @@ <h2>When to Use</h2>
 		</section>
 		<section id="description">
 			<h2>Description</h2>
-      <p>Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('<code>margin-top</code>', '<code>margin-right</code>', '<code>margin-bottom</code>', '<code>margin-left</code>', and the shorthand '<code>margin</code>') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('<code>padding-top</code>', '<code>padding-right</code>', '<code>padding-bottom</code>', '<code>padding-left</code>', and the shorthand '<code>padding</code>') can be used on any element; they add space inside the element.</p>
+      <p>Web designers sometimes use spacer images (usually 1 by 1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('<code>margin-top</code>', '<code>margin-right</code>', '<code>margin-bottom</code>', '<code>margin-left</code>', and the shorthand '<code>margin</code>') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('<code>padding-top</code>', '<code>padding-right</code>', '<code>padding-bottom</code>', '<code>padding-left</code>', and the shorthand '<code>padding</code>') can be used on any element; they add space inside the element.</p>
 		</section>
 		<section id="examples">
 			<h2>Examples</h2>

techniques/css/C27.html

@@ -21,7 +21,7 @@ <h2>Description</h2>
 		<p>There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand. </p>
 		<p>When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order. </p>
 		<div class="note">
-			<p>The <code>tabindex</code> attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A <code>tabindex</code> of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting <code>tabindex</code> values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order. </p>
+			<p>The <code>tabindex</code> attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A <code>tabindex</code> of <code>0</code> makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting <code>tabindex</code> values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order. </p>
 		</div>
 	</section>
 	<section id="examples">

techniques/css/C28.html

@@ -38,14 +38,14 @@ <h3><code>em</code> units for sizes for layout container containing text </h3>
 		<section class="example">
 			<h3><code>em</code> units for text-based form controls</h3>
 
-			<p>In this example, <code>input</code> elements that contain text or accept text input by the user have been given the class name "form1". CSS rules are used to define the font size in percent units and width for these elements in <code>em</code> units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size). </p>
+			<p>In this example, <code>input</code> elements that contain text or accept text input by the user have been given <code>class="form1"</code>. CSS rules are used to define the font size in percent units and width for these elements in <code>em</code> units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size). </p>
 
 			<pre xml:space="preserve"><code class="language-css">input.form1 { font-size: 100%; width: 15em; }</code></pre>
 		</section>
 		<section class="example">
 			<h3><code>em</code> units in dropdown boxes</h3>
 
-			<p>In this example, <code>select</code> elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped. </p>
+			<p>In this example, <code>select</code> elements have been given <code>class="pick"</code>. CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped. </p>
 
 			<pre xml:space="preserve"><code class="language-css">select.pick { font-size: 100%; width: 10em; }</code></pre>
 		</section>

techniques/css/C6.html

@@ -22,7 +22,7 @@ <h2>Description</h2>
 	 <section id="examples">
 		<h2>Examples</h2>
 		<section class="example">
-			<p>In this example structural markup (description lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display <abbr title="HyperText Markup Language">HTML</abbr> definition lists with the <code>dd</code> element indented.</p>
+			<p>In this example structural markup (description lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to <code>0</code> to override the default behavior of user agents to display <abbr title="HyperText Markup Language">HTML</abbr> definition lists with the <code>dd</code> element indented.</p>
 			<p>Here is the content to be displayed:</p>
 
 <pre xml:space="preserve"><code class="language-html">&lt;div class="box"&gt;