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

Make docs site (jrnl.sh) fully meet Web Content Accessibility Guidelines (WCAG) 2.1 #1105

Merged
merged 14 commits into from
Dec 12, 2020

Conversation

wren
Copy link
Member

@wren wren commented Dec 5, 2020

Fixes #1061

This PR fixes all of the acessibility issues that pa11y was reporting on our docs site. It also re-enables accessibility testing for PRs and branches that change anything related to the docs.

The main issues were:

  1. Low contrast colors choices
    jrnl.sh will now meet the AAA standard specified in WCAG 2.1, which is to have a minimum of 4.5:1 contrast ratio for all text on the site.
  2. Our search bar was missing a submit button
    No submit button makes it hard for anyone that can't use a keyboard to search our docs site. Now there's a button, so everybody wins.

Note that I had to move the mkdocs theme folder out of docs and into docs_theme. This is because readthedocs doesn't recognize main.html (which is necessary to add the missing search button) inside of the docs directory. Mkdocs' site says not to put the custom theme inside the docs directory anyway, so I guess this fixes both of those issues at once.

Also, here's an example build where this all ran successfully:

Checklist

  • I have read the contributing doc.
  • I have included a link to the relevant issue number.
  • I have tested this code locally.
  • I have checked to ensure there aren't other open pull requests
    for the same issue.
  • I have written new tests for these changes, as needed.
  • All tests pass.

wren added 4 commits December 4, 2020 15:24
This fix required moving the mkdocs theme out of the docs directory.
It's no in the docs_theme directory, and the mkdocs config is updated
accordingly.
Also, move the pa11y script into the gh actions workflow
@wren wren changed the title Fixes #1061 Fix accessibility issues on docs site Dec 5, 2020
@github-actions

This comment has been minimized.

@wren wren changed the title Fix accessibility issues on docs site Docs sitet now fully meets Web Content Accessibility Guidelines (WCAG) 2.1 Dec 5, 2020
@wren wren changed the title Docs sitet now fully meets Web Content Accessibility Guidelines (WCAG) 2.1 Docs site now fully meets Web Content Accessibility Guidelines (WCAG) 2.1 Dec 5, 2020
@wren wren changed the title Docs site now fully meets Web Content Accessibility Guidelines (WCAG) 2.1 Make docs site (jrnl.sh) fully meet Web Content Accessibility Guidelines (WCAG) 2.1 Dec 5, 2020
@jrnl-org jrnl-org deleted a comment from github-actions bot Dec 5, 2020
@wren
Copy link
Member Author

wren commented Dec 5, 2020

I tried to keep the colors as similar to the original as possible, but now with the higher contrast, some of the colors look a bit garish.

Like this page honestly looks a bit alarming. Maybe we should tone down the red?

@wren wren force-pushed the docs-site-accessibility-1061 branch from 09bc99e to 512bd53 Compare December 6, 2020 01:32
@github-actions

This comment has been minimized.

@wren wren added the documentation Improvements or additions to documentation label Dec 6, 2020
@wren
Copy link
Member Author

wren commented Dec 6, 2020

Okay, all colors are now updated, and this PR should be good to go.

Copy link
Member

@micahellison micahellison left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📄📄📄📄

@micahellison micahellison merged commit 558d331 into jrnl-org:develop Dec 12, 2020
@github-actions
Copy link

Unit Test Results

  9 files  9 suites   0s ⏱️
49 tests 0 ✔️ 0 💤 49 ❌

results for commit 558d331

@wren wren deleted the docs-site-accessibility-1061 branch December 12, 2020 20:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Low Contrast Text on Webpage
2 participants