Irek Róg

źródło: piękny, autorski rysunek :v

Disability categories

source: https://www.marketplace-simulation.com/blog/providing-a-level-playing-field-part-3/

🚫 Using <button> to navigate to pages

✅ Using <a> to navigate to pages

🚫 Using non descriptive links

✅ Using descriptive links

🚫 Using <div> instead interactive tags

✅ Using interactive tags like <button>, <a>, <input>, <select>, <video>, <audio>, etc.

🚫 Remove an outline from interactive elements

✅ Keep the outline

🚫 Not or bad using semantics HTML tags

✅ Using appropriate semantics HTML tags

🚫 Not using or bad using `alt` attribute in <img> tag

✅ Always add `alt` attribute to <img> tag

🚫 Colors, contrast on a page

🚫 Autoplayed audio or video

🚫 Disabled zoom (e.g. in smartphones)

🚫 Forms (input, required etc.)

Other issues...

🚫 Flow navigation

✅ Accessibility first

✅ https://github.com/jsx-eslint/eslint-plugin-jsx-a11y

✅ Estimate potential problems

Development...

https://developer.chrome.com/docs/devtools/accessibility/reference/#pane

https://github.com/GoogleChrome/lighthouse

Testing

https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

Manual testing

https://www.apple.com/pl/voiceover/info/guide/_1121.html

https://validator.w3.org/nu/#textarea​

Bibliography / Useful links

• What is accessibility?
• Web accessibility in React (MR article)
• ARIA
• WCAG
• Libraries for issues with outline
  • https://github.com/WICG/focus-visible
  • https://github.com/ten1seven/what-input
• Screen reader for Mac OS
• How to meet WCAG
• Widzialni.org

Thank you!