You just hit a route that doesn't exist... the sadness.
18 |
19 | )
20 |
21 | export default NotFoundPage
22 |
--------------------------------------------------------------------------------
/src/pages/animation.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Layout from '../components/site-chrome/layout'
4 | import SEO from '../components/site-chrome/seo'
5 |
6 | import RouteTargetHeading from "../components/better/route-target-heading.js"
7 |
8 | import InaccessibleCardFlip from "../components/bad/card-flip"
9 | import BetterCardFlip from "../components/better/card-flip"
10 | import AnimationDemo from "../components/better/animation"
11 |
12 | import rainierImg from "../images/rainier-headshot.jpg"
13 | import bagleyImg from "../images/bagley.jpg"
14 |
15 | const friends = [{
16 | name: 'Rainier McCheddarton',
17 | headshot: rainierImg,
18 | subtitle: 'Labradoodle, squeaker, cheese fan',
19 | bio: 'Doggo ipsum very hand that feed shibe heckin good boys and girls fat boi much ruin diet you are doing me the shock wrinkler length boy, I am bekom fat lotsa pats dat tungg tho shooberino.',
20 | twitterLink: 'http://twitter.com'
21 | },
22 | {
23 | name: 'Bagley Fluffpants',
24 | headshot: bagleyImg,
25 | subtitle: 'Cheshire cat, supreme loaf',
26 | bio: "The door is opening! how exciting oh, it's you, meh drink water out of the faucet. Spend six hours per day washing, but still have a crusty butthole, so lies down or sit on human they not getting up ever, but lick human with sandpaper tongue.",
27 | twitterLink: 'http://twitter.com'
28 | }]
29 |
30 | const ReducedMotionDemoPage = () => (
31 |
32 |
33 |
Tuck controls into an expandible, collapsible, accessible menu. Consider, however, whether you really need a dropdown.
19 |
Keyboard interactions will depend on what's in the menu. List of links? The TAB key is fine. UI actions with a button or radio buttons? Script the arrow keys.
CSS layouts are modern now. You can use CSS Grid and HTML5! Inspect these semantic layouts in DevTools and screen readers. Play with the rotor/elements list, heading navigation,
Doggo ipsum stop it fren borking doggo shoober floofs, very jealous pupper thicc. Pats smol borking doggo with a long snoot for pats blop pupper, borking doggo wrinkler. Lotsa pats big ol pupper h*ck heckin angery woofer pupper, blop heckin mlem.
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
HTML5 and CSS Grid Layout
38 |
44 |
45 |
46 |
Maximum borkdrive
47 |
Very hand that feed shibe puggorino very taste wow. Maximum borkdrive much ruin diet very hand that feed shibe very taste wow long water shoob doge doggo heckin, shoober ruff shoob wrinkler bork much ruin diet. he made many woofs woofer. Wow such tempt mlem very hand that feed shibe porgo, wrinkler shoob. Vvv puggo doggorino very good spot such treat length boy puggo, woofer heckin angery woofer wow very biscit pupperino very taste wow.
144 |
145 | - Built with Gatsby and React
146 | - Server and client-rendered
147 | - Outputs HTML pages by default
148 | - Includes these MDX-Deck slides
149 |
150 |
650 |
651 |
652 |
653 | ---
654 |
655 |
656 |
657 | # Focus management
658 |
659 | _Moving the user’s focus as part of an interaction to alert them to new content_
660 |
661 | _Also: handling focus in disabled and mutated parts of the page_
662 |
663 |
664 |
665 | ---
666 |
667 |
668 |
669 | # Focus management building blocks
670 |
671 | - Reachable and operable elements
672 | - TAB, escape, and arrow keys
673 | - Visible focus styles
674 | - Hidden/inert content
675 |
676 |
677 |
678 | ---
679 |
680 |
681 |
682 | # tabindex in HTML
683 |
684 | Make non-interactive elements focusable
685 |
686 |
687 | Demo DIV
688 |
689 |
690 |
691 |
692 | ```javascript
693 | tabIndex="0" // in the tab order. see following slides
694 | tabIndex="-1" // focusable by script, or removes from tab order
695 | tabIndex="99641" // all up in your tab order. hard to manage
696 | ```
697 |
698 |
699 |
700 |
701 | 💡Screen readers go beyond the TAB key
702 |
703 |
704 |
705 |
706 | ---
707 |
708 |
709 |
710 | # tabindex + role + name
711 |
712 | Expose accessibility information for focusable elements.
713 |
714 |
715 |
716 | Demo DIV
717 |
718 |
719 |
720 |
721 |
722 | ```html
723 |
726 |
727 | ```
728 |
729 |
730 |
731 |
732 |
733 | ```js
734 |
735 | // focusable
736 | // a button widget, not a DIV
737 | // an accessible name
738 |
739 | ```
740 |
741 |
742 |
743 |
744 |
745 | 💡Intended for custom interactive elements, not wrapper DIVs
746 |
747 |
1159 |
1160 | # Client-side routing
1161 |
1162 | Navigation where JavaScript controls browser history and dynamically maps URLs to each page or view
1163 |
1164 | 
1165 |
1166 | [User testing research on the Gatsby blog](https://www.gatsbyjs.org/blog/2019-07-11-user-testing-accessible-client-routing/)
1167 |
1168 |
1169 |
1170 |
1171 |
1172 | ---
1173 |
1174 |
1175 |
1176 | # Gatsby + @reach/router
1177 |
1178 | - Automatic client-routing
1179 | - Focus management
1180 | - [Recent improvements in Gatsby core](https://github.com/gatsbyjs/gatsby/pull/19290)
1181 |
1182 |
1183 |
1184 | ---
1185 |
1186 |
1187 |
1188 | # A11y routing research
1189 |
1190 | - A small UI control in each view target, like a skip link
1191 | - Label with its action, e.g. "skip to navigation"
1192 | - When a user clicks a nav link, move focus to this control
1193 | - Use a Live Region to announce page change*
1194 |
1195 | 
1196 |
1197 |
1198 |
1199 | ---
1200 |
1201 |
1202 |
1203 | # Responsive design is good for accessibility
1204 |
1205 |
1206 |
1207 |
1208 |
1209 | ---
1210 |
1211 |
1212 |
1213 | # Client-side routing demo
1214 |
1215 | http://localhost:8000
1216 |
1217 |
1218 |
1219 | ---
1220 |
1221 |
1222 |
1223 | # Exercise
1224 | ## Focus on client-side route change
1225 |
1226 | - Use Gatsby's [`onRouteUpdate` method](https://www.gatsbyjs.org/docs/browser-apis/#onRouteUpdate)
1227 | - Send focus to skip link
1228 | - Announce page in ARIA Live Region
1229 |
1230 |
1231 |
1232 | ---
1233 |
1234 |
1235 |
1236 | # Exercise answer
1237 | ## Client-side routing
1238 |
1239 | - Gatsby component: [examples/client-side-routing](https://github.com/marcysutton/gatsby-a11y-workshop/tree/master/examples/client-side-routing)
1240 |
1241 |
1242 |
1243 | ---
1244 |
1245 |
1246 |
1247 | # Semantic HTML ✨
1248 |
1249 | - Use headings & landmarks
1250 | - Start with native UI controls
1251 | - Build semantics into templates
1252 | - Verify assistive tech output
1253 |
1254 | [WebAIM: Semantic Structure](https://webaim.org/techniques/semanticstructure/)
1255 |
1256 |
1257 |
1258 | ---
1259 |
1260 |
1261 |
1262 | # Why semantics are important
1263 |
1264 | > _Headings save time, and programattic information is useful_
1265 |
1266 |
1267 | Semantic HTML communicates what's on a page to users of assistive technology, reader modes, conversational UIs, search engines, and more
1268 |