greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/english/accessibility/accessibility-tools-for-web.../index.md

89 lines
4.8 KiB
Markdown
Raw Normal View History

feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
---
title: Accessibility Tools for Web Developers
---
## Accessibility Tools for Web Developers
There are many tools and online resources that can help you to ensure that your web application meets all of the accessibility requirements.
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
### General
- **<a href='https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en' target='_blank' rel='nofollow'>Accessibility Developer Tools</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
This is a Google Chrome extension that will add a new Accessibility sidebar pane in the Elements tab to the Chrome Developer tools. This new pane will display any properties that are relevant to the accessibility aspect of the element that you are currently inspecting. This extension also adds an accessibility audit that can be used to check whether the current web page violates any accessibility rules.
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
- **<a href='https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US' target='_blank' rel='nofollow'>aXe</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
This Google Chrome extension can find accessibility defects on your web page.
Add Pa11y (#26953)
2019-01-15 20:03:01 +00:00
- **<a href='http://pa11y.org/' target='_blank' rel='nofollow'>Pa11y</a>**
Free, open source program that allows you to run automatic daily accessibilty testing on any number of pages
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Update index.md (#29856) I added the WAVE Extention Tool for Google Chrome
2019-02-15 18:10:04 +00:00
- **<a href='https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh' target='_blank' rel='nofollow'>WAVE Evaluation Tool</a>**
Another great Google Chrome accessibility extension that provides visual feedback via icons and indicators directly on your webpage.
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
- **<a href='http://khan.github.io/tota11y/' target='_blank' rel='nofollow'>tota11y</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
An accessibility visualization toolkit that checks how your website performs with assistive technologies.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
- **<a href='https://www.accesslint.com' target='_blank' rel='nofollow'>AccessLint</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
A GitHub app that checks your pull requests for accessibility issues.
Added an additional link for accessibility tool (#26465) * Added an additional link for accessibility tool * Added a space after additional link
2019-01-05 21:04:49 +00:00
- **<a href='https://wave.webaim.org/extension/' target='_blank' rel='nofollow'>WAVE</a>**
This is another Chrome (and Firefox) extension that allows you to find accessibility defects on your web page.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
### Color Contrast
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
- **<a href='http://colorsafe.co' target='_blank' rel='nofollow'>Color Safe Palette Generator</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
deleted "can help you" and changed to "helps you" (#27143) It felt better when reading it. It flowed better.
2019-01-15 20:03:55 +00:00
This website helps you create a color palette that is based on the WCAG guidelines for text and background contrast ratios.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
- **<a href='http://www.checkmycolours.com' target='_blank' rel='nofollow'>Check My Colours</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Updated some words for better consistency and flow (#27974)
2019-01-15 20:05:26 +00:00
This website checks if your website meets the accessibility requirements for color and contrast.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
- **<a href='http://colororacle.org' target='_blank' rel='nofollow'>Color Oracle</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Updated some words for better consistency and flow (#27974)
2019-01-15 20:05:26 +00:00
This application simulates color blindness. It is available on Windows, Mac and Linux.
Reformat a11y resources guide and add a resource (#18547) * Reformat a11y resources guide and add a resource I added a resource to an accessible color palette builder, as well as did some reformatting. Color tools are under their own heading for easy perusable. General section could be broken down as well, I believe, but for now I think it should be ok as-is. Since the order of these resources is not important, I turned the lists into `ul`s, which makes more sense as well as making this guide easier to maintain. Now if someone wants to change the order around or add or remove something, there is no need to go and change all of the list item numbers. * Update index.md
2018-10-14 21:07:41 +00:00
- **<a href='https://toolness.github.io/accessible-color-matrix/' target='_blank' rel='nofollow'>Accessible Color Palette Builder</a>**
This website allows you to edit a color palette and will create a table showing all of the possible color combinations, telling you which ones are accessible and which combinations to avoid using.
Added WebAIM for a color contrast checker. (#21376)
2018-11-12 22:55:15 +00:00
- **<a href='https://webaim.org/resources/contrastchecker/' target='_blank' rel='nofollow'>WebAIM Color Contrast Checker</a>**
This website allows you to enter in color hex values for foreground and background to evaluate the contrast ratio. You can also adjust colors entered to get the necessary contrast ratio.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Updated and added another tool for accessibility (#20694) * Updated and added another tool Added color contrast checker for good accessibility * added line break
2018-11-03 13:03:09 +00:00
- **<a href='https://webaim.org/resources/contrastchecker/' target='_blank' rel='nofollow'>Color contrast Checker</a>**
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Updated and added another tool for accessibility (#20694) * Updated and added another tool Added color contrast checker for good accessibility * added line break
2018-11-03 13:03:09 +00:00
WebAIM offers complete web accessibility services. Regardless of the type or size of your web site, WebAIM can help ensure that your site is accessible and usable to those with disabilities.
Added more Accessibility tools for web developers (#31040) * Added more Accessibility tools for web developers Added Screen Reader tools useful for accessibility development * markdownize links change & to 'and'
2019-02-15 18:35:42 +00:00
### Screen Reader
A screen reader is a software application with assistive technology that attempts to convey what people with normal eyesight see on a display to their users via non-visual means, like text-to-speech.
Developers can utilize a screen reader to understand how a webpage can be made accessible to such people and develop the page accordingly. Some of the most well known and widely used screen readers are:
- **[NVDA](https://www.nvaccess.org/)**
NVDA(Non Visual Desktop Access) Screen reader is a Free & Open-source downloadable Screen Reader software for Windows OS.
- **[JAWS](https://www.freedomscientific.com/Products/Blindness/)**
JAWS(Job Access With Speech) is a computer screen reader program which is available as licensed software for Windows.
- **[ChromeVox](https://www.chromevox.com/)**
ChromeVox is a Chrome Browser extension which can be used to render Webpages as text-to-speech.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Fixed spelling errors (#24181)
2018-12-08 00:09:15 +00:00
#### More Resources
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
You can find many more tools for accessible web design on <a href='http://www.d.umn.edu/itss/training/online/webdesign/tools.html' target='_blank' rel='nofollow'>this list</a> made by the University of Minnesota Duluth.