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

[A11y] Accessibility low-hanging fruits #682

Open
6 tasks
Cheukting opened this issue Jun 13, 2024 · 0 comments
Open
6 tasks

[A11y] Accessibility low-hanging fruits #682

Cheukting opened this issue Jun 13, 2024 · 0 comments

Comments

@Cheukting
Copy link
Contributor

Cheukting commented Jun 13, 2024

I use this tool (https://accessibilityinsights.io/) to run quick checks for simple issues, here is a list of them (not explicit):

[Main page]

  • Color contracts are not enough for most of the buttons
  • Quicklinks at the bottom - Ensures <li> elements are used semantically
  • Logo on the top left and "Power by Vercel" btn at the bottom right missing link description

[Schedule]

  • Date selection - Ensures select element has an accessible name
  • The colour contrast at the "Advance" label is not enough

[List of speakers]

  • Ensures that lists are structured correctly

If you would like to work on any of those, I recommend installing the same tool (https://accessibilityinsights.io/), it is a browser extension, that will guide you on how to fix them.

In general, there are not many issues that the tool found on our website. Of course, this is just a very simple tool and there maybe more we can do but these are low-hanging fruits.

patrick91 pushed a commit that referenced this issue Jul 3, 2024
patrick91 pushed a commit that referenced this issue Jul 3, 2024
For #682.

# Before

Use primary colour (dark blue #0409e7) for schedule table headers. The
ratio on the advanced #D34847 background is 2.17:1:
https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=D34847


![image](https://github.com/EuroPython/website/assets/1324225/dd894117-47b9-4b7c-a253-7ed2cd84e65d)


# After

Use black as the foreground colour. The ratio on the advanced #D34847
background is 4.78:1
https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=FF0000

The other levels all remain above the WCAG AA min of 4.5:1.


![image](https://github.com/EuroPython/website/assets/1324225/0c67fdcd-c41a-4193-b27f-4babbfd9de8e)
egeakman pushed a commit that referenced this issue Jul 8, 2024
For #682.

# Before

The contrast ratio of white on pink is too low: 2.22: 1


![image](https://github.com/EuroPython/website/assets/1324225/96018656-bf95-497e-8007-2ccc74c98329)


# After

Instead of white on pink, use white on read, like the other buttons on
the front page. With #773, the
ratio will be 4.53:1, above the WCAG AA minimum of 4.5.


![image](https://github.com/EuroPython/website/assets/1324225/0848febf-ed2c-48bb-8880-52bcfc5f81d6)

---------

Co-authored-by: Patrick Arminio <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant