Skip to content

Conversation

thatisrich
Copy link
Contributor

@thatisrich thatisrich commented Jul 3, 2024

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 an aria-label to the divider button which explains interaction when moving the button
  • block.json, Edit.js, Settings.js - Removing hasCaption attribute and related ternaries / components

Steps to test

Removal of caption toggle

  • Run npm run build:prod after checking out the branch to ensure up to date code
  • In the editor, add a new image comparison block
  • The block caption will be visible by default under the image area
  • The option to toggle the caption visibility in the Settings of the block will no longer be visible
  • Leaving the caption empty will ignore the caption when the block is rendered on the front end
  • Adding text to the caption will display the text on the front end

Aria Label on block button

  • After adding some image comparison blocks, view the page on the front end of the website
  • Enable Mac VoiceOver (can be done by holding control and tapping the keyboard fingerprint button 3 times or by enabling manually in the VoiceOver setting)
  • On the page, press the tab key to navigate down the DOM tree's interactive elements
  • When navigating to the button, the screen reader will read out the aria-label
  • NOTE - Using the screen reader this way will only read out the interactive elements on the page

Testing demo page using WAVE

  • After adding one, or multiple, image comparison blocks, view the page on the front end
  • Right click on the page and use the WAVE tool to get it's results
  • Image with alt text will be displayed with the alt text output underneath
  • The divider line will be displayed with the aria-label present
  • When both images have alt text, the images will stack to show each image's alt text
  • Images with long alt text will be flagged as an Alert
  • Images in this block will, by default, always have an empty string as it's alt text and therefore still pass accessibility recommendations. Images with the empty alt text will be treated as 'presentational' by assistive technologies and therefore be ignored.

Testing page with axe DevTools

  • After adding one, or multiple, image comparison blocks, view the page on the front end
  • Right click on the page and inspect using the browser DevTools
  • Within the browser DevTools, select the axe DevTools option and perform a page scan
  • No issues should be reported for the image comparison blocks added to the page
  • NOTE - There may be some issues reported due to other blocks on the page. In the screenshot below, the issue is attributed to the menu component not the image comparison block
  • NOTE 2 - If logged into WordPress when running the test, the page results will also feature analysis on the WordPress admin bar (if it is present). This will usually add extra issues flagged

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:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules

@thatisrich thatisrich changed the title #4 - Review and address accessibility issues Issue #4 - Review and address accessibility issues Jul 3, 2024
@thatisrich thatisrich marked this pull request as ready for review July 4, 2024 09:07
@thatisrich
Copy link
Contributor Author

Further to the information in the initial PR details, I did some digging into adding an aria-label to the root <figure> element of the block.

Research into the <figure> element states that containing a <figcaption> element is semantic and provides an accessible description.

If using Firefox, the browser automatically assigns the contents of the <figcaption> to the name and relations: labelled by property of the <figure>.

Chromium browsers, however, do not seem to inherit the Name or aria-label in the same way, and are defined as Not specified.

If we wanted to be explicit and assign an aria-label to the <figure> we could, however it may cause duplication when read out as the assistive technology would read the aria-label and then continue on to read the <figcaption>. An alternative to this could be to use aria-labelledby on the <figure> and target the <figcaption> with an ID, which would mean generating a unique ID per block to ensure the correct content is used.

@jaymcp
Copy link
Member

jaymcp commented Jul 8, 2024

An alternative to this could be to use aria-labelledby on the <figure> and target the <figcaption> with an ID, which would mean generating a unique ID per block to ensure the correct content is used.

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 );

@thatisrich
Copy link
Contributor Author

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.

A demo showing this can be found here

Would it be preferable that this approach also be replicated in the editor?

Copy link
Member

@jaymcp jaymcp left a 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 🙂

@thatisrich thatisrich requested a review from jaymcp July 15, 2024 09:27
@jaymcp jaymcp merged commit 31b242a into main Jul 16, 2024
@jaymcp jaymcp deleted the feature/4-accessibility-issues branch July 16, 2024 09:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants