Splash page has placeholder text to label a textbox element

[Tiffany Little]

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

[Terran McCanna (tmccanna)]

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

[Jane Sandberg (sandbergja)]

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

[Terran McCanna (tmccanna)]

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

[Terran McCanna (tmccanna)]

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

[Terran McCanna (tmccanna)]

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.

[Ruth Frasur Davis (redavis)]

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

[Jane Sandberg (sandbergja)]

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!

[Galen Charlton (gmc)]

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..."

[Jane Sandberg (sandbergja)]

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