-
Notifications
You must be signed in to change notification settings - Fork 0
Issue #4 - Review and address accessibility issues #14
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
Conversation
Further to the information in the initial PR details, I did some digging into adding an Research into the If using Firefox, the browser automatically assigns the contents of the Chromium browsers, however, do not seem to inherit the If we wanted to be explicit and assign an |
That would be my preference. It wouldn't be detrimental to browsers that automatically assign a figcaption to its figure, but would be an improvement for browserd that don't. $id = 'x-' . wp_generate_password( special_chars: false ); |
The PR has been updated to now include an A demo showing this can be found here Would it be preferable that this approach also be replicated in the editor? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks so much for the work on this, including the really thorough description w/ testing steps!
The PR has been updated to now include an aria-labelledby attribute on the front end render of the block only when a caption is present.
...
Would it be preferable that this approach also be replicated in the editor?
I think that's a good idea 🙂
Description
Issue #4 - This issue flagged some areas the image comparison block could benefit from some updates to improve accessibility, both from the authoring and front end perspective. This PR adds support for screen readers and also pushes the user to include captions for the block over having captions hidden by default.
Change Log
image-comparison/render.php
- Adding anaria-label
to the divider button which explains interaction when moving the buttonblock.json
,Edit.js
,Settings.js
- Removing hasCaption attribute and related ternaries / componentsSteps to test
Removal of caption toggle
npm run build:prod
after checking out the branch to ensure up to date codeAria Label on block button
control
and tapping the keyboard fingerprint button 3 times or by enabling manually in the VoiceOver setting)aria-label
Testing demo page using WAVE
Alert
Testing page with axe DevTools
Screenshots/Videos
Demo showing always visible caption area and removal of show caption toggle option
Demo showing using keyboard to navigate page and read out block's button
aria-label
Demo when testing the block with WAVE tool
Screenshot of axe DevTools page scan result
Checklist: