-
Notifications
You must be signed in to change notification settings - Fork 38
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
Playground block: A11Y: Powered by link needs spacing #291
Comments
This one is interesting. The actual HTML has newlines (whitespace) between separate spans making up the "Powered by" label, but assistive technology (specifically VoiceOver) does not spell out the implicit space between "by" and "WordPress". Let's look at restructuring the markup around that notice to get a better result. |
I'm trying to understand what is going on here because, if one duplicates the link text and icon to a local test page, VoiceOver includes spaces when spelling out that link text. But it does not include spaces between "by" and "WordPress" when working with the Playground block. |
@alexstine, what assistive technology would you suggest using to reproduce this? I have been using VoiceOver on macOS and getting a little more experienced with it. Originally, when looking at this issue I was navigating letter-by-letter and was getting strange behavior with sometimes omitted spaces and duplicated letters that were not duplicated in the content itself. In at least some of these cases, I'm sure the problem was user error on my part. But after learning the command to have VoiceOver spell what is under the VoiceOver cursor and having it pronounce and spell out the powered-by link, it pronounces properly, and the spelling correctly mentions a single space to separate each word. |
I am using NVDA on Windows. |
I think this is fixed by a side-effect of our i18n work in #327. We can test once there is a new release. |
This is still an issue. |
## What and why? Prior to this PR both macOS Voiceover and NVDA on Windows did not spell out the expected number of spaces between words in the "Powered by WordPress Playground" HTML. Related to #291 ## How? Getting this right was surprisingly hard. This PR does the following: - Adds an `aria-label` attribute which fixes the problem for NVDA - Removes a space after the "W" icon. Safari was reading "space-space" because of the spaces on each side the of the "W" icon. - In order to achieve consistent spacing around the "W" icon, visually hides the space next to the "W" icon and sets a left and right margin so there is still spacing between the icon and the "Powered by" and "WordPress Playground" spans. ## Testing Instructions - View a post containing a Playground block in Safari - Turn on Voiceover, select the powered-by link, use the arrow keys to iterate through the letters in the link and make sure it spells out "Powered by WordPress Playground" with exactly one space between words. - In Windows, install NVDA - In Windows, view a post containing a Playground block in Microsoft Edge - Turn on NVDA, select the powered-by link, use the arrow keys to iterate through the letters in the link and make sure it spells out "Powered by WordPress Playground" with exactly one space between words.
@brandonpayton is this one now resolved? |
This was tested by someone with a11y expertise and can now be marked as resolved. |
Test page: https://learn.wordpress.org/test/wordpress-playground-block-plugin-test-page/
Please correct this link.
Should be:
Or:
This will avoid the created run-on sentence for assistive tech.
The text was updated successfully, but these errors were encountered: