Skip to content

Make website more accessible #534

@paddyroddy

Description

@paddyroddy

Hi Sam,

Thank you so much for your patience while we had a look at the Python tooling pages, and apologies for the delay; credit goes to the whole team on the testing.

We firstly want to reassure you that the whole site is very accessible overall, and reads really well with a screen reader; we also love the updated traffic lights, which are perfect for distinguishing meaning via multiple means (and also read really well), so thank you all for making that change. It's near-impossible for a site to be 100% accessible, so we did find a few issues to report back, and I'm just going to list those issues with the biggest impact on accessibility: hyperlinks in dark mode, tab order at high magnification, focus indicators, and just one unlabelled button.

Having light and dark modes is great for accessibility, but the hyperlinks in dark mode are quite low in contrast against the background (the link colour is #2c84fa); by comparison, the link colour is #7253ed in light mode, which is well-contrasted with the white background. As there are quite a lot of hyperlinks on all pages, it would be great if their dark-mode colour could be lightened until they have a contrast ratio of 4.5:1 or more against both the background colour (#27262b; current ratio is 4.13:1) and the slightly lighter code text background (#31343f; current ratio is 3.41:1); a contrast checker can be used to find the best colour options. Increasing the visibility of the links' underline would also really help, to provide an additional visual means to know that a link is a link, as it's currently nearly invisible in both modes.

Screenshot of Python tooling webpages in dark mode, showing bright red highlights around text containing links that are too low in contrast against the dark background. The links are also underlined, but very faintly, which makes them difficult to see.

The footer text about the theme in the bottom-left is also too low in contrast against the background, but if it could be given the same colour as the main text, problem solved! However, at high levels of magnification, the navigation menu gets collapsed into a hamburger menu but the tab order does not change, which is great for everything except the "Just The Docs" link in the footer text, which moves to the bottom of the newly one-column page but stays ahead of the main text links in the tab order. This causes the page to jump around if you're navigating by keyboard or tabbing through with a screen reader, but I'm not sure how easy this would be to fix without messing up everything else on the page!

Screenshot of Python tooling webpages at 400% zoom, with Chrome Developer Tools open at the right-hand side. Developer Tools shows the footer tags above the div element with "main" class.

The keyboard focus indicator for the search field is quite hard to see, as it changes the magnifying glass icon from grey to blue but there is no expected border or any other way to see where you are on the page when navigating by keyboard. Some other focus indicators are also partially obscured, such as the mode-changing button and particularly the source repository link (shown below). Ideally there would be very clear, high-contrast, fully-visible borders around every clickable/tab-able element.

Screenshot of the mode-changing button on Python tooling webpages, showing the top part of the border for the keyboard focus indicator being cut off by the top of the screen. and Screenshot of the source repository link on Python tooling webpages, showing the top, left, and bottom parts of the border for the keyboard focus indicator being obscured.

Finally, the mode-changing button is not labelled and so is read by the screen reader as just the character inside the button, e.g. "half moon button" in light mode, which would be confusing for anyone who couldn't see it. Of course, while we know a colour-mode-changing button might not be useful for screen reader users to interact with, they still wouldn't know whether they need it or not unless they can hear what it does! All buttons need to have a clear label so their function is announced to screen readers correctly, but currently the Unicode character (e.g. ☾ (U+263E)) is the only text a screen reader can read from the button. If you'd prefer to keep the sun/moon characters as the only visible text, using the aria-label attribute to add a screen-reader-only text label would be a fantastic alternative.

Screenshot of Python tooling webpage with Chrome Developer Tools open at the right-hand side. The mode-changing button is highlighted to show there are no text alternatives to describe the button to screen reader users.

If it's possible to:

[ list converted to sub-issues ]

this would have a huge impact on the site's overall accessibility.

Apologies again for the delay, and please do let us know if we can give you any further support with this; we'd be very happy to advise and/or test further iterations if any changes are made, and we fully understand that progress is incremental, so everything counts!

Best wishes,
James

Metadata

Metadata

Assignees

Labels

accessibilitySomething relating to the ease of accessibility (alt-text, colour choices, language, etc)enhancementNew feature or requestp2-highHigh prioritywebsiteRelated to https://github-pages.arc.ucl.ac.uk/python-tooling

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions