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 compliance for kubeapps.dev #5397

Closed
1 of 2 tasks
ppbaena opened this issue Sep 27, 2022 · 9 comments · Fixed by #5456 or #5579
Closed
1 of 2 tasks

Accessibility compliance for kubeapps.dev #5397

ppbaena opened this issue Sep 27, 2022 · 9 comments · Fixed by #5456 or #5579
Assignees
@antgamdia
Labels
component/website An issue that reports an update related to project website kind/bug An issue that reports a defect in an existing feature
Milestone
Technical debt

Comments

@ppbaena
Copy link
Collaborator

ppbaena commented Sep 27, 2022 •
edited by antgamdia

Summary
The goal is to ensure kubeapps.dev website is accessible

Background and rationale
All VMware’s OSS products must meet Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards.
Devices, Assistive Technology combinations used: Chrome + NVDA on Windows, Safari + Voiceover on Mac

Description
Review the results of the accessibility audit for kubeapps.dev and fix all issues reported (JIRA - internal tool)

Acceptance criteria

  • All issues identified in the accessibility audit are fixed
  • For every major UI/ Feature update fixed, a request for Accessibility Testing has been performed and succeeded.

Additional context
An Accessibility Testing has been completed for kubeapps.dev with several issues identified to comply with Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards (issues: 7 critical, 20 High, 2 Medium, 5 Low)
@ppbaena ppbaena added kind/bug An issue that reports a defect in an existing feature component/website An issue that reports an update related to project website next-iteration Issues to be discussed in planning session labels Sep 27, 2022
@ppbaena ppbaena added this to the Technical debt milestone Sep 27, 2022
@antgamdia antgamdia self-assigned this Oct 10, 2022
@antgamdia
Copy link
Contributor

antgamdia commented Oct 11, 2022 •
edited

  • 14258
    • Problem: image
    • Solution: image
  • 14230
    • Problem: image
    • Solution: unclear, it is an iframe from YouTube, I've requested additional info from the a11y team.
  • 14229
    • Problem: image
    • Solution: image
  • 14228
    • Problem: image
    • Solution: image
  • 14227
    • Problem: image
    • Solution: image
  • 14226
    • Problem: image
    • Solution: image
  • 14225
    • Problem: image
    • Solution: image
  • 14224
    • Problem: image
    • Solution: PENDING unclear, it is an iframe from YouTube, I've requested additional info from the a11y team.
  • 14223
    • Problem: image
    • Solution: image
  • 14222
    • Problem: image
    • Solution: image
  • 14221
    • Problem: image
    • Solution: image
  • 14220
    • Problem: image
    • Solution: image
  • 14219
    • Problem: image
    • Solution: image
  • 14218
    • Problem: image
    • Solution: image
  • 14217
    • Problem: image
    • Solution: image
  • 14216
    • Problem: image
    • Solution: image
  • 14215
    • Problem: image
    • Solution: image
  • 14214
    • Problem: image
    • Solution: image
  • 14213
    • Problem: image
    • Solution: PENDING conflicting rule (see this page), so I've asked the a11y team for a decision.
  • 14212
    • Problem: image
    • Solution: image
  • 14211
    • Problem: image
    • Solution: PENDING unclear, it is an iframe from YouTube, I've requested additional info from the a11y team.
  • 14210
    • Problem: image
    • Solution: image
  • 14209
    • Problem: image
    • Solution: image
  • 14208
    • Problem: image
    • Solution: image
  • 14207
    • Problem: image
    • Solution: image
  • 14206
    • Problem: image
    • Solution: image
  • 14205
    • Problem: image
    • Solution: image
  • 14204
    • Problem: image
    • Solution: image
  • 14203
    • Problem: image
    • Solution: image
  • 14202
    • Problem: image
    • Solution: image
  • 14201
    • Problem: image
    • Solution: image
  • 14200
    • Problem: image
    • Solution: image
  • 14199
    • Problem: image
    • Solution: image
  • 14198
    • Problem: image
    • Solution: image

@antgamdia
Copy link
Contributor

antgamdia commented Oct 12, 2022 •
edited

Current status:

  • 4 out of 34 a11y issues are pending (awaiting an official response)
  • Still pending: submit this evidence in JIRA and close the tickets.

Summary:

@antgamdia antgamdia mentioned this issue Oct 12, 2022
Merged
@ppbaena
Copy link
Collaborator Author

