Use `<caption>` and `<th>` elements

Ensure that the Task#name value is in each <tr> element as a <th> element. According to the Mozilla Developer Network documentation:

Screenreaders will identify all headers and use them to make programmatic associations between those headers and the cells they relate to. The combination of column and row headers will identify and interpret the data in each cell so that screenreader users can interpret the table similarly to how a sighted user does.

To that end, declare a <caption> element as the first descendant of each of the <table> elements in the tasks/index template.


      app/views/events/new.html.erb

diff --git a/app/views/events/new.html.erb b/app/views/events/new.html.erb
index c475287..2a82d70 100644
--- a/app/views/events/new.html.erb
+++ b/app/views/events/new.html.erb
@@ -26,7 +26,7 @@
                 " %>
               <% end %>
             </td>
-            <td><%= builder.label %></td>
+            <th scope="row" class="font-normal"><%= builder.label %></th>
           <% end %>
         <% end %>
       </tbody>


      app/views/tasks/index.html.erb

diff --git a/app/views/tasks/index.html.erb b/app/views/tasks/index.html.erb
index e132ab3..65f100c 100644
--- a/app/views/tasks/index.html.erb
+++ b/app/views/tasks/index.html.erb
@@ -1,8 +1,9 @@
 <% if tasks.todo.any? %>
 <section>
-  <h2 class="text-2xl"><%= translate(".todo") %></h2>
-
   <table data-controller="tabstop-list" data-action="focusin->tabstop-list#trapFocus keydown->tabstop-list#navigate">
+    <caption>
+      <h2 class="text-2xl"><%= translate(".todo") %></h2>
+    </caption>
     <% tasks.todo.each do |task| %>
       <%= render "row", id: dom_id(task) do %>
         <td>
@@ -10,13 +11,12 @@
             form: :new_event_form, name: :task_id, value: task.id,
             "data-action": "click->controls-dialog#showModal" do %>
             <span class="sr-only"><%= translate(".select") %></span>
-            <span class="sr-only" aria-hidden="true"><%= task.name %></span>
           <% end %>
         </td>
 
-        <td>
+        <th scope="row" class="font-normal">
           <label for="<%= dom_id(task, :select) %>"><%= task.name %></label>
-        </td>
+        </th>
       <% end %>
     <% end %>
   </table>
@@ -25,12 +25,14 @@
 
 <% if tasks.delayed.any? %>
 <section>
-  <h2 class="text-2xl"><%= translate(".delayed") %></h2>
-
   <table data-controller="tabstop-list" data-action="focusin->tabstop-list#trapFocus keydown->tabstop-list#navigate">
+    <caption>
+      <h2 class="text-2xl"><%= translate(".delayed") %></h2>
+    </caption>
+
     <% tasks.delayed.each do |task| %>
       <%= render "row" do %>
-        <td><%= task.name %></td>
+        <th scope="row" class="font-normal"><%= task.name %></th>
 
         <td>
           <%= form_with(scope: :event, url: task_promotions_path(task)) do |form| %>
@@ -48,13 +50,15 @@
 
 <% if tasks.completed.any? %>
 <section>
-  <h2 class="text-2xl"><%= translate(".completed") %></h2>
-
   <table data-controller="tabstop-list" data-action="focusin->tabstop-list#trapFocus keydown->tabstop-list#navigate">
+    <caption>
+      <h2 class="text-2xl"><%= translate(".completed") %></h2>
+    </caption>
+
     <% tasks.completed.each do |task| %>
       <%= render "row" do %>
         <td>&checkmark;</td>
-        <td><%= task.name %></td>
+        <th scope="row" class="font-normal"><%= task.name %></th>
 
         <td>
           <%= form_with(scope: :event, url: task_reopenings_path(task)) do |form| %>

Use <caption> and <th> elements

Use `<caption>` and `<th>` elements