Marcy Sutton Todd
Principle Studios
Enterprise Web App Accessibility (feat. React)
5 hours, 5 minutes CC
Course Description
Learn to bake accessibility into your development process and culture. Understand UI accessibility, ARIA, focus management, and how to test for accessible web apps. Through hands-on exercises, you'll tackle optimizing components for screen readers and keyboards, utilizing semantic HTML, and understanding JavaScript's impact on accessibility. Foster an accessibility-focused culture within your development teams, equipping you with the knowledge to build inclusive web applications!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: February 27, 2024
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 17 minutes
Marcy Sutton Todd introduces the focus of this course and provides an overview of what material will be covered in the course.
Marcy discusses the importance of accessibility, the benefits of incorporating it into software development, and the potential challenges and misconceptions surrounding accessibility. The instructor also provides practical tips for testing accessibility using screen readers and suggests tools for Windows users.
Prioritizing Accessibility
Section Duration: 40 minutes
Marcy reviews some examples of accessibility in action on various websites. They discuss the importance of considering the user experience for accessibility and highlight both good and bad practices they observe. The lesson emphasizes the need for developers to strengthen their understanding of accessibility and to test websites with keyboard navigation and other assistive technologies.
Marcy discusses how the concept of minimum viable products (MVPs) applies to accessibility in software development. They explain that MVPs involve producing iterations of a product that meet customer needs at each step, rather than trying to create a fully developed product all at once. The speaker emphasizes the importance of incorporating accessibility early in the development process and provides strategies for prioritizing accessibility tasks and convincing stakeholders of their importance.
Marcy leads a discussion about the accessibility requirements for a type-ahead search component modeled after the one on Amazon. The participants discuss various aspects such as keyboard navigation, focus trapping, announcing information to screen readers, marking up images, and considering the backend and API requirements. They also emphasize the importance of early consideration of accessibility and user testing.
Accessible UIs
Section Duration: 1 hour, 8 minutes
Marcy discusses the importance of accessibility in user interfaces and emphasizes the need to learn and apply the basics of accessibility. They mention the use of valid semantic markup with HTML and ARIA, and the importance of visual contrast, font size, intuitive interfaces, and clear interactive elements. The instructor also mentions the use of heading levels, landmark elements, and buttons for keyboard and screen reader accessibility.
Marcy discusses various issues that can arise when reviewing code or evaluating open source libraries or component libraries. They mention specific things to look out for, such as form labels made with spans instead of label elements, custom controls that could be default HTML elements, modals and layers without proper accessibility, and onClick events on divs instead of buttons.
Marcy explains that buttons are used for toggling things, submitting forms, and interacting with the page. The instructor also emphasizes the importance of using buttons and links appropriately, as well as the potential confusion that can arise if they are not used correctly. They provide examples and tips for making buttons accessible and discuss the potential pitfalls of using divs with click events instead of buttons. The lesson also touches on the role of AI in accessibility and the need for developers to take responsibility for creating accessible interfaces.
Marcy discusses various visibility methods in CSS. They cover techniques such as visually hidden or screen reader only classes, display none, visibility hidden, opacity, ARIA hidden, and the hidden attribute. The instructor explains how each method works, their effects on the rendered output, and potential use cases and pitfalls to watch out for. They also demonstrate how to inspect and test these visibility methods using Chrome Dev Tools and a screen reader.
Marcy discusses the steps for testing UI components for accessibility. They cover topics such as using the keyboard to navigate, understanding when to use interactive elements, running browser extensions like axe or Accessibility Insights, checking for color contrast issues, zooming in to test reflow, using screen readers like VoiceOver or NVDA, checking for animations and motion, and ensuring the presence of captions and transcripts for media. The instructor also emphasizes the importance of regularly testing and fixing accessibility issues.
Marcy introduces a component called "portal switcher" and explains that it has accessibility issues. The instructor demonstrates how to inspect the component using DevTools and identifies the accessibility issues, such as missing alt text and improper use of HTML elements. The instructor then proceeds to fix the issues by adding appropriate attributes and event handlers to make the component more accessible. The lesson also mentions the use of TypeScript and the benefits of using it for accessibility.
Naming & Screen Reader Concerns
Section Duration: 49 minutes
Marcy introduces the concept of accessible name computation in ARIA (Accessible Rich Internet Applications). They explain that accessible names apply to form controls, links, buttons, section elements, tables, figures, form field sets, and legends. The instructor also discusses the order in which different attributes are considered in determining the accessible name of an element, and emphasizes the importance of using visible text whenever possible. They also touch on accessible descriptions and how they differ from accessible names.
Marcy explains the concept of the accessibility tree and its relationship to the DOM. They discuss how the accessibility tree is a tree representation of objects on a page that are relevant to accessibility, such as semantic elements. The instructor also mentions that the accessibility tree is used by screen readers to announce information and can be visualized and tested using tools like Chrome DevTools.
Marcy discusses the importance of testing ARIA (Accessible Rich Internet Applications) solutions and provides tips on how to prioritize and test different ARIA attributes. They suggest gathering site analytics to determine which browsers and screen readers to focus on, using resources like accessibilitysupport.io to check the support of specific ARIA attributes, and exploring issue trackers and community forums for additional information and solutions.
Marcy discusses the importance of not trying to craft the perfect label in a screen reader. They caution against spending too much time and effort on trying to make the screen reader announce certain information in a specific way, as it is often configurable by the user. The lesson also provides tips and commands for using various screen readers, such as VoiceOver and NVDA.
Marcy discusses the significance of screen reader modes and the importance of testing on different platforms. They demonstrate how to navigate a web page using screen readers and explain the different interaction modes in Windows screen readers. The instructor also mentions the use of the application role and provides cautionary advice on its usage.
Marcy discusses a slideshow component and demonstrates how to make it more accessible for screen reader users. They explain the use of ARIA roles and attributes, such as aria-live and aria-label, to provide meaningful information and improve the user experience. The instructor also addresses questions from the audience regarding loading states and testing with screen readers.
Accessibility in JS Apps
Section Duration: 55 minutes
Marcy discusses accessibility in JavaScript applications, specifically focusing on client-side rendering and routing. They explain the implications of client-side rendering for keyboard and screen reader users and discuss techniques for handling page changes and maintaining accessibility. The instructor also shares their own research on client-side routing and provides recommendations for improving the accessibility of JavaScript-heavy apps.
Marcy discusses managing focus in interactive components, particularly in client-rendered applications. They mention the importance of keyboard support and suggest trying to use the keyboard instead of the mouse for a day each week to identify accessibility issues. The lesson also covers common patterns for focus management, such as modals, view changes, focus scopes, and focus trapping. The instructor also introduces the concept of FocusVisible, a pseudo class that helps differentiate between keyboard and mouse focus.
Marcy discusses the importance of using semantic HTML in JavaScript heavy applications. They emphasize the need to choose the right HTML elements for the job and provide examples of elements like select and button that have built-in functionality. The instructor also mentions the importance of understanding ARIA and provides guidelines for using it effectively. They also touch on what to look for in a framework in terms of accessibility support and testing tools.
Marcy discusses important considerations when choosing a library or framework for a project. They emphasize the importance of considering the lifespan of the project, the roadmap and funding model of the library, and the state of the library's issue tracker and code base. They also mention the possibility of partnerships and the availability of accessibility APIs within the library.
Marcy discusses hybrid mobile apps and the considerations that web developers need to keep in mind when creating them. They mention using web technologies to create apps for native mobile, such as React Native or Ionic, and the importance of testing both the web views and the integrated app. The lesson also touches on WCAG guidelines for native mobile and suggests using various testing tools for accessibility.
Marcy demonstrates how to implement keyboard accessibility for a list reordering exercise. They show how to add keyboard event handlers to allow users to reorder items in the list using the arrow keys. They also discuss the importance of accessibility on mobile devices and provide tips for making touch targets larger and more accessible.
Test Automation
Section Duration: 41 minutes
Marcy discusses the importance of automation in testing for accessibility in software development. They explain that while automation can help with certain aspects of testing, there are still limitations and the need for manual testing. The instructor also provides examples of what can be automated and what still requires manual testing in terms of accessibility. They emphasize the importance of creating your own test coverage and ensuring that automated tests align with real browser behavior.
Marcy discusses different approaches to testing and various testing tools that can be used. They emphasize the importance of finding the right tools for the job and using whatever helps make testing easier and more efficient. The instructor also mentions specific tools like eslint, axe-linter, Jest, testing library, Cypress, Storybook, and Playwright, and provides insights on how to configure these tools for accessibility testing. They also mention the integration testing and end-to-end testing, and highlight the benefits of using snapshot tests for accessibility and visual testing.
Marcy discusses continuous integration (CI) and its importance in software development. They explain that CI involves merging code into a central repository and running automated tests to ensure that the code doesn't break anything. The instructor also mentions different tools and platforms that can be used for CI, and they touch on the topic of flaky tests and how to handle them. Additionally, they introduce the concept of using accessibility testing APIs like axe-core to automate accessibility testing in CI environments.
Marcy discusses writing tests for a component in an insurance portal. They explain the importance of writing tests when fixing bugs and how it helps prevent future issues. The instructor demonstrates writing tests using Jest and Testing Library, focusing on keyboard support and link navigation. They also mention the limitations of Jest and suggest using other testing tools like Cypress for certain scenarios.
Organizational Skill-Building
Section Duration: 24 minutes
Marcy discusses the importance of considering factors beyond code and assertions in software testing. They emphasize the need to work together as a team and provide clear instructions for reproducing issues or testing steps. The lesson also highlights the importance of building institutional knowledge and creating a culture of accessibility within an organization. The speaker provides tips for promoting accessibility awareness and involving everyone in the process.
Marcy discusses how to navigate and contribute to large code bases, particularly in an enterprise or larger engineering team context. They provide practical tips such as using core components, observing conventions, suggesting accessible improvements, testing accessibility, and gathering information from code authors. The lesson emphasizes the importance of consistency, documentation, and communication when working with large code bases.
Marcy discusses the importance of inclusive hiring in workplaces and the need to involve people with disabilities in the development process. They highlight the barriers that people with disabilities face in accessing job opportunities and emphasize the importance of true inclusion and civil rights. The instructor also encourages learners to listen to the experiences and frustrations of people with disabilities, particularly on disability Twitter, to gain insights and improve accessibility.
Marcy discusses the importance of making accessibility a requirement and part of the regular workflow. They emphasize the need to include accessibility in tickets, stories, and issues, and to ensure that team members in various roles are on board. The instructor also suggests ways to make accessibility a reality, such as building it into automated tests, performance reviews, and interviews.
Wrapping Up
Section Duration: 8 minutes
Marcy wraps up the topic of accessibility by discussing its importance in organizations. They pose questions for the learners to consider, such as who needs to be convinced to prioritize accessibility and how to scope and prioritize feedback to increase the chances of getting approval. The instructor also shares examples and experiences related to accessibility challenges and successes. The lesson concludes with the instructor expressing gratitude to the learners for their participation and encouraging them to continue making a difference in accessibility.
Highlighted in Marcy Sutton Todd workshop on Frontend Masters, "accessibility debt" in frontend software engineering is a concept akin to technical debt. It represents the added cost and complexity that accrue when accessibility is not integrated from the beginning of a project. This concept underscores the challenges and expenses that arise when accessibility is treated as an afterthought, rather than a foundational aspect of software development.
The key to managing accessibility debt is integrating accessibility (a11y) principles from the ground up. By addressing accessibility debt proactively, we not only create more inclusive products but also ensure a smoother, more sustainable development process.
Zubin K.
Software Engineer
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops