This is the second post (of three) documenting a recent visit to Digital Accessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Centre in Neath, South Wales organised by fellow team member Siobhan Bamber. The first post can be found here.
Three of the staff from DAC gave us feedback on using the WordPress admin screens. Each of the three have a particular impairment, and the visit was a valuable opportunity to learn about ways we could improve WordPress for everyone.
In this post we take feedback from Gary who has poor vision.
Introduction
Gary has no vision in one eye and only poor central vision in the other. No peripheral vision at all. He can’t tell the difference between shades of colour. He will often want the text to be enlarged quite a bit, and will not necessarily see what happens on the screen away from where things are happening. He favours resizing text over zooming.
He uses a mouse and keyboard, and his physical keyboard has bright yellow keys with black text.
I’ve grouped his comments together in sections.
Browser Choice and Enlarging Text
Gary normally favours and tests with Internet Explorer, but he was not able to use IE during our session, as it’s not possible to change the font size in admin screens. So we had to proceed using Firefox. (Action: Check this, it could be as a result of font sizes set to px/pt in stylesheet? Since the visit I have checked the situation in IE11 and it’s still the case. A trac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket needs to be raised for this.)
In Firefox, the text resizing can quickly break the design of the WP admin which has fixed height elements – there is a trac ticket already raised (see ticket #12825). This image shows what happens:
Enlarging the text only in Firefox breaks the design quite easily.
Colour Contrast and Visible Focus
Gary found real difficulty with the subtle grey borders on the input fields – starting with the login page. For him, input fields need to have a much stronger outline, or different background.
The visual focus indication is very important for Gary, but it’s way too subtle for him at present.
The default left hand (default) menu colour scheme is OK except for the hover contrast (dark blue on grey).
Gary’s view is that simply changing colour of links on focus or hover is not enough – ideally should use underline, or invert colour – which is much more obvious.
There are colour contrast issues for Gary – the white text on coloured buttons emits glare. Gary pointed out that colour blindness is not the same for everyone.
We experimented with the provided admin colour schemes, but there were none that really suited Gary. Siobhan mentioned that there is a plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party that allows you to specify your own colour scheme in detail. (Action: Research this plugin – it could be a useful accessibility addition.)
The chosen admin colour scheme does not poke through to the initial login screen, but that’s probably because the admin colour schemes are loaded for each logged on user. (Action: Does this mean that the logon screen needs to be watertight from an accessibility perspective? Is there a way of providing a high contrast logon screen – maybe another plugin?)
Links
Links should identify visually when they open new panels, tabs, windows.
Usability
Gary used the toggle buttons for Help and Screen Options. He found it very confusing that they moved down when the panel opens – so he had trouble locating them to close them up again. He’d expect them to stay at the top of the panel – so that it works like an accordion.
What Next?
The third post in the series will be along soon. It features feedback received from Carly, who is totally blind, and who uses a screen reader.
#accessibility, #colour-contrast, #feedback, #testing, #text-resize
