[5.0] Installation Language a11y (#41866)

Tables should have a caption and use scope for columns and rows In order to be accessible to visually impaired users, it is important that tables provides a description of its content before the data is accessed. The simplest way to do it, and also the one recommended by WCAG2 is to add a `<caption>` element inside the `<table>`.
joomla · Sep 23, 2023 · 386acae · 386acae
1 parent 8dedb21
commit 386acae
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/installation/tmpl/remove/default.php b/installation/tmpl/remove/default.php
@@ -41,17 +41,19 @@ class="j-install-step-form flex-column"
                     class="j-install-step-form flex-column d-none"
                 >
         <?php endif; ?>
-        <p><?php echo Text::_('INSTL_DEFAULTLANGUAGE_DESC'); ?></p>
         <table class="table table-sm">
+            <caption>
+                <?php echo Text::_('INSTL_DEFAULTLANGUAGE_DESC'); ?>
+            </caption>
             <thead>
             <tr>
-                <th>
+                <th scope="col">
                     <?php echo Text::_('INSTL_DEFAULTLANGUAGE_COLUMN_HEADER_SELECT'); ?>
                 </th>
-                <th>
+                <th scope="col">
                     <?php echo Text::_('INSTL_DEFAULTLANGUAGE_COLUMN_HEADER_LANGUAGE'); ?>
                 </th>
-                <th>
+                <th scope="col">
                     <?php echo Text::_('INSTL_DEFAULTLANGUAGE_COLUMN_HEADER_TAG'); ?>
                 </th>
             </tr>
@@ -71,29 +73,31 @@ class="form-check-input"
                             } ?>
                         />
                     </td>
-                    <td>
+                    <th scope="row">
                         <label for="admin-language-cb<?php echo $i; ?>">
                             <?php echo $lang->name; ?>
                         </label>
-                    </td>
+                    </th>
                     <td>
                         <?php echo $lang->language; ?>
                     </td>
                 </tr>
             <?php endforeach; ?>
             </tbody>
         </table>
-        <p><?php echo Text::_('INSTL_DEFAULTLANGUAGE_DESC_FRONTEND'); ?></p>
         <table class="table table-sm">
+            <caption>
+                <?php echo Text::_('INSTL_DEFAULTLANGUAGE_DESC_FRONTEND'); ?>
+            </caption>
             <thead>
             <tr>
-                <th>
+                <th scope="col">
                     <?php echo Text::_('INSTL_DEFAULTLANGUAGE_COLUMN_HEADER_SELECT'); ?>
                 </th>
-                <th>
+                <th scope="col">
                     <?php echo Text::_('INSTL_DEFAULTLANGUAGE_COLUMN_HEADER_LANGUAGE'); ?>
                 </th>
-                <th>
+                <th scope="col">
                     <?php echo Text::_('INSTL_DEFAULTLANGUAGE_COLUMN_HEADER_TAG'); ?>
                 </th>
             </tr>
@@ -113,11 +117,11 @@ class="form-check-input"
                             } ?>
                         />
                     </td>
-                    <td>
+                    <th scope="row">
                         <label for="site-language-cb<?php echo $i; ?>">
                             <?php echo $lang->name; ?>
                         </label>
-                    </td>
+                    </th>
                     <td>
                         <?php echo $lang->language; ?>
                     </td>