 Resources from Lindsey Kopacz in 2021

Bite-size video tutorials for badass web developers.

egghead

Create an accessible dropdown navigation

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!

Accessibility Tips & Tricks

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

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

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

Cascading Style Sheets bring order and beauty to our applications.

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

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

We are going to use the the .filter() method on an array of countries so that we only return the country that matches a particular country code. This could be useful if you are in multinational organization and you want to return data only from that country's page.

Filtering through an Array of Countries using .filter()

We use the same set of data that we used in my filter lesson (https://egghead.io/lessons/javascript-filtering-through-an-array-of-countries-using-filter) to create an array of coordinates. We use the .reduce() method to create the data structure that we need here. 

Transform an Array of Objects into an Array of Arrays with .reduce()

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

Collapse a Submenu on the blur Event to Improve Navigation Accessibility

In this lesson, we are going to use the :focus-within pseudo class as a CSS only way improve the accessibility of a navigation menu.

If I were to use :focus on the `<li>`, it wouldn't work because the list items have a tabindex of -1. 

[:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) represents an element that has received focus or contains an element that has received focus. So when it's child, the anchor, receives focus, we can use the same thing that we do on the hover effect. Be wary of browser support though! 

If you have to support IE and Edge check out my other lessons: [Expand a Menu on a Focus Event to Improve Accessibility](https://egghead.io/lessons/javascript-expand-a-menu-on-a-focus-event-to-improve-navigation-accessibility) and [Collapse a Submenu on the Blur Event to Improve accessibility](https://egghead.io/lessons/javascript-collapse-a-submenu-on-the-blur-event-to-improve-navigation-accessibility)

Improve Keyboard Accessibility of Submenu Navigations using CSS

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

In this lesson, we are going to use aria-current to give a screen reader user more context about what the current page is. Historically, many developers use an `.active` class to indicate that the page in a menu is the same that you're on. 

Instead of using a class, we are going to use the aria-current attribute to add more semantic value to the HTML and use that attribute to style the active link.

Note: VoiceOver testing works best on the Native Safari Browser, hence why we should always use Safari to test.

More resources:
- [Using the aria current attribute](https://tink.uk/using-the-aria-current-attribute/)
- [W3 WAI-ARIA - aria-current](https://www.w3.org/TR/wai-aria-1.1/#aria-current)
- [Breadcrumb Example - w3-WAI ARIA Practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html)

Add Semantic Styling to the Current Page of a Navigation Item with aria-current

In this lesson, we will be going over the attribute `aria-expanded`. Instead of using a class like `.open` we are going to use the `aria-expanded` attribute to style.

This accomplished double duty because we have semantic value and visual indicators that a button is open and closed.

To test this, I opened up Safari and used CMD + F5 to turn VoiceOver on. 

- [An Introduction to ARIA States](https://www.a11ywithlindsey.com/blog/introduction-aria-states)
- [w3c Using aria-expanded to indicate the state of a collapsible element](https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element)

Add aria-expanded to add semantic value and styling

Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using `aria-describedby` to create a relationship with the input and the tooltip. Then I use CSS to style the tooltip and control when it appears or disappears both on hover and focus.

In this video, we use VoiceOver. To test that on a MacOS, use CMD + F5.

A few resources:
- [CSS Triangle](https://css-tricks.com/snippets/css/css-triangle/)
- [a11y Style Guide - Tooltips](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-tooltips) - I used this to gut check and with some help with those transitions. 
- [Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)

Create an Accessible Tooltip on a Text Input

In this exercise, we will be going over 2 examples of when to use aria-hidden (hint: decoration) and when to use hidden.

In the first example, we will be hiding a "middle dot" that we have for formatting. This middle dot isn't necessary to be read out, so we add an aria-hidden attribute on that span.

When we use hidden, we will completely hide things from the viewport AND the screen reader.

Topics

Instructors

Content Type

Free or Pro