diff --git a/README.md b/README.md index 85a4121..45abca9 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,7 @@ Learn the necessary techniques and tools for building inclusive web applications with JavaScript from Gatsby's Head of Learning Marcy Sutton. -Presenting at: -- [Frontend Masters](https://frontendmasters.com/workshops/javascript-accessibility/) -- [SmashingConf NYC](https://smashingconf.com/ny-2019/) +Presenting at [Frontend Masters](https://frontendmasters.com/workshops/javascript-accessibility/) Some key takeaways: @@ -24,30 +22,29 @@ Workshop slides: https://marcysutton.github.io/js-a11y-workshop/slides/ This project was started with [gatsby-starter-mdx-basic](https://github.com/christopherbiscardi/gatsby-starter-mdx-basic) and [@mdx-deck/theme](https://github.com/jxnblk/mdx-deck/tree/master/packages/gatsby-theme). -1. Install Gatsby CLI (or clone/`npm install` this repo instead) +_Note: This repo requires [Node and npm](https://nodejs.org) to be installed._ -```sh -npm install gatsby-cli -g -``` - -2. Create a new Gatsby site and slide deck using this starter +1. Create a new Gatsby site and slide deck using this starter ```sh -gatsby new js-a11y-workshop https://github.com/marcysutton/js-a11y-workshop +git clone https://github.com/marcysutton/js-a11y-workshop ``` -3. Go into the directory and start the development server +2. Go into the directory, install dependencies, and start the development server ```sh cd js-a11y-workshop -npm start +npm install +npx gatsby develop ``` View in a browser: http://localhost:8000 -4. Edit files: +3. Edit files: - Site pages: `src/pages/*` - Site components: `src/components/*` - Templates: `src/templates/*`, - Slide content: `src/slides/index.jsx` + +To look at the answers from the exercises, check out the `/examples` diff --git a/src/components/better/animation.js b/src/components/better/animation.js index b235d96..a16a389 100644 --- a/src/components/better/animation.js +++ b/src/components/better/animation.js @@ -30,7 +30,7 @@ const Demo = styled.div` } .animationTarget { height: 400px; - margin: 1em auto; + margin: 0 auto; overflow: hidden; position: relative; width: 400px; diff --git a/src/components/site-chrome/code-figure.jsx b/src/components/site-chrome/code-figure.jsx index a8bf62c..8b6533e 100644 --- a/src/components/site-chrome/code-figure.jsx +++ b/src/components/site-chrome/code-figure.jsx @@ -4,7 +4,7 @@ import styled from "@emotion/styled" import theme from "../../theme" const Figure = styled.figure` - font-size: 1.25rem; + font-size: 1.15rem; margin: 0; vertical-align: top; diff --git a/src/components/site-chrome/layout.scss b/src/components/site-chrome/layout.scss index b1abecd..7d97243 100644 --- a/src/components/site-chrome/layout.scss +++ b/src/components/site-chrome/layout.scss @@ -8,7 +8,7 @@ box-sizing: inherit; } html { - font-size: 20px; + font-size: 18px; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 5f87b4f..5343b26 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -3,8 +3,6 @@ import React from "react" import Layout from '../components/site-chrome/layout' import SEO from '../components/site-chrome/seo' -import RouteTargetHeading from "../components/better/route-target-heading.js" - const IndexPage = () => ( diff --git a/src/slides/index.mdx b/src/slides/index.mdx index 13d0f7b..cc71d51 100644 --- a/src/slides/index.mdx +++ b/src/slides/index.mdx @@ -70,9 +70,11 @@ http://bit.ly/microsoft-inclusive-toolkit --- + + # What we’ll cover -
+
- Accessibility debugging - Accessibility in JavaScript apps @@ -87,6 +89,8 @@ http://bit.ly/microsoft-inclusive-toolkit
+ + --- @@ -135,7 +139,7 @@ https://github.com/marcysutton/js-a11y-workshop git clone https://github.com/marcysutton/js-a11y-workshop.git cd js-a11y-workshop npm install -gatsby develop +npx gatsby develop ``` @@ -215,9 +219,9 @@ Alternatively: Codepen, Codesandbox, etc. -# Responsive design is good
for accessibility +# Responsive design
is good for accessibility -zoomed-in view of a desktop prototype +zoomed-in view of a desktop prototype
@@ -350,12 +354,16 @@ Semantic markup and CSS styles impact the accessibility tree ## Paste into browser devTools console + + ```js document.body.addEventListener('focusin', (event) => { console.log(document.activeElement) }) ``` + +
--- @@ -581,7 +589,6 @@ Expose accessibility information for focusable elements. --- - # tabindex + role + name + events @@ -748,7 +755,6 @@ Useful for so many people and situations, but often turned off for everyone --- -
@@ -860,6 +866,8 @@ http://localhost:8000/dropdown +
+ # Client-side routing Navigation where JavaScript controls browser history
and dynamically maps URLs to each page or view @@ -868,16 +876,18 @@ Navigation where JavaScript controls browser history
and dynamically maps U [User testing research on the Gatsby blog](https://www.gatsbyjs.org/blog/2019-07-11-user-testing-accessible-client-routing/) +
+
--- -# Routing recommendations +# Routing approach -- A small interactive UI control in each view target, like a skip link -- Label with nearby content and what action it does,
e.g. "Portfolio, skip to navigation" +- A small UI control in each view target, like a skip link +- Label with nearby content and its action,
e.g. "Portfolio, skip to navigation" - When a user clicks a nav link, move focus to this control ![focus diagram](../focus-diagram.png) @@ -1075,12 +1085,16 @@ Semantic HTML communicates what's on a page to users of assistive technology, re --- + +
# Semantics IRL
![An Event Apart homepage in Chrome DevTools](../aea-grid-inspect.png) +
+ --- @@ -1089,7 +1103,6 @@ Semantic HTML communicates what's on a page to users of assistive technology, re - [Accessibility Insights: Headings](https://accessibilityinsights.io) - [Firefox Web Developer Extension](https://addons.mozilla.org/en-US/firefox/addon/web-developer/):
_Information > View Document Outline_ -- [axe browser extension](http://bit.ly/axe-chrome) - [NVDA heading navigation, elements list](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts#nvda-the_basics) - [Voiceover rotor](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts#vo-mac-the-rotor) - Browser reader modes @@ -1138,13 +1151,11 @@ https://source.opennews.org/articles/motion-sick/ -# Unobtrusive animation demo +# Animation demo - +https://codepen.io/marcysutton/pen/yqVVeY @@ -1238,8 +1249,6 @@ Emphasize core web page content first, then add layers of presentation and featu
  • Prioritize core user flows
  • -

    React suggestions

    -
    @@ -1264,7 +1273,6 @@ gatsby build --- - # Considerations @@ -1277,10 +1285,6 @@ import React, { useEffect, useState } from 'react' const AccessibleList = ({ items = [] }) => { const [isClient, setClient] = useState(false) - /* - * Think of this as componentDidMount - * on the client, it will run once and update state - */ useEffect(() => { setClient(true) }, []) @@ -1359,7 +1363,6 @@ Improving quality in development Testing for quality live in a file or on a commit -["Being a good citizen of the web"](https://github.com/sveltejs/svelte/issues/374)
    [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) - you might need to [reconfigure rules](https://www.gatsbyjs.org/docs/making-your-site-accessible/#linting-with-eslint-jsx-plugin-a11y) @@ -1473,7 +1476,7 @@ Write an accessibility unit test! -# [Selenium Webdriverjs example](https://github.com/marcysutton/axe-webdriverjs-demo) +# [Selenium Webdriver example](https://github.com/marcysutton/axe-webdriverjs-demo) @@ -1648,12 +1651,16 @@ https://twitter.com/zqxwzq/status/868039653697482753 --- + + # Spoiler: we need to do more Automated testing and linting only gets us so far.
    Projects need manual human testing, too 🙇‍♀️ +
    + --- diff --git a/src/theme.js b/src/theme.js index 242a065..5757ed7 100644 --- a/src/theme.js +++ b/src/theme.js @@ -31,16 +31,19 @@ export default { body: { }, Slide: { + maxWidth: '95%', + marginLeft: 'auto', + marginRight: 'auto', textAlign: 'center' }, p: { - fontSize: '2.5rem', + fontSize: '2.25rem', margin: "1rem 0", textAlign: 'center' }, h1: { - fontSize: '5rem', - marginBottom: "0.5rem" + fontSize: '4.5rem', + marginBottom: "0.25rem" }, h2: { fontSize: '4rem', @@ -53,7 +56,7 @@ export default { fontSize: "inherit" }, figcaption: { - fontSize: "1.25rem" + fontSize: "1.2rem" }, li: { marginBottom: "0.5rem", @@ -62,7 +65,7 @@ export default { }, text: { heading: { - margin: '0 auto 1rem', + margin: '0 auto 0.5rem', textAlign: 'center' }, }, diff --git a/static/elmo-shrug.gif b/static/elmo-shrug.gif index 28ff52a..dcf01e0 100644 Binary files a/static/elmo-shrug.gif and b/static/elmo-shrug.gif differ