ppbaena commented Oct 17, 2022

Thanks for the complete revision and detailed comment.

@antgamdia
Copy link
Contributor

Reopen as we need to confirm with the a11y team before actually closing this issue.

@antgamdia antgamdia reopened this Oct 17, 2022
@ppbaena
Copy link
Collaborator Author

ppbaena commented Oct 18, 2022

Accessibility issues have been assigned to the audit team to review all the evidence and reply to the questions performed by @antgamdia.

@ppbaena
Copy link
Collaborator Author

ppbaena commented Oct 24, 2022

Let's close this issue and reopen it if any issues from the acceptance review.

@ppbaena ppbaena closed this as completed Oct 24, 2022
@antgamdia
Copy link
Contributor

antgamdia commented Oct 25, 2022 •
edited

Unfortunately, some issues have been reopened. Further work seems to be required.

Closed with a comment for them to reconsider

  • VPAT-14217: I think we do comply with the WCAG requirements as the text is large and the contrast ratio is 3.46:1 (required 3:1).
  • VPAT-14206: we added a chevron (>) at the end of each link, so, besides the color, links are still identifiable.
  • VPAT-14204: search button says "submit" instead of "search", but it's autogenerated by algolia, so don't know if we can do anything. In fact, I can't repro it, we did fix it already.
  • VPAT-14224: wrong title in youtube buttons, closed as 3rd party issue

Fixes required

  • VPAT-14207: when zooming up to 200%, the right menu disappears, but... what's wrong with it.
  • VPAT-14205: overlapping when zooming up to 400%, CSS tune-up is required
  • VPAT-14202: search box border colors don't have the proper contrast ratio, CSS tune-up is required
  • VPAT-14198: "cookie settings" is not clickable, but this is provided via OneTrust, not sure what can we do. EDIT: we need to add a new event handler as the OneTrust one only has manual mouse clicks.

Triage pending

@antgamdia antgamdia reopened this Oct 25, 2022
@antgamdia antgamdia mentioned this issue Oct 27, 2022
Merged
@antgamdia
Copy link
Contributor

antgamdia commented Oct 27, 2022 •
edited

@antgamdia antgamdia mentioned this issue Oct 27, 2022
Merged
antgamdia added a commit that referenced this issue Oct 28, 2022
@antgamdia
Fix website meta tags issues (#5578)
4e42faa 
### Description of the change

While working on #5397, I discovered some minor issues with the meta
tags we were using. Mainly, the title and description of each page were
always the same, hindering the crawler process we run via Algolia.

### Benefits

Title and other meta tags will have more meaningful content.

### Possible drawbacks

N/A

### Applicable issues

- related #5397

### Additional information

I'm removing some unused files as well.


![image](https://user-images.githubusercontent.com/11535726/198228723-83b7cc56-c4bd-49c7-a397-1684291bcff3.png)

Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>
antgamdia added a commit that referenced this issue Oct 28, 2022
@antgamdia
Fix reopened website a11y issues (#5579)
8f6edf8 
### Description of the change

This PR aims at fixing the remaining a11y issues that were reopened.
Details at
#5397 (comment)

Summary of the changes: 

1. Change the border color of the searchbox
2. Display a menu behind "documentation" if the screen is small. If you
don't like it, we can always remove it and try to convince a11y folks.
3. Fix the overflow of the left menu
4. Add a "space" and "enter" keyboard events handler for the OneTrust
cookie manager.
5. Remove the focus on code blocks (every code block, indeed)

### Benefits

a11y compliance

### Possible drawbacks

N/A

### Applicable issues

- fixes #5397

### Additional information

This PR is based on top of
#5578, as I assume it will
get merged soon.

Also, I've removed some unused files (images mainly) and unified the
icons we are using (ie, using the SVG ones, and resizing them, via CSS,
instead of having several logos for the same purpose)

~EDIT: there are more issues to solve I've just seen, will add the fixes
to this PR~

Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>
@antgamdia
Copy link
Contributor

All the pending issues have been moved to "acceptance review". If any of them happen to be reopened, I'll also reopen this issue (hope we don't have to 🤞 )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@antgamdia antgamdia

Labels
component/website An issue that reports an update related to project website kind/bug An issue that reports a defect in an existing feature
Projects
Kubeapps
Archived in project
Milestone
Technical debt
2 participants
@ppbaena @antgamdia