Last active
February 8, 2024 09:53
-
-
Save freddi301/34e92f9eba7875f16023ca8d2750cfb2 to your computer and use it in GitHub Desktop.
Web Accessibility checklist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| - check with browser plugin "wave" and "axe" also chrome lighthouse accesibility | |
| open chrome inspect element and see the accesibility tree | |
| - generally copy accessibility from mui.com components | |
| - banner role (first <header> in page) should contain title, logo, optionally nav | |
| - contentinfo role (first <footer> in page) | |
| - <main/> (ensure there is only one so that user can skip over heading and sides to most important content) | |
| - <aside/> | |
| - <footer/> | |
| - <header/> (wrap heading that have more than <h1>) | |
| - <section><h1> (these appear in page summary) | |
| - <article><h1> | |
| - <nav> (make sure link lists are wrapped here) | |
| - <table/> | |
| - <li> <ul> (make sure lists are using these tags) | |
| - <search title=""/> (make sure every search capability is enclosed by this) | |
| - tab role (???) (make sure tab nvaigation/content properly annotated) | |
| - accordions are annotated | |
| - aria-expanded, aria-controls on button | |
| - aria-labelledby, role="region" on opened content | |
| - alert/status/log/marquee role these are live regions, sends notifications to screen readers | |
| - aria-labelledby is a label is visible, aria-label otherwise | |
| - aria-current on links, selectors |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment