Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve required field indicators for screen reader users on "Add an Event" form #30

Closed
carrythebanner opened this issue Nov 8, 2019 · 2 comments

Comments

@carrythebanner
Copy link
Contributor

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.

@carrythebanner 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
@evolve2k
Copy link

evolve2k commented Dec 1, 2021

Seems to have been fixed and even merged.
Recommend Close.

@carrythebanner
Copy link
Contributor Author

carrythebanner commented Dec 3, 2021

Aye, fixed with calagator/calagator#598, closing this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants