In this playlist, I share all the accessibility tips and tricks lessons that I've created so far! Take a look, it's less than 15 minutes!

We talk about how to go about getting rid of the error "Missing Form Label" from your accessibility reports and why it's import. In this lesson, we mention the visually hidden class, which you can read about here: https://a11yproject.com/posts/how-to-hide-content/.

Wave Tool Extension:

For Chrome: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US

For Firefox: https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/

Creating accessible forms with associated form labels

Instead of using divs to create a Hamburger Menu, we are going to improve the accessibility using Semantic HTML.

You'll see that a simple adjustment from a `div` to a `button` allows users to navigate our menu with their keyboard.

Use Semantic HTML to Improve Hamburger Menu Accessibility

In this video we are going to take the native HTML checkboxes and jazz them up while still ensuring they are keyboard accessible. We use pseudo-elements and pseudo-classes to replicate the focus and the ability to tab to custom checkboxes. 

Create Custom Keyboard Accessible Checkboxes

In this lesson, we use a bit of CSS and JavaScript to expand a menu on focus. This is important to ensure that if someone cannot use a mouse, they are still able to open the menu and see which link they are on. 

Expand a Menu on a focus Event to Improve Navigation Accessibility

In this lesson, we extend off [Expand a Menu on a focus Event to Improve Navigation Accessibility](https://egghead.io/lessons/javascript-using-the-focus-event-to-improve-navigation-accessibility) to improve the navigation. We use a bit of JavaScript to collapse the submenu on blur. This is important to ensure that if someone cannot use a mouse, they are still able to close the menu.

https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

Accessibility Tips & Tricks

Instructor

Course Content