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

Accessibility improvements - Form fields #4716

Closed
3 tasks done
Tracked by #4622
robinmolen opened this issue Oct 1, 2024 · 1 comment · Fixed by open-formulieren/open-forms-sdk#717 or #4754
Closed
3 tasks done
Tracked by #4622

Accessibility improvements - Form fields #4716

robinmolen opened this issue Oct 1, 2024 · 1 comment · Fixed by open-formulieren/open-forms-sdk#717 or #4754
Assignees
Labels
enhancement topic: a11y Accessibility issues
Milestone

Comments

@robinmolen
Copy link
Contributor

robinmolen commented Oct 1, 2024

Thema / Theme

Frontend

Omschrijving / Description

Part of #4622

This issue addresses the issues regarding form fields issues described in the accessibility rapport.

  • 1.3.1
  • 1.3.5
  • 1.4.11
    2.5.3

Added value / Toegevoegde waarde

No response

Aanvullende opmerkingen / Additional context

No response

@robinmolen robinmolen added enhancement topic: a11y Accessibility issues labels Oct 1, 2024
@robinmolen robinmolen added this to the Release 3.0 milestone Oct 1, 2024
@robinmolen robinmolen self-assigned this Oct 1, 2024
@robinmolen robinmolen changed the title Accessibility improvements - Aria tags and form fields Accessibility improvements - Form fields Oct 1, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 1, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 1, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 1, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 1, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 1, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 1, 2024
@robinmolen
Copy link
Contributor Author

robinmolen commented Oct 1, 2024

Most form inputs are now connected (with input element id and label element for tags) to their labels. Also the error messages now point to the corresponding input, using aria-describedby, and invalid inputs now have the aria-invalid="true" tag.

Some fields have some accessibility issues:

  • The file fields use a list element to display the uploaded files. The shown values currently aren't connected to the descriptions (the headers 'Filename', 'Size' and/or 'Type'). We should use a table, or maybe add some aria tags..
    I've turned the file 'uploaded files' list into a table. Providing more information to screenreaders
  • The date and datetime inputs currently aren't connected to their labels (related to issue 2.5.3)
    Update: I've discussed this issue with sergei. The current datepicker (flatpickr) has some accessibility issues, and we currently cannot fix this. For the future, if we can use the pure React datepicker, this issue will be solved. But for now we can't do anything about this issue..
  • The map field cannot easily be connected to its label and error message, seeing how this field lacks an input element. I'm also not sure if/how this field can be used without a cursor.
  • The signature input has a similar issue. This field has an input element, but it currently expects an bitmap image. I'm also not sure if/how this field can be used without a cursor.

robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 2, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 2, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 2, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 2, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 2, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 2, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 2, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 10, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 10, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 10, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 10, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 10, 2024
…ld be undefined

It's better if this element hasn't got an id, then when multiple elements have the same id
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 10, 2024
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 10, 2024
…ld be undefined

It's better if this element hasn't got an id, then when multiple elements have the same id
robinmolen added a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 14, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
…ld be undefined

It's better if this element hasn't got an id, then when multiple elements have the same id
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
- Replaced clickable icons with buttons
- Proper textual alternatives and translations
- Changed naming conventions for element ids
- Replaced <b> with css
- All icons now have 'aria-hidden="true"'
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 23, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
…ld be undefined

It's better if this element hasn't got an id, then when multiple elements have the same id
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
- Replaced clickable icons with buttons
- Proper textual alternatives and translations
- Changed naming conventions for element ids
- Replaced <b> with css
- All icons now have 'aria-hidden="true"'
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
sergei-maertens pushed a commit to open-formulieren/open-forms-sdk that referenced this issue Oct 24, 2024
@github-project-automation github-project-automation bot moved this from Implemented to Done in Development Oct 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement topic: a11y Accessibility issues
Projects
Archived in project
2 participants