Splash page has placeholder text to label a textbox element

Bug #1839369 reported by Tiffany Little
12
This bug affects 2 people
Affects Status Importance Assigned to Milestone
Evergreen
Low
Unassigned
3.4
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"">
                <input focus-me=""focus_search"" class=""form-control ng-valid ng-touched ng-dirty ng-valid-parse ng-empty"" ng-model=""cat_query"" type=""text"" ng-keypress=""catalog_search($event)"" placeholder=""Search catalog for..."">
            </div>
            <div class=""col-md-4"">
                <button class=""btn btn-default"" ng-click=""catalog_search()"">
                    Search
                </button>
            </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://www.w3.org/WAI/WCAG21/quickref/?showtechniques=331#headings-and-labels

See also: https://wiki.evergreen-ils.org/doku.php?id=accessibility:webclient_audit

Eva Cerninakova (ece)
Changed in evergreen:
status: New → Confirmed
Changed in evergreen:
assignee: nobody → Terran McCanna (tmccanna)
Revision history for this message
Terran McCanna (tmccanna) wrote :

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/invisiblecontent/

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

tags: added: pullrequest
Changed in evergreen:
assignee: Terran McCanna (tmccanna) → nobody
Revision history for this message
Jane Sandberg (sandbej) wrote :

Thanks, Terran! I think there are two simpler ways to do this, though:

1) Using Bootstrap's existing sr-only class: https://getbootstrap.com/docs/4.0/getting-started/accessibility/#visually-hidden-content -- OR

2) Adding an aria-label to the <input> tag, rather than having a separate <label>: https://webaim.org/techniques/forms/advanced#invisible

I tend to use #2, and it would be more consistent with existing code. However, there's nothing wrong with having a visually hidden <label>.

Also, the fix should also be applied to the Angular client here: https://github.com/evergreen-library-system/Evergreen/blob/master/Open-ILS/src/eg2/src/app/staff/splash.component.html

Revision history for this message
Terran McCanna (tmccanna) wrote :

Yep, I just realized there's already an sr-only class after I did that. Sigh.

Changed in evergreen:
assignee: nobody → Terran McCanna (tmccanna)
tags: removed: pullrequest
Revision history for this message
Terran McCanna (tmccanna) wrote :

I've redone this using the aria-label and also updated the angular version of the splash page:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1839369_placeholder_accessibility

Changed in evergreen:
assignee: Terran McCanna (tmccanna) → nobody
tags: added: pullrequest
Revision history for this message
Terran McCanna (tmccanna) wrote :

FYI, to test, right-click on the search box and choose "Inspect" (on Chrome) or "Inspect Element" (on Firefox) to see that the aria-label has been added.

Revision history for this message
Ruth Frasur (rfrasur) wrote :

I have tested this code and consent to signing off on it with my name, rfrasur, and my email address, <email address hidden>.

tags: added: signedoff
Changed in evergreen:
milestone: none → 3.4.3
Revision history for this message
Jane Sandberg (sandbej) wrote :

Thanks for the great work, Terran.

I re-read the original bug report, which mentioned that "[t]he disappearance of the text can cause users with cognitive disabilities to grow confused or forget what should be entered into the field."

And I just realized that your branch does not help with this, unless the user is also using some assistive technology that makes use of aria-label. Even with your branch, if a user starts typing and then forgets what the field is about, they still don't have a visible label to remind them.

I could see two ways to do this: do a visible <label> (no sr-only) instead of the aria-label. Or change the text of the button from "Search" to "Search catalog".

Sorry for not thinking of this earlier!

Changed in evergreen:
milestone: 3.4.3 → 3.4.4
Revision history for this message
Galen Charlton (gmc) wrote :

I've pushed a follow-up to the new branch user/gmcharlt/lp1839369_placeholder_followup to address Jane's comments:

    - Change the button text from "Search" to "Search Catalog"
    - adjust the styling on the AngularJS side to cuddle the
      button with the search input
    - standardize the placeholder text as "Search for..."

Changed in evergreen:
milestone: 3.4.4 → 3.5.1
importance: Undecided → Low
Revision history for this message
Jane Sandberg (sandbej) wrote :

Works well for me. Thanks, Terran and Galen. I've pushed this to master, rel_3_5, and rel_3_4.

Changed in evergreen:
status: Confirmed → Fix Committed
Changed in evergreen:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers