search

creativecommons / search

Creative Commons Search Portal
https://search.creativecommons.org/
MIT License
19 stars 114 forks source link

[Bug] Improve accessibility for the "Search" button by adding an aria-label #290

Closed Silvia-Wachira closed 1 month ago

Silvia-Wachira commented 1 month ago

Description

The search button does not have an aria label and that makes it difficult to use because there are some screen-reader users who might not interpret its purpose correctly.

Reproduction

1.Open the web page.

  1. Use the developer tools to review the button element
  2. Notice that the button does not have an explicit aria-label

Expectation

The "Search" button should include an aria-label attribute

Screenshots

screen-capture (6).webm

Environment

Additional context

Resolution

possumbilities commented 1 month ago

Hi @Silvia-Wachira and thanks for this!

As I understand it, the button element contains the word Search, and in this instance an aria-label would be useful to extend or modify the semantics and of the button if it did not have something within its contents indicating its meaning. By default, the contents of a button are used as the initial meaning of the button.

I'm unsure how search would necessarily be unclear and need improvement. While not always the case, aria-labels are usually implemented when other semantic options have not occurred or have failed. In this case the primary descriptive text should be descriptive and accessible.

I'm closing for now, but I'm open to clear examples, if there's something I'm missing.

Silvia-Wachira commented 1 month ago

You are correct that the button visually contains the word "Search," which provides context to most users. However, the reason I suggested adding an aria-label is to ensure that the button's function is consistently clear to all assistive technologies and screen readers. There can be variability in how different screen readers interpret button content, and the addition of an aria-label would guarantee that the functionality is conveyed precisely as intended. If you think this might not be necessary in this case, I'd be happy to explore and test it further to gather more concrete examples of any potential discrepancies.