Kevin Powell - Community•2y ago

Which code is better considering accessibility and semantics

I'm trying to come up with the best way to present/code forum categories with forums list in terms of semantics and accessibility. https://codepen.io/MannixMD/pen/JjBPMGb If you have another idea on how the code should look like I'm open to suggestions 🙂

Mannix

CodePen

JjBPMGb

...

1 Reply

Jochem•2y ago

that's a textbook example of tabular data, so... <table>

<table>
  <thead>
    <tr>
      <th>Category Name</th>
      <th>Topics</th>
      <th>Posts</th>
      <th>LastPost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Forum name</td>
      <td>20</td>
      <td>22</td>
      <td>LastPost by</td>
    </tr>
    <tr>
      <td>Forum name</td>
      <td>20</td>
      <td>22</td>
      <td>LastPost by</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Category Name</th>
      <th>Topics</th>
      <th>Posts</th>
      <th>LastPost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Forum name</td>
      <td>20</td>
      <td>22</td>
      <td>LastPost by</td>
    </tr>
    <tr>
      <td>Forum name</td>
      <td>20</td>
      <td>22</td>
      <td>LastPost by</td>
    </tr>
  </tbody>
</table>

it's 100% the most semantic option, and that usually makes it the most accessible too I don't have any personal experience with screen readers, it's something I really need to get into more, but I can't imagine they'd have trouble handling one of the oldest HTML elements in existence being used for its designed use case

Gaming

Programming

Which code is better considering accessibility and semantics