00:00:12.810
Hello, hi! I am Louisa.
00:00:16.570
Welcome to Accessible JavaScript: Keep Your Hands Off My DOM. As I said, I am the director of the Front-End Engineering Program at the Turing School of Software and Design.
00:00:20.560
We have a seven-month-long developer training program in Denver. I'm on Twitter at @wecb, and my pronouns are she/her.
00:00:28.000
Since I live in Denver, when I travel to non-square states, I like to do a little research about where I'm headed, so I know what to expect. In this case, I found some really interesting literature about the area and additional pieces of literature.
00:00:42.579
The conclusion I came to from my extensive research is that Florida is very bad at break-ins. Yeah, anyway.
00:01:01.390
So back to the talk! At Turing, most of our students are individuals making a career switch into development work. That means we have people from all kinds of backgrounds, of all different ages, who bring a wealth of life experience and exposure.
00:01:14.440
This diversity means we regularly receive great questions about how to better support users. They've interacted with people who have had problems navigating websites and products, and this was one of those questions.
00:01:35.380
At Turing, it frequently happens that a student stands in front of me and asks a question, and I might not know the answer. This question sparked a lot of research and investigation, leading to the creation of this talk.
00:01:54.579
I received this question from a thoughtful and compassionate student and didn't know how to redirect them to the right resources. This is a substantial topic, so let's outline what we're going to cover today.
00:02:12.310
We won't have a ton of time, and there’s a lot of nuance to this talk. We will discuss the challenges faced by our users, how JavaScript can contribute to those challenges, and how to address one of these issues.
00:02:30.099
Unfortunately, JavaScript can create many obstacles for users. Today, we'll focus on one specific instance, providing you with actionable takeaways that you can implement in your projects.
00:02:50.120
First, keep in mind that users have diverse abilities and barriers, meaning not all users can simply point and click with a mouse. While many users can navigate websites straightforwardly, many cannot.
00:03:16.129
When making our sites accessible, we need to consider a wide spectrum of barriers, categorized into five primary groups. Let's quickly run through what those are.
00:03:38.120
The first category includes a range of vision deficiencies affecting those who are low vision or non-sighted, as well as individuals who cannot see the full spectrum of colors. Next, we have hearing-impaired users who have different needs compared to those with full hearing.
00:04:01.099
If your site has audio content, you will need to think specifically about how to accommodate their needs. Then, we have users with limited movement or mobility issues who may access websites using means other than the traditional mouse and keyboard.
00:04:22.880
They might use specialized keyboards or eye trackers, broadening the range of devices used to access your product. Cognitive impairments follow, meaning some users may struggle to process information or content presented in certain ways.
00:04:44.260
For example, individuals with dyslexia might find it challenging to process dense blocks of text. Considering how to present content to accommodate users who process information differently is crucial.
00:05:05.270
Lastly, we have the category of temporary disabilities, which, as the name implies, are generally short-term. This could include situations such as breaking an arm, making it difficult to use a mouse during recovery.
00:05:22.200
We can also categorize challenges related to using outdated technology, such as old computers or browsers. For instance, using Internet Explorer can present temporary accessibility challenges. Other obstacles include poor internet connections or stringent security restrictions that limit script loading.
00:05:39.610
Additionally, something as simple as trying to talk on the phone while driving can become a temporary disability. It’s important to keep in mind that users might face various barriers.
00:05:53.290
The ultimate goal of accessibility is to make products easier to use for everyone, regardless of how they interact with your site or product. We strive to make content available to as many people as possible, as this is the essence of accessibility.
00:06:14.180
With that in mind, let’s discuss one specific way in which a user may be restricted in navigating your site. We'll examine users relying solely on keyboard use versus those who can use a mouse.
00:06:35.740
Quick room poll: How many here use keyboards? Yay! So, you know what I'm talking about. I appreciate it; keyboard use is common for navigating a site.
00:06:57.100
When users rely on keyboards rather than mice, they encounter various navigational challenges. Today, we will focus on the specific issue arising from keyboard navigation.
00:07:18.050
Typically, keyboard navigation through a website involves tabbing through elements linearly, from one interactive element to the next based on the DOM order. This means elements focus based on their arrangement in the HTML.
00:07:40.290
When we tab through a page, users move forward using the Tab key and back using Shift + Tab. The elements available for tabbing are considered focusable, creating a tab order.
00:08:15.330
When focusing on different elements, you might notice a blue focus ring around the selected area. Different browsers may display this ring in various colors, implicating how users visually navigate.
00:08:35.990
It's crucial to use semantic tags in HTML instead of relying solely on divs, as semantic tags offer baked-in utility and behaviors.
00:08:46.400
For example, an input field automatically receives keyboard events if it's designed correctly. This functionality is built-in, allowing users to type or paste input easily.
00:09:08.849
Interactive HTML elements like text fields and buttons are automatically focusable, meaning they will be included in the tab order, simplifying navigation for users.
00:09:25.349
However, issues arise when the tab order does not align appropriately. For instance, if an element is floated or absolutely positioned incorrectly, it can lead to a confusing tab order.
00:09:39.999
When tabbing through a series of buttons, if one's position is altered, users may find themselves jumping unpredictably across the page. This disorientation can impede the user experience.
00:10:04.210
Returning to the topic of JavaScript, we know it can enable dynamic interactions, but this can also complicate accessibility. JavaScript can change the visual order of elements, impacting the tab order without altering the actual structure of the page.
00:10:14.540
This alteration can cause unexpected challenges, especially with UI components like hidden navigation bars and carousels where elements may unexpectedly shift in the tab order.
00:10:34.340
The good news is that by recognizing these problems, we can address them effectively. Today, we will explore one common UI element—modals—and examine how JavaScript can complicate their accessibility.
00:10:52.170
A modal is an overlay that appears on top of the primary window, often obscuring it while keeping the main content visible. Ideally, when a modal appears, focus should shift directly to it, avoiding confusion with other elements.
00:11:09.840
However, problems arise when focus remains on the background elements, causing navigation difficulties. If users open a modal but remain focused on items behind it, this can lead to frustration.
00:11:35.410
To address this concern, we want to ensure that when the modal pops up, all focus remains on that modal, preventing users from tabbing through the elements behind.
00:11:59.229
To facilitate focus control, we can utilize the tabindex attribute. In a perfect world, we would rely on semantic, implicitly focusable elements to create straightforward navigation.
00:12:22.650
However, since we are often faced with edge cases, we can implement tabindex along with JavaScript to better manage focus.
00:12:39.170
Tabindex values can be 0, negative numbers, or positive numbers. A value of 0 includes an element in keyboard navigation sequentially according to its position in the DOM.
00:12:57.250
Negative values allow an element to become focusable without being included in the default tab order, while positive values force focus onto specific elements in a predetermined sequence.
00:13:17.929
However, utilizing the positive values can create unexpected behavior, making them an anti-pattern. Therefore, for our purposes, we'll focus on using tabindex 0.
00:13:36.049
To demonstrate, let’s consider a modal example where we add tabindex 0 to it. This will allow us to manage focus effectively while navigating through the modal elements.
00:14:04.730
In our example, when the modal opens, we want to ensure focus transitions directly to the modal rather than remaining fixed on elements behind it. This improvement substantially enhances the accessibility of the modal.
00:14:20.710
If users can focus directly on the modal when it appears and regain focus on the last element when it closes, the navigation experience becomes seamless and intuitive.
00:14:41.320
However, many times the last focused element remains unfocused after closing the modal. We can tackle this by capturing the last focused element using JavaScript.
00:15:02.620
In our implementation, we will create a variable for the last active element, hold onto it before opening the modal, and apply focus back to that element upon closing the modal.
00:15:28.740
This maneuver allows us to maintain the user's workflow after they finish working in the modal. By ensuring users return to the same element, the navigation experience is optimized.
00:15:54.360
Thus, the key takeaway is that small details can significantly affect user experience regarding accessibility. It's vital to remain attentive to these nuances.
00:16:09.099
While accessibility can be complex and overwhelming, it truly does not take extensive expertise to make a positive impact in your work.
00:16:24.719
Remember that what we discussed today regarding focus control can be applied to many other UI elements as well. By implementing best practices consistently, we can significantly enhance overall accessibility for users.
00:16:43.340
Let’s work together to make the web more accessible for everyone—one step at a time. Finally, if you’re interested in exploring this topic further, I recommend checking out the Ally Casts screencast on YouTube from Google for plenty of great examples.
00:17:05.480
Thank you!