Feat/wcag-checklist2194: added new wcag page #2202

amandadupell · 2022-01-11T19:27:53Z

Deploy Preview

What does this PR do?

Adds new WCAG checklist page with Global Code section and WCAG checklist section to the Accessibility page.

Where should the reviewer start?

Accessibility page and WCAG page

What testing has been done on this PR?

Manual

In addition to the feature you are implementing, have you checked the following:

General UX Checks

Small, medium, and large screen sizes
Cross-browsers (FireFox, Chrome, and Safari)
Light & dark modes
All hyperlinks route properly

Accessibility Checks

Keyboard interactions
Screen reader experience
Run WAVE accessibility plugin (Chrome)

Code Quality Checks

Console is free of warnings and errors
Passes E2E commit checks
Visual snapshots are reasonable

How should this be manually tested?

Run locally or deploy link

Any background context you want to provide?

What are the relevant issues?

#2194 #2191 #1816

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Yes

Is this change backwards compatible or is it a breaking change?

Compatible

…ystem into feat/wcag-checklist2194

halocline · 2022-01-11T21:07:12Z

aries-site/src/pages/foundation/wcag-checklist.mdx

+
+No. There is no such thing as a "100%" accessible product. However, this checklist prompts designers and developers to check for coverage of a wide range of disability conditions. Addressing these issues will improve experiences for all users who access your product and increase overall accessibility.
+
+## Global Code


I am not familiar with the term "global code" in this context.
Can you share more about its meaning? Is there a resource you can send me?

I was expecting this to be labeled something like "Checklist".

This entire page is serving as the checklist with a brief introduction and the main headers being the sections the checklist will be divided into. I wasn't sure about having another header on the page be "Checklist" if the entire page serves as the checklist.

I think we will need a table of contents moving forward as it gets longer also since there will be a lot of sections.

Mentioned this below, but it'd be nice to see the overall content outline for this page (sans detail). This will help with content hierarchy, headings and such.

halocline · 2022-01-11T21:10:13Z

aries-site/src/pages/foundation/wcag-checklist.mdx

