feat: Adding Web Accessibility section #8
Conversation
|
cc @adamjohnson you might be interested in contributing here |
| Recommendations of manual accessibility testing tools: | ||
|
|
||
| - [Wave](https://wave.webaim.org/) | ||
| - [BrowserStack](https://www.browserstack.com/accessibility-testing) |
There was a problem hiding this comment.
Another good tool that you might add here is the HeadingsMap extension.
It allows users to quickly see an outline of the page's heading levels and HTML5 tags. If someone skipped a heading level (eg: went from h2 to h4), this tool helps identify it.
docs/front-end/web-accessibility.md
Outdated
|
|
||
| ## High Level overview on ways to make your site/ application more accessible | ||
|
|
||
| - Images and alt attributes |
There was a problem hiding this comment.
Instead of these being a list (<ul>), they should be heading 3's for this document:
### Images and alt attributes
docs/front-end/web-accessibility.md
Outdated
| Accessible hypertext links are very important aspects for accessible web pages and documents. | ||
| Accessible links are not just helpful for people with disabilities, well-written link text descriptions enhances user experience for any user. Following are some high level guidelines that should be followed: | ||
|
|
||
| 1. Ensure concise, descriptive and meaningful anchor text |
There was a problem hiding this comment.
You may consider specifically adding
Avoid using "click here", "read more" or "learn more" as link text.
docs/front-end/web-accessibility.md
Outdated
|
|
||
| - Add Keyboard navigation | ||
|
|
||
| Create an accessible experience for keyboard users by making sure disabled users can access all interactive elements of your site/ app. |
There was a problem hiding this comment.
Avoid attaching event listeners to non-interactive elements like
<div>whenever possible. Use interactive elements like<button>and<a>instead.
docs/front-end/web-accessibility.md
Outdated
| IBM's Developer [guidelines and checklist](https://www.ibm.com/able/guidelines/index.html). | ||
|
|
||
| - [Tools List by W3C](https://www.w3.org/WAI/test-evaluate/tools/list/) | ||
|
|
There was a problem hiding this comment.
The blank lines in between list items here and above are likely to create multiple unordered lists with one list item each. Remove the blank lines to keep it to one list.
|
thank you for taking a look @adamjohnson. Appreciate the inputs, updated the PR with the review comments. |
docs/front-end/web-accessibility.md
Outdated
|
|
||
| - Links and context | ||
| - Add Keyboard navigation | ||
| - ARIA Landmarks and HTML Semantics |
There was a problem hiding this comment.
On the topic of HTML semantics, it might be good to reference the HTML5 Element Flowchart Or otherwise call out that there's 100+ semantic elements.
There was a problem hiding this comment.
updated the section to call out and link 100+ semantic elements 👍
Created first draft for web accessibility section that will be iterated upon review and feedback from other members.