Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enamhasan/web-accessibility-101
Web Accessibility Cheat Sheet
https://github.com/enamhasan/web-accessibility-101
Last synced: 10 days ago
JSON representation
Web Accessibility Cheat Sheet
- Host: GitHub
- URL: https://github.com/enamhasan/web-accessibility-101
- Owner: enamhasan
- Created: 2023-07-03T22:06:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-25T19:24:54.000Z (over 1 year ago)
- Last Synced: 2023-08-26T00:37:25.499Z (over 1 year ago)
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# web-accessibility-101
Web Accessibility / ADA complaint Cheat Sheet
# Tools to ensure web Accessibility
* Wave
* Google Lighthouse
* voice-over
* Power mapper
# How to make a button web accessible
`````` VS `````` tag in terms of web Accessibility
The element should be used for any interaction that performs an action on the current page.
The element should be used for any interaction that navigates to another view.
To make a button web-accessible
* Use Semantic HTML `````` tag with type attribute
* Use the aria-label Attribute to provide a more explicit label for assistive technologies.
* Ensure the button is fully keyboard accessible. Users should be able to navigate to the button using the "Tab" key and activate it using the "Enter" or "Space"
### Example
``` Send ```
When you can’t use semantic HTML
```
Buy now ```
# Make a background image web Accessible with Alt text
Do this:
```html
[all the rest of my content]
```
Try not to use CSS for important informational images
For ambient images that are CSS, it is a courtesy to provide alternate text. When doing so, place image in its own empty with an aria-label and role="img.This is also true, in a situation where CSS must be used for information content.
If the with the CSS image absolutely MUST contain other content, then provide an empty with an aria-label and role="img" immediately following the that has the image.
# Make HTML Tab Accessible
