Accessibility with Windows screen readers tracking issue for home/search results pages

[alexstine]

Description

Tracking issue for accessibility fixes for Windows screen readers on the home/search results pages.

Issues

• Add "skip to main content" link to all pages #449
• Home link is not in the navigation landmark or list.
• It would be nice to have a logo with the name of the site or similar site title to keep context for screen reader users. This could be the second element in the banner landmark after skip to main content link. Update home link screen reader text #788
• Add context to links for screen readers to read the type of media the link goes to. #1010 - Add media type context to start of result link titles #1920
• Move search results to an ordered list  #794 - Use contentlist role for search results for a11y #1979
• After submitting a search, I would expect to have a heading 1 with wording such as "Search results for: XXX, 10 results returned". This should be the first item in the main content, above the search form.
• More descriptive screen reader text for search page headings #790
• The button with the text "Filters" should appear above the Search button unless it is a dynamic filter for the currently visible results. In that case, it can stay where it is. #452
• Search results titles should be heading level 2 for easy access. #793 - Replace span with h2 on image search results #1888
• The text in quote 2 is not placed in a very discoverable area for users. I would delete it and rely on the heading 1 proposed above.
• The button with text "Select a content type: Audio" should appear above the "Search" button.
• The first heading on the home page should be h1 openverse-frontend#2176
• Default layout should not nest footer inside main openverse-frontend#2179
• Improve accessibility of the WordPress link in the footer openverse-frontend#2183
• Expanding the filters sidebar does not focus a screen reader on the filters section openverse-frontend#2182

Quote 1

link graphic Impasto four-handled ovoid olla with lid, from S. Marzano sul Sarno
link graphic Stem Cup with Buddhist Emblems: Shufu Ware
link graphic Female Figurine Rattle
link graphic Sake Flask
link graphic Female Holding A Bowl Figurine
link graphic Double-gourd Shaped Bottle
link graphic The Pottery Seller
link graphic Large cup or bowl with slightly
link graphic Pottery Whistle
link graphic Cincinnati Pottery Club Incised Pitcher

Quote 2

Over 10,000 results

Code snippet 1

Problem:

<a href="https://wordpress.org" target="_blank" rel="noopener noreferrer" class="hover:no-underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-1 focus-visible:ring-offset-tx text-dark-charcoal"><p class="label-regular flex flex-row items-center gap-1">Part of the <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="aria-hidden"><g id="icon"><path d="M12 3.25C7.175 3.25 3.25 7.175 3.25 12C3.25 16.825 7.175 20.75 12 20.75C16.825 20.75 20.75 16.8241 20.75 12C20.75 7.17593 16.8241 3.25 12 3.25ZM4.13333 12C4.13333 10.8593 4.37778 9.77685 4.81481 8.79815L8.56759 19.0796C5.94352 17.8046 4.13333 15.1139 4.13333 12ZM12 19.8676C11.2278 19.8676 10.4824 19.7546 9.77778 19.5472L12.138 12.6889L14.5556 19.3139C14.5713 19.3528 14.5907 19.3889 14.612 19.4222C13.7944 19.7102 12.9157 19.8685 12 19.8685V19.8676ZM13.0843 8.31204C13.5574 8.28704 13.9843 8.23704 13.9843 8.23704C14.4083 8.18704 14.3583 7.56389 13.9343 7.58889C13.9343 7.58889 12.6602 7.68889 11.837 7.68889C11.0639 7.68889 9.76481 7.58889 9.76481 7.58889C9.34074 7.56389 9.29074 8.21204 9.71481 8.23704C9.71481 8.23704 10.1157 8.28704 10.5398 8.31204L11.7657 11.6704L10.0435 16.8333L7.1787 8.31204C7.65278 8.28704 8.0787 8.23704 8.0787 8.23704C8.50278 8.18704 8.45185 7.56389 8.0287 7.58889C8.0287 7.58889 6.75463 7.68889 5.93241 7.68889C5.78519 7.68889 5.61111 7.68518 5.42593 7.67963C6.83241 5.54444 9.25 4.13426 11.9991 4.13426C14.0472 4.13426 15.912 4.91759 17.3111 6.2C17.2769 6.19815 17.2444 6.19352 17.2093 6.19352C16.4361 6.19352 15.888 6.86667 15.888 7.58982C15.888 8.23796 16.262 8.78704 16.6611 9.43519C16.9602 9.95926 17.3093 10.6324 17.3093 11.6046C17.3093 12.2778 17.05 13.0593 16.7111 14.1481L15.9259 16.7694L13.0833 8.31296L13.0843 8.31204ZM18.9037 8.22593C19.5176 9.3463 19.8676 10.6324 19.8676 12C19.8676 14.9028 18.2944 17.4361 15.9556 18.8L18.3583 11.8528C18.8074 10.7306 18.9565 9.83333 18.9565 9.03518C18.9565 8.74537 18.937 8.47685 18.9037 8.22593Z" fill="currentColor"></path></g></svg> <span class="sr-only">WordPress</span> project</p><!----></a>

Solution:

