Splash page has placeholder text to label a textbox element
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Fix Released
|
Low
|
Unassigned | ||
3.4 |
Fix Released
|
Low
|
Unassigned |
Bug Description
On the splash page, placeholder text is used as the sole means of labeling the Search field. Because the text will be removed when the user begins to type, placeholder text is not recommended as a method of labeling input fields. The disappearance of the text can cause users with cognitive disabilities to grow confused or forget what should be entered into the field.
"<div class=""row"">
<div class=""col-md-8"">
</div>
<div class=""col-md-4"">
</div>
</div>"
We should provide a label for the Search field that can be accessed by assistive technologies and does not change on input.
See: https:/
See also: https:/
Changed in evergreen: | |
status: | New → Confirmed |
Changed in evergreen: | |
assignee: | nobody → Terran McCanna (tmccanna) |
Changed in evergreen: | |
milestone: | none → 3.4.3 |
Changed in evergreen: | |
milestone: | 3.4.3 → 3.4.4 |
Changed in evergreen: | |
status: | Fix Committed → Fix Released |
I added a new 'sronly' class that moves an element off the screen so that it won't be visible to sighted users, but will be readable in the appropriate location for screen readers. This approach is recommended by: https:/ /webaim. org/techniques/ css/invisibleco ntent/
My patch for review is here:
https:/ /git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/user/ mccanna/ lp1839369_ placeholder_ accessibility