+
+Global code affects an entire website or product application.
+
+export const globalCodeOptionsObjects = [


We should place this in the /examples/foundation/accessibility/... directory as opposed to in the .mdx file. Other pages have created a data.js file for similar purposes. See "tag" as an example.

halocline · 2022-01-11T21:30:51Z

aries-site/src/data/structures/foundation.js

+    category: 'Philosophy',
+    cardOrder: 3,
+    description: `A checklist for ensuring a product's accessibility is up
+    to WCAG 2.1 standards.`,


Can we link to WCAG 2.1 here?

halocline · 2022-01-11T21:33:42Z

aries-site/src/pages/foundation/accessibility.mdx

+import { getPageDetails, getRelatedContent, nameToPath } from '../../utils';
+import { CardGrid } from '../../components';
+
+export const wcagChecklistCard = [getPageDetails('WCAG Checklist')];


Why is this being exported here? Where is it being consumed other than this file?

This seems like it should be placed in examples/foundation/accessibility

Using export in MDX is the convention for using variables/JSX in the same .mdx file that it's created in. If we want to avoid any variables/JSX being created directly in .mdx files, then I agree with moving it to the examples folder.

halocline · 2022-01-11T21:35:01Z

aries-site/src/pages/foundation/accessibility.mdx

+
+The following checklist is a resource for researchers, designers and developers to use to check their product's accessibility. It uses the Web Content Accessibility Guidelines (WCAG) 2.1 as a reference point, as the WCAG is a shared accessibility standard for individuals, organizations and governments worldwide.
+
+<CardGrid cards={wcagChecklistCard} />


This seems like it should be placed in examples/foundation/accessibility and imported for use here.

halocline · 2022-01-11T21:45:08Z

aries-site/src/pages/foundation/wcag-checklist.mdx

+1. **A: Essential**
+   - If this is not met, assistive technologies will not be able to aid in reading, understanding or operating the page or product.


The formatting of this list has a lot going on with the numbering, A-level and sub-bullets.

This might be a candidate to move to a component implementation.

halocline · 2022-01-11T21:58:46Z

aries-site/src/components/checklist/Checklist.js

+  Text,
+} from 'grommet';
+
+export const Checklist = ({ optionsObjects }) => (


Do you have designs you are referencing for this checklist implementation? This feels like a pattern I haven't seen before and I have the following reactions:

Do we need the show/collapse treatment?

I was not able to use the keyboard to check/uncheck.

I found the screen reader experience difficult.

I am wondering if we should be using here, where each list item contains a checkbox, title, description, and url. resolves to an which does not seem right.

The design pattern came mostly from the checklist that I took inspiration from: https://www.a11yproject.com/checklist/ which has a show/collapse for more information and a link to the success criterion. I think we could work with not having the show/collapse and instead just having a list of checkboxes with a title, description and url. Wanted to get some initial feedback on this pattern before moving forward.

The screen reader experience was one that I am still working with, as I made note of the way the screen reader is reading aloud the icons and not allowing the check/uncheck behavior.

halocline · 2022-01-11T22:03:50Z

aries-site/src/components/checklist/Checklist.js

+      const announce = useContext(AnnounceContext);
+      const size = useContext(ResponsiveContext);


I like that you are experimenting with each of these.

halocline · 2022-01-11T22:05:01Z

aries-site/src/components/checklist/Checklist.js

+      return (
+        <Box direction="row">
+          <Box direction="row" gap="medium" pad="xsmall">
+            <Check


This doesn't seem right. We should be consuming the Design System's Checkbox instead of reinventing it here.

halocline · 2022-01-11T22:08:40Z

aries-site/src/pages/foundation/wcag-checklist.mdx

+
+export const globalCodeOptionsObjects = [
+  {
+    value: 'Validate your HTML by avoiding significant parsing errors.',


What are we using for reference to create this list? Can you share where you are sourcing / getting inspiration from?

The presentation order seems a bit jumbled and isn't flowing for me. Can we group / order in a more intuitive manner? I am having trouble following.

Here is the inspiration: https://www.a11yproject.com/checklist/

For this section in particular, I am taking from their grouping of items that relate to "global code" or the code that affects the entire page or product. These are usually easy and fast things to check first for overall functionality. Ensuring these things are in order would be a good first pass at the accessibility of the site.

Moving forward, the next sections will continue to draw inspiration from this checklist but I am cross referencing with more checklists that I have looked into to determine the best way to break up the WCAG:

https://webaim.org/standards/wcag/WCAG2Checklist.pdf

https://tetralogical.com/articles/wcag-primer/

https://boia.docsend.com/view/vwmnvs8?utm_medium=email&_hsmi=172511982&_hsenc=p2ANqtz-86ezk11520hPmuK4KogGfn51aCwbHoI-CF1iKl1uCgJA37sRXrIm4BLegl6y6uIbxcacWA29d2fUPnI5Ps8KOiYe2DFg&utm_content=172511982&utm_source=hs_automation

https://www.w3.org/WAI/WCAG21/Understanding/

I'd be interested in seeing the bullet-pointed "outline" of the checklist to get a sense of the vision. It doesn't (nor shouldn't) have all the detail at this stage, rather it serves as a roadmap for what this checklist might look like.

taysea · 2022-01-12T00:37:06Z

Matt gave some good pointers related to code-specifics, so I would second many of his comments there.

I think a broader question I have is thinking about what we are hoping to solve by adding this page on the site. I love the idea of having a tangible checklist that teams can reference when developing and testing their applications. However, some questions that come to mind as I'm looking at this are:

Is this checklist fairly stable or are rules often added / changed? Just thinking ahead to maintainability of us writing this checklist ourselves. I also know that Lauren Britton had begun some work with the Bills on creating an accessibility checklist that would span various stages of product design/development cycles -- do you know the status of any of that? just want to loop in that work potentially if there is any momentum.
Currently, when I refresh the page all my checkmarks are lost vs on the A11Y Project the checkmarks persist even when I close and re-open the window. Saying this to prompt the question of "What is the best format to provide this checklist in?" I assume a team will not be able to go through the entire checklist in a single session.

amandadupell · 2022-01-14T17:17:31Z

Matt gave some good pointers related to code-specifics, so I would second many of his comments there.

I think a broader question I have is thinking about what we are hoping to solve by adding this page on the site. I love the idea of having a tangible checklist that teams can reference when developing and testing their applications. However, some questions that come to mind as I'm looking at this are:

Is this checklist fairly stable or are rules often added / changed? Just thinking ahead to maintainability of us writing this checklist ourselves. I also know that Lauren Britton had begun some work with the Bills on creating an accessibility checklist that would span various stages of product design/development cycles -- do you know the status of any of that? just want to loop in that work potentially if there is any momentum.

Currently, when I refresh the page all my checkmarks are lost vs on the A11Y Project the checkmarks persist even when I close and re-open the window. Saying this to prompt the question of "What is the best format to provide this checklist in?" I assume a team will not be able to go through the entire checklist in a single session.

i brought spoke to bill today about working with lauren and he forwarded along the checklist that they worked on here: https://hpe.sharepoint.com/:x:/t/hpe-design/EQCuEhbnzChIvPdyxmAh63MBvUO7d6no5eGwIZ0brfiKHQ?e=j5Indu

this list seems to be focused on questions people should ask themselves as they work and review their product. i think we could use some of these questions as a pre-cursor to the actual WCAG-aligned checklist.

in terms of management, this list would only need to be updated as new versions of the WCAG are published. they aren't released often and they are always backwards compatible so this list would potentially only expand to the new rules and criteria that is added. some more about how stable the wcag is here: https://www.w3.org/WAI/standards-guidelines/wcag/faq/#done

for your second point, i was wondering how we could store the checklist state or allow for users to clear entire sections. i agree that people would probably not be able to go through the entire checklist in one sitting, so i think persisting the checked items would make sense with allowing for quick clearing.

amandadupell added 11 commits January 11, 2022 13:35

added new wcag page

dd1b5fb

small adjustments

a56069b

format document

7b33beb

proptypes

3a299bf

small name

f817d7a

small addition

c640fe3

Merge branch 'master' of https://github.com/amandadupell/hpe-design-s…

d5ec326

…ystem into feat/wcag-checklist2194

added related section

e5cf17e

small typo fixes

958c724

yarn file

a7ead3e

added name to checklist item

8def1f5

amandadupell linked an issue Jan 11, 2022 that may be closed by this pull request

Start and Add Global Code Section for WCAG Rules #2194

Closed

small addition

fe0e72f

halocline reviewed Jan 11, 2022

View reviewed changes

amandadupell added 2 commits January 14, 2022 13:36

small changes

cbf8310

merge and yarn

bfc8ecc

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/wcag-checklist2194: added new wcag page #2202

Feat/wcag-checklist2194: added new wcag page #2202

amandadupell commented Jan 11, 2022 •

edited by halocline

Loading

halocline Jan 11, 2022

amandadupell Jan 11, 2022

halocline Jan 12, 2022

halocline Jan 11, 2022

halocline Jan 11, 2022

halocline Jan 11, 2022

halocline Jan 11, 2022

taysea Jan 12, 2022

halocline Jan 11, 2022

halocline Jan 11, 2022

halocline Jan 11, 2022

amandadupell Jan 11, 2022

halocline Jan 11, 2022

halocline Jan 11, 2022

halocline Jan 11, 2022

amandadupell Jan 11, 2022

halocline Jan 12, 2022

taysea commented Jan 12, 2022

amandadupell commented Jan 14, 2022


		No. There is no such thing as a "100%" accessible product. However, this checklist prompts designers and developers to check for coverage of a wide range of disability conditions. Addressing these issues will improve experiences for all users who access your product and increase overall accessibility.

		## Global Code


		Global code affects an entire website or product application.

		export const globalCodeOptionsObjects = [


		The following checklist is a resource for researchers, designers and developers to use to check their product's accessibility. It uses the Web Content Accessibility Guidelines (WCAG) 2.1 as a reference point, as the WCAG is a shared accessibility standard for individuals, organizations and governments worldwide.

		<CardGrid cards={wcagChecklistCard} />

		1. A: Essential
		- If this is not met, assistive technologies will not be able to aid in reading, understanding or operating the page or product.

		const announce = useContext(AnnounceContext);
		const size = useContext(ResponsiveContext);

Feat/wcag-checklist2194: added new wcag page #2202

Are you sure you want to change the base?

Feat/wcag-checklist2194: added new wcag page #2202

Conversation

amandadupell commented Jan 11, 2022 • edited by halocline Loading

What does this PR do?

Where should the reviewer start?

What testing has been done on this PR?

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taysea commented Jan 12, 2022

amandadupell commented Jan 14, 2022

amandadupell commented Jan 11, 2022 •

edited by halocline

Loading