<a href="https://wordpress.org" target="_blank" rel="noopener noreferrer" class="hover:no-underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-1 focus-visible:ring-offset-tx text-dark-charcoal" aria-label="Part of the WordPress project"><p class="label-regular flex flex-row items-center gap-1">Part of the <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="aria-hidden"><g id="icon"><path d="M12 3.25C7.175 3.25 3.25 7.175 3.25 12C3.25 16.825 7.175 20.75 12 20.75C16.825 20.75 20.75 16.8241 20.75 12C20.75 7.17593 16.8241 3.25 12 3.25ZM4.13333 12C4.13333 10.8593 4.37778 9.77685 4.81481 8.79815L8.56759 19.0796C5.94352 17.8046 4.13333 15.1139 4.13333 12ZM12 19.8676C11.2278 19.8676 10.4824 19.7546 9.77778 19.5472L12.138 12.6889L14.5556 19.3139C14.5713 19.3528 14.5907 19.3889 14.612 19.4222C13.7944 19.7102 12.9157 19.8685 12 19.8685V19.8676ZM13.0843 8.31204C13.5574 8.28704 13.9843 8.23704 13.9843 8.23704C14.4083 8.18704 14.3583 7.56389 13.9343 7.58889C13.9343 7.58889 12.6602 7.68889 11.837 7.68889C11.0639 7.68889 9.76481 7.58889 9.76481 7.58889C9.34074 7.56389 9.29074 8.21204 9.71481 8.23704C9.71481 8.23704 10.1157 8.28704 10.5398 8.31204L11.7657 11.6704L10.0435 16.8333L7.1787 8.31204C7.65278 8.28704 8.0787 8.23704 8.0787 8.23704C8.50278 8.18704 8.45185 7.56389 8.0287 7.58889C8.0287 7.58889 6.75463 7.68889 5.93241 7.68889C5.78519 7.68889 5.61111 7.68518 5.42593 7.67963C6.83241 5.54444 9.25 4.13426 11.9991 4.13426C14.0472 4.13426 15.912 4.91759 17.3111 6.2C17.2769 6.19815 17.2444 6.19352 17.2093 6.19352C16.4361 6.19352 15.888 6.86667 15.888 7.58982C15.888 8.23796 16.262 8.78704 16.6611 9.43519C16.9602 9.95926 17.3093 10.6324 17.3093 11.6046C17.3093 12.2778 17.05 13.0593 16.7111 14.1481L15.9259 16.7694L13.0833 8.31296L13.0843 8.31204ZM18.9037 8.22593C19.5176 9.3463 19.8676 10.6324 19.8676 12C19.8676 14.9028 18.2944 17.4361 15.9556 18.8L18.3583 11.8528C18.8074 10.7306 18.9565 9.83333 18.9565 9.03518C18.9565 8.74537 18.937 8.47685 18.9037 8.22593Z" fill="currentColor"></path></g></svg> project</p><!----></a>

The screen reader text is okay but the issue is, the spacing is not retained. It comes out reading like this.

Part of the WordPressproject

The other easy solution is to insert a space before the closing </span> but this is not always guaranteed to work.

Environment

• Device: Laptop
• OS: Windows 10
• Browser: Google Chrome and Firefox
• Version: 110.0.5481.78 and 109.0.1
• Other info: NVDA screen reader

[alexstine]

Please feel free to create follow-ups, I know this is likely way too big to be actionable. Just wanted to provide a good starting point.

[annezazu]

@zackkrida wanted to give you in particular a heads up here! Thanks so much for opening this, Alex.

[obulat]

@alexstine, thank you so much for reaching out and compiling this huge issue! We have tried to implement the new design in an accessible way, but your issue clearly shows that we need to collaborate with the accessibility teams more.

I have started creating follow-up issues and need some clarifications for the following two points.

1. Home link is not in the navigation landmark or list.

I tried using NVDA on openverse.org. Currently, when I open the homepage, and click D, I get to the "main" landmark. Then, when I click "Shift" plus "D" to go back, I hear "Banner landmark home visited link current page." Should there be a different behavior?

2. It would be nice to have a logo with the name of the site or similar site title to keep context for screen reader users. This could be the second element in the banner landmark after skip to main content link

We have the logo with the name of the site that is currently the first element in the banner landmark. Its label is "home" because that's what we saw on other sites. Do you suggest that the label should actually be "Openverse home"? Or "Openverse"? Should it be the same on all pages, or should the homepage logo label be different?

Do you have examples of websites with good accessibility? I look at other sites for examples, but I'm not sure if they are good or not.

By the way, the search page has the "Skip to content" link, but we didn't add it to other pages. That was an oversight.

[alexstine]

@zackkrida Answers.

1. Home link is not in the navigation landmark or list.

This is actually okay. Now that I know Home is not supposed to be a navigation item, this makes sense.

2. It would be nice to have a logo with the name of the site or similar site title to keep context for screen reader users. This could be the second element in the banner landmark after skip to main content link

I would change the "Home" screen reader text to "Openverse Home". Just a slight adjustment there helps users keep context.

Thanks.

[sarayourfriend]

Clear up context for links. See quote 1 for a speech sample from my screen reader. I have no idea if I am looking at pictures, audio, or videos. What will happen if I select one of those graphics? The link gives me no information about where I am really going.

For this one: what's the best way to give context for this? Is it sufficient to add the type of result in the link title (e.g. "Image result: ")?

Thanks for taking the time to write up this issue.

[alexstine]

@sarayourfriend I think the "Image:", "Audio":, or "Video:" prefixes work fine. It is already clear that the items the user is viewing are results, just need to tell them what they are.

[sarayourfriend]

Perfect, thanks, Alex. I've cut an issue for it here: #1010

[obulat]

We are going to close this issue as the remaining issues can be tracked using the separate issues, and they require design input.