DO NOT DELETE - content from Lighthouse and other Accessibility issue templates

[ExperimentsInHonesty]

Text from the Lighthouse and Wave issues that I removed

Current Draft

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

---

Lighthouse Guides

Lighthouse: How To

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. Hack For LA recommends that you run the tests and evaluate what changes you might want to make on your website to improve performance and accessibility.

How To Use

Lighthouse is in the Audits panel of the Chrome DevTools. To run a report:

1. Download Google Chrome for Desktop.
2. In Google Chrome, go to the URL you want to audit. You can audit any URL on the web.
3. Open Chrome DevTools.
4. Click the Audits tab.
5. Click Perform an audit. DevTools shows you a list of audit categories. Leave them all enabled.
6. Click Run audit. After 60 to 90 seconds, Lighthouse gives you a report on the page.

For more information go to :
https://developers.google.com/web/tools/lighthouse/

Tip

You will want to re-run lighthouse on any code changes before integrating them into your site. Sometimes the specific suggestions it makes, do not actually result in improved performance or can actually harm performance.

---

Lighthouse: Accessibility - Forms

In order for your sites form(s) to be usable by visitors using screen readers all the form elements need labels. There are specific details and exceptions, which can be found in the instructions below.

Action Items

If your site already has forms review the instructions and document the changes needed to bring your form(s) into WCAG compliance, by commenting on this issue.
If your site does not have forms review the instructions and design new forms using the WCAG standards.

Instructions

Deque University
https://dequeuniversity.com/rules/axe/3.2/label

---

Lighthouse: Accessibility - Links

The formatting of links can make them readable or unreadable by screen readers. Which includes creating programmatic events for links without making them device specific (e.g., onfocus() instead of onmouseover(), etc.), and other ways of making sure all links are visible by screen readers.

Action Items

If your site already has links review the instructions and document the changes needed to bring your link(s) into WCAG compliance, by commenting on this issue.
If your site does not have links yet review the instructions and design all new links using the WCAG standards.

Instructions

Deque University
https://dequeuniversity.com/rules/axe/3.2/link-name

---

Lighthouse: Image Optimization

When you run the lighthouse review it may suggest some specific image optimizations such as choosing another image format and making those changes may or may not improve your sites actual performance.

Action Items

Run lighthouse on a local version of the website and then apply suggested changes and retest locally before determining if you want to keep the changes.

Instructions/Resources

Google's Tools for Web Developers: Optimize Images
Read closed issue #111 from when HackforLA.org did our audit, to see why we decided not to do the image optimization

---

Lighthouse Issue: Cross-origin destinations are unsafe

Links to cross-origin destinations are unsafe both from a security and performance perspective.

Action Item

Run Lighthouse and then follow the instructions in [cross-origin destinations are unsafe]
(https://developers.google.com/web/tools/lighthouse/audits/noopener) .

Summary of instructions

When using target=_blank also adding rel="noopener" to the tag ensures that new page runs in a separate process.

---

Wave Guides

Wave Chrome Extension: Accessibility review

Action Items

1. add WAVE chrome extension
2. visit site
3. click the extension and review the red flags.
4. Run the same steps for the development site (localhost). Ensure that the chrome extension has the "Allow access to file URLs" enabled.
5. Document all suggested changes in the comments.