[wp-trac] [WordPress Trac] #62880: Improve HTML semantics in Site Health Info tables

[WordPress Trac]

#62880: Improve HTML semantics in Site Health Info tables
---------------------------+-----------------------------
 Reporter:  audrasjb       |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Site Health    |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 In Site Health Infos screen `/wp-admin/site-health.php?tab=debug`, tables
 should use the semantic HTML element `<th>` instead of a regular `<td>`
 table cell. The current implementation is stricto sensu valid because of
 the `presentation` role, but I don't think these tables are used only for
 presentation at the first place: these are merely classic tabular data :)
 So let's get rid of the `presentation` role and add regular table markup.

 For instance, currently we have:

 {{{
 <table role="presentation">
         <tbody>
                 <tr>
                         <td>Version</td>
                         <td>6.8</td>
                 </tr>
                 <tr>
                         <td>Site Language</td>
                         <td>en_US</td>
                 </tr>
         </tbody>
 </table>
 }}}

 The correct markup should be:
 {{{
 <table>
         <tbody>
                 <tr>
                         <th scope="row">Version</th>
                         <td>6.8</td>
                 </tr>
                 <tr>
                         <th scope="row">Site Language</th>
                         <td>en_US</td>
                 </tr>
         </tbody>
 </table>
 }}}

 Note 1: The `scope` attribute may be overkill here, as stated in WCAG
 implementation notes: https://www.w3.org/TR/WCAG20-TECHS/H63.html.

 > For simple tables that have the headers in the first row or column then
 it is sufficient to simply use the TH elements without scope.
 My own opinion is that it doesn't hurt to add it, but that's also why I'm
 adding the `accessibility` focus on this ticket.

 Note 2: By using `<th>`, the font size will increase from 13px to 14px. If
 we don't want that, we'll have to add a specific CSS rule for this
 implementation.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62880>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform