Media is too big
VIEW IN TELEGRAM
9. Visibility Methods
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
10. How to Test UI Components for Accessibility
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Fixing a Link Dropbox Component Exercise
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-uis/exercise-2
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-uis/exercise-2
#lesson
Media is too big
VIEW IN TELEGRAM
12. ARIA Name Computation
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-naming-screen-readers/ARIA-accessible-name-computation
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-naming-screen-readers/ARIA-accessible-name-computation
#lesson
Media is too big
VIEW IN TELEGRAM
13. Accessibility Tree
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Testing an ARIA Solution
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Visual and Non-visual Experiences
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Screen Reader Commands & Interaction Modes
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Optimizing Slideshow Component Exercise
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-naming-screen-readers/exercise-3
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-naming-screen-readers/exercise-3
#lesson
Media is too big
VIEW IN TELEGRAM
18. Accessibility in JS Apps
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.
- https://enterprise-accessibility.vercel.app/topics/a11y-in-js-apps/client-side-routing
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/a11y-in-js-apps/client-side-routing
#lesson
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