Media is too big
VIEW IN TELEGRAM
2. Tips and Tools
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Accessibility in the Wild
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.
- https://enterprise-accessibility.vercel.app/topics/introduction/examples
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/introduction/examples
#lesson
Media is too big
VIEW IN TELEGRAM
4. Prioritizing Accessibility in Software Dev
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Accessibility Project Requirements Exercise
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.
- https://enterprise-accessibility.vercel.app/topics/mvps/exercise-1
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/mvps/exercise-1
#lesson
Media is too big
VIEW IN TELEGRAM
6. Accessibility Foundations Review
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-uis/introduction
#lesson
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.
- https://enterprise-accessibility.vercel.app/topics/accessible-uis/introduction
#lesson
Media is too big
VIEW IN TELEGRAM
7. Common Accessibility Issues
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.
#lesson
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.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Buttons, Links, & Div Accessibility
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.
#lesson
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.
#lesson
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