Skip to content

Commit 1c30a64

Browse files
marcysuttonmarcysutton
committed
initial commit
0 parents  commit 1c30a64

File tree

5 files changed

+223
-0
lines changed

5 files changed

+223
-0
lines changed

‎.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
package-lock.json
3+
.next
4+
public
5+
dist
6+
.parcel-cache
7+
.DS_Store
8+
**/.DS_Store
9+
.cache

‎CODE_OF_CONDUCT.md

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
In the interest of fostering an open and welcoming environment, we as
6+
contributors and maintainers pledge to making participation in our project and
7+
our community a harassment-free experience for everyone, regardless of age, body
8+
size, disability, ethnicity, gender identity and expression, level of experience,
9+
nationality, personal appearance, race, religion, or sexual identity and
10+
orientation.
11+
12+
## Our Standards
13+
14+
Examples of behavior that contributes to creating a positive environment
15+
include:
16+
17+
* Using welcoming and inclusive language
18+
* Being respectful of differing viewpoints and experiences
19+
* Gracefully accepting constructive criticism
20+
* Focusing on what is best for the community
21+
* Showing empathy towards other community members
22+
23+
Examples of unacceptable behavior by participants include:
24+
25+
* The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
* Trolling, insulting/derogatory comments, and personal or political attacks
28+
* Public or private harassment
29+
* Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
* Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
33+
34+
## Our Responsibilities
35+
36+
Project maintainers are responsible for clarifying the standards of acceptable
37+
behavior and are expected to take appropriate and fair corrective action in
38+
response to any instances of unacceptable behavior.
39+
40+
Project maintainers have the right and responsibility to remove, edit, or
41+
reject comments, commits, code, wiki edits, issues, and other contributions
42+
that are not aligned to this Code of Conduct, or to ban temporarily or
43+
permanently any contributor for other behaviors that they deem inappropriate,
44+
threatening, offensive, or harmful.
45+
46+
## Scope
47+
48+
This Code of Conduct applies both within project spaces and in public spaces
49+
when an individual is representing the project or its community. Examples of
50+
representing a project or community include using an official project e-mail
51+
address, posting via an official social media account, or acting as an appointed
52+
representative at an online or offline event. Representation of a project may be
53+
further defined and clarified by project maintainers.
54+
55+
## Enforcement
56+
57+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58+
reported by contacting the project team at kent@doddsfamily.us. All
59+
complaints will be reviewed and investigated and will result in a response that
60+
is deemed necessary and appropriate to the circumstances. The project team is
61+
obligated to maintain confidentiality with regard to the reporter of an incident.
62+
Further details of specific enforcement policies may be posted separately.
63+
64+
Project maintainers who do not follow or enforce the Code of Conduct in good
65+
faith may face temporary or permanent repercussions as determined by other
66+
members of the project's leadership.
67+
68+
## Attribution
69+
70+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71+
available at [http://contributor-covenant.org/version/1/4][version]
72+
73+
[homepage]: http://contributor-covenant.org
74+
[version]: http://contributor-covenant.org/version/1/4/

‎LICENSE.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
This material is available for private, non-commercial use under the
2+
[GPL version 3](http://www.gnu.org/licenses/gpl-3.0-standalone.html). If you
3+
would like to use this material to conduct your own workshop, please contact me
4+
at marcy@testingaccessibility.com.

‎README.md

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<div>
2+
<h1 align="center">✨ Testing Accessibility with Marcy Sutton ✨</h1>
3+
4+
<a href="https://testingaccessibility.com">
5+
<img
6+
alt="Testing Accessibility: Semantic HTML & ARIA by Marcy Sutton"
7+
src="./ta-promo-image.png"
8+
/>
9+
</a>
10+
11+
<h2 align="center">
12+
Building accessible web applications with HTML, CSS, JavaScript, and React
13+
</h2>
14+
<p>
15+
Ensuring your frontend code is accessible requires consistent development effort and testing of inclusive markup and scripted interactions. In this workshop we’ll build an
16+
accessible web application using widely supported and proven tools and
17+
techniques. We’ll start with plumbing accessibility information with semantic HTML and
18+
ARIA before moving on to the tricky parts of building and testing JavaScript-heavy components in later workshops.
19+
</p>
20+
</div>
21+
22+
<hr />
23+
24+
<!-- prettier-ignore-start -->
25+
[![GPL 3.0 License][license-badge]][license]
26+
[![Code of Conduct][coc-badge]][coc]
27+
<!-- prettier-ignore-end -->
28+
29+
## Prerequisites
30+
31+
- The workshop is intended for intermediate to advanced web developers. Beginners are also
32+
welcome to follow along. Knowledge of the Web Platform will be necessary (HTML, CSS, and
33+
JavaScript).
34+
- In later workshops, the development exercises will become increasingly more advanced. Experience with JavaScript, React, and Git will be necessary.
35+
36+
## Options for working with this material
37+
38+
- Browser-based setup with GitPod
39+
- Note: GitPod may have accessibility issues
40+
- Download a zip file for local setup
41+
- Clone this Git repo for local setup (see instructions below)
42+
43+
## System Requirements for Local Setup
44+
45+
- [git][git] v2.13 or greater
46+
- [NodeJS][node] `12 || 14 || 15 || 16`
47+
- [yarn][yarn] v1
48+
49+
All of these must be available in your `PATH`. To verify things are set up
50+
properly, you can run this:
51+
52+
```shell
53+
git --version
54+
node --version
55+
yarn --version
56+
```
57+
58+
If you have trouble with any of these, learn more about the PATH environment
59+
variable and how to fix it here for [windows][win-path] or
60+
[mac/linux][mac-path].
61+
62+
## Setup
63+
64+
> If you want to commit and push your work as you go, you’ll want to
65+
> [fork](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
66+
> first and then clone your fork rather than this repo directly.
67+
> Be sure to fetch the latest code on the day of the workshop by [syncing your fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork).
68+
69+
After you’ve made sure to have the pre-requisites installed, you
70+
should be able to run a few commands to get set up:
71+
72+
```
73+
git clone https://github.com/testing-accessibility/workshop-semantics-html-aria.git
74+
cd workshop-semantics-html-aria
75+
yarn
76+
```
77+
78+
There may be periodic changes to this repo. To update your local build, run:
79+
80+
```
81+
git pull
82+
```
83+
84+
Note: if you have local changes, you'll need to commit them to a branch. Here's
85+
some extra help on using Git: [https://www.freecodecamp.org/news/git-pull-explained/]
86+
87+
If you get any errors when building the site, please read through them and see if
88+
you can find out what the problem is. If you can’t work it out on your own then
89+
please [file an issue][issue] and provide _all_ the output from the commands you ran
90+
(even if it’s a lot).
91+
92+
## Running the project locally
93+
94+
This repo contains various workshop files and a React web application. To get the app up and running (and really see if it worked) with [Parcel](https://parceljs.org), run this command from the project’s root folder:
95+
96+
```shell
97+
yarn start
98+
```
99+
100+
This should start the site for your browser at the address indicated in your Terminal:
101+
`http://localhost:1234`
102+
103+
## Working through the exercises
104+
105+
In this workshop, we'll dig into specifics of an important aspect of accessibility: semantics and ARIA in HTML markup. The accessibility information plumbed through your pages and applications with semantic code is essential for users of assistive technology. It assists other use cases as well, such as voice navigation and SEO.
106+
107+
Here, we will primarily work on site listings and associated components. The local URL is:
108+
`http://localhost:1234`
109+
110+
- [exercise1-headings-landmarks](https://github.com/testing-accessibility/workshop-semantics-html-aria/tree/main/exercise1-headings-landmarks)
111+
- [exercise2-what-is-aria](https://github.com/testing-accessibility/workshop-semantics-html-aria/tree/main/exercise2-what-is-aria)
112+
- [exercise3-accessible-names](https://github.com/testing-accessibility/workshop-semantics-html-aria/tree/main/exercise3-accessible-names)
113+
- [exercise4-programmatic-a11y-info](https://github.com/testing-accessibility/workshop-semantics-html-aria/tree/main/exercise4-programmatic-a11y-info)
114+
- [exercise5-what-is-aom](https://github.com/testing-accessibility/workshop-semantics-html-aria/tree/main/exercise5-what-is-aom)
115+
116+
This structure will allow you to iterate on working files with separate directories for the example sections.
117+
118+
The purpose of an exercise is **not** for you to work through all the material.
119+
It’s intended to get your brain thinking about the right questions to ask as
120+
we go through the material together.
121+
122+
Contributions of any kind are welcome!
123+
124+
<!-- prettier-ignore-start -->
125+
<!-->
126+
[yarn]: https://classic.yarnpkg.com/lang/en/
127+
[node]: https://nodejs.org
128+
[git]: https://git-scm.com/
129+
[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square
130+
[license]: https://github.com/marcysutton/testing-accessibility-demos/blob/main/LICENSE
131+
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
132+
[coc]: https://github.com/marcysutton/testing-accessibility-demos/blob/main/CODE_OF_CONDUCT.md
133+
[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/
134+
[mac-path]: http://stackoverflow.com/a/24322978/971592
135+
[issue]: https://github.com/marcysutton/testing-accessibility-demos/issues/new-->
136+
<!-- prettier-ignore-end -->

‎ta-promo-image-semantics.png

257 KB
Loading

0 commit comments

Comments
 (0)