- Accessibility tree
- semantic HTML
- Chrome dev tools - we can enable accessibility tree to view the tree
- contrast checkers
- WCAG levels - A ( not accessible) AA- (Accessible) AAA -( Ideal )
- Minimun contrast for normal text (AA requirement) =
4.5:1, ideal value 7:1
- alt is needed for all images but not for decorative images
- Control elements like link, button - label should be readable
- best for an input to have both title & placeholder, title is more important than placeholder
- px to rem units
- only 1 H1 in page, consecutive headings -h1, h2, h3
- ARIA - Accessible Rich Internet Applications
- ARIA used, when we arent using semantic html
- aria-label not required when we have label already
- aria-live="polite / assertive"
- skip-link
- The tabindex attribute in HTML is used to control the tab order and keyboard focus behavior of elements on a web page.
<div> -> <button> <div role="button" tabindex=0> Elements with tabindex="-1" are programmatically focusable but are not included in the natural tab order. This means they can receive keyboard focus via scripting (JavaScript) but are skipped when navigating with the Tab key by default.
- [react-axe] is a library that audits a React application and logs any accessibility issues to the Chrome DevTools console.
- It uses the open-source axe testing library to flag any issues and their severity.
-
eslint-plugin-jsx-a11y is an ESLint plugin that identifies and enforces a number of accessibility rules directly in your JSX.
-
Lighthouse: A tool for auditing web page accessibility, performance, SEO, and best practices.
-
Screen readers: Testing with screen readers like NVDA, VoiceOver, JAWS to ensure accessibility for users with disabilities.
-
Semantic HTML, ARIA: Using semantic HTML elements and ARIA attributes for better accessibility and screen reader compatibility.
https://github.com/rs-hash/Learning/wiki/Accessibility