search

az-digital / az_quickstart

UArizona's web content management system built with Drupal 10.
https://quickstart.arizona.edu
GNU General Public License v2.0
30 stars 20 forks source link

Fix card link title accessibility #3793

Open danahertzberg opened 3 days ago

danahertzberg commented 3 days ago

Problem/Motivation

Issue found on a Dubbot scan.

Describe the bug

When the Card Link URL field is filled out and the Card Link Title is not populated, there is an accessibility concern because screen readers cannot tell what the link is.

To Reproduce

  1. Add a card to a page
  2. Complete the Card Link URL field
  3. Do not fill in the Card Link Title field
  4. Save
  5. Inspect the page and find the card
  6. Observe no title or content around the <a> tag on the card

Proposed resolution

  1. Require the Card Link Title field -- Only when URL field is populated
  2. Add a selection in the Card Link Style dropdown for Hidden or similar

Expected behavior

I expect links to have accurate descriptive link titles.

Additional context

Consider sr-only class. https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Expect to create a database update to look for empty titles, with populated URLs. In this case, we should have a reasonable default. Maybe auto-populate the link title with the card title and select the hidden link style?

Or just not allow save and have a notice with help text?

danahertzberg commented 1 day ago

Solution includes the following HTML as approved by @accesswatch.

Add a <span class="sr-only"> around the link title within the <a> tag.