Media is too big
VIEW IN TELEGRAM
19. Managing Focus in Interactive Components
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Semantics & ARIA
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Picking a Framework
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Hybrid Apps
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
23. List Reordering Exercise
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.
- https://enterprise-accessibility.vercel.app/topics/a11y-in-js-apps/exercise-4
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/a11y-in-js-apps/exercise-4
#lesson
Media is too big
VIEW IN TELEGRAM
24. Test Automation Guidelines
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.
- https://enterprise-accessibility.vercel.app/topics/test-automation/how-guidelines-fit
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/test-automation/how-guidelines-fit
#lesson
Media is too big
VIEW IN TELEGRAM
25. Testing Approaches
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Continuous Integration & Accessibility Test API
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Accessibility Testing Exercise
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.
- https://enterprise-accessibility.vercel.app/topics/test-automation/exercise-5
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/test-automation/exercise-5
#lesson
Media is too big
VIEW IN TELEGRAM
28. Creating a Culture of Accessibility
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.
- https://enterprise-accessibility.vercel.app/topics/org-skill-building/tips-for-building-knowledge
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/org-skill-building/tips-for-building-knowledge
#lesson
Media is too big
VIEW IN TELEGRAM
29. Larger Codebases
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Inclusive Hiring & Workplace
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
31. Prioritizing Accessibility & Discussion
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
32. Wrapping Up
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.
#lesson
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.
#lesson
Title: Web App Accessibility (feat. React)
Description: Elevate your React projects by integrating accessibility standards and practices. Gain expertise in WCAG, ARIA, screen readers, semantic HTML, and accessibility testing to create inclusive and compliant web applications.
Link: https://frontendmasters.com/courses/react-accessibility/
Time: 5 hours, 19 minutes
Lessons: 29 / 29
Tags: #course #frontendmasters #720p
Description: Elevate your React projects by integrating accessibility standards and practices. Gain expertise in WCAG, ARIA, screen readers, semantic HTML, and accessibility testing to create inclusive and compliant web applications.
Link: https://frontendmasters.com/courses/react-accessibility/
Time: 5 hours, 19 minutes
Lessons: 29 / 29
Tags: #course #frontendmasters #720p
Frontendmasters
Advance Your Skills in React Web Accessibility | Boost Inclusivity and Compliance
Elevate your React projects by integrating accessibility standards and practices. Gain expertise in WCAG, ARIA, screen readers, semantic HTML, and accessibility testing to create inclusive and compliant web applications.
Media is too big
VIEW IN TELEGRAM
1. Introduction
Marcy Sutton Todd begins the course by sharing how she became interested in accessibility. She discusses areas of accessibility and the cost of having inaccessible content. A core principle of accessibility is ensuring all people, regardless of ability, can interact with the information or services provided by a website.
- https://github.com/marcysutton/frontend-masters-web-accessibility-v3
- https://web-accessibility-v3.vercel.app/topics
#lesson
Marcy Sutton Todd begins the course by sharing how she became interested in accessibility. She discusses areas of accessibility and the cost of having inaccessible content. A core principle of accessibility is ensuring all people, regardless of ability, can interact with the information or services provided by a website.
- https://github.com/marcysutton/frontend-masters-web-accessibility-v3
- https://web-accessibility-v3.vercel.app/topics
#lesson
Media is too big
VIEW IN TELEGRAM
2. Benefits of Accessibility
Marcy describes the benefits of accessible websites like SEO, performance, and business growth. She also spends a few minutes myth-busting some common accessibility misconceptions and discusses privacy issues related to screen readers.
#lesson
Marcy describes the benefits of accessible websites like SEO, performance, and business growth. She also spends a few minutes myth-busting some common accessibility misconceptions and discusses privacy issues related to screen readers.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Accessibility Standards & Definitions
Marcy introduces the Web Content Accessibility Guidelines (WCAG), a standard criteria for measuring accessibility. Accessible Rich Internet Applications (ARIA) is another standard containing roles, states, and properties to apply in your HTML markup to supply accessible information.
#lesson
Marcy introduces the Web Content Accessibility Guidelines (WCAG), a standard criteria for measuring accessibility. Accessible Rich Internet Applications (ARIA) is another standard containing roles, states, and properties to apply in your HTML markup to supply accessible information.
#lesson
