Skip to content
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

Improve the readability of the external icon #62832

Open
afercia opened this issue Jun 25, 2024 · 4 comments
Open

Improve the readability of the external icon #62832

afercia opened this issue Jun 25, 2024 · 4 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts. [Package] Components /packages/components [Package] Icons /packages/icons [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jun 25, 2024

Description

Splitting this out from the conversation on #62644

As a general principle, making thins smaller isn't ideal for low vision users. There's a multitude of vision impairments where users struggle to distinguish a glyph or a character when their size is small. As mentioned in #62644 (comment) I've been observing a trend in the editor design where low vision users needs aren't very well considered and I'd love to see more focus on making things readable in the first place.

WordPress is a project that aims to be as accessible as possible. Reducing characters or glyphs size and / or making their shape thinner isn't the best way to make a design that is usable by everyone.

Disclaimer: I am a low vision user so I may be biased, but that also means I'm reporting some first-hand user experience that is pretty common for many other users with vision impairments.

The following comparison illustrates the evolution of the external icon across various releases of the editor. It's mainly focused on the usage of the external icon in combination with adjacent text, as it's the case for external links. I'd kindly ask to please focus on the readability of the icon first rather than its design balance and style.

1
This is how the icon looked like in WordPress 5.3.
Although perhaps it wasn't the most balanced and elegant icon, it was very readable especially because of the thickness of its shape. The size was big enough.

5 3

2
This is how the icon in WordPress 5.8.
Less readable but still good. In a way the thinner shape was compensated by a slightly bigger size.

5 8

3
This is how the icon in WordPress 5.9.
With this version, there was a significant drop in the level of the icon readability. The size was significantly reduced and consequently the icon shape were even more thin. As a low vision user, from a certain distance, I struggle to understand whether this is an icon or it is some character that is part of the text

5 9 13x13

4
In #50728 the icon was refactored to make it more balanced, which is good. However, it was also made slightly smaller. This is still the icon in use in the latest WordPress release 6.5:

6 5 13x13

The decreased size is clearly visible in a screenshot attached to the original PR, I'm going to attach it here as well for clarity:

ExternalLink before after 50728

It is worth noting that by reducing the size of the icon, the 'thickness' of its shape decreases as well. As such, the overall readability of the icon decreases. This version is the least readable of all. As a low vision user, I really struggle to distinguish this icon from the adjacent text.

It is interesting to note that some concerns were expressed in the original PR description as well, regarding the 'in-text usage' of the icon where the icon becomes really too small. A separate icon designed specifically for 'in-text usage' was considered but it was ultimately not implemented.

5
Lastly, in #60255 the icon has been replaced with the unicode 'North East Arrow' character. Screenshot:

trunk

Based on my personal experience, this is slightly better than 3) and 4). At least, the arrow is a little bigger. However, the lack of a shape around it doesn't help. It's still less readable than 1) and 2) so I'm afraid I can't consider this change as an improvement.

Conclusion

Rather than a discussion about the technical implementation of this icon, this issue aims to illustrate a trend I've been observing for a while in this project. Design should prioritize accessibility, which in this case is the readability of hte icon. Instead, I see the evolution of this icon across the years has gone in the opposite direction. Other considerations have been prioritized over accessibility and readability.

I'd love to see this trend change in this project design. Design should aim to be accessible since the beginning and take into considerations the needs of all users. Although this is only the little history of an icon, it illustrates a trend that should be entirely reversed.

Back to the spdcific issue of this icon, I'd love ot see this icon design be changed to prioritize readability.
At teh very lease, I'd encourage the idea of exploring an alternative icon for 'in-text usage' as mentioned in #50728

Step-by-step reproduction instructions

N/A
Examples of the external icon usage adjacent to text can be typically found in the Post excerpt UI or in the help text for the Image block alt text across the various versions of the editor.

Screenshots, screen recording, code snippet

No response

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

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts. [Package] Components /packages/components [Package] Icons /packages/icons labels Jun 25, 2024
@richtabor
Copy link
Member

5 Lastly, in #60255 the icon has been replaced with the unicode 'North East Arrow' character.

This shape is the clearest balance between clarity and intention.

@afercia
Copy link
Contributor Author

afercia commented Jul 23, 2024

This shape is the clearest balance between clarity and intention.

Do you have any data, user testing, research or other resources to backup such a statement?

I'm not sure this kind of very assertive statements help in any way collaboration between contributors and, more importantly, with making WordPress a better software.

@richtabor
Copy link
Member

richtabor commented Jul 25, 2024

I'm just stating that of the icons you've shared above, the current upRight arrow is visually the clearest, and largest, diagonal arrow icon of the lot-especially at small sizes.

It prioritizes readability, as you say is important to you. Are we not in agreement on this?

@afercia
Copy link
Contributor Author

afercia commented Aug 29, 2024

I'm just stating that of the icons you've shared above, the current upRight arrow is visually the clearest, and largest, diagonal arrow icon of the lot-especially at small sizes.

I'm a low vision user. I do know from my personal, daily, experience, what is more readable or less readable.
The current icon is less readable. It's tinner, the overall perceivability of its shape is reduced compared to the original icon.
Besides considerations on the cleanest, more elegant shape, this icon:

original

is way more readable than the new one:

new

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts. [Package] Components /packages/components [Package] Icons /packages/icons [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

2 participants