From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Thu, 5 Oct 2017 19:30:42 +0000 (+0200)
Subject: Improved accessibility of Abide page.
X-Git-Tag: v6.6.0~3^2~311^2~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=dfae51056;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Improved accessibility of Abide page.

Added aria-onerrormessage attributes where needed. See [here (Spec)](https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage).
Fixed multiple elements having the same ID.
---

diff --git a/docs/pages/abide.md b/docs/pages/abide.md
index 2c4bf8e9c..0082ddd95 100644
--- a/docs/pages/abide.md
+++ b/docs/pages/abide.md
@@ -29,30 +29,30 @@ These input types create a text field: `text`, `date`, `datetime`, `datetime-loc
   <div class="row">
     <div class="small-12 columns">
       <label>Number Required
-        <input type="text" placeholder="1234" aria-describedby="exampleHelpText" required pattern="number">
-        <span class="form-error">
+        <input type="text" placeholder="1234" aria-describedby="exampleHelpText1" aria-errormessage="exampleErrorText1" required pattern="number">
+        <span class="form-error" id="exampleErrorText1">
           Yo, you had better fill this out, it's required.
         </span>
       </label>
-      <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
+      <p class="help-text" id="exampleHelpText1">Here's how you use this input field!</p>
     </div>
     <div class="small-12 columns">
       <label>Password Required
-        <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText" required >
-        <span class="form-error">
+        <input type="password" id="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" aria-errormessage="exampleErrorText2" required >
+        <span class="form-error" id="exampleErrorText2">
           I'm required!
         </span>
       </label>
-      <p class="help-text" id="exampleHelpText">Enter a password please.</p>
+      <p class="help-text" id="exampleHelpText2">Enter a password please.</p>
     </div>
     <div class="small-12 columns">
       <label>Re-enter Password
-        <input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText2" required pattern="alpha_numeric" data-equalto="password">
-        <span class="form-error">
+        <input type="password" placeholder="yeti4preZ" aria-describedby="exampleHelpText3" aria-errormessage="exampleErrorText3" required pattern="alpha_numeric" data-equalto="password">
+        <span class="form-error" id="exampleErrorText3">
           Hey, passwords are supposed to match!
         </span>
       </label>
-      <p class="help-text" id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
+      <p class="help-text" id="exampleHelpText3">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p>
     </div>
   </div>
   <div class="row">