Replace smart quotes w/ regular quotes: /web (mdn#13106)

* Replace smart quotes w/ regular quotes: /web

This PR is a part of mdn#13094.  This PR replaces smart opening and closing quotes with regular quotes for the `/web` directory.

* Fix title of Web/HTTP/CORS/Errors/CORSInvalidAllowHeader

* Fix spaces

* Fix title of Web/HTTP/CORS/Errors/CORSInvalidAllowHeader (accidentally reverted)

* Fix title for all CORS pages

Author: queengooborg

files/en-us/web/accessibility/aria/annotations/index.md

@@ -21,7 +21,7 @@ Below we'll introduce the new features associated with ARIA annotations, and hav
 The ARIA attributes providing these new abilities are as follows:
 
 - `aria-description=""` — provides a detailed description of an HTML element, as opposed to the brief label provided by [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute).
-- `role="insertion"` and `role="deletion"` — semantically denote HTML elements whose contents represent an insertion to or deletion from the overall document. These are semantically equivalent to the HTML {{HTMLElement('ins')}} and {{HTMLElement('del')}} elements. Note that these aren’t part of the new ARIA annotations features, but they are of central relevance.
+- `role="insertion"` and `role="deletion"` — semantically denote HTML elements whose contents represent an insertion to or deletion from the overall document. These are semantically equivalent to the HTML {{HTMLElement('ins')}} and {{HTMLElement('del')}} elements. Note that these aren't part of the new ARIA annotations features, but they are of central relevance.
 - `role="mark"` — semantically denotes HTML elements containing text that is marked/highlighted for reference purposes. This is semantically equivalent to the HTML {{HTMLElement('mark')}} element.
 - `role="suggestion"` — semantically denotes a single proposed change to an editable document. This should be used on an element that wraps a single insertion and deletion (see `role="insertion"` and `role="deletion"` above).
 - `role="comment"` — semantically denotes a comment/reaction to some content on the page, or to a previous comment.
@@ -33,14 +33,14 @@ ARIA annotation roles and objects are currently exposed in:
 - Firefox from version 75 onwards, on Windows and Linux (on macOS, we are first waiting for Apple to define what Safari will expose as Apple-dialect attributes to VoiceOver, and will then follow suit.)
 - Chrome from version 81 onwards, currently behind the `#enable-accessibility-expose-aria-annotations` flag (go to `chrome://flags` to enable this.)
 
-Unfortunately, you won’t be able to use any of these yet, as screenreader support is currently not there. For the moment, you can see the annotations data being exposed with tools like [Firefox Accessibility Inspector](/en-US/docs/Tools/Accessibility_inspector). The annotations should just work once screenreader support is added.
+Unfortunately, you won't be able to use any of these yet, as screenreader support is currently not there. For the moment, you can see the annotations data being exposed with tools like [Firefox Accessibility Inspector](/en-US/docs/Tools/Accessibility_inspector). The annotations should just work once screenreader support is added.
 
 ## Associating annotated elements with their details
 
-There are a number of different ways in which you can associate UI features with text labels or descriptions for accessibility purposes. It is useful to know when to use each. You’ll see examples of most of these later on in the article, but briefly:
+There are a number of different ways in which you can associate UI features with text labels or descriptions for accessibility purposes. It is useful to know when to use each. You'll see examples of most of these later on in the article, but briefly:
 
 - `aria-label=""` can be set on an element to provide a brief descriptive label when it isn't appropriate to have the label actually appearing in the UI, for example a [search input](/en-US/docs/Web/HTML/Element/input/search) in a horizontal nav bar.
-- `aria-labelledby=""` can be set on an element and given a value the same as the ID of an element that contains a label for the element. This is useful when the element’s label is available in the UI, but for some reason a conventional {{HTMLElement('label')}} won’t work.
+- `aria-labelledby=""` can be set on an element and given a value the same as the ID of an element that contains a label for the element. This is useful when the element's label is available in the UI, but for some reason a conventional {{HTMLElement('label')}} won't work.
 - `aria-description=""` works the same as `aria-label=""`, but is used when you want to give an element a more detailed description, rather than a short label.
 - `aria-describedby=""` works the same as `aria-labelledby=""`, but is used when you want to associate the element with a more detailed description, rather than a short label.
 - `aria-details=""` works in the same way as `aria-describedby=""`, except that it denotes more complex sets of details, rather than simple text descriptions. You can learn more about this in the next section.
@@ -49,7 +49,7 @@ There are a number of different ways in which you can associate UI features with
 
 We have already alluded to the difference between these two above — `aria-describedby` is for textual descriptions, whereas `aria-details` is for more complex sets of details. But what does this actually mean?
 
-`aria-describedby` is appropriate for associating an element with a simple text description, where you don’t have much in the way of meaningful semantics contained within. For example:
+`aria-describedby` is appropriate for associating an element with a simple text description, where you don't have much in the way of meaningful semantics contained within. For example:
 
 ```html
 <p id="description-id">An extended text description of some kind...</p>
@@ -77,7 +77,7 @@ This difference really becomes apparent when you get to how the content is actua
 
 ## A basic description
 
-Simple descriptions basically just involve usage of `aria-description` on an element to provide a description that can’t be gotten from the element’s text alone. As an example, let’s say you have a poll/voting UI widget that shows numbers of votes, but you want to summarize the purpose of the widget in a clear description because the UI does not make it clear:
+Simple descriptions basically just involve usage of `aria-description` on an element to provide a description that can't be gotten from the element's text alone. As an example, let's say you have a poll/voting UI widget that shows numbers of votes, but you want to summarize the purpose of the widget in a clear description because the UI does not make it clear:
 
 ```html
 <section aria-description="Choose your favorite fruit — the fruit with the highest number of votes will be added to the lunch options next week.">
@@ -113,34 +113,34 @@ If the descriptive text does appear in the UI, you can link the description to t
 A common wish in online document systems like Google Docs is to be able to track changes, to see what reviewers or editors have suggested as changes to the text, before the managing editor or author accepts or rejects those changes. The semantics for this have long been available in HTML, via the {{HTMLElement('ins')}} and {{HTMLElement('del')}} elements:
 
 ```html
-<p>Freida’s pet is a <del>black Cat called Luna</del><ins>purple Tyrannosaurus Rex called Tiny</ins>.</p>
+<p>Freida's pet is a <del>black Cat called Luna</del><ins>purple Tyrannosaurus Rex called Tiny</ins>.</p>
 ```
 
 With the new additions, you now have new roles available to provide the same semantics, should you be unable to use {{HTMLElement('ins')}} and {{HTMLElement('del')}} elements for some reason:
 
 ```html
-<p>Freida’s pet is a <span role="deletion">black Cat called Luna</span><span role="insertion">purple Tyrannosaurus Rex called Tiny</span>.</p>
+<p>Freida's pet is a <span role="deletion">black Cat called Luna</span><span role="insertion">purple Tyrannosaurus Rex called Tiny</span>.</p>
 ```
 
-However, this often isn’t enough — when you’ve got a content change like the one above that involves an insertion _and_ a deletion, there is no way for a screenreader user to work out if the two are related or not. This is the job of `role="suggestion"`, which should be set on an element wrapping both of them like so:
+However, this often isn't enough — when you've got a content change like the one above that involves an insertion _and_ a deletion, there is no way for a screenreader user to work out if the two are related or not. This is the job of `role="suggestion"`, which should be set on an element wrapping both of them like so:
 
 ```html
-<p>Freida’s pet is a
+<p>Freida's pet is a
   <span role="suggestion"><span role="deletion">black Cat called Luna</span><span role="insertion">purple Tyrannosaurus Rex called Tiny</span></span>.
 </p>
 ```
 
 We could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via `aria-details`:
 
 ```html
-<p>Freida’s pet is a
+<p>Freida's pet is a
   <span role="suggestion" aria-details="comment-source"><span role="deletion">black Cat called Luna</span><span role="insertion">purple Tyrannosaurus Rex called Tiny</span></span>.
 </p>
 
 <div id="comment-source">Suggested by Chris, <time datetime="2019-03-30T19:29">March 30 2021, 19:29</time></div>
 ```
 
-Browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use some more interesting styling of your own, for example:
+Browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you'll probably want to use some more interesting styling of your own, for example:
 
 ```css
 ins, [role="insertion"] {
@@ -165,7 +165,7 @@ ins, [role="insertion"], del, [role="deletion"] {
 
 Online document applications also commonly feature commenting systems, and it would be nice to have a way to semantically associate commented content and its comments. ARIA annotations can help us here too.
 
-Let’s say we have a comment box like so:
+Let's say we have a comment box like so:
 
 ```html
 <div role="comment" id="thread-1" data-author="chris">
@@ -175,7 +175,7 @@ Let’s say we have a comment box like so:
 </div>
 ```
 
-We’ve used `role="comment"` to mark this up as a comment. To associate the comment with the text being commented, we need to wrap the commented text with an element containing the `aria-details` attribute, the value of which should be the ID of the comment. {{HTMLElement('mark')}} is a suitable element for this purpose (a comment is a reference annotation), so the annotation could look like this:
+We've used `role="comment"` to mark this up as a comment. To associate the comment with the text being commented, we need to wrap the commented text with an element containing the `aria-details` attribute, the value of which should be the ID of the comment. {{HTMLElement('mark')}} is a suitable element for this purpose (a comment is a reference annotation), so the annotation could look like this:
 
 ```html
 <p>The last half of the song is a slow-rising crescendo that peaks at the
@@ -188,7 +188,7 @@ We’ve used `role="comment"` to mark this up as a comment. To associate the com
 </div>
 ```
 
-> **Note:** If for some reason you can’t use the {{HTMLElement('mark')}} element in your application, you could also use [`<span role="mark"></span>`](/en-us/docs/web/accessibility/aria/roles/mark_role).
+> **Note:** If for some reason you can't use the {{HTMLElement('mark')}} element in your application, you could also use [`<span role="mark"></span>`](/en-us/docs/web/accessibility/aria/roles/mark_role).
 
 Since `aria-details` can now accept multiple IDs, we can associate multiple comments with the same annotation, like so:
 

files/en-us/web/accessibility/aria/forms/alerts/index.html

@@ -44,9 +44,9 @@ <h2 id="Checking_for_validity_and_notifying_the_user_2"><span class="mw-headline
 <p>Form validations consists of several steps:</p>
 
 <ol>
- <li>Checking if the e-mail address or entered name are valid. Each field has a set of criteria which must be met in order to pass validation.  In order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if the name entry contains at least 1 character.</li>
- <li>If the above criteria is not met, the field’s <code>aria-invalid</code> attribute will be given a value of “<code>true</code>”.</li>
- <li>If the criteria was not met, the user will be notified via an alert. Instead of using the JavaScript ‘<code>alert</code>’ function, we’ll use a simple WAI-ARIA widget for notification. This notifies the user of the error, but allows for them continue modifying the form without losing focus (caused by the “<code>onblur</code>” handler in JavaScript's default ‘<code>alert</code>’ function).</li>
+ <li>Checking if the e-mail address or entered name are valid. Each field has a set of criteria which must be met in order to pass validation.  In order to simplify this example, we'll check whether the e-mail address contains the “@” symbol, and if the name entry contains at least 1 character.</li>
+ <li>If the above criteria is not met, the field's <code>aria-invalid</code> attribute will be given a value of “<code>true</code>”.</li>
+ <li>If the criteria was not met, the user will be notified via an alert. Instead of using the JavaScript '<code>alert</code>' function, we'll use a simple WAI-ARIA widget for notification. This notifies the user of the error, but allows for them continue modifying the form without losing focus (caused by the “<code>onblur</code>” handler in JavaScript's default '<code>alert</code>' function).</li>
 </ol>
 
 <p>Below is example JavaScript code which could be inserted above the closing “<code>head</code>” tag:</p>
@@ -90,12 +90,12 @@ <h2 id="The_checkValidity_function_2"><span class="mw-headline" id="The_checkVal
 
 <p>The primary method in JavaScript used for form validation is the <code>checkValidity</code> function. This method takes three parameters: The ID of the <code>input</code> that is to be validated, the term to search for to ensure validity, and the error message to be inserted into the alert.</p>
 
-<p>To see if it is valid, the function checks whether the <code>indexOf</code> the <code>input</code>’s value is anything greater than <code>-1</code>. A value of <code>-1</code> or less is returned if the index of the search term could not be found within the value.</p>
+<p>To see if it is valid, the function checks whether the <code>indexOf</code> the <code>input</code>'s value is anything greater than <code>-1</code>. A value of <code>-1</code> or less is returned if the index of the search term could not be found within the value.</p>
 
 <p>If invalid, the function does two things:</p>
 
 <ol>
- <li>It sets the element’s <code>aria-invalid</code> attribute to “<code>true</code>”, which will indicate to screen readers that there is invalid content in here.</li>
+ <li>It sets the element's <code>aria-invalid</code> attribute to “<code>true</code>”, which will indicate to screen readers that there is invalid content in here.</li>
  <li>It will call the <code>addAlert</code> function to add the alert with the provided error message.</li>
 </ol>
 
@@ -105,15 +105,15 @@ <h2 id="The_addAlert_function_2"><span class="mw-headline" id="The_addAlert_func
 
 <p>This function first removes any old alerts. The function is simple: It looks for an element with id “<code>alert</code>”, and if found, removes that from the <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">document object model</a>.</p>
 
-<p>Next, the function creates a <code>div</code> element to hold the alert text. It gets an ID of “<code>alert</code>”. And it gets a role set of “alert”. This is actually ARIA-inspired, even though it doesn’t say “aria” in the attribute name. This is because that role is based on the <a class="external text" href="https://www.w3.org/TR/xhtml-role/">XHTML Role Attribute Module</a> that was ported to HTML for simplicity.</p>
+<p>Next, the function creates a <code>div</code> element to hold the alert text. It gets an ID of “<code>alert</code>”. And it gets a role set of “alert”. This is actually ARIA-inspired, even though it doesn't say “aria” in the attribute name. This is because that role is based on the <a class="external text" href="https://www.w3.org/TR/xhtml-role/">XHTML Role Attribute Module</a> that was ported to HTML for simplicity.</p>
 
 <p>The text is added to the <code>div</code> element, and the <code>div</code> element is added to the document.</p>
 
-<p>The moment this happens, Firefox will fire an “alert” event to assistive technologies when this <code>div</code> appears. Most screen readers will pick this one up automatically and speak it. This is similar to the Notification Bar in Firefox that prompts you whether you want to save a password. The alert we just created does not have any buttons to press, it just tells us what’s wrong.</p>
+<p>The moment this happens, Firefox will fire an “alert” event to assistive technologies when this <code>div</code> appears. Most screen readers will pick this one up automatically and speak it. This is similar to the Notification Bar in Firefox that prompts you whether you want to save a password. The alert we just created does not have any buttons to press, it just tells us what's wrong.</p>
 
 <h2 id="Modifying_the_“onblur”_event"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">Modifying the “<code>onblur</code>” event</span></h2>
 
-<p>All that’s left now is add the event handler. We need to change the two inputs for e-mail and name for this:</p>
+<p>All that's left now is add the event handler. We need to change the two inputs for e-mail and name for this:</p>
 
 <pre class="brush: html"> &lt;input name="name" id="name" aria-required="true"
         onblur="checkValidity('name', ' ', 'Invalid name entered!');"/&gt;
@@ -127,8 +127,8 @@ <h2 id="Modifying_the_“onblur”_event"><span class="mw-headline" id="Adding_t
 <p>If you use Firefox 3 and a currently-supported screen reader, try the following:</p>
 
 <ol>
- <li>Enter only your first name as the name. When tabbing, you’ll hear an alert that tells you you’ve entered an invalid name. You can then shift-tab back and correct the error.</li>
- <li>Enter an e-mail address without the “@” symbol. When tabbing out of this field, you should hear a warning that says you didn’t enter a valid e-mail address.</li>
+ <li>Enter only your first name as the name. When tabbing, you'll hear an alert that tells you you've entered an invalid name. You can then shift-tab back and correct the error.</li>
+ <li>Enter an e-mail address without the “@” symbol. When tabbing out of this field, you should hear a warning that says you didn't enter a valid e-mail address.</li>
 </ol>
 
 <p>In both cases, when returning focus to the field in question, your screen reader should tell you that this field is invalid. JAWS 9 supports this, but JAWS 8 does not, so this may not work in all versions of the screen readers supported.</p>
@@ -137,8 +137,8 @@ <h2 id="A_few_questions_that_you_might_have_2"><span class="mw-headline" id="A_f
 
 <dl>
  <dt>Q. Why did you put both “<code>(required)</code>” in the label text and the <code>aria-required</code> attribute on some of the inputs?</dt>
- <dd>A. If this were a real live form, and the site was being visited by a browser that does not yet support ARIA, we’d still want to give an indication that this is a required field.</dd>
- <dt>Q. Why don’t you set focus back to the invalid field automatically?</dt>
+ <dd>A. If this were a real live form, and the site was being visited by a browser that does not yet support ARIA, we'd still want to give an indication that this is a required field.</dd>
+ <dt>Q. Why don't you set focus back to the invalid field automatically?</dt>
  <dd>A. Because this is not allowed by the Windows API specs, and possibly others. Also, letting the focus jump around without real user interaction too often is not a nice thing to do in general. </dd>
 </dl>