Description
Currently, most of all the form inputs fields on the Ushahidi platform are disconnected from their labels and this makes it difficult for screen readers to understand the purpose of the input field, so when the input is focused the screen reader just announces the html element and in some cases it relies on the input placeholder.
Given the Ushahidi's platform data-driven nature and heavy reliance on forms, it is of high priority to ensure that forms are fully accessible in order to create a more inclusive environment, facilitating seamless interaction for all users, regardless of their accessibility needs.
Notice the mat-label is disconnected from the input?
Inspect the input element
Notice no semantic label is linked to the input?
See image below šš½
Why does this happen?
After digging very deep into this, I realized that the mat-labels are currently placed outside of the mat-form-field to prevent the default material form input animation that happens when the mat-label is placed inside the mat-form-field. This works fine aesthetically but the caveat is that it disconnects the labels from their input fields making it difficult for screen readers to understand.
How to fix this
There are two ways to fix this:
Move the mat-label back inside the mat-form-field element and use the method described here in the angular material docs along some extra styling to keep the label fixed at the top of the input.
Use semantic html label to replace mat-label
I have chosen to go with option 2 to fix this issue because of the following reasons
less refactor on the post-edit component for rendering dynamic forms
No need for css overwrite on the default mat-label component.. in other words less use of !important :)
Description Currently, most of all the form inputs fields on the Ushahidi platform are disconnected from their labels and this makes it difficult for screen readers to understand the purpose of the input field, so when the input is focused the screen reader just announces the html element and in some cases it relies on the input placeholder. Given the Ushahidi's platform data-driven nature and heavy reliance on forms, it is of high priority to ensure that forms are fully accessible in order to create a more inclusive environment, facilitating seamless interaction for all users, regardless of their accessibility needs.
How to reproduce?
labelis linked to the input?See image below šš½
Why does this happen? After digging very deep into this, I realized that the
mat-labels are currently placed outside of themat-form-fieldto prevent the default material form input animation that happens when themat-labelis placed inside themat-form-field. This works fine aesthetically but the caveat is that it disconnects the labels from their input fields making it difficult for screen readers to understand.How to fix this There are two ways to fix this:
mat-labelback inside themat-form-fieldelement and use the method described here in the angular material docs along some extra styling to keep the label fixed at the top of the input.mat-labelI have chosen to go with option 2 to fix this issue because of the following reasons
mat-labelcomponent.. in other words less use of!important:)