diff --git a/src/assessments/repetitive-content/assessment.tsx b/src/assessments/repetitive-content/assessment.tsx index 4a69ba80295..02396c7113e 100644 --- a/src/assessments/repetitive-content/assessment.tsx +++ b/src/assessments/repetitive-content/assessment.tsx @@ -6,6 +6,7 @@ import { test as content } from 'content/test'; import * as React from 'react'; import { AssessmentBuilder } from '../assessment-builder'; import { BypassBlocks } from './test-steps/bypass-blocks'; +import { ConsistentHelp } from './test-steps/consistent-help'; import { ConsistentIdentification } from './test-steps/consistent-identification'; import { ConsistentNavigation } from './test-steps/consistent-navigation'; @@ -32,5 +33,5 @@ export const RepetitiveContentAssessment = AssessmentBuilder.Manual({ gettingStarted: gettingStartedText, title, guidance, - requirements: [BypassBlocks, ConsistentNavigation, ConsistentIdentification], + requirements: [BypassBlocks, ConsistentNavigation, ConsistentIdentification, ConsistentHelp], }); diff --git a/src/assessments/repetitive-content/test-steps/consistent-help.tsx b/src/assessments/repetitive-content/test-steps/consistent-help.tsx new file mode 100644 index 00000000000..b33578a24b1 --- /dev/null +++ b/src/assessments/repetitive-content/test-steps/consistent-help.tsx @@ -0,0 +1,65 @@ +// Copyright (c) Microsoft Corporation. All rights reserved. +// Licensed under the MIT License. +import { NewTabLink } from 'common/components/new-tab-link'; +import { link } from 'content/link'; +import * as content from 'content/test/repetitive-content/consistent-help'; +import * as React from 'react'; +import { ManualTestRecordYourResults } from '../../common/manual-test-record-your-results'; +import * as Markup from '../../markup'; +import { Requirement } from '../../types/requirement'; +import { RepetitiveContentTestStep } from './test-steps'; + +const consistentHelpDescription: JSX.Element = ( + + Ensure help – or mechanism(s) to request help – are consistently located in the same + relative location across a{' '} + + set of web pages/screens + + . + +); + +const consistentHelpHowToTest: JSX.Element = ( +
+

+ + Note: this criterion does not require help to be provided. + +

+
    +
  1. +

    + Examine the target page to identify "help" mechanisms (for example links to + help, etc.) on the page. Determine if this is a set of web pages with blocks of + content that are repeated on multiple pages. +

    +
    2. +
  2. +

    + Verify that all helpful information and mechanisms provided are consistent with + other pages in terms of location, behavior and relative to the other content of + the page & UI for all components where help resides. +

    +
    3. + +
+

+ + Exemption: The location of a help mechanism can change based on user input, for + example resizing of the window that changes the location of the help link – this + would still pass this rule. + +

+
+); + +export const ConsistentHelp: Requirement = { + key: RepetitiveContentTestStep.consistentHelp, + name: 'Consistent help', + description: consistentHelpDescription, + howToTest: consistentHelpHowToTest, + isManual: true, + guidanceLinks: [link.WCAG_3_2_6], + ...content, +}; diff --git a/src/assessments/repetitive-content/test-steps/test-steps.ts b/src/assessments/repetitive-content/test-steps/test-steps.ts index 8a1e441c006..8ae3b9b6644 100644 --- a/src/assessments/repetitive-content/test-steps/test-steps.ts +++ b/src/assessments/repetitive-content/test-steps/test-steps.ts @@ -4,4 +4,5 @@ export enum RepetitiveContentTestStep { bypassBlocks = 'bypassBlocks', consistentNavigation = 'consistentNavigation', consistentIdentification = 'consistentIdentification', + consistentHelp = 'consistentHelp', } diff --git a/src/content/test/repetitive-content/consistent-help.tsx b/src/content/test/repetitive-content/consistent-help.tsx new file mode 100644 index 00000000000..405eb7301a1 --- /dev/null +++ b/src/content/test/repetitive-content/consistent-help.tsx @@ -0,0 +1,83 @@ +// Copyright (c) Microsoft Corporation. All rights reserved. +// Licensed under the MIT License. +import { create, React } from '../../common'; + +export const infoAndExamples = create(({ Markup }) => ( + <> +

+ Ensure help – or mechanism(s) to request help – are consistently located in the same relative location across a{' '} + set of web pages/screens + . +

+ +

Why it matters

+

+ People who may have difficulty locating help are more likely to find it when it is consistently located. This improves the + overall user experience for everyone, including support for people with cognitive disabilities, and makes it easier to find help + and support. +

