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

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?](https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a)

#### 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](https://www.deque.com/axe/)
[SiteImprove](https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc)
[Tenon](https://tenon.io/)
[WAVE](https://wave.webaim.org/extension/)
[Lighthouse](https://developers.google.com/web/tools/lighthouse/#devtools)

But if you want to test your site with other tools, here is a bigger [list](https://www.w3.org/WAI/ER/tools/)

---
# 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](https://developers.google.com/web/tools/lighthouse/audits/optimize-images)
Read [closed issue #111](https://github.com/hackforla/website/issues/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](https://developers.google.com/web/tools/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](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)
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.