Uploaded image for project: 'Grouper'
  1. Grouper
  2. GRP-1379

UI Accessibility Improvements - Search Icon Not Labelled

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 2.3.0
    • Fix Version/s: None
    • Component/s: UI
    • Labels:

      Description

      Search Icon Not Labelled

      Problem:
      The search icon is rendered through the following JavaScript and HTML:
      <a onclick="return guiV2link('operation=UiV2Main.searchSubmit',

      {optionalFormElementNamesToSend: 'searchQuery'}

      );" href="#" >
      <i class="fa fa-search"></i>
      As a result, the NVDA screenreader announces this as "clickable" – not enough information to make it meaningful to a blind user.

      Solution:
      Adding the “aria-label” attribute to the “a” element above should provide a readable (and non-visible) text label to the icon:
      <a onclick="return guiV2link('operation=UiV2Main.searchSubmit',

      {optionalFormElementNamesToSend: 'searchQuery'}

      );" href="#" aria-label="search">

        Smart Checklist

          Attachments

            Activity

              People

              Assignee:
              chris.hyzer@at.internet2.edu Chris Hyzer (upenn.edu)
              Reporter:
              devasaga Pregash Devasagayam (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated: