You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
carrythebanner
changed the title
IImprove required field indicators for screen reader users on "Add an Event" form
Improve required field indicators for screen reader users on "Add an Event" form
Nov 8, 2019
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.
The text was updated successfully, but these errors were encountered: