Media is too big
VIEW IN TELEGRAM
2. Benefits of Accessibility
Marcy describes the benefits of accessible websites like SEO, performance, and business growth. She also spends a few minutes myth-busting some common accessibility misconceptions and discusses privacy issues related to screen readers.
#lesson
Marcy describes the benefits of accessible websites like SEO, performance, and business growth. She also spends a few minutes myth-busting some common accessibility misconceptions and discusses privacy issues related to screen readers.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Accessibility Standards & Definitions
Marcy introduces the Web Content Accessibility Guidelines (WCAG), a standard criteria for measuring accessibility. Accessible Rich Internet Applications (ARIA) is another standard containing roles, states, and properties to apply in your HTML markup to supply accessible information.
#lesson
Marcy introduces the Web Content Accessibility Guidelines (WCAG), a standard criteria for measuring accessibility. Accessible Rich Internet Applications (ARIA) is another standard containing roles, states, and properties to apply in your HTML markup to supply accessible information.
#lesson
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