Skip to content

Commit 27cc2b2

Browse files
EmmaDawsonDevEmmaDawsonDev
authored
Merge pull request #402 from AccessibleForAll/main
release-2024-07-10.1
2 parents 92b799c + 2c645e2 commit 27cc2b2

30 files changed

+7712
-12327
lines changed

‎.eslintignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
!.storybook

‎.eslintrc.json‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
{
2-
"extends": [
3-
"next/core-web-vitals",
4-
"prettier",
5-
"plugin:storybook/recommended",
6-
"plugin:@typescript-eslint/recommended"
7-
],
2+
"extends": ["next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended"],
83
"rules": {
94
"comma-spacing": ["error", { "before": false, "after": true }],
105
"react/no-unescaped-entities": 0,

‎.gitpod.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/
22
tasks:
3-
- name: yarn
4-
init: yarn install
5-
command: yarn dev
3+
- name: npm
4+
init: npm install
5+
command: npm run dev
66
# List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
77
ports:
88
- port: 3000

‎.storybook/main.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎.storybook/preview.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎CONTRIBUTING.md‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,65 +6,76 @@ This project is built with Next.JS, Typescript and CSS modules.
66

77
## Pre-requisites (these need to be installed on your machine)
88

9-
[Node.js](https://nodejs.org/en/)
10-
[Yarn Package Manager](https://yarnpkg.com/)
9+
[Node.js](https://nodejs.org/en/)
1110

1211
## Available packages
1312

1413
Icons - [React Icons Documentation]( https://react-icons.github.io/react-icons)
1514
Code Snippets - [React Syntax Highlighter Documentation](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
1615
Translations - [next-i18next Documentation](https://next.i18next.com/)
17-
Storybook - [Storybook Documentation](https://storybook.js.org/)
1816

1917
## How to contribute
2018

21-
1. Look through [Pre-existing issues](https://github.com/AccessibleForAll/AccessibleWebDev/issues) or [Raise a new issue](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose) and ask to be assigned. Pull requests made without a corresponding issue will likely be closed.
19+
1. Look through [Pre-existing issues](https://github.com/AccessibleForAll/AccessibleWebDev/issues) or [Raise a new issue](https://github.com/AccessibleForAll/AccessibleWebDev/issues/new/choose) and ask to be assigned. Pull requests made without a corresponding issue will likely be closed.
2220
2. Please check the [coding standards](https://github.com/AccessibleForAll/AccessibleWebDev/blob/main/CODING_STANDARDS.md) page before start contributing.
23-
3. [Fork](https://github.com/AccessibleForAll/AccessibleWebDev/fork) the project
24-
4. Clone the project:
21+
3. [Fork](https://github.com/AccessibleForAll/AccessibleWebDev/fork) the project
22+
4. Clone the project:
23+
2524
```bash
2625
git clone https://github.com/<your-github-username>/AccessibleWebDev
2726
```
28-
5. Navigate to the project directory:
27+
28+
5. Navigate to the project directory:
29+
2930
```bash
3031
cd AccessibleWebDev
3132
```
32-
6. Set the upstream repository:
33+
34+
6. Set the upstream repository:
35+
3336
```bash
3437
git remote add upstream https://github.com/AccessibleForAll/AccessibleWebDev.git
3538
```
36-
7. Install dependencies:
39+
40+
7. Install dependencies:
41+
3742
```bash
38-
yarn install
43+
npm install
3944
```
40-
8. Create a new branch:
45+
46+
8. Create a new branch:
47+
4148
```bash
4249
git checkout -b <YourBranchName>
4350
```
44-
9. To run the whole project locally:
45-
```bash
46-
yarn dev
47-
```
48-
If you are making an isolated component and wish to run storybook locally instead of the whole website run this instead of `yarn dev`:
51+
52+
9. To run the whole project locally:
53+
4954
```bash
50-
yarn storybook
55+
npm run dev
5156
```
5257

53-
10. Make your changes
58+
10. Make your changes
5459
11. Stage your changes:
60+
5561
```bash
5662
git add <NameOfFileChanged>
5763
```
64+
5865
12. Commit your changes and provide a meaningful commit message:
59-
66+
6067
Unsure how to write a meaningful commit message? Check out this article about [How to Write a Good Git Commit Message](https://blog.ossph.org/how-to-write-a-good-git-commit-message/#:~:text=To%20set%20up%20a%20Git,t%20meet%20the%20specified%20format.)
68+
6169
```bash
6270
git commit -m "<Your commit message here>"
6371
```
72+
6473
13. Push your commits to your local repository
74+
6575
```bash
6676
git push origin <YourBranchName>
6777
```
78+
6879
14. Create a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
6980
15. Wait for maintainers to review your pull request and suggest any changes
7081

‎components/ContentTemplates/ButtonsTemplate.tsx‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -386,6 +386,18 @@ export const ButtonsTemplate = () => {
386386
should probably be a link.
387387
</p>
388388
</TemplateSection>
389+
<TemplateSection
390+
sectionName="touchTargetMinimum"
391+
title="Touch Target Minimum">
392+
<p>
393+
When it comes to creating accessible buttons for your websites and
394+
applications, it's important that they are easy to activate. To
395+
achieve this goal, WCAG suggests that buttons have a minimum target
396+
size of at least 24 by 24 CSS pixels. In doing so, users, especially
397+
those who suffer from mobility impairments like hand tremors or are
398+
amputees, have an easier time clicking on them.
399+
</p>
400+
</TemplateSection>
389401
<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
390402
<ul className="list">
391403
<li>
@@ -453,9 +465,16 @@ export const ButtonsTemplate = () => {
453465
</li>
454466
<li>
455467
<a
456-
href="https://www.w3.org/TR/WCAG21/#target-size"
468+
href="https://www.w3.org/TR/WCAG22/#target-size-enhanced"
469+
className="blockLink">
470+
2.5.5 Target Size (Enhanced)
471+
</a>
472+
</li>
473+
<li>
474+
<a
475+
href="https://www.w3.org/TR/WCAG22/#target-size-minimum"
457476
className="blockLink">
458-
2.5.5 Target Size
477+
2.5.8 Target Size (Minimum)
459478
</a>
460479
</li>
461480
<li>
@@ -467,6 +486,7 @@ export const ButtonsTemplate = () => {
467486
</li>
468487
</ul>
469488
</TemplateSection>
489+
470490
<TemplateSection sectionName="otherResources" title="Other Resources">
471491
<ul className="list">
472492
<li>

‎components/ContentTemplates/CaptchasTemplate.tsx‎

Lines changed: 104 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,107 @@
1-
import { WorkInProgress } from "../WorkInProgress/WorkInProgress"
1+
import { captchasPageNavigation } from "../../data/pageNavigationLists"
2+
import { NavPage } from "../NavPage/NavPage"
3+
import { PageUpdated } from "../PageUpdated/PageUpdated"
4+
import { TemplateSection } from "../TemplateSection/TemplateSection"
25

36
export const CaptchasTemplate = () => {
4-
return <WorkInProgress />
7+
return (
8+
<>
9+
<NavPage pageNavigation={captchasPageNavigation} />
10+
<TemplateSection sectionName="introduction" title="Introduction">
11+
<p>
12+
CAPTCHA stands for Completely Automated Public Turing test to tell
13+
Computers and Humans Apart. CAPTCHAs are tests to prove you are human
14+
and not a bot, such as picking out objects from a set of images,
15+
listening to a garbled audio or trying to pick out letters and numbers
16+
from distorted text.
17+
</p>
18+
<p>
19+
CAPTCHAs are inherently not accessible by design. They rely on human
20+
senses and cognition which means that people with certain disabilities
21+
are unable to complete them.
22+
</p>
23+
</TemplateSection>
24+
<TemplateSection
25+
sectionName={"captchaIssues"}
26+
title={"What's the issue with CAPTCHAs?"}>
27+
<p>
28+
The easiest way to explain the issues with CAPTCHAs is with examples.
29+
</p>
30+
<h3>Visual</h3>
31+
<p>
32+
Any CAPTCHA relying on sight, such as picking all the traffic light
33+
images, or writing the letters in a distorted text, are not accessible
34+
to people who are blind, are deaf-blind, have low vision or have a
35+
reading disability such as dyslexia.
36+
</p>
37+
<h3>Audio</h3>
38+
<p>
39+
Any CAPTCHA relying on audio, such as picking out a word in the middle
40+
of a distorted soundtrack, are not accessible to people who are deaf,
41+
hard of hearing or those who have audio processing disorders.
42+
</p>
43+
<h3>Maths challenge</h3>
44+
<p>
45+
Any CAPTCHA that relies on doing calculations, even those considered
46+
simple such as 1 + 2, are not accessible to some people with cognitive
47+
disabilities, learning disabilities or those who have anxiety.
48+
</p>
49+
<h3>Alignment challenges</h3>
50+
<p>
51+
Any CAPTCHA relying on aligning two images are not accessible to
52+
people with vision disabilities or motor disabilities.
53+
</p>
54+
<h3>Click to prove you're not a robot</h3>
55+
<p>
56+
Even having a checkbox CAPTCHA can be difficult for some people
57+
because if they can't click it, sometimes another more complicated
58+
CAPTCHA is triggered instead.
59+
</p>
60+
</TemplateSection>
61+
<TemplateSection
62+
sectionName={"accessibleCAPTCHA"}
63+
title={"Accessible CAPTCHA"}>
64+
<p>
65+
The best way to make CAPTCHA accessible is to remove it. Unless you
66+
have a large problem with spam then CAPTCHA is probably not needed.
67+
You can try using things like honeypots for form submission. These are
68+
hidden form fields that only bots can find. Or consider two factor
69+
authentication for creating accounts and logging into services.
70+
</p>
71+
<p>
72+
If you must use CAPTCHA then you must provide multiple ways for people
73+
to attempt the CAPTCHA. This means that if people can't fill in a
74+
visual CAPTCHA due to a disability, they can attempt an audio CAPTCHA
75+
instead.
76+
</p>
77+
<p>
78+
Even having two types of CAPTCHA does not make your site accessible
79+
for everyone. If using CAPTCHA is the only way to get to a certain
80+
part of a website or perform a specific action, then you also need to
81+
provide a way for people who can't get past the CAPTCHAs to get help.
82+
</p>
83+
</TemplateSection>
84+
<TemplateSection sectionName="WCAGCriteria" title="WCAG Criteria">
85+
<ul className="list">
86+
<li>
87+
<a
88+
href="https://www.w3.org/TR/WCAG21/#non-text-content"
89+
className="blockLink">
90+
1.1.1 Non-text content
91+
</a>
92+
</li>
93+
</ul>
94+
</TemplateSection>
95+
<TemplateSection sectionName={"otherResources"} title={"Other Resources"}>
96+
<ul>
97+
<li>
98+
<a href="https://www.w3.org/TR/turingtest/" className="blockLink">
99+
The inaccessibility of CAPTCHAS
100+
</a>
101+
</li>
102+
</ul>
103+
</TemplateSection>
104+
<PageUpdated date="28th June 2024" />
105+
</>
106+
)
5107
}

‎components/ContentTemplates/HeadingsTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Image from "next/image"
1+
import Image from "next/legacy/image"
22
import { NavPage } from "../NavPage/NavPage"
33
import { CodeBlock } from "../CodeBlock/CodeBlock"
44
import { headingsPageNavigation } from "../../data/pageNavigationLists"

0 commit comments

Comments
 (0)