Media is too big
VIEW IN TELEGRAM
14. Landmark Elements, Forms, & Buttons
Marcy continues discussing the accessibility benefits of HTML's semantic elements. Landmark elements create a structure for the page. Lists, Forms, & Buttons have built-in accessibility features as long as the correct attributes are provided.
#lesson
Marcy continues discussing the accessibility benefits of HTML's semantic elements. Landmark elements create a structure for the page. Lists, Forms, & Buttons have built-in accessibility features as long as the correct attributes are provided.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Setting Language and Fixing Markup
Marcy demonstrates the importance of adding the "lang" attribute to the html element to specify the default language screen readers should use. If words or phrases from another language appear in the markup, individual elements can have a separate "lang" attribute applied to instruct a screen reader on the correct pronunciations.
#lesson
Marcy demonstrates the importance of adding the "lang" attribute to the html element to specify the default language screen readers should use. If words or phrases from another language appear in the markup, individual elements can have a separate "lang" attribute applied to instruct a screen reader on the correct pronunciations.
#lesson
Media is too big
VIEW IN TELEGRAM
16. Accessible HTML Exercise
Students are instructed to fix accessibility issues in the HTML of a product page.
- https://web-accessibility-v3.vercel.app/topics/accessible-HTML/exercise-3
- https://github.com/marcysutton/frontend-masters-web-accessibility-v3
#lesson
Students are instructed to fix accessibility issues in the HTML of a product page.
- https://web-accessibility-v3.vercel.app/topics/accessible-HTML/exercise-3
- https://github.com/marcysutton/frontend-masters-web-accessibility-v3
#lesson
Media is too big
VIEW IN TELEGRAM
17. Accessible HTML Solution: Product Details
Marcy begins addressing some accessibility issues from the Accessible HTML exercise. The ProductDetails component is examined. Headings are added, and "sr-only" classes are applied to hide elements not needed for visual display.
#lesson
Marcy begins addressing some accessibility issues from the Accessible HTML exercise. The ProductDetails component is examined. Headings are added, and "sr-only" classes are applied to hide elements not needed for visual display.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Accessible HTML Solution: Header & Gallery
Marcy continues the solution for the Accessible HTML exercise. The ProductHeader and ProductImageGallery components are addressed.
#lesson
Marcy continues the solution for the Accessible HTML exercise. The ProductHeader and ProductImageGallery components are addressed.
#lesson
Media is too big
VIEW IN TELEGRAM
19. ARIA
Marcy dives deeper into the Accessible Rich Internet Application (ARIA) specification. While ARIA can help assistive technology better recognize elements on a page, it can also be misused or overused. Built-in, semantic-based accessibility information on elements is typically favored over ARIA added after the fact.
#lesson
Marcy dives deeper into the Accessible Rich Internet Application (ARIA) specification. While ARIA can help assistive technology better recognize elements on a page, it can also be misused or overused. Built-in, semantic-based accessibility information on elements is typically favored over ARIA added after the fact.
#lesson
Media is too big
VIEW IN TELEGRAM
20. Roles, States and Properties
Marcy explains that roles, states, and properties are the building blocks of ARIA. Accessible names and descriptions are also critical for giving clear instructions to users. Some elements have implicit names and descriptions. Other elements will rely on aria-labeledby and aria-describedby to indicate where the name and description are provided.
#lesson
Marcy explains that roles, states, and properties are the building blocks of ARIA. Accessible names and descriptions are also critical for giving clear instructions to users. Some elements have implicit names and descriptions. Other elements will rely on aria-labeledby and aria-describedby to indicate where the name and description are provided.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Live Regions
Marcy introduces Live Regions and explains that they make users aware of things happening without moving their focus. For example, auto-save in a form, banner alerts, and chat widgets. There are two levels of live regions: assertive and polite. Assertive will interrupt other announcements in a time-sensitive way, while polite will wait until other announcements in the queue have been completed.
#lesson
Marcy introduces Live Regions and explains that they make users aware of things happening without moving their focus. For example, auto-save in a form, banner alerts, and chat widgets. There are two levels of live regions: assertive and polite. Assertive will interrupt other announcements in a time-sensitive way, while polite will wait until other announcements in the queue have been completed.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Live Regions Exercise
Students are instructed to use Live Regions to implement accessibility features that announce updates to the shopping cart without moving the user’s keyboard focus.
- https://web-accessibility-v3.vercel.app/topics/ARIA/exercise-4
#lesson
Students are instructed to use Live Regions to implement accessibility features that announce updates to the shopping cart without moving the user’s keyboard focus.
- https://web-accessibility-v3.vercel.app/topics/ARIA/exercise-4
#lesson
Media is too big
VIEW IN TELEGRAM
23. Keyboard Navigation & Skip Links
Marcy shares some tips for leveraging keyboard navigation and skip links for jumping users past content they want to miss. She also inspects a few high-traffic websites to demonstrate how they use navigation and skip links, including Target.com and GitHub.com.
#lesson
Marcy shares some tips for leveraging keyboard navigation and skip links for jumping users past content they want to miss. She also inspects a few high-traffic websites to demonstrate how they use navigation and skip links, including Target.com and GitHub.com.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Tab Key Navigation & Active Element
Marcy explains some best practices for tab-based navigation and talks through tab key versus arrow key approaches. The Active Element API is also introduced. It provides easy access to the currently focused element.
#lesson
Marcy explains some best practices for tab-based navigation and talks through tab key versus arrow key approaches. The Active Element API is also introduced. It provides easy access to the currently focused element.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Focus Trapping & Keyboard Shortcuts
Marcy demonstrates how focus trapping will keep the focus within a component, rotating between specific elements in scope instead of all elements on a page. Keyboard shortcuts are also a helpful accessibility strategy, and a few approaches are discussed.
#lesson
Marcy demonstrates how focus trapping will keep the focus within a component, rotating between specific elements in scope instead of all elements on a page. Keyboard shortcuts are also a helpful accessibility strategy, and a few approaches are discussed.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Focus Management Exercise
Students are instructed to add focus management to a modal. Focus should be sent into the modal when it is opened. Focus should be restored to the application after the modal is closed.
- https://web-accessibility-v3.vercel.app/topics/focus-management/exercise-5
#lesson
Students are instructed to add focus management to a modal. Focus should be sent into the modal when it is opened. Focus should be restored to the application after the modal is closed.
- https://web-accessibility-v3.vercel.app/topics/focus-management/exercise-5
#lesson
Media is too big
VIEW IN TELEGRAM
27. Visual Considerations
Marcy discusses topics related to visual accessibility. Examples of color contrast, reflow/zoom, reducing motion, and color schemes are shared. Performance metrics are also important, including how many keystrokes it takes to perform an action on the page.
#lesson
Marcy discusses topics related to visual accessibility. Examples of color contrast, reflow/zoom, reducing motion, and color schemes are shared. Performance metrics are also important, including how many keystrokes it takes to perform an action on the page.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Reduced Motion Exercise
Students are instructed to improve the accessibility of the header by using the prefers reduced motion API.
- https://web-accessibility-v3.vercel.app/topics/visual-considerations/exercise-6
#lesson
Students are instructed to improve the accessibility of the header by using the prefers reduced motion API.
- https://web-accessibility-v3.vercel.app/topics/visual-considerations/exercise-6
#lesson
Media is too big
VIEW IN TELEGRAM
29. Wrapping Up
Marcy wraps up the course with additional resources for improving the accessibility of your web applications.
- https://web-accessibility-v3.vercel.app/topics/wrap-up
#lesson
Marcy wraps up the course with additional resources for improving the accessibility of your web applications.
- https://web-accessibility-v3.vercel.app/topics/wrap-up
#lesson
Title: Test Your JavaScript Knowledge
Description: Gain clarity on JavaScript's inner workings, including the event loop and asynchronous programming, scope, closures, and classes with interactive questions designed to enhance your understanding of JavaScript!
Link: https://frontendmasters.com/courses/javascript-quiz/
Time: 2 hours, 11 minutes
Lessons: 11 / 11
Tags: #course #frontendmasters #720p
Description: Gain clarity on JavaScript's inner workings, including the event loop and asynchronous programming, scope, closures, and classes with interactive questions designed to enhance your understanding of JavaScript!
Link: https://frontendmasters.com/courses/javascript-quiz/
Time: 2 hours, 11 minutes
Lessons: 11 / 11
Tags: #course #frontendmasters #720p
Frontendmasters
Test Your JavaScript Mastery: Event Loop/Async, Closures, and More
Gain clarity on JavaScript's inner workings, including the event loop and asynchronous programming, scope, closures, and classes with interactive questions designed to enhance your understanding of JavaScript!
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Lydia Hallie introduces a Q&A style workshop where they present 50 questions on various topics in JavaScript, including event loop, closures, classes, prototypes, and miscellaneous content like numbers and weak maps. Students will be given time to answer each question, and Lydia provides detailed explanations for each answer. The course aims to enhance participants' understanding of JavaScript concepts.
#lesson
Lydia Hallie introduces a Q&A style workshop where they present 50 questions on various topics in JavaScript, including event loop, closures, classes, prototypes, and miscellaneous content like numbers and weak maps. Students will be given time to answer each question, and Lydia provides detailed explanations for each answer. The course aims to enhance participants' understanding of JavaScript concepts.
#lesson
❤1
Media is too big
VIEW IN TELEGRAM
2. Event Loop & Task Queue
Lydia explains the concept of the event loop in JavaScript. They discuss the different components of the event loop, such as the call stack, task queue, and microtask queue. They also provide examples and explanations of how different tasks and callbacks are scheduled and executed in the event loop.
#lesson
Lydia explains the concept of the event loop in JavaScript. They discuss the different components of the event loop, such as the call stack, task queue, and microtask queue. They also provide examples and explanations of how different tasks and callbacks are scheduled and executed in the event loop.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Scope & Closure
Lydia explains the concept of scope and closures in JavaScript. They discuss how closures work by referencing lexical environments and demonstrate examples of closures in code. The instructor also covers topics such as hoisting, variable declaration, and block scope.
#lesson
Lydia explains the concept of scope and closures in JavaScript. They discuss how closures work by referencing lexical environments and demonstrate examples of closures in code. The instructor also covers topics such as hoisting, variable declaration, and block scope.
#lesson