Accessibility Audit

[qiqicodes]

Dependency

• [x] https://github.com/hackforla/website/issues/3859
• [ ] https://github.com/hackforla/website/issues/4300
  • [ ] and whatever issues are contained in the above epic are closed
• [ ] check the board, and if there doesn't seem to be any accessibility epics that should be done first, this can be moved to new issue approval.
  • Accessibility issues on the board https://github.com/hackforla/website/projects/7?card_filter_query=label%3A%22feature%3A+accessibility%22

Overview

Accessibility Audit to follow the WCAG 2.0/2.1 guidelines

Action Items

• [ ] Alt text for informative and decorative images
• [ ] Text proportion and color contrast
• [ ] Link labels
• [ ] Video/Gif captions
• [ ] Info & Relationship
  • [ ] Improve current project card’s headings and links’ descriptions
• [ ] Meaning sequence audit
  • [ ] test with keyboard tab to see focusable elements
  • [ ] test with a blur filter along side with screen reader and voiceover
• [ ] Labels and Instruction for Toolkit Guides

Resources/Instructions

Guidelines/Law:

• WCAG:
  • WCAG 2.0 & 2.1
  • Quick Reference
• 508 Compliance
  • Tools & Guidance

Tool Extensions:

• WAVE
• Siteimprove Accessibility Checker

Here are some of the sample errors we currently have for Hack for LA website:

• Hack for LA Web Accessibility Results

• 

• 

[ExperimentsInHonesty]

Overview

There are more than 100 accessibility testing tools. Figuring out which ones to use can be a black hole. For guidance we recommend this article: Which accessibility testing tool should you use?

Summary of Article

The author recommends using the tools in the following order fixing as you go along, since no one tool catches all the relevant issues

aXe SiteImprove Tenon WAVE Lighthouse

But if you want to test your site with other tools, here is a bigger list

[ExperimentsInHonesty]

The review could be done now and just ignore the alt text flags.

[ExperimentsInHonesty]

We are going to make one issue using this template

https://github.com/hackforla/.github/issues/new?assignees=&labels=&template=wave-chrome-extension--accessibility-review.md&title=Wave+Chrome+Extension%3A+Accessibility+review

Ask QiQi how often we should do it

Checking the board to see if the feasibility is good (meaning there are either not a lot of outstanding issues or they are all of a specific type).

[abuna1985]

@GLRJr brought up a good point for using an accessibility linter. We could use a vs code extension from deque systems like this

[Aveline-art]

@qiqicodes Can you talk to us about how often an accessibility audit should be made, in your opinion? So far, we plan to perform an audit after the current slew of accessibility issues are completed. Afterwards, should an audit be performed at a regular interval? Let me know, because if so, we can create a GHA to create an automated issue.