diff --git a/gatsby-config.js b/gatsby-config.js index 1fd1429..580283b 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -54,7 +54,7 @@ module.exports = { background_color: `#663399`, theme_color: `#663399`, display: `minimal-ui`, - icon: `src/images/blueicon.png`, // This path is relative to the root of the site. + icon: `src/images/blueicon.jpg`, // This path is relative to the root of the site. }, }, // this (optional) plugin enables Progressive Web App + Offline functionality diff --git a/src/components/layout.js b/src/components/layout.js index d66e46e..f8103b8 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import { useStaticQuery } from 'gatsby' +import { useStaticQuery, graphql } from 'gatsby' // Grommet import { Grommet, Grid, Box, ResponsiveContext } from 'grommet' @@ -9,16 +9,6 @@ import Header from './header' import Navigation from './navigation' import './layout.scss' -// const Theme = { -// global: { -// breakpoints: { -// small: { -// value: '640px', -// } -// }, -// }, -// }; - const Layout = ({ children }) => { const data = useStaticQuery(graphql` query SiteTitleQuery { diff --git a/src/components/layout.scss b/src/components/layout.scss index fbbf352..65d31c8 100644 --- a/src/components/layout.scss +++ b/src/components/layout.scss @@ -1,7 +1,20 @@ -@import '../css/reset.css'; - +* { + box-sizing: inherit; +} +*:before { + box-sizing: inherit; +} +*:after { + box-sizing: inherit; +} +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} body { font-family: sans-serif; + margin: 0; } a, a:link, a:visited { @@ -31,3 +44,11 @@ header.globalHeader { fill: currentColor; } } + +.visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ + position: absolute !important; + height: 1px; width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 1e2ad35..bc683a2 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,7 +9,7 @@ const IndexPage = () => (
- Hi people + Hi people
) diff --git a/src/pages/page-2.jsx b/src/pages/page-2.jsx new file mode 100644 index 0000000..cd453cf --- /dev/null +++ b/src/pages/page-2.jsx @@ -0,0 +1,19 @@ +import React from "react" + +import Layout from '../components/layout' +import SEO from '../components/seo' + +import { Heading } from "grommet" + +const PageTwo = () => ( + + +
+ Page 2 +
+ +) + +export default PageTwo + + diff --git a/src/pages/page-2.mdx b/src/pages/page-2.mdx deleted file mode 100644 index 0f50587..0000000 --- a/src/pages/page-2.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Link } from 'gatsby' -import Layout from '../components/layout' -import SEO from '../components/seo' - - - -# Hi from the second page - -Welcome to page 2 - -Go back to the homepage diff --git a/src/slides/index.mdx b/src/slides/index.mdx index 80f4c09..e34f228 100644 --- a/src/slides/index.mdx +++ b/src/slides/index.mdx @@ -1,15 +1,115 @@ -import SlideLayout from "../templates/slide" +import Slide from "../templates/slide" +import ImageSlide from "../templates/image-slide" - + # Accessibility in JavaScript Applications - + --- - + -## Beep +## Who is Marcy Sutton? - \ No newline at end of file +
+ Gatsby + Sketch of Marcy + A11y Octopus + Angular +
+ + + +--- + +## What we'll cover + +- Accessibility debugging + + +- Accessibility in JavaScript apps + - Focus management + - Announcements + - Semantic HTML + - Unobtrusive motion + - Progressive enhancement + + +- Accessibility units +- Accessible pages +- Q & A + +--- + + + +## Inaccessible web applications + + + +--- + + + +--- + + +--- + + + +## Better web applications + + + +--- + + + +--- + + + +--- + + + +## Install demos & tools + +### This demo app/slides + +- https://github.com/marcysutton/js-a11y-workshop + +### Tools + +- [axe browser extensions](https://deque.com/axe) +- [Accessibility Insights](http://accessibilityinsights.io) +- [NVDA](https://www.nvaccess.org/download/) (Windows only) + + + +--- + + + +## Accessibility debugging + + \ No newline at end of file diff --git a/src/slides/theme.js b/src/slides/theme.js new file mode 100644 index 0000000..46801b2 --- /dev/null +++ b/src/slides/theme.js @@ -0,0 +1,19 @@ +export default { + colors: { + text: '#000', + background: '#fff', + link: '#005a9b', + heading: '#000', + quote: '#000', + pre: '#f0f', + preBackground: '#333', + code: '#f0f', + codeBackground: 'transparent', + }, + css: { + justifyContent: 'start' + }, + fontSizes: [ + '0.75em', '1em', '1.5em', '2em', '3em' + ], +} diff --git a/src/templates/image-slide.jsx b/src/templates/image-slide.jsx new file mode 100644 index 0000000..d73c851 --- /dev/null +++ b/src/templates/image-slide.jsx @@ -0,0 +1,19 @@ +import React from "react" + +const ImageSlide = ({ heading, imageSrc, imageAlt }) => ( + <> + {heading} + + {imageAlt} + +) + +export default ImageSlide diff --git a/src/templates/slide.jsx b/src/templates/slide.jsx index 3e4dbb9..3226fa5 100644 --- a/src/templates/slide.jsx +++ b/src/templates/slide.jsx @@ -1,9 +1,9 @@ -// example Layout.js import React from 'react' import { css } from "styled-components" import styled from "styled-components" const headerFooterStyles = css` + background-color: #fff; font-size: 14px; left: 0; padding: 0.5em; @@ -22,6 +22,7 @@ const Footer = styled.footer` const P = styled.p` display: inline-block; font-size: inherit; + margin-top: 0; margin-right: auto; ` const H1 = styled.h1` diff --git a/static/a11y-octopus.png b/static/a11y-octopus.png new file mode 100644 index 0000000..e05db54 Binary files /dev/null and b/static/a11y-octopus.png differ diff --git a/static/angular-logo.png b/static/angular-logo.png new file mode 100644 index 0000000..c510293 Binary files /dev/null and b/static/angular-logo.png differ diff --git a/static/blackboard.png b/static/blackboard.png new file mode 100644 index 0000000..27a89d9 Binary files /dev/null and b/static/blackboard.png differ diff --git a/static/facebook-a11y-toolbar.jpg b/static/facebook-a11y-toolbar.jpg new file mode 100644 index 0000000..61c656b Binary files /dev/null and b/static/facebook-a11y-toolbar.jpg differ diff --git a/static/gatsby-icon.png b/static/gatsby-icon.png new file mode 100644 index 0000000..908bc78 Binary files /dev/null and b/static/gatsby-icon.png differ diff --git a/static/marcysutton-sketch.png b/static/marcysutton-sketch.png new file mode 100644 index 0000000..ac51003 Binary files /dev/null and b/static/marcysutton-sketch.png differ diff --git a/static/slack-focus-trap.png b/static/slack-focus-trap.png new file mode 100644 index 0000000..c3a1c3d Binary files /dev/null and b/static/slack-focus-trap.png differ diff --git a/static/user-inyerface.jpg b/static/user-inyerface.jpg new file mode 100644 index 0000000..740ad4b Binary files /dev/null and b/static/user-inyerface.jpg differ