Skip to content

Commit ed442e3

Browse files
madalynrosecodeofduskDaveTryon
authored
feat(wcag-2-2): Add Cognitive Assessment and Requirements (#7071)
#### Details This PR creates the "Cognitive" Assessment category, which includes: * Getting Started (and guidance page) * ![screen shot of Getting Started for Cognitive](https://github.com/microsoft/accessibility-insights-web/assets/3230904/93d75f26-e552-4a3f-81ad-2ca2f7a3aca9) * Redundant Entry (and info/examples content) * ![screen shot of redundant entry requirement](https://github.com/microsoft/accessibility-insights-web/assets/3230904/f0dad936-e4ab-43a4-93f1-cccb27d4e646) * Authentication (and info/examples content) * ![screen shot of authentication requirement](https://github.com/microsoft/accessibility-insights-web/assets/3230904/ee1735b5-0395-465e-b1e4-99d6952ccb9e) ![screenshot of left navigation showing 25 Cognitive with Getting Started, 25.1 Redundant Entry, and 25.2 Authentication](https://github.com/microsoft/accessibility-insights-web/assets/3230904/306baae2-4ecb-452d-972d-eb82944ac8ea) ##### Motivation feature work #### Pull request checklist <!-- If a checklist item is not applicable to this change, write "n/a" in the checkbox --> - [n/a] Addresses an existing issue: #0000 - [x] Ran `yarn fastpass` - [x] Added/updated relevant unit test(s) (and ran `yarn test`) - [x] Verified code coverage for the changes made. Check coverage report at: `<rootDir>/test-results/unit/coverage` - [x] PR title *AND* final merge commit title both start with a semantic tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See `CONTRIBUTING.md`. - [x] (UI changes only) Added screenshots/GIFs to description above - [n/a] (UI changes only) Verified usability with NVDA/JAWS --------- Co-authored-by: Bill Dengler <codeofdusk@gmail.com> Co-authored-by: Dave Tryon <45672944+DaveTryon@users.noreply.github.com>
1 parent 554d1e4 commit ed442e3

File tree

15 files changed

+1090
-0
lines changed

15 files changed

+1090
-0
lines changed

‎src/assessments/assessments.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { AdaptableContentAssessment } from './adaptable-content/assessment';
44
import { AssessmentsProviderImpl } from './assessments-provider';
55
import { AudioVideoOnlyAssessment } from './audio-video-only/assessment';
66
import { AutomatedChecks } from './automated-checks/assessment';
7+
import { CognitiveAssessment } from './cognitive/assessment';
78
import { ColorSensoryAssessment } from './color/assessment';
89
import { ContrastAssessment } from './contrast/assessment';
910
import { CustomWidgets } from './custom-widgets/assessment';
@@ -52,4 +53,5 @@ export const Assessments: AssessmentsProvider = AssessmentsProviderImpl.Create([
5253
SemanticsAssessment,
5354
PointerMotionAssessment,
5455
ContrastAssessment,
56+
CognitiveAssessment,
5557
]);

‎src/assessments/cognitive/assessment.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
import { RedundantEntry } from 'assessments/cognitive/test-steps/redundant-entry';
5+
import { VisualizationType } from 'common/types/visualization-type';
6+
import { test as content } from 'content/test';
7+
import * as React from 'react';
8+
import { AssessmentBuilder } from '../assessment-builder';
9+
import { Assessment } from '../types/iassessment';
10+
import { Authentication } from './test-steps/authentication';
11+
12+
const { guidance } = content.cognitive;
13+
14+
const key = 'cognitive';
15+
const title = 'Cognitive';
16+
17+
const gettingStarted: JSX.Element = (
18+
<React.Fragment>
19+
<p>
20+
When interfaces require repetitive entry of user data or necessitate that users recall
21+
information, solve problems or transcribe information to login, it can unnecessarily
22+
increase the cognitive load a user must handle. For people with cognitive and/or
23+
learning disabilities, increasing cognitive load in these ways can lead to unnecessary
24+
errors with data entry or create barriers to login to websites or applications.
25+
</p>
26+
</React.Fragment>
27+
);
28+
29+
export const CognitiveAssessment: Assessment = AssessmentBuilder.Manual({
30+
visualizationType: VisualizationType.CognitiveAssessment,
31+
key,
32+
title,
33+
gettingStarted,
34+
guidance,
35+
requirements: [RedundantEntry, Authentication],
36+
isEnabled: true,
37+
});

‎src/assessments/cognitive/test-steps/authentication.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
import { link } from 'content/link';
4+
import * as content from 'content/test/cognitive/authentication';
5+
import * as React from 'react';
6+
import { ManualTestRecordYourResults } from '../../common/manual-test-record-your-results';
7+
import { Requirement } from '../../types/requirement';
8+
import { CognitiveTestStep } from './test-steps';
9+
10+
const description: JSX.Element = (
11+
<span>
12+
People with cognitive issues relating to memory, reading (for example, dyslexia), numbers
13+
(for example, dyscalculia), or perception-processing limitations will be able to
14+
authenticate irrespective of the level of their cognitive abilities.
15+
</span>
16+
);
17+
18+
const howToTest: JSX.Element = (
19+
<div>
20+
<p>
21+
Note: Text-based personal content does not qualify for an exception as it relies on
22+
recall (rather than recognition), and transcription (rather than selecting an item).
23+
</p>
24+
<ol>
25+
<li>
26+
Examine the target page to identify the input fields and verify whether they prevent
27+
the user from pasting or auto-filling the entire password or code in the format in
28+
which it was originally created.
29+
</li>
30+
<li>
31+
Confirm whether any other acceptable authentication methods are present that satisfy
32+
the criteria such as an authentication method that does not rely on a cognitive
33+
function test.
34+
</li>
35+
<li>If either of these above conditions fail, the test is considered a failure.</li>
36+
<ManualTestRecordYourResults isMultipleFailurePossible={true} />
37+
</ol>
38+
</div>
39+
);
40+
41+
export const Authentication: Requirement = {
42+
key: CognitiveTestStep.authentication,
43+
name: 'Authentication',
44+
description,
45+
howToTest,
46+
isManual: true,
47+
...content,
48+
guidanceLinks: [link.WCAG_3_3_8],
49+
};

‎src/assessments/cognitive/test-steps/redundant-entry.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
import { link } from 'content/link';
4+
import * as content from 'content/test/cognitive/redundant-entry';
5+
import * as React from 'react';
6+
import { ManualTestRecordYourResults } from '../../common/manual-test-record-your-results';
7+
import { Requirement } from '../../types/requirement';
8+
import { CognitiveTestStep } from './test-steps';
9+
10+
const description: JSX.Element = (
11+
<span>
12+
Do not require people to re-enter information they have already provided via other
13+
means&nbsp;– e.g., as part of a previous step in the same form.
14+
</span>
15+
);
16+
17+
const howToTest: JSX.Element = (
18+
<div>
19+
<ol>
20+
<li>
21+
Examine the target page to identify user input mechanisms that request information
22+
to be entered (for example form fields, passwords, etc.)
23+
</li>
24+
<li>
25+
Verify if the information has already been requested on a previous step of the
26+
process and that the information entered previously is prepopulated in the fields or
27+
displayed on the page. If either of these conditions fail, the test is considered a
28+
failure.
29+
</li>
30+
<ManualTestRecordYourResults isMultipleFailurePossible={true} />
31+
</ol>
32+
</div>
33+
);
34+
35+
export const RedundantEntry: Requirement = {
36+
key: CognitiveTestStep.redundantEntry,
37+
name: 'Redundant entry',
38+
description,
39+
howToTest,
40+
isManual: true,
41+
...content,
42+
guidanceLinks: [link.WCAG_3_3_7],
43+
};

‎src/assessments/cognitive/test-steps/test-steps.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
export const enum CognitiveTestStep {
5+
authentication = 'authentication',
6+
redundantEntry = 'redundant-entry',
7+
}

‎src/common/types/visualization-type.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,5 @@ export enum VisualizationType {
4242
AutomatedChecksQuickAssess,
4343
ContrastQuickAssess,
4444
NativeWidgetsQuickAssess,
45+
CognitiveAssessment,
4546
}

‎src/content/test/cognitive/authentication.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
import { create, React } from '../../common';
4+
5+
export const infoAndExamples = create(({ Markup, Link }) => (
6+
<>
7+
<p>
8+
People with cognitive issues relating to memory, reading (for example, dyslexia), numbers (for example, dyscalculia), or
9+
perception-processing limitations will be able to authenticate irrespective of the level of their cognitive abilities.
10+
</p>
11+
<h2>Why it matters</h2>
12+
<p>
13+
This is valuable for people with certain cognitive disabilities to ensure that there is an accessible, easy-to-use, and secure
14+
method to log in. Most Web sites rely on usernames and passwords for logging in. Memorizing or transcribing a username,
15+
password, or one-time verification code places a very high or impossible burden upon people with certain cognitive disabilities.
16+
</p>
17+
18+
<h2>How to fix</h2>
19+
<p>
20+
Ensure that login functionalities in the system don't make people solve, recall, or transcribe something to log in. Consider
21+
using the following techniques to make authentication more accessible such as:
22+
</p>
23+
<ul>
24+
<li>Copy & paste functionality is enabled.</li>
25+
<li>2-factor authentication systems with verification codes to prevent higher cognitive recall.</li>
26+
</ul>
27+
<h2>Example</h2>
28+
<Markup.PassFail
29+
failText={
30+
<>
31+
<p>
32+
A fieldset that prompts a user to "Enter the 2nd, 6th and last characters of your password", with separate input
33+
fields for each character.
34+
</p>
35+
<p>See more failure examples below.</p>
36+
</>
37+
}
38+
failExample={
39+
<p>The block paste functionality for the website is blocked and user is unable to copy credentials into the login form.</p>
40+
}
41+
passText={
42+
<p>
43+
A social media website has a username and password based login mechanism. As part of the forgotten password feature,
44+
there is a separate link to login with an email. When the user enters their email and submits the form, the site sends
45+
an email to the user. Clicking the link in the email opens the website and the user is logged in.
46+
</p>
47+
}
48+
passExample={
49+
<p>
50+
A web site does not block paste functionality. The user is able to use a third-party password manager to store
51+
credentials, copy them, and paste them directly into a login form.
52+
</p>
53+
}
54+
/>
55+
<h2>More examples</h2>
56+
<h3>WCAG success criteria</h3>
57+
<Markup.Links>
58+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html">
59+
Understanding Success Criterion 3.3.8: Accessible Authentication
60+
</Markup.HyperLink>
61+
</Markup.Links>
62+
<h3>Sufficient techniques</h3>
63+
<Markup.Links>
64+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/html/H100">
65+
Providing properly marked up email and password inputs
66+
</Markup.HyperLink>
67+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/general/G218">Email link authentication</Markup.HyperLink>
68+
</Markup.Links>
69+
<h3>Additional Guidance</h3>
70+
<Markup.Links>
71+
<Markup.HyperLink href="https://www.w3.org/TR/coga-gap-analysis/#table3">
72+
Cognitive Accessibility Roadmap and Gap Analysis
73+
</Markup.HyperLink>
74+
<Markup.HyperLink href="https://www.w3.org/TR/coga-usable/">
75+
Making Content Usable for People with Cognitive and Learning Disabilities
76+
</Markup.HyperLink>
77+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F109">
78+
Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format
79+
</Markup.HyperLink>
80+
</Markup.Links>
81+
</>
82+
));

‎src/content/test/cognitive/guidance.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
import { create, GuidanceTitle, React } from '../../common';
4+
5+
export const guidance = create(({ Markup, Link }) => (
6+
<>
7+
<GuidanceTitle name={'Cognitive'} />
8+
<h2>Why it matters</h2>
9+
<React.Fragment>
10+
Cognitive and learning disabilities include long-term, short-term, and permanent difficulties relating to cognitive functions,
11+
such as:
12+
<ul>
13+
<li>learning, communication, reading, writing, or mathematics,</li>
14+
<li>
15+
ability to understand or process new or complex information and learn new skills, with a reduced ability to cope
16+
independently, and/or
17+
</li>
18+
<li>memory and attention or visual, language, or numerical thinking.</li>
19+
</ul>
20+
</React.Fragment>
21+
<p>
22+
Web page design & structure can make content inaccessible to people with cognitive and learning disabilities. For example,
23+
people with impaired short-term memory may be unable to recall passwords, remember access codes, or have trouble remembering
24+
unfamiliar iconography. Additionally, people with cognitive and learning disabilities may need more support or time to complete
25+
a new process or an authentication task.
26+
</p>
27+
<p>
28+
It is important designs are created while considering the cognitive load they require of their users, as many people may
29+
struggle with cognitive fatigue when completing complex, multi-stage processes. For instance, tasks like filling out forms while
30+
entering important or sensitive data correctly or just trying to locate the content or feature that they need. Designs need to
31+
consistently provide support to help minimize errors and complete their task.
32+
</p>
33+
<Markup.Columns>
34+
<Markup.Do>
35+
<h3>
36+
Provide users functionality to Copy & paste passwords for authentication. (<Link.WCAG_3_3_8 />)
37+
</h3>
38+
39+
<h3>
40+
Create systems with 2-factor authentication with verification codes to prevent higher cognitive recall. (
41+
<Link.WCAG_3_3_8 />)
42+
</h3>
43+
</Markup.Do>
44+
45+
<Markup.Dont>
46+
<h3>
47+
Don't rely on users memorizing or transcribing a username, password, or one-time verification code. (<Link.WCAG_3_3_8 />
48+
)
49+
</h3>
50+
51+
<h3>
52+
Don't require people to re-enter information they have already provided via other means. (<Link.WCAG_3_3_7 />)
53+
</h3>
54+
<ul>
55+
<li>Ensure processes do not rely on memory.</li>
56+
<li>
57+
Memory barriers stop people with cognitive disabilities from using content. This includes long passwords to log in
58+
and voice menus that involve remembering a specific number or term. Make sure there is an easier option for people
59+
who need it.
60+
</li>
61+
</ul>
62+
</Markup.Dont>
63+
</Markup.Columns>
64+
<h2>Learn more</h2>
65+
<h3>Reduce Redundant Entry</h3>
66+
<h4>WCAG success Criteria</h4>
67+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html#:~:text=Redundant%20Entry%20is%20asking%20for%20the%20website%20content,essential%20purposes%20such%20as%20asking%20for%20a%20password.">
68+
Understanding Success Criterion 3.3.7: Redundant Entry
69+
</Markup.HyperLink>
70+
<h4>Sufficient techniques</h4>
71+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/general/G221">
72+
Provide data from a previous step in a process
73+
</Markup.HyperLink>
74+
<h4>Additional guidance</h4>
75+
<Markup.HyperLink href="https://www.w3.org/TR/coga-gap-analysis/#table3">
76+
Cognitive Accessibility Roadmap and Gap Analysis
77+
</Markup.HyperLink>
78+
<Markup.HyperLink href="https://www.w3.org/TR/coga-usable/">
79+
Making Content Usable for People with Cognitive and Learning Disabilities
80+
</Markup.HyperLink>
81+
<h3>Provide accessible authentication</h3>
82+
<h4>WCAG success Criteria</h4>
83+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html">
84+
Understanding Success Criterion 3.3.8: Accessible Authentication
85+
</Markup.HyperLink>
86+
<h4>Sufficient techniques</h4>
87+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/html/H100">
88+
Providing properly marked up email and password inputs
89+
</Markup.HyperLink>
90+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/general/G218">Email link authentication</Markup.HyperLink>
91+
<h4>Additional guidance and common failures</h4>
92+
<Markup.HyperLink href="https://www.w3.org/TR/coga-gap-analysis/#table3">
93+
Cognitive Accessibility Roadmap and Gap Analysis
94+
</Markup.HyperLink>
95+
<Markup.HyperLink href="https://www.w3.org/TR/coga-usable/#make-it-easy-%20%20%20%20%20%20%20%20%20%20%20%20%20to-find-help-and-give-feedback-pattern">
96+
Making Content Usable for People with Cognitive and Learning Disabilities
97+
</Markup.HyperLink>
98+
<Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F109">
99+
Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format
100+
</Markup.HyperLink>
101+
</>
102+
));

‎src/content/test/cognitive/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
import * as authentication from './authentication';
4+
import { guidance } from './guidance';
5+
import * as redundantEntry from './redundant-entry';
6+
7+
export const cognitive = {
8+
authentication,
9+
redundantEntry,
10+
guidance,
11+
};

0 commit comments

Comments
 (0)