├── .nvmrc ├── website ├── static │ ├── .nojekyll │ ├── img │ │ ├── swag.jpeg │ │ ├── captions.png │ │ ├── close-on.gif │ │ ├── oss_logo.png │ │ ├── 123456789.png │ │ ├── list_step.png │ │ ├── inline-image.png │ │ ├── search_icon.png │ │ ├── friends-female.png │ │ ├── contrast-bad-2-2.png │ │ ├── contrast-good-7-5.png │ │ ├── color-meaning-solid.png │ │ ├── contrast-better-4-6.png │ │ ├── friends-female-hover.png │ │ ├── color-meaning-texture.png │ │ ├── friends-female-active.png │ │ ├── logo-teach-access.svg │ │ ├── logo-teach-access-dark.svg │ │ ├── undraw_tweetstorm.svg │ │ ├── undraw_note_list.svg │ │ ├── undraw_open_source.svg │ │ ├── undraw_code_review.svg │ │ ├── undraw_react.svg │ │ ├── undraw_online.svg │ │ └── undraw_youtube_tutorial.svg │ ├── css │ │ └── custom.css │ └── js │ │ └── scriptHelper.js ├── .eslintrc.js ├── LICENSE ├── .gitignore ├── src │ ├── theme │ │ └── ReactLiveScope │ │ │ └── index.js │ ├── css │ │ ├── menus.css │ │ ├── dialogs.css │ │ ├── editor.css │ │ └── customTheme.css │ └── pages │ │ └── help.jsx ├── sidebars.js ├── package.json └── docusaurus.config.js ├── .dockerignore ├── .prettierrc.js ├── LICENSE ├── Dockerfile ├── render.yaml ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── ISSUE_TEMPLATE.md └── workflows │ ├── pull-request.yml │ └── deploy.yml ├── .vscode └── settings.json ├── docker-compose.yml ├── docs ├── design │ ├── introduction.md │ ├── site-copy.md │ ├── color-meaning.md │ ├── checklist.md │ ├── text-size.mdx │ ├── photos.md │ └── color-contrast.mdx ├── code │ ├── introduction.md │ ├── headings.mdx │ ├── checklist.md │ ├── images.mdx │ ├── aria-introduction.mdx │ ├── keyboard-navigation.mdx │ ├── landmarks.mdx │ ├── lists.mdx │ ├── tables.mdx │ ├── labels.mdx │ ├── dialogs.mdx │ └── menus.mdx ├── _util │ ├── VerifyButton.mdx │ └── Editor.mdx └── introduction │ ├── faq.md │ └── using-this-tutorial.md └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | lts/fermium 2 | -------------------------------------------------------------------------------- /website/static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | */node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: false // needed due to Prettier/MDX incompatability 3 | }; -------------------------------------------------------------------------------- /website/static/img/swag.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/swag.jpeg -------------------------------------------------------------------------------- /website/static/img/captions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/captions.png -------------------------------------------------------------------------------- /website/static/img/close-on.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/close-on.gif -------------------------------------------------------------------------------- /website/static/img/oss_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/oss_logo.png -------------------------------------------------------------------------------- /website/static/img/123456789.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/123456789.png -------------------------------------------------------------------------------- /website/static/img/list_step.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/list_step.png -------------------------------------------------------------------------------- /website/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["airbnb", "airbnb/hooks", "plugin:prettier/recommended"], 3 | }; 4 | -------------------------------------------------------------------------------- /website/static/img/inline-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/inline-image.png -------------------------------------------------------------------------------- /website/static/img/search_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/search_icon.png -------------------------------------------------------------------------------- /website/static/img/friends-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/friends-female.png -------------------------------------------------------------------------------- /website/static/img/contrast-bad-2-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/contrast-bad-2-2.png -------------------------------------------------------------------------------- /website/static/img/contrast-good-7-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/contrast-good-7-5.png -------------------------------------------------------------------------------- /website/static/img/color-meaning-solid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/color-meaning-solid.png -------------------------------------------------------------------------------- /website/static/img/contrast-better-4-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/contrast-better-4-6.png -------------------------------------------------------------------------------- /website/static/img/friends-female-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/friends-female-hover.png -------------------------------------------------------------------------------- /website/static/img/color-meaning-texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/color-meaning-texture.png -------------------------------------------------------------------------------- /website/static/img/friends-female-active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/teachaccess/tutorial/HEAD/website/static/img/friends-female-active.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The Teach Access Tutorial is governed by: 2 | https://creativecommons.org/licenses/by/4.0/ 3 | https://creativecommons.org/licenses/by/4.0/legalcode -------------------------------------------------------------------------------- /website/LICENSE: -------------------------------------------------------------------------------- 1 | The Teach Access Tutorial is governed by: 2 | https://creativecommons.org/licenses/by/4.0/ 3 | https://creativecommons.org/licenses/by/4.0/legalcode -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:lts 2 | 3 | WORKDIR /app/website 4 | 5 | EXPOSE 3000 35729 6 | COPY ./docs /app/docs 7 | COPY ./website /app/website 8 | RUN yarn install 9 | 10 | CMD ["yarn", "start"] 11 | -------------------------------------------------------------------------------- /render.yaml: -------------------------------------------------------------------------------- 1 | previewsEnabled: true 2 | services: 3 | - type: web 4 | name: teachaccess-tutorial-staging-env 5 | env: static 6 | buildCommand: cd website; yarn install; yarn build; 7 | staticPublishPath: ./website/build 8 | pullRequestPreviewsEnabled: true -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Github issue 2 | 3 | Fixes #REPLACE_WITH_ISSUE_NUMBER 4 | 5 | ### What does this PR do? 6 | 7 | Please include a summary of the change with relevant motivation and context. List any dependencies that are required for this change. 8 | 9 | ### Notes 10 | 11 | Enter notes as needed. 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Expected Behavior 2 | 3 | Please describe the behavior you are expecting 4 | 5 | # Current Behavior 6 | 7 | What is the current behavior? 8 | 9 | ## Steps to reproduce 10 | 11 | Please provide detailed steps for reproducing the issue. 12 | 13 | 1. step 1 14 | 2. step 2 15 | 3. you get it :) 16 | -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | }, 6 | "[javascript]": { 7 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 8 | }, 9 | "[javascriptreact]": { 10 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /website/src/theme/ReactLiveScope/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | import React from "react"; 9 | 10 | // Add react-live imports you need here 11 | const ReactLiveScope = { 12 | React, 13 | }; 14 | 15 | export default ReactLiveScope; 16 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | 3 | services: 4 | docusaurus: 5 | build: . 6 | ports: 7 | - 3000:3000 8 | - 35729:35729 9 | volumes: 10 | - ./docs:/app/docs 11 | - ./website/blog:/app/website/blog 12 | - ./website/core:/app/website/core 13 | - ./website/i18n:/app/website/i18n 14 | - ./website/pages:/app/website/pages 15 | - ./website/static:/app/website/static 16 | - ./website/sidebars.json:/app/website/sidebars.json 17 | - ./website/siteConfig.js:/app/website/siteConfig.js 18 | working_dir: /app/website 19 | -------------------------------------------------------------------------------- /docs/design/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | sidebar_label: 3.1. Introduction 4 | id: introduction 5 | --- 6 | 7 | In this section, you'll learn about how color, contrast, text size and many other aspects of visual design affect how people with different abilities interact with your product. In order to ensure that everyone can use your application, you'll want to keep these basic accessibility principles in mind. This tutorial won't cover everything in the world of accessible design, but it will give you a few tips that you can immediately apply to everything you build moving forward. Happy designing! 8 | -------------------------------------------------------------------------------- /website/static/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | /* your custom css */ 9 | 10 | @media only screen and (min-device-width: 360px) and (max-device-width: 736px) { 11 | } 12 | 13 | @media only screen and (min-width: 1024px) { 14 | } 15 | 16 | @media only screen and (max-width: 1023px) { 17 | } 18 | 19 | @media only screen and (min-width: 1400px) { 20 | } 21 | 22 | @media only screen and (min-width: 1500px) { 23 | } 24 | -------------------------------------------------------------------------------- /docs/code/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | sidebar_label: 2.1. Introduction 4 | id: introduction 5 | --- 6 | 7 | In this section, you'll learn a few key user interface implementation techniques that will ensure you are building experiences that anyone can use. The world of accessibility is vast and diverse, so this tutorial won't cover everything - but it will get you started in the right direction and provide you with some basic best practices for writing accessible software. In addition, while the current examples are web based, many of the principles hold true on mobile and most of the major mobile platforms support robust accessibility APIs. Happy code writing! 8 | -------------------------------------------------------------------------------- /website/sidebars.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | docs: { 3 | "1. Introduction": ["introduction/using-this-tutorial", "introduction/faq"], 4 | "2. Writing Code": [ 5 | "code/introduction", 6 | "code/headings", 7 | "code/images", 8 | "code/keyboard-navigation", 9 | "code/labels", 10 | "code/lists", 11 | "code/dialogs", 12 | "code/tables", 13 | "code/menus", 14 | "code/aria-introduction", 15 | "code/landmarks", 16 | "code/checklist", 17 | ], 18 | "3. Design Principles": [ 19 | "design/introduction", 20 | "design/color-contrast", 21 | "design/color-meaning", 22 | "design/text", 23 | "design/site-copy", 24 | "design/photos", 25 | "design/checklist", 26 | ], 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /.github/workflows/pull-request.yml: -------------------------------------------------------------------------------- 1 | name: build-docusaurus 2 | 3 | on: 4 | pull_request: 5 | branches: [main] 6 | 7 | # Allows you to run this workflow manually from the Actions tab 8 | workflow_dispatch: 9 | 10 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 11 | jobs: 12 | publish: 13 | runs-on: ubuntu-latest 14 | steps: 15 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 16 | - name: Check out repo 17 | uses: actions/checkout@v2 18 | # Node is required for npm 19 | - name: Set up Node 20 | uses: actions/setup-node@v2 21 | with: 22 | node-version: "14" 23 | # Install and build Docusaurus website 24 | - name: Build Docusaurus website 25 | run: | 26 | cd website 27 | yarn install 28 | yarn build 29 | -------------------------------------------------------------------------------- /docs/_util/VerifyButton.mdx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export const VerifyButton = ({ checkExercise }) => { 4 | const [feedback, setFeedback] = useState(null); 5 | const success = "Well done!"; 6 | const onClick = () => { 7 | const error = checkExercise(); 8 | setFeedback(error || success); 9 | }; 10 | const renderButton = () => ( 11 | 14 | ); 15 | const renderFeedback = () => { 16 | if (feedback) { 17 | const isSuccess = feedback === success; 18 | return ( 19 |
20 |
25 |
`}
25 |
`}
43 |
12 |