Fix accessibility issues in form

Problem/Motivation

Entering office hours gives screenreader users a hard time. Let's pick at least the low-hanging fruit.

• The all-day checkbox is too verbose (visually hidden label reads "Indicates if the entity is opened all day")
• The time fields are too verbose (and contain more attributes than necessary)
• First column in table is no heading, thus will not be announced (instead of "Monday" it reads "second row")
• Action links have an empty href attribute, no aria attributes and provide no feedback (semantically should be buttons)
• "From - to" range translates inappropriately generic to other languages

Steps to reproduce

I am focusing on the widget Office hours (week) with exceptions and seasons here.

1. Add an office hours field to any node bundle
2. Configure Time element type: HTML5 time input
3. Configure Time notation: 24 hours
4. Enable "Allow 'all day' situations
5. Enable "Allow exception days
6. Enable "Allow seasons
7. In form display, choose "Office hours (week) with exceptions and seasons" widget

View mode with different configurations seemed good to me, skipping for now.

Proposed resolution

Low-hanging

• All-day checkbox label: change "Indicates if the entity is opened all day" to "Open all day"
• Change HTML5 time field markup (see below)
• First column in table body: change <td> ... </td> to <th> ... </th>
• Add a time span-related context for "From" and "to" strings

HTML time field markup

Given:

<input
  data-drupal-selector="edit-field-office-hours-office-hours-0-value-12-starthours-time"
  type="time"
  step="60"
  title="Time, with an increment of 1 minute (e.g. 17:25)"
  placeholder="hh:mm:ss"
  data-help="Enter the time using the format hh:mm:ss (e.g., 17:19)."
  id="edit-field-office-hours-office-hours-0-value-12-starthours-time"
  name="field_office_hours[office_hours][0][value][12][starthours][time]"
  size="12"
  class="form-time form-element form-element--type-time form-element--api-date"
  data-once="field-group-tab-validation field-group-tabs-validation"
>

A11y enhanced:

<input
  data-drupal-selector="edit-field-office-hours-office-hours-0-value-12-starthours-time"
  type="time"
  step="60"
  data-help="Time in format hh:mm"
  id="edit-field-office-hours-office-hours-0-value-12-starthours-time"
  name="field_office_hours[office_hours][0][value][12][starthours][time]"
  class="form-time form-element form-element--type-time form-element--api-date"
  data-once="field-group-tab-validation field-group-tabs-validation"
>

The title attribute is read out but does not enhance the user experience (on the contrary, by being too verbose).

I was not sure where data-help is used, maybe just leave it untouched. But the hint including seconds seems wrong to me.

Especially keep text designed for screen readers as short as possible because every field itself delivers extra text on top. Interested in trying yourself? Our community friends at the Company for the Development of Things have a list of free screen readers for all OS.

Advanced

The action links should better be transformed into buttons. If each gets a dedicated class they can even be visually reduced to icons (something like "plus, trash + clone"). The button action should result in feedback/announcements like e. g. "Values removed."

I see that this may conflict with the patch in Replace operation links in the widget with a dropbutton. It should be possible to change that to work with buttons, too (see Paragraphs's Stable widget, Add mode "Dropdown button").

Remaining tasks

Write patches.

Discuss this with contributors over in the related issue.