Web Accessibility checklist

web-accessibility.txt

- 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