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.

Sign up for GitHub

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

Jump to bottom

Accessibility issues #345

Open
7 of 10 tasks
veeara282 opened this issue Aug 9, 2019 · 4 comments
Open
7 of 10 tasks

Accessibility issues #345

veeara282 opened this issue Aug 9, 2019 · 4 comments
Labels
good first issue

Comments

@veeara282
Copy link
Contributor

I found several accessibility issues using the Accessibility Insights tool. I suggest that we fix them so that the app will be usable by a wider base of users.

All pages:

  • document-title: Document must have <title> element to aid in navigation
  • html-has-lang: <html> element must have a lang attribute
  • color-contrast: Elements must have sufficient color contrast
    • A lot of elements are gray on white (or light gray).
  • bypass: Page must have means to bypass repeated blocks

    • Ensure each page has a main landmark to provide a mechanism to bypass repeated blocks of content or interface elements (like header and navigation) and quickly arrive at the main content.

"Write email" page:

  • Formatting buttons:
    • link-name: Links must have discernible text
  • Text area:
  • Attachment picker:
    • label: Form elements must have labels
  • Also, tabbing through the elements on this page is really hard. In particular, you can't tab out of the text area without clicking on a different element.

"Search" page:

  • label: Form elements must have labels
  • button-name: Buttons must have discernible text
@c-w
Copy link
Member

c-w commented Aug 11, 2019

Thanks for this investigation @aidan-fitz. Is there a way to run this accessibility checker as part of the CI? Ideally we'd fix these issues and also add the CI step so that they remain fixed.

@veeara282
Copy link
Contributor Author

Right now it's only available as a browser extension. A possible CI flow for this would be to render the templates with dummy text, then read them into a headless browser and run the extension code on them. But this is really complicated.

AccessLint is a GitHub app that flags accessibility issues on PRs. It works with several template languages, possibly including Jinja.

@c-w
Copy link
Member

c-w commented Aug 28, 2019 •
edited

I've implemented a few of these in https://github.com/ascoderu/opwen-webapp/pull/209.

The following are a bit harder since it's HTML injected by third party libraries:

  • color-contrast: Elements must have sufficient color contrast (bootstrap#^3.3.7)
  • Text area: frame-title: Frames must have title attribute (bootstrap3-wysihtml5-bower#^0.3.3)
  • Attachment picker: label: Form elements must have labels (bootstrap-fileinput#^4.3.3)

@veeara282
Copy link
Contributor Author

After experimenting in my browser, I've found that changing the nav menu to

.navbar-default .navbar-nav>li>a {
    color: #666;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #333;
    background-color: #e7e7e7;
}

fixes the color-contrast issue. We can either override the Bootstrap styling in a second CSS file or use existing Bootstrap CSS classes to inject the new colors.

@c-w c-w transferred this issue from another repository Apr 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@c-w @veeara282