pbakaus / goweb Goto Github PK

See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_table_01

Because the tables are being use primarily for layout you can add role=presentation to make them less confusing for screen reader users

More info: https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01

Consider bumping the color to #3ea6f5 to meet WCAG AA requirements.

The markup on this page is wonderful for screen readers, nice job! The only nit I noticed was that there's no main element so when you try to navigate by landmarks you get:

banner <-- this is the <header>
navigation
complimentary <-- these are the <aside>'s
complimentary
complimentary
complimentary

Consider replacing the .nav-icon div with a button to get better keyboard support and automatic focusability. It should have a keyboard handler as well as an aria-label that says something like Open Menu.

Also, you'll want to prevent focus from entering the drawer menu when it's closed. The easiest way to do this is to set it to visibility: hidden or display: none. Similarly when it's opened you'll want to move focus into it, and trap focus so it can't escape the menu until it's closed. Ideally you also shouldn't be able to escape it using a screen reader but in practice that's a lot harder than just trapping focus (it requires setting aria-hidden on everything that isn't the drawer menu).

Menu should also support closing when the user presses Esc.