In https://github.com/WordPress/gutenberg/pull/61258, the site editor 'hub' was changed to use the North East Arrow unicode character but only display it on hover and focus via an ::after CSS pseudo element.
Both unicode characters and pseudo generated content are treated as text and screen readers do read out text.
In the ExternalLink component the only reason why screen readers do not announce North East Arrow is because the unicode character is wrapped within a span element with an aria-label opens in a new tab):
link, {site title} opens in a new tab North East Arrow
This could be fixed in the site hub implementation but I'd rather suggest a more general approach, also for educational purposes. The most important thing to take into consideration for accessibility is as follows:
[!IMPORTANT]
Content of CSS pseudo elements and Unicode characters are text and are announced by screen readers.
To avoid future similar cases I'd like to propose to establish a guide line and never use unicode characters or pseudo generated content this way.
Also, unicode characters may be rendered in a slighly different way on different operating systems.
The ExternalLink component and the Site Hub custom implementation should use an SVG icon instead. Icons in the @package/icons are hidden from assistive technologies by default.
Description
See https://core.trac.wordpress.org/ticket/40428
In https://github.com/WordPress/gutenberg/pull/60255 the ExternalLink component was changed to use the North East Arrow unicode character
↗
rather than theexternal
SVG icon.In https://github.com/WordPress/gutenberg/pull/61258, the site editor 'hub' was changed to use the North East Arrow unicode character but only display it on hover and focus via an
::after
CSS pseudo element.Both unicode characters and pseudo generated content are treated as text and screen readers do read out text.
In the ExternalLink component the only reason why screen readers do not announce
North East Arrow
is because the unicode character is wrapped within a span element with an aria-labelopens in a new tab)
:https://github.com/WordPress/gutenberg/blob/2c5f7689e83691f7cdba8e35a114ab9829ef76da/packages/components/src/external-link/index.tsx#L69-L77
Instead, in the site hub after https://github.com/WordPress/gutenberg/pull/62648 is merged, the unicode character in the pseudo generated element will be announced. Screen readers will read out:
link, {site title} opens in a new tab North East Arrow
This could be fixed in the site hub implementation but I'd rather suggest a more general approach, also for educational purposes. The most important thing to take into consideration for accessibility is as follows:
To avoid future similar cases I'd like to propose to establish a guide line and never use unicode characters or pseudo generated content this way.
Also, unicode characters may be rendered in a slighly different way on different operating systems.
The ExternalLink component and the Site Hub custom implementation should use an SVG icon instead. Icons in the
@package/icons
are hidden from assistive technologies by default.Step-by-step reproduction instructions
link, {site title} opens in a new tab North East Arrow
Screenshots, screen recording, code snippet
Note: the VoiceOver caption panel shows the character
↗
but it actually announces it as 'North East Arrow`:Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes