Description
Previously:
#42505
#42555
See also #61847
The ellipsis button is barely visible for low vision users. I am a low vision user and I struggle to visually identify this button, especially when it's used 'in isolation' as in: in a spot of the UI where it is surrounded by white space and there's no other borders or shapes to draw user's attention to the button.
The three vertical dots are really thin. This is an inherent issue in the design of the icon. Also, as I tried to explain in #42555 (comment), the context matters. Other shapes or borders around the button make a big difference.
The ellipsis button is now widely used in the editor so that the issue previously reported for teh templates list is nwo more impactful.
To explain how the context matters, in #42555 (comment) I made 4 examples. Reporting them here:
Screenshot:
For users with vision impairments, these 4 cases are very different. The ability to perceive the ellipsis icon also depends on the context as in: surrounding controls or borders or other shapes that help with visually perceiving the button.
Based on my (admittedly anecdotal) experience:
- In the editor top bar: there are other buttons before the the ellipsis. This helps 'driving' my vision and helps perceiving the ellipsis dots but still isn't that great.
- In the block toolbar: the other buttons and more importantly the visible borders greatly help. I would say this is the case where I can better perceive the ellipsis.
- Editor fixed bar at the top: this is an old screenshot but still useful to get an idea: although there are buttons and borders, the color of the borders is a lighter gray than the one used in the block toolbar. I struggle to perceive the ellipsis.
- The old template list, now similar to the Data Views 'table view': this is the worst case. The ellipsis button is literally placed in the middle of white space with no other controls or borders around it. Also, it is on the extreme right side, which doesn't help. I really can't see this button unless I get at a very short distance from my screen. This usage is seriously problematic for any user with vision impairment. There's now many more places in the UI where the elipsis is usd this way, 'in isolation'.
How to remediate?
I would like to start pointing out again that icon buttons should only be used when there's not enough space to use visible text. Icons have inherent usability and accessibility problems. They don't have universal meaning, as some shapes often have different meaning depending on countries and cultural background. Overall, there is an excessive usage of icons in the editor. Rather, their usage should be limited as visible text is the only universal, accessible, mean to convey information.
That said, the icon design should be improved. I would like to kindly ask the design team to work on a new design for the ellispis icon to make it more visible. I'd liek to suggest some research first, to explore how other widely used software solved this issue.
From my side, I can add a couple examples. Please ignore that in the following examples the ellipsis is horizontal, as that doesn't make a difference for the issue reported here.
macOS Finder:
The ellispis is wrapped within a circle with a clearly visible border:
Microsoft Teams (web):
The ellipsis (and all the other icon buttons) do have visible text below the icon:
Step-by-step reproduction instructions
- User test the editor UI with real low vision users.
- Alternatively, use some tools to simulate low vision impairments e.g. cataract, glaucoma, age-related macular degeneration,, diabetic retinopathy etc.
- Note: there used to be several such tools. Today, the Chrome dev tools do have a built-in tool called 'Emulate vision deficiencies'. Please keep in mind all of these tools are generally a rough approximation of the actual vision impairment. I suggest to use the Chrome dev tools > Console > open the actual Console > Go to the 'Rendering' tab or if it is not there, use the... ellipsis button to add it > scroll down to 'Emulate vision deficiencies' and choose 'Reduced contrast`. Screenshot:
As said, this is only a rough approximation of some contrast loss.
- Observe the various ellipsis buttons in the editor UI. I suggest picking up one that is surrounded by white space e.g. in the Data Views > Table layout.
- Observe the ellipsis icon is barely visible.
Example screenshot of the simulation:
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
Description
Previously:
#42505
#42555
See also #61847
The ellipsis button is barely visible for low vision users. I am a low vision user and I struggle to visually identify this button, especially when it's used 'in isolation' as in: in a spot of the UI where it is surrounded by white space and there's no other borders or shapes to draw user's attention to the button.
The three vertical dots are really thin. This is an inherent issue in the design of the icon. Also, as I tried to explain in #42555 (comment), the context matters. Other shapes or borders around the button make a big difference.
The ellipsis button is now widely used in the editor so that the issue previously reported for teh templates list is nwo more impactful.
To explain how the context matters, in #42555 (comment) I made 4 examples. Reporting them here:
Screenshot:
For users with vision impairments, these 4 cases are very different. The ability to perceive the ellipsis icon also depends on the context as in: surrounding controls or borders or other shapes that help with visually perceiving the button.
Based on my (admittedly anecdotal) experience:
How to remediate?
I would like to start pointing out again that icon buttons should only be used when there's not enough space to use visible text. Icons have inherent usability and accessibility problems. They don't have universal meaning, as some shapes often have different meaning depending on countries and cultural background. Overall, there is an excessive usage of icons in the editor. Rather, their usage should be limited as visible text is the only universal, accessible, mean to convey information.
That said, the icon design should be improved. I would like to kindly ask the design team to work on a new design for the ellispis icon to make it more visible. I'd liek to suggest some research first, to explore how other widely used software solved this issue.
From my side, I can add a couple examples. Please ignore that in the following examples the ellipsis is horizontal, as that doesn't make a difference for the issue reported here.
macOS Finder:
The ellispis is wrapped within a circle with a clearly visible border:
Microsoft Teams (web):
The ellipsis (and all the other icon buttons) do have visible text below the icon:
Step-by-step reproduction instructions
As said, this is only a rough approximation of some contrast loss.
Example screenshot of the simulation:
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