+ +

How to fix

+

+ Ensure all helpful information and mechanisms provided are consistent with other pages in terms of location, behavior and + relative to the other content of the page & UI for all components where help resides. +

+ +

Example

+ + A chat widget to request help is present on select pages of a website but is not available on other pages which would be + considered part of a set of web pages. +

+ } + failExample={ +

+ Finding a specific policy or procedure: An employee who needs to complete a work task may have difficulty locating the + specific policy or procedure document on their employer's Web site. A consistently located "How Do I" page may include + the information that enables them to independently complete this task. +

+ } + passText={ +

+ A link to a help page exists as the third item in a list of five items within a web page’s navigation (the primary + navigation, or a footer navigation, for example). But on some of the linked pages from this navigation, the help link is + located in a different position in the list of the same navigation items, resulting in a failure of this rule. +

+ } + passExample={ +

+ Finding a specific policy or procedure: An employee who needs to complete a work task may have difficulty locating the + specific policy or procedure document on their employer's Web site. A consistently located "How Do I" page may include + the information that enables them to independently complete this task. +

+ } + /> + +

More examples

+ +

WCAG success criteria

+ + + Understanding Success Criterion 3.2.6: Consistent Help + + + +

Sufficient techniques

+ + + Provide a contact-us link in a consistent location + + + +

Additional guidance

+ + + Cognitive Accessibility Roadmap and Gap Analysis + + + Making Content Usable for People with Cognitive and Learning Disabilities + + + +)); diff --git a/src/content/test/repetitive-content/index.ts b/src/content/test/repetitive-content/index.ts index 4cc18f420f7..c253ccae1a8 100644 --- a/src/content/test/repetitive-content/index.ts +++ b/src/content/test/repetitive-content/index.ts @@ -1,6 +1,7 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. import { infoAndExamples as bypassBlocks } from './bypass-blocks'; +import * as consistentHelp from './consistent-help'; import * as consistentIdentification from './consistent-identification'; import * as consistentNavigation from './consistent-navigation'; import { guidance } from './guidance'; @@ -10,4 +11,5 @@ export const repetitiveContent = { bypassBlocks, consistentNavigation, consistentIdentification, + consistentHelp, }; diff --git a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap index 0699dc91b81..b37f205e3bc 100644 --- a/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap +++ b/src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap @@ -27183,6 +27183,201 @@ exports[`Guidance Content pages test/repetitiveContent/bypassBlocks matches the `; +exports[`Guidance Content pages test/repetitiveContent/consistentHelp/infoAndExamples matches the snapshot 1`] = ` + +
+
+
+

+ Ensure help – or mechanism(s) to request help – are consistently located in the same relative location across a + + set of web pages/screens + + . +

+

+ Why it matters +

+

+ People who may have difficulty locating help are more likely to find it when it is consistently located. This improves the overall user experience for everyone, including support for people with cognitive disabilities, and makes it easier to find help and support. +

+

+ How to fix +

+

+ Ensure all helpful information and mechanisms provided are consistent with other pages in terms of location, behavior and relative to the other content of the page & UI for all components where help resides. +

+

+ Example +

+
+
+
+ + + + +

+ Fail +

+
+

+ A chat widget to request help is present on select pages of a website but is not available on other pages which would be considered part of a set of web pages. +

+
+
+

+ Finding a specific policy or procedure: An employee who needs to complete a work task may have difficulty locating the specific policy or procedure document on their employer's Web site. A consistently located "How Do I" page may include the information that enables them to independently complete this task. +

+
+
+
+ + + + +

+ Pass +

+
+

+ A link to a help page exists as the third item in a list of five items within a web page’s navigation (the primary navigation, or a footer navigation, for example). But on some of the linked pages from this navigation, the help link is located in a different position in the list of the same navigation items, resulting in a failure of this rule. +

+
+
+

+ Finding a specific policy or procedure: An employee who needs to complete a work task may have difficulty locating the specific policy or procedure document on their employer's Web site. A consistently located "How Do I" page may include the information that enables them to independently complete this task. +

+
+
+

+ More examples +

+

+ WCAG success criteria +

+
+ + Understanding Success Criterion 3.2.6: Consistent Help + +
+

+ Sufficient techniques +

+
+ + Provide a contact-us link in a consistent location + +
+

+ Additional guidance +

+
+ + Cognitive Accessibility Roadmap and Gap Analysis + + + Making Content Usable for People with Cognitive and Learning Disabilities + +
+
+
+
+ +`; + exports[`Guidance Content pages test/repetitiveContent/consistentIdentification/infoAndExamples matches the snapshot 1`] = `