Add Aria attributes or labels to form elements

[rosy1280]

The attached report from CPA suggests adding either labels or aria attributes to form elements. On our site these appear specifically in the following locations:

• [x] Dropdowns like the Select a Location dropdown
• [x] The multi-search box which appears when you click the Search button on the right navigation pane and on the Homepage
• [x] Filter boxes which includes the ones on the Services Directory, the Staff Directory, and the Subject Librarian Directory

Consider which of the options they suggest makes the most sense and implement them.

[rosy1280]

If you choose to use aria labels, you should also make sure that HTML Landmarks are properly marked as well. If you choose not to go with aria labels, this should be broken out into a separate ticket and include in Epic #330

[kristianserrano]

@rosy1280 I've updated the documented inputs, searches, and selects with ARIA labels and roles for the header and navigation.

Homepage template

Subject Librarian Directory template

Staff Directory template

Services template

[kristianserrano]

Changes HH will need to make in velocity to match the pattern library.

• In the main search in the header and homepage, each input.search-menu-toggle should have an aria label that matches the label of the corresponding search option.
• Main header for all pages (.header as a parent of .header-main): Add role="banner" and aria-label="Main navigation and search"
• Main navigation wrapper (.nav-menu-main): Add aria-label="Main navigation" and role="navigation"
• Each submenu in main navigation (.subnav-menu-main): Add aria-label="Submenu navigation"
• Utility nav menu (.nav-menu-utility): Add aria-label="Utility navigation"
• Main site footer (.footer): Add aria-label="Main footer"
• Radio inputs in search menu in header and homepage (.search-menu-toggle): Add aria-labels for each search option
• Main search input in header and homepage (input.-search.-[big / small].search-box): Add aria-label="Main search text input"
• Location list select (.branding-header-dropdown-menu): Add aria-label="Select a location"
• For notification dismissal buttons: Add <title> element as first child of <svg> element with "Dismiss notification" as the text node within <title>.
• Staff Directory page search: Add aria-label="Enter a name, title, library, phone number, or email to filter the list of staff"
• Services page search: Add aria-label="Enter keywords to search for a service"
• Subject Librarian Directory page search: Add aria-label="Select a subject area to filter the list of subject librarians"