News items in marquee display of az_news view are not screen reader accessible

[joeparsons]

Problem/Motivation

@accesswatch reported in our 2024-08-23 meeting that his office had received reports of issues with the screen reader accessibility of news items listed on the front page of a Quickstart 2 website.

Describe the bug

The site in question is using the Quickstart "Recent news marquee" display of the az_news view on its front page.

This views display uses the marquee entity view mode for the az_news content type which is what actually contains the problematic Read more links and not ideal content structure. (The date appearing before the headline is also problematic for screen readers).

Proposed resolution

We are planning to look into solutions for this during our Wednesday workshop next week (08/28).

Expected behavior

All content should be screen reader accessible.

Screenshots

[accesswatch]

I took a snapshot of this page in question and tried to add an ARIA-label attribute to the anchor tag. This worked but had consequences. Here is the change I made to the source:

<a aria-label="Paris awaits: U of A athletes, alumni and coaches will go for gold at 2024 Paralympics" href=" /news/paris-awaits-u-athletes-alumni-and-coaches-will-go-gold-2024-paralympics">

Now, instead of the entire card being read when looking at the page the screen reader only of course sees:

Paris awaits: U of A athletes, alumni and coaches will go for gold at 2024 Paralympics

While this solves the issue the remaining text on the card is not seen due to this change. So, next week we should discuss how we could potentially rethink the design of the card layout.

[danahertzberg]

Should switch all card layouts to use the stretched link style https://digital.arizona.edu/arizona-bootstrap/docs/2.0/utilities/stretched-link/

[danahertzberg]

Verify all other card layout styles for all content types.

Aria label should be added to the links. Possibly "Read more about {{ title }}"? Jeff to confirm.

Consider Bootstrap 4 vs 5

[trackleft]

Possible solutions: @elyssanaval shared this article with me earlier that had some solution ideas https://www.visionaustralia.org/business-consulting/digital-access/blog/how-to-make-read-more-links-accessible#:~:text=%22Read%20more%22%20links%20are%20commonly,for%20blind%20screen%20reader%20users.

Also https://digital.arizona.edu/arizona-bootstrap/docs/2.0/utilities/stretched-link/