New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
More descriptive screen reader text for search page headings #790
Comments
* _-prefix methods that should not be overridden * Initial template * Add initial docs * Update template, add test template file * Add script to generate template files * Update docs to reference script * Moving more documentation into the code * Reformat docs - Breaks out into several files - Removes documentation that is redundant (copied from code) - Prefers documentation within the template - Explicitly documents advanced options as FAQ - Some small updates to the templating * Small tweaks * Address feedback, sanitize provider string * Fix defaults for media types, add tests * Adjust wording Co-authored-by: Zack Krida <zackkrida@pm.me> * Add syntax highlighting Co-authored-by: Krystle Salazar <krystle.salazar@automattic.com> * Add syntax highlighting to the rest of the code snippets * Add DAG doc to the template * Add just recipe * Address feedback * Fix syntax Co-authored-by: Madison Swain-Bowden <bowdenm@spu.edu> Co-authored-by: Zack Krida <zackkrida@pm.me> Co-authored-by: Krystle Salazar <krystle.salazar@automattic.com> Co-authored-by: Madison Swain-Bowden <bowdenm@spu.edu>
Can you add Adding the comment from the original meta issue about the search headings here:
If we need to make Is there a way to not change the designs so drastically, but still make the heading with additional information appropriately placed for the screenreaders? I am going to raise the priority for this issue to |
Also, I think these 2 points are related:
Quote 2
|
Not sure if I'm following the design request correctly. It seems that we can add a hidden element within
If "search form" refers to the search bar and the whole header, that is a huge change impacting the navigation's core. |
The problem with this current layout is the change of context. I didn't realize it until it was called out in designs. On the home page, the search form is part of the page content but on a search results page, the search form moves into the header. In this case, what we can do is make the heading 1 the first HTML element in the page main content. The other issue is, there are sorting filters in an
Thanks. |
@alexstine Can you clarify how this is understood to work for common search engines like Google or DuckDuckGo? The visual layout and presentation of those sites more or less match Openverse. However, neither wrap the search form in If we changed the search results page to have no |
I never really paid attention for Google and I would not consider Duck Duck Go an accessible search engine. One thing that might help us is if we added a new landmark. You can add https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/search_role Is there any reason that navigation is not global? For example, there are navigation links on the home page but not search results pages. These types of UI choices makes things so much harder for users despite what big tech is doing. Hope this helps. Thanks. |
I'm going to lower the priority on this. On further thought, for a page of search engine results using the search query as the h1 seems extremely common. Perhaps we can develop a better approach but our current implementation isn't broken. |
@zackkrida I don't really appreciate the sense that this issue is getting ignored. If I thought it was a waste of time, I wouldn't have reported it. Google certainly doesn't use the search term as a heading 1 so not sure where your information comes from on that. https://openverse.org/search/?q=olympic Olympic is the heading 1 here but does not communicate that this is a search results page. On Google, there are 4 total heading 1s.
While this does not include the search term or number of results, because Google is not as accessible as people think it is, it does at the very least tell you it's a search results page. |
Apologies @alexstine I didn't recall that you originally reported this issue. To clarify, I think that the changes necessary to fix this will involve design work and changing the text for sighted users. Concerning the prior are from other search engines, I was referring to examples like: (Not to say they are accessible). I will update this issue back to |
@zackkrida No visual change required. <h1 aria-hidden="true" class="visual-search-results">Search Term</h1>
<h1 class="screen-reader-text">Search results for: %s, Number of results: %d.</h1>
Since headings are not holding focusable content, you can create 2 different versions. The more favorable approach would be to give all users the same experience but people often times don't like to do that in this project due to a set in stone visual design that apparently can never change. 😞 Thanks. |
I agree this is the preferred approach, to unify the experience for all users. However, I'm not sure if this is a correct assessment of the situation for the Openverse project, that its maintainers are unwilling to make visual and/or non-visual changes that will unify the experience for as many users as possible (regardless of the tools they use to interact with the site). Please bear with us as we continue to learn about what kinds of changes fulfil requirements, we are pulled in many directions by many different forces, and sometimes get prioritisation wrong (not just on accessibility issues, even though for access issues it is much more important that we do get it right). I'm very grateful for your clarification about this particular issue and will open a PR today to get that change in. If there are other specific instances where you noticed a lack of movement on an accessibility issue that appeared to be caused by maintainers avoiding making visual changes, please let me know. If more comfortable, you can ping me in WordPress Make Slack in DMs, whatever you prefer. I am eager to understand whatever issues Openverse has, whether the application services or the project management, and if there are problems with the way Openverse specifically makes decisions that prevent it from being able to quickly address accessibility problems, then I am happy to be the person to push the team towards a better approach and address immediately pressing issues. Your contributions and issue reports are invaluable. I can't speak 100% for Zack, but as the lead for the project, I would be surprised if they do not have the same feeling. |
Heads up, @obulat I am going to work on this issue and implement the change Alex has suggested. I've reassigned the issue to myself to reflect that. |
@sarayourfriend The comment I made was not Openverse specific, it was project-wide WordPress. If the change impacts visuals for accessibility, it's always a long back and forth when really, let's just come to a solution. :) Nothing I said in my previous comment was directed at Openverse contributors specifically, I still forget how some of this Openverse project isn't fully connected to the rest of WordPress so sorry for overlooking. At the end of the day, I just want users to have the best experience possible. Thanks. |
As the most active designer contributor in this project, I would like to reiterate my openness to revisiting any decisions made if they did and/or do not address accessibility with the expectations we aim for. I've been polishing my personal workflow to invite the accessibility team more proactively from the beginning. Yet, I need to do better, learn, and ask more. Your feedback @alexstine is essential to make Openverse better. |
The h1 tag on our search pages only contains the user's search query:
While aesthetically this is really nice, we should make the screen reader text more descriptive for this element by adding an
aria-label
with the following text:Showing {count} results for "{search term}"
.The text was updated successfully, but these errors were encountered: