On the "Add an Event" form, a required field is rendered like this:
<li class="string input required autofocus stringish" id="event_title_input"><label for="event_title" class="label">Event Name<abbr title="required">*</abbr></label><input maxlength="255" id="event_title" autofocus="autofocus" type="text" name="event[title]"></li>
This mostly works well, but screen reader users will hear something like "Event Name star" as the name of the field ("star" being the asterisk, as VoiceOver on macOS announces it). Additionally, the field isn't indicated as required to a screen reader.
These can be fixed by:
Marking the abbr element with aria-hidden="true" so that screen readers skip over this visual-only indicator.
Adding a required attribute to the input element.
With both of the above, screen reader users will hear something like "Event Name, required, edit text" when the input is focused.
On the "Add an Event" form, a required field is rendered like this:
<li class="string input required autofocus stringish" id="event_title_input">
<label for="event_title" class="label">Event Name<abbr title="required">*</abbr></label>
<input maxlength="255" id="event_title" autofocus="autofocus" type="text" name="event[title]">
</li>
This mostly works well, but screen reader users will hear something like "Event Name star" as the name of the field ("star" being the asterisk, as VoiceOver on macOS announces it). Additionally, the field isn't indicated as required to a screen reader.
These can be fixed by:
abbr
element witharia-hidden="true"
so that screen readers skip over this visual-only indicator.required
attribute to theinput
element.With both of the above, screen reader users will hear something like "Event Name, required, edit text" when the input is focused.