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
bug: buttons inside ion-header
not accessible with screenreader (unless scrolled down)
#29347
Comments
ion-header
is aria-hidden
not accessible with screenreader (unless any scrolling was done)ion-header
not accessible with screenreader (unless any scrolling was done)
ion-header
not accessible with screenreader (unless any scrolling was done)ion-header
not accessible with screenreader (unless scrolled down)
The unexpected behaviour was the discrepancy between what seeing users have versus what screenreader are allowed to see. the header will be invisible to both, but the buttons will be visible for seeing users only. both should match. either hide the buttons for all users, or show the buttons for all users. |
Thank you for submitting the issue! I was able to verify that the buttons are not accessible. This behavior does not follow the native iOS as it allows the buttons to be accessed (used the Mail app). We'll work on fixing this issue. |
Awesome, thanks! :) |
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
Given
ion-header
withcollapse="condense"
ion-header
(but not secondion-header
)When
Then
Images:
(red area is aria-hidden, even though seeing users can interact with it)
(when scrolled, buttons are accessible for everyone, including screenreader users)
Expected Behavior
Given
ion-header
withcollapse="condense"
ion-header
(but not in secondion-header
)When
Then (Desired)
Or generalized: All elements that only appear in the first header should never be
aria-hidden
.Then (Alternative)
Steps to Reproduce
See stackblitz
Steps:
Code Reproduction URL
https://stackblitz.com/edit/ionic6-angular14-p5ym3p?file=src%2Fapp%2Fapp.component.html
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (C:\Users\JohannesVollmer\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.8.2
@angular-devkit/build-angular : 17.3.2
@angular-devkit/schematics : 17.3.2
@angular/cli : 17.3.2
@ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 5.7.4
@capacitor/android : 5.7.4
@capacitor/core : 5.7.4
@capacitor/ios : 5.7.4
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v18.16.1 (C:\Program Files\nodejs\node.exe)
npm : 9.5.1
OS : Windows 10
Additional Information
As a workaround, we copied the buttons from the first
ion-header
in into the secondion-header
but set them to.screen-reader-only
. This is not a good solution, as the buttons cannot be clicked directly (only accessible by skipping through the list). This is also a problem because the screenreader no longer matches what the seeing users see.The text was updated successfully, but these errors were encountered: