Media is too big
VIEW IN TELEGRAM
4. Screen Readers
Marcy describes how screen readers work and talks through the APIs platforms provide for screen reader integration. The steps for enabling the built-in screen readers for MacOS, iOS, Windows, and Android are also shared in this lesson.
#lesson
Marcy describes how screen readers work and talks through the APIs platforms provide for screen reader integration. The steps for enabling the built-in screen readers for MacOS, iOS, Windows, and Android are also shared in this lesson.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Alternative Text
Marcy explains the importance of alternative text (alt text), which describes the appearance or function of an image on a page. Alt text is also displayed on the page if the image fails to load. If an image is decorative or doesn't add important context to the page, an empty alt attribute can be included to tell screen readers to ignore the image.
#lesson
Marcy explains the importance of alternative text (alt text), which describes the appearance or function of an image on a page. Alt text is also displayed on the page if the image fails to load. If an image is decorative or doesn't add important context to the page, an empty alt attribute can be included to tell screen readers to ignore the image.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Assistive Technologies
Marcy introduces additional assistive technologies like Braille displays, speech recognition, voice control, switch devices, screen magnification, and transcripts. Understanding how individuals experience a website helps engineers build more accessible content.
#lesson
Marcy introduces additional assistive technologies like Braille displays, speech recognition, voice control, switch devices, screen magnification, and transcripts. Understanding how individuals experience a website helps engineers build more accessible content.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Screen Reader Exercise
Student are instructed to navigate through a web page using a screen reader.
- https://web-accessibility-v3.vercel.app/topics/screen-readers/exercise-1
#lesson
Student are instructed to navigate through a web page using a screen reader.
- https://web-accessibility-v3.vercel.app/topics/screen-readers/exercise-1
#lesson
Media is too big
VIEW IN TELEGRAM
8. Screen Readers Q&A
Marcy answers questions related to screen readers. Questions include the difference between low vision and visual impairment, how often a screen reader should be tested, and if there are accessibility testing tools similar to browser stack.
#lesson
Marcy answers questions related to screen readers. Questions include the difference between low vision and visual impairment, how often a screen reader should be tested, and if there are accessibility testing tools similar to browser stack.
#lesson
Media is too big
VIEW IN TELEGRAM
9. Testing Overview, Linters & Dev Tools
Marcy outlines some basic steps for testing accessibility. For example, can the Tab key navigate through a page and reach every navigation item? Also, ensuring layouts flow well when content is zoomed or using DevTools extensions like Axe can be easy ways to get started.
- https://web-accessibility-v3.vercel.app/topics/accessibility-debugging/linters-and-devtools
#lesson
Marcy outlines some basic steps for testing accessibility. For example, can the Tab key navigate through a page and reach every navigation item? Also, ensuring layouts flow well when content is zoomed or using DevTools extensions like Axe can be easy ways to get started.
- https://web-accessibility-v3.vercel.app/topics/accessibility-debugging/linters-and-devtools
#lesson
Media is too big
VIEW IN TELEGRAM
10. Accessibility Dev Tools Walkthrough
Marcy demonstrates how to use a few accessibility testing tools. The Axe extension will scan a page for issues and has several premium features for more testing capabilities. Lighthouse, which is built into the Chrome browser, also uses Axe APIs for running accessibility tests.
#lesson
Marcy demonstrates how to use a few accessibility testing tools. The Axe extension will scan a page for issues and has several premium features for more testing capabilities. Lighthouse, which is built into the Chrome browser, also uses Axe APIs for running accessibility tests.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Working with Teams
Marcy shares advice for handling accessibility testing when working on a team. Using consistent tooling and processes across an organization will make conducting accessibility tests and reproducing issues easier.
#lesson
Marcy shares advice for handling accessibility testing when working on a team. Using consistent tooling and processes across an organization will make conducting accessibility tests and reproducing issues easier.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Debugging Exercise
Students are instructed to test websites for accessibility issues using keyboard navigation, browser DevTools extensions, zoom/reflow behavior, and visual characteristics like motion or color contrast.
- https://web-accessibility-v3.vercel.app/topics/accessibility-debugging/exercise-2
#lesson
Students are instructed to test websites for accessibility issues using keyboard navigation, browser DevTools extensions, zoom/reflow behavior, and visual characteristics like motion or color contrast.
- https://web-accessibility-v3.vercel.app/topics/accessibility-debugging/exercise-2
#lesson
Media is too big
VIEW IN TELEGRAM
13. Accessible & Semantic HTML
Marcy discusses the importance of using accessible and semantic HTML code. Leveraging these elements and avoiding generic elements like DIVs will lead to cleaner code and make the page more accessible.
#lesson
Marcy discusses the importance of using accessible and semantic HTML code. Leveraging these elements and avoiding generic elements like DIVs will lead to cleaner code and make the page more accessible.
#lesson
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