https://github.com/thawkin3/a11y-nested-interactive-content
This project is meant to teach software engineers how to create accessible nested interactive content in React. It includes good examples and bad examples.
https://github.com/thawkin3/a11y-nested-interactive-content
a11y accessibility demo inclusive-design javascript react tutorial
Last synced: 6 months ago
JSON representation
This project is meant to teach software engineers how to create accessible nested interactive content in React. It includes good examples and bad examples.
- Host: GitHub
- URL: https://github.com/thawkin3/a11y-nested-interactive-content
- Owner: thawkin3
- Created: 2021-11-30T15:29:42.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-01T15:26:09.000Z (over 4 years ago)
- Last Synced: 2025-03-21T10:23:29.092Z (about 1 year ago)
- Topics: a11y, accessibility, demo, inclusive-design, javascript, react, tutorial
- Language: JavaScript
- Homepage: http://tylerhawkins.info/a11y-nested-interactive-content/build/
- Size: 362 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Accessible Nested Interactive Content
This project is meant to teach software engineers how to create accessible nested interactive content in React. It includes good examples and bad examples.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
You can find the demo app hosted here: http://tylerhawkins.info/a11y-nested-interactive-content/build/
## Running the App Locally
You can run the app locally by simply cloning the repo, running `yarn install`, and then running `yarn start`.
## Accessibility Principles Addressed
1. Interactive content should not be nested.
2. When re-creating a button element using a div element, you must remember to add a tabindex, a keypress handler, and the role="button" attribute.
3. Lists of items should use proper semantic list elements.
4. Interactive content needs adequate visible focus indicators.
5. Contextual labels should be added to buttons to indicate which item in the list the button relates to.
## Additional Takeaways
1. Accessible content can still look good!
2. You can often take inaccessible content and improve it even without affecting the initial UI design.
## Available Scripts
In the project directory, you can run:
- `build`: Builds the app
- `eject`: Ejects the app from using react-scripts
- `format`: Formats the code using Prettier
- `format-watch`: Formats the code using Prettier in watch mode
- `start`: Starts the app in development mode
- `test`: Runs the tests in watch mode