Learn Accessibility (Ch 04, 14, 15)

[AaronForinton]

Learn Accessibility

Ch 04 - Javascript https://deploy-preview-9154--web-dev-staging.netlify.app/learn/accessibility/javascript/
Ch 14 - Patterns, components, and design systems https://deploy-preview-9154--web-dev-staging.netlify.app/learn/accessibility/patterns/
Ch 15 - Design and User Experience https://deploy-preview-9154--web-dev-staging.netlify.app/learn/accessibility/design-ux/

Plus, updates to the main credits on the Learn Accessibility homepage

[netlify]

✅ Deploy Preview for web-dev-staging ready!

Name	Link
🔨 Latest commit	5cf3b1e
🔍 Latest deploy log	https://app.netlify.com/sites/web-dev-staging/deploys/638e76b32cc8df000950ad31
😎 Deploy Preview	https://deploy-preview-9154--web-dev-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[rachelandrew]

@AaronForinton there was a comma inside rather than outside the quotes in an image just after the error. @philipwalton pointed out in chat that the error was off by the number of lines in the YAML frontmatter, which is guess is removed before the build runs.

[AaronForinton]

@AaronForinton there was a comma inside rather than outside the quotes in an image just after the error. @philipwalton pointed out in chat that the error was off by the number of lines in the YAML frontmatter, which is guess is removed before the build runs.

Thank you! Very helpful to know about the frontmatter

These are ready to review now.

[alexandrascript]

@AaronForinton thanks so much for getting this draft up. I'm making some changes, and I want to highlight them for future Learn coursework.

The first is to refer to the Components section of the handbook. There are a few examples, like the "Don't do this" vs. "Do this" which have a specific design to use (the Compare component); Tables have a <div> wrapper; and Codepens which have further special requirements.

Codepens should be forked into a web dev account. I'll make sure to have included that in the google docs in the future, like I did for the images.

# Original codepen
{% Codepen {
user: 'cariefisher',
id: 'wvXejPv'
} %}

# New codepen 
{% Codepen {
 user: 'web-dev-codepen-external',
 id: 'jOKXLyv',
 height: 350,
 theme: 'auto',
 tab: 'html,result'
} %}

[AaronForinton]

Thanks for the fixes @heyawhite. I'd completely missed some of the things on the components page! I've bookmarked + I'll be able to properly implement everything in future.

[alexandrascript]

@AaronForinton I've been here a year and I'm still discovering new ones :)

[alexandrascript]

Suggested change

	correctAnswers: "2"
	correctAnswers: "1"

@AaronForinton some more fun to be aware of. The options count starts with 0. So, because the correct answer is "Use JavaScript to toggle an element’s class, and add the style to your CSS stylesheet", it should be 1