geonetwork / geonetwork/core-geonetwork
Accessibility Issue: 4.1.3 Status Messages - User Not Informed of Additional Content
- Dominant language
- Java
- Stars
- 521
- Forks
- 515
- Avg merge
- 6d 13h
- Merged PRs (30d)
- 19
Description
**Describe the bug**
Hi, during a recent accessibility test on one of our GeoNetwork instances we got flagged the following issue:
> When viewing the search results page, it has been observed that when interacting with the filters or inputting a search, the user is not informed of changes that occur on the page dynamically. This is seen when the filters/search feature returns results dynamically when selected. This may result in users missing out on some content/ not knowing that the page has been updated.
I tried to change the `span` in `facet.html` responsible for the tickbox
https://github.com/geonetwork/core-geonetwork/blob/523f4fc88798e6a3762e2a9654a6e56232f2b209/web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facet.html#L23-L27
to be announced by the screen reader by changing it to
```html
```
but this doesn't seem to work entirely, as sometimes the focus seems to be shifted somewhere else, and the screen reader ends up announcing both `filterActive` and `filterInactive` states. I couldn't tell where the issue came from to be able to prevent this from happening.
Equally, adding the `aria-live="true"` attribute to the search box doeasn't seem to have the desired results, I suspect it's not the search box that needs to be monitored for change, but the `Active filters` section of the filter facets.
Would you be able to shed some light on how we would be able to improve this? :pray:
**To Reproduce**
Steps to reproduce the behaviour:
1. Navigate to the search page
2. Activate the screen reader on your device (tested on Android 13 using the TalkBack function)
3. Select any filter facet
4. Observe how there is no update on the fact that the page has changed
**Expected behaviour**
It is expected that any visual status messages are also presented via assistive technologies in real-time. e.g. if a user submits a form, text appears without page load reading "Your form was successfully submitted.", then a screen reader should announce the same message.
See https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
Contributor guide
Research direction
Start with web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facet.html, especially the facet checkbox span, and reproduce the issue on the search page with TalkBack. Review the WCAG 2.2 Status Messages guidance and determine how active-filter changes can be announced without reporting both states. Done means selecting a facet reliably informs assistive-technology users that the results or active filters changed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100