Mockups: Accessibility improvements

Author: philwareham

mockups/admin-languages.html

@@ -172,7 +172,7 @@ <h1 class="txp-heading">Languages</h1>
                     <li class="txp-grid-cell txp-grid-cell-2span success">
                         <form>
                             <p>
-                                <span class="ui-icon ui-icon-check"></span> <strong>English</strong><br>
+                                <span class="ui-icon ui-icon-check" role="status">Installed</span> <strong>English</strong><br>
                                 <code>en</code>
                             </p>
                             <p>
@@ -183,7 +183,7 @@ <h1 class="txp-heading">Languages</h1>
                     <li class="txp-grid-cell txp-grid-cell-2span success">
                         <form>
                             <p>
-                                <span class="ui-icon ui-icon-check"></span> <strong>English (British)</strong><br>
+                                <span class="ui-icon ui-icon-check" role="status">Installed</span> <strong>English (British)</strong><br>
                                 <code>en-gb</code>
                             </p>
                             <p>
@@ -195,7 +195,7 @@ <h1 class="txp-heading">Languages</h1>
                     <li class="txp-grid-cell txp-grid-cell-2span warning">
                         <form>
                             <p>
-                                <span class="ui-icon ui-icon-alert"></span> <strong>Français</strong><br>
+                                <span class="ui-icon ui-icon-alert" role="status">Installed <span role="separator">/</span> Update available</span> <strong>Français</strong><br>
                                 <code>fr</code>
                             </p>
                             <p>

mockups/content-list-rtl.html

@@ -39,7 +39,7 @@ <h1>
                             <a role="menuitem" tabindex="-1" href="content-article-rtl.html">Write</a>
                         </li>
                         <li class="selected" role="presentation">
-                            <a role="menuitem" tabindex="-1" href="content-list-rtl.html">Articles</a>
+                            <a role="menuitem" tabindex="-1" href="content-list-rtl.html" aria-current="page">Articles</a>
                         </li>
                         <li role="presentation">
                             <a role="menuitem" tabindex="-1" href="content-image.html">Images</a>
@@ -583,7 +583,7 @@ <h1 class="txp-heading">Articles</h1>
                         <a class="navlink-active" title="View 12 per page" aria-pressed="true" role="button" href="#">12</a><a class="navlink" title="View 24 per page" aria-pressed="false" role="button" href="#">24</a><a class="navlink" title="View 48 per page" aria-pressed="false" role="button" href="#">48</a><a class="navlink" title="View 96 per page" aria-pressed="false" role="button" href="#">96</a>
                     </div>
 
-                    <nav class="prev-next">
+                    <nav class="prev-next" aria-label="Page navigation">
                         <span class="disabled" aria-disabled="true" aria-label="Previous"><span class="ui-icon ui-icon-arrowthick-1-w">Previous</span></span>
                         <form method="get" action="index.php">
                             <label for="current-page">Page</label>

mockups/content-list.html

@@ -39,7 +39,7 @@ <h1>
                             <a role="menuitem" tabindex="-1" href="content-article.html">Write</a>
                         </li>
                         <li class="selected" role="presentation">
-                            <a role="menuitem" tabindex="-1" href="content-list.html">Articles</a>
+                            <a role="menuitem" tabindex="-1" href="content-list.html" aria-current="page">Articles</a>
                         </li>
                         <li role="presentation">
                             <a role="menuitem" tabindex="-1" href="content-image.html">Images</a>
@@ -583,7 +583,7 @@ <h1 class="txp-heading">Articles</h1>
                         <a class="navlink-active" title="View 12 per page" aria-pressed="true" role="button" href="#">12</a><a class="navlink" title="View 24 per page" aria-pressed="false" role="button" href="#">24</a><a class="navlink" title="View 48 per page" aria-pressed="false" role="button" href="#">48</a><a class="navlink" title="View 96 per page" aria-pressed="false" role="button" href="#">96</a>
                     </div>
 
-                    <nav class="prev-next">
+                    <nav class="prev-next" aria-label="Page navigation">
                         <span class="disabled" aria-disabled="true" aria-label="Previous"><span class="ui-icon ui-icon-arrowthick-1-w">Previous</span></span>
                         <form method="get" action="index.php">
                             <label for="current-page">Page</label>

mockups/installation/setup2-database-error.html

@@ -23,7 +23,7 @@
             <p class="txp-accessibility">There are 4 steps to this installation process:</p>
             <ol>
                 <li>Add database details</li>
-                <li class="active"><strong>Add config file</strong></li>
+                <li class="active" aria-current="step"><strong>Add config file</strong></li>
                 <li>Create database</li>
                 <li>Go!</li>
             </ol>

mockups/installation/setup2-database.html

@@ -22,7 +22,7 @@
         <aside class="progress-meter">
             <p class="txp-accessibility">There are 4 steps to this installation process:</p>
             <ol>
-                <li class="active"><strong>Set database details</strong></li>
+                <li class="active" aria-current="step"><strong>Set database details</strong></li>
                 <li>Add config file</li>
                 <li>Populate database</li>
                 <li>Go!</li>

mockups/installation/setup3-database-config.html

@@ -23,7 +23,7 @@
             <p class="txp-accessibility">There are 4 steps to this installation process:</p>
             <ol>
                 <li>Set database details</li>
-                <li class="active"><strong>Add config file</strong></li>
+                <li class="active" aria-current="step"><strong>Add config file</strong></li>
                 <li>Populate database</li>
                 <li>Go!</li>
             </ol>

mockups/installation/setup4-database-populate.html

@@ -24,7 +24,7 @@
             <ol>
                 <li>Set database details</li>
                 <li>Add config file</li>
-                <li class="active"><strong>Populate database</strong></li>
+                <li class="active" aria-current="step"><strong>Populate database</strong></li>
                 <li>Go!</li>
             </ol>
         </aside>

mockups/installation/setup5-database-done.html

@@ -25,7 +25,7 @@
                 <li>Set database details</li>
                 <li>Add config file</li>
                 <li>Populate database</li>
-                <li class="active"><strong>Go!</strong></li>
+                <li class="active" aria-current="step"><strong>Go!</strong></li>
             </ol>
         </aside>