js-a11y-workshop - GitLite

KO | EN

gitlite — search

#javascript #python #react #ai #typescript #android #machine-learning #rust #deep-learning #nodejs #cli #kubernetes #vue #pytorch

js-a11y-workshop

(★ 229)

Frontend Masters Workshop: Accessibility in JavaScript Applications

파일 탐색기

최종 버전 다운로드 (.zip)

- - example.json
- - index.js
- - index.js
- - commands.js
  - index.js
- - gatsby-browser.js
- - dropdown.js
- - nav.spec.js
  - routing.js
- - live-region.js
- - tab-list.js
- - animation.js
  - card-flip.scss
- - dropdown.test.js
- - file-mock.js
- - reset.css
- - bagley.jpg
  - blueicon.jpg
  - rainier-headshot.jpg
- - 404.js
  - animation.jsx
  - announcer.jsx
  - dropdown.jsx
  - enhanced-tablist.jsx
  - index.jsx
  - layout.jsx
  - semantics.jsx
- - index.mdx
- - image-slide.jsx
  - slide.jsx
- theme.js
- a11y-octopus.png
- aea-grid-inspect.png
- angular-logo.png
- announcement.webp
- axe-logo.png
- chrome-a11y-inspector.png
- chrome-accessibility-tree.png
- ci-bandits.jpg
- elmo-shrug.gif
- finally.webp
- focus-diagram.png
- gatsby-icon.png
- keyboard.gif
- magnification-a11y.png
- mail.gif
- marcysutton-sketch.png
- mythbusters.png
- paul-adam-aria.png
- react-logo.png
- safari-settings.png
.gitignore
cypress.json
gatsby-browser.js
gatsby-config.js
gatsby-node.js
jest-preprocess.js
jest.config.js
jest.setup.js
LICENSE
loadershim.js
outline.yml
package-lock.json
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/marcysutton/js-a11y-workshop

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd js-a11y-workshop

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Accessibility in JavaScript Applications

Learn the necessary techniques and tools for building inclusive web applications with JavaScript from Marcy Sutton.

Presented at Frontend Masters! You can view the videos that go along with the workshop material in the [Accessibility in JavaScript Application course](https://frontendmasters.com/courses/javascript-accessibility/).

Some key takeaways:

- Understand how to incorporate accessibility into your web development workflow.
- Debug your sites and applications for accessibility using the latest tools.
- Apply accessibility to React web applications with Gatsby, while learning how accessibility applies to other stacks.
- Learn the benefits of manual and automated testing to grow web accessibility superpowers!
- Integrate focus management into your web applications, gracefully handling keyboard and screen reader interactions.
- Practice announcing view changes with your code and keeping screen reader users up to date.
- Achieve wins with semantic markup, unobtrusive animation, and progressive enhancement.

App URL: https://marcysutton.github.io/js-a11y-workshop

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).

_Note: This repo requires [Node 12 and npm](https://nodejs.org) to be installed._

1. Create a new Gatsby site and slide deck using this starter

```sh
git clone https://github.com/marcysutton/js-a11y-workshop
```

2. Go into the directory, install dependencies, and start the development server

```sh
cd js-a11y-workshop
npm install
npm start
```

View in a browser: http://localhost:8000

3. Edit files:

- Site pages: [`src/pages/*`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/pages)
    - Site components: [`src/components/*`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/components)
    - Templates: [`src/templates/*`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/templates)
    - Slide content: [`src/slides/index.mdx`](https://github.com/marcysutton/js-a11y-workshop/blob/master/src/slides/index.mdx)

4. To look at the answers from the exercises, check out the [`/examples`](https://github.com/marcysutton/js-a11y-workshop/blob/master/examples) directory in the `master` branch

You can also check out the `solutions` branch to see everything in action: https://github.com/marcysutton/js-a11y-workshop/tree/solutions

### Prerequisites

1. Have a text editor installed, i.e. VSCode
2. Have the Gatsby CLI (gatsby-cli) installed globally by running ```npm install -g gatsby-cli```
3. Use Node 12 ([nvm](https://github.com/nvm-sh/nvm) or [n](https://github.com/tj/n) will help you maintain Node versions)

### Troubleshooting

If you run into errors on the install, check your Node version for version 12. Sharp in particular likes to complain a lot.

To get Gatsby to install after errors, try deleting files and doing another reinstall:

```
rm -rf node_modules && rm package-lock.json
npm install
```

If you still run into problems, let me know by [opening an issue](https://github.com/marcysutton/js-a11y-workshop/issues/new) and including details on any errors, Node version, platform, etc.