ORServices is an open source, smartphone-friendly directory application that enables you to collect, verify, organize and share information about social services in your community with your stakeholders, beneficiaries, partner organizations and more.
Is your feature request related to a problem? Please describe.
Input fields should have a description that is explicitly associated with the field to make sure that users of assistive technologies will know what the field is for. Placeholder text (eg. "Search for service") is not a replacement for labels, since it disappears once the input is selected and has low color contrast (See this article on placeholders and accessibility).
I'm seeing this issue in:
"Search for Service", "Search for Location", "Search for Organization" inputs
the Suggest a Change form has labels, but they are not correctly linked to the input in the markup (use unique html "id" and "for" attributes to associate them)
Looks perfect on the /contacts and /facilities pages for search inputs!
Describe the solution you'd like
I'd suggest one of two solutions:
Replace placeholder text with visible <label> elements above the input
Add <label> elements that are hidden from sighted users, but will be read by assistive tech.
Also, link labels to their inputs in the markup. See markup examples for implementation on the A11y Style Guide.
For CSS to create a .visually-hidden class that is accessible to screen readers, see this article from The A11y Project on how to hide content.
Is your feature request related to a problem? Please describe.
Input fields should have a description that is explicitly associated with the field to make sure that users of assistive technologies will know what the field is for. Placeholder text (eg. "Search for service") is not a replacement for labels, since it disappears once the input is selected and has low color contrast (See this article on placeholders and accessibility).
I'm seeing this issue in:
Looks perfect on the
/contactsand/facilitiespages for search inputs!Describe the solution you'd like
I'd suggest one of two solutions:
<label>elements above the input<label>elements that are hidden from sighted users, but will be read by assistive tech.Also, link labels to their inputs in the markup. See markup examples for implementation on the A11y Style Guide.
For CSS to create a
.visually-hiddenclass that is accessible to screen readers, see this article from The A11y Project on how to hide content.Additional context
This accessibility guideline is specified in WCAG 2.x Level A (SC 3.3.2)