Media is too big
VIEW IN TELEGRAM
16. End to End Testing with Playwright
Miško explains the value of end-to-end testing and introduces Playwright, which is similar to other testing tools like Cypress. Playwright is installed and an initial test is written for verifying the title of the clustering web page.
#lesson
Miško explains the value of end-to-end testing and introduces Playwright, which is similar to other testing tools like Cypress. Playwright is installed and an initial test is written for verifying the title of the clustering web page.
#lesson
Media is too big
VIEW IN TELEGRAM
17. Creating a Page Object
Miško tests the behavior of the clustering form. Since elements on the page need to be selected and given specific values, a page object is created so the test API is more readable. This allows for some self-documentation to happen inside the test and alleviates confusion.
#lesson
Miško tests the behavior of the clustering form. Since elements on the page need to be selected and given specific values, a page object is created so the test API is more readable. This allows for some self-documentation to happen inside the test and alleviates confusion.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Testing the Form Validation
Miško uses Playwright to test the form validation. The additional selectors are added to the page object. When the submit button is clicked, the tests verify the error has the correct text. The final code can be found on the lesson-7 branch
- https://github.com/mhevery/testing-fundamentals/tree/lesson-7
#lesson
Miško uses Playwright to test the form validation. The additional selectors are added to the page object. When the submit button is clicked, the tests verify the error has the correct text. The final code can be found on the lesson-7 branch
- https://github.com/mhevery/testing-fundamentals/tree/lesson-7
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
19. Testing Q&A
Miško spends a few minutes answering questions about testing. Questions include the difference between Playwright and Storybook and writing tests that are too complex.
#lesson
Miško spends a few minutes answering questions about testing. Questions include the difference between Playwright and Storybook and writing tests that are too complex.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Testing Pyramid & Development Model
Miško compares the different test strategies based on the number of tests they require and the execution time. This comparison is represented in a testing pyramid and illustrates unit tests represent a majority of the tests while end-to-end tests take the longest time to execute
#lesson
Miško compares the different test strategies based on the number of tests they require and the execution time. This comparison is represented in a testing pyramid and illustrates unit tests represent a majority of the tests while end-to-end tests take the longest time to execute
#lesson
Media is too big
VIEW IN TELEGRAM
21. Structuring Code for Testability
Miško emphasizes testing is all about correctly structuring your code. Leveraging patterns similar to dependency injection or a more functional style will simplify the inputs and outputs of a function and make it easy to test.
#lesson
Miško emphasizes testing is all about correctly structuring your code. Leveraging patterns similar to dependency injection or a more functional style will simplify the inputs and outputs of a function and make it easy to test.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Rules to Avoid Untestable Code
Miško walks through several coding issues that create untestable code. Some of these techniques include mixing instantiation and logic, global state usage, and using too many conditionals.
#lesson
Miško walks through several coding issues that create untestable code. Some of these techniques include mixing instantiation and logic, global state usage, and using too many conditionals.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Progression of Testing
Miško shares some advice for tracking down issues in legacy applications. The progression includes scenario tests, which test the application as a whole. From there, functional tests can be written to test subsystems and, eventually, test individual classes in isolation with unit tests.
#lesson
Miško shares some advice for tracking down issues in legacy applications. The progression includes scenario tests, which test the application as a whole. From there, functional tests can be written to test subsystems and, eventually, test individual classes in isolation with unit tests.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Guide to Testable Code
Miško walks through the Guide for Testable Code to share additional pitfalls in code that lead to untestable code.
#lesson
Miško walks through the Guide for Testable Code to share additional pitfalls in code that lead to untestable code.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
25. Wrapping Up
Miško wraps up the course with a few final thoughts about creating a testing mindset within a team and answers some additional questions on testing strategies.
#lesson
Miško wraps up the course with a few final thoughts about creating a testing mindset within a team and answers some additional questions on testing strategies.
#lesson
Title: Enterprise Web App Accessibility (feat. React)
Description: Enhance your team's understanding of testing for accessibility and baking it into your React web apps. Learn about ARIA, focus management, semantic HTML, and testing strategies to create inclusive and user-friendly web interfaces.
Link: https://frontendmasters.com/courses/enterprise-accessibility/
Time: 5 hours, 5 minutes
Lessons: 32 / 32
Tags: #course #frontendmasters #720p
Description: Enhance your team's understanding of testing for accessibility and baking it into your React web apps. Learn about ARIA, focus management, semantic HTML, and testing strategies to create inclusive and user-friendly web interfaces.
Link: https://frontendmasters.com/courses/enterprise-accessibility/
Time: 5 hours, 5 minutes
Lessons: 32 / 32
Tags: #course #frontendmasters #720p
Frontendmasters
Web App Accessibility Tech Leads | Improve UI Inclusivity for React Apps
Enhance your team's understanding of testing for accessibility and baking it into your React web apps. Learn about ARIA, focus management, semantic HTML, and testing strategies to create inclusive and user-friendly web interfaces.
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Marcy Sutton Todd introduces the focus of this course and provides an overview of what material will be covered in the course.
- https://github.com/marcysutton/frontend-masters-enterprise-accessibility
- https://enterprise-accessibility.vercel.app/topics
#lesson
Marcy Sutton Todd introduces the focus of this course and provides an overview of what material will be covered in the course.
- https://github.com/marcysutton/frontend-masters-enterprise-accessibility
- https://enterprise-accessibility.vercel.app/topics
#lesson
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