seleniumhq.github.io icon indicating copy to clipboard operation
seleniumhq.github.io copied to clipboard

[πŸš€ Feature]: Fixing Accessibility Issues On Selenium Website

Open rpallavisharma opened this issue 3 months ago β€’ 5 comments

Feature and motivation

The main website of Selenium has accessibility issues, raised as bugs as well . #2479, #2231, #1976 . Created a script to find the accessibility issue on website, using axe and the report shows issues on the main links on page. This feature proposal lists the concerns in each page and as identified fix for these issues will be attempted.

selenium_report_20250923_133948.txt

these two are the common concern across website-

  • To Fix ARIA attributes site-wide.
  • To Improve color contrast - Affects user readability across the site [2]

Most likely concern is at the template level, in the .scss files. The website is built using hugo docsy theme. Fixing color contrast in file variables project . scss file might fix issue 2.

code used to find accessibility issue - [to help explore]

findAccessibilityIssuesSeleniumWebSite.py

or use this - https://wave.webaim.org/

rpallavisharma avatar Sep 23 '25 08:09 rpallavisharma

@pallavigitwork, thank you for creating this issue. We will troubleshoot it as soon as we can.


Info for maintainers

Triage this issue by using labels.

If information is missing, add a helpful comment and then I-issue-template label.

If the issue is a question, add the I-question label.

If the issue is valid but there is no time to troubleshoot it, consider adding the help wanted label.

After troubleshooting the issue, please add the R-awaiting answer label.

Thank you!

github-actions[bot] avatar Sep 23 '25 08:09 github-actions[bot]

it seems, that there is a variable provided // This overrides the font color for the site $gray-900: #6F757A;

i tried to change the font color, through adding some code lines if we add the following code in the style scss file

// WCAG Text Contrast Fix body { color: #495057 !important; }

p { color: #495057 !important; }

li { color: #495057 !important; }

div { color: #495057 !important; }

.text-muted { color: #6c757d !important; }

h1, h2, h3, h4, h5, h6 { color: #212529 !important; }

this changes the color but, the place where we make announcement becomes unreadable. somehow that takes color from a "selenium-blue", which i wasn't able to find defined in the variable file in asset folder.

marking this as "help needed"

if someone knows better about how and where to fix please suggest or if willing help with fixing it.

attaching screenshots after attempting the change in style file.

Image Image

rpallavisharma avatar Sep 26 '25 12:09 rpallavisharma

This issue is looking for contributors.

Please comment below or reach out to us through our IRC/Slack/Matrix channels if you are interested.

github-actions[bot] avatar Sep 26 '25 12:09 github-actions[bot]

@pallavigitwork I’m interested in fixing this issue. If it’s available, could you please assign it to me?

dhruv-suthar avatar Oct 05 '25 02:10 dhruv-suthar

You can start working on it @dhruv-suthar .

rpallavisharma avatar Oct 05 '25 03:10 rpallavisharma