 Resources from Lindsey Kopacz in 2024

- Web audio APIs include support for features that aren't available by default in the native HTML audio element.
- The operating system includes basic controls
- Custom controls must be accessible with a keyboard, and make sense to a screen reader
- Don't hide the built-in controls until you know that your custom controls are working
- Listening to what VoiceOver reads should inform the a11y information you include
    - VoiceOver says "Elapsed Time" on its own, so we wouldn't want to write it in our code.
- `loadedmetadata` should have the duration to avoid glitches from new audio not being loaded.
- Elements should be labeled with a unique `id`

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Create an Accessible Audio Player with the HTML Media Element and React

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!

Bite-size video tutorials for badass web developers.

egghead

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 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.

aria-hidden vs. hidden

“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y.

Accessibility is broken down into 4 categories of disability: visual, cognitive, auditory, motor. 

Regardless of the category of disability, accessibilities aim in web development is to make applications and websites usable for everyone.

a11y

We are creating an accessible popup menu for a web application. It covers various concepts, including handling keyboard events, creating a new dropdown component for reuse, using arrow keys to navigate through buttons, using the Tab key to close the menu and go to the next item in the tab order, using the Escape key to close the menu and focus on the button that closes it, using the `aria-expanded` attribute to communicate whether the menu is open or closed, and the difference between the tab index values of 0 and -1. 

**Think about:**
- Why tabindex -1?
- Why would you use arrows versus tab key to navigate through the dropdown?

Create a Dropdown Menu for Rates

In this lesson, we are using HTML, accessibility concepts, and ARIA attributes to improve the time scrubber feature of an audio player. 

The goal is to make it accessible to users of screen readers so that the time scrubber announces the actual time (e.g. 12 minutes and 15 seconds) rather than just the value (e.g. 735). 

We are also creating a new folder called "helpers" in the "src" folder and a new file called "format time.js" within it to hold a function called "format human read time" that takes time as a parameter and returns the human-readable equivalent of that time. Additionally, the author debugs the code and uses console.log to check the variable.

**Think about:** Why does a human-readable name help?

Create a Human Readable Time Formatter

I suggest using the previously learned approach but keep in mind that it may lead to an overly complex markup. We also use the `aria-label` attribute, which can be used to override the text within a label element.

**Think about:** Why would you use an `aria-label` instead of creating a visually hidden span?

Using Aria-Label as a Solution for Overly Complex Markup

In this lesson, we are creating the audio player interface more visually appealing using icons from the React Icons library and Font Awesome, in this process, we are also ensuring that the interface remains accessible to screen readers by providing text descriptions for the icons, first by using the `title` prop on each icon, and then by implementing a `visually hidden` technique that hides the text descriptions from sighted users but makes them available to screen readers. This involves copying and pasting some CSS code to create a visually-hidden class, adding an `aria-hidden` attribute to each icon, wrapping each icon in a React fragment, and then adding a `span` element above each icon with the corresponding text description and the `visually-hidden` class.

**Think about:**  
- Why use `aria-hidden` or visually hide spans? 
- What value does this add to screen reader users?

Design Accessible Buttons Using Icons

We create an input range with a label, where the range is between 0 and 1 with a step of 0 - 1. The input's value should be determined by a ternary statement that checks if the volume is muted and sets it to 0 or to the current volume if not muted. 

An `onVolumeScrubberChange` function is also added that sets the volume to the event target value when the input value changes and updates the volume in the state and an audio reference. The `onVolumeChange` function does not need to be used and the logic needs to be adjusted to ensure that the volume can be updated and that it mutes when the volume reaches 0.

**Think about:** Why do we have to add `audioRef.current.volume === 0` in addition to `audioRef.current.muted`?

Implementing a Volume Range with an onChange Event

We are creating a toggle button for muting and unmuting an audio element using React hooks `useState` and `useRef`. It destructures `isMuted` from the `useState` hook and sets the initial state to false. 

The button's inner text is dependent on the state of `isMuted`, and a `toggleMute` function is created which sets `isMuted` to the opposite of its current state and also sets the `audioRef.current.muted` property to the opposite of `isMuted`. 

A `onVolumeChange` function is added to the audio element that sets the `isMuted` state based on the value of `audioRef.current.muted`. This allows the `isMuted` state to change even when the mute button on the audio element itself is pressed.

**Think about:** 
- Why do we have to add `onVolumeChange` for instead of `onMuted`? 
- How can we use `onVolumeChange` to check for things being muted?

Creating a Toggle Button for Muting and Unmuting an Audio Element in React

We are creating a playback rate button in a React application. An array of rates is created, and each element of the array is mapped to a button. Each button is given an onClick handler that calls an anonymous function called `changeRate`. 

`changeRate` sets the playback rate of an audio element to the rate passed as an argument. When the button is pressed in the browser, it shows the new playback rate.

**Think about:** We have all these states for volume, media time etc, why don't we have one for rate?

Creating a Playback Rate Button

We will create two buttons labeled "rewind 15 seconds" and "fast forward 15 seconds." Then, we created two functions, `onRewind` and `onFastForward`, to adjust the current time of a media by 15 seconds. The `onRewind` function will use `Math.max` to ensure that the time does not go into negative, and the `onFastForward` function will use `Math.min` to set a max limit. These functions will be added to the click events of the corresponding buttons. Finally, it sets the new time for the media state and the audio reference.

**Think about:** Why do you need the second parameter for `math.max` and `math.min`?

Add Fast-Forward and Rewind 15 Second Buttons

In this lesson, we will create event listeners for the play and pause events on an audio player element and use these listeners to update the value of a variable called `isPlaying` that tracks the current state of the player (e.g., whether it is currently playing or paused). The event listeners, named `onPlay` and `onPause`, will be triggered when the user presses the play or pause button on the audio player element itself, not on a custom play button that may have been created.

Topics

Instructors

Content Type

Lindsey Kopacz