Feat/wcag-checklist2194: added new wcag page #2202
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React, { useContext, useState } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { FormDown, FormUp } from 'grommet-icons'; | ||
| import { | ||
| AnnounceContext, | ||
| Anchor, | ||
| Box, | ||
| CheckBox, | ||
| CheckBoxGroup, | ||
| Paragraph, | ||
| ResponsiveContext, | ||
| Text, | ||
| } from 'grommet'; | ||
|
|
||
| export const Checklist = ({ optionsObjects }) => ( | ||
| <CheckBoxGroup options={optionsObjects}> | ||
| {(option, { checked }) => { | ||
| const [expanded, setExpanded] = useState(false); | ||
|
|
||
| const setChecked = (value) => checked === value; | ||
| const announce = useContext(AnnounceContext); | ||
| const size = useContext(ResponsiveContext); | ||
|
Comment on lines
+21
to
+22
There was a problem hiding this comment. I like that you are experimenting with each of these. |
||
|
|
||
| const Icon = expanded ? FormUp : FormDown; | ||
|
|
||
| return ( | ||
| <Box direction="row"> | ||
| <Box direction="row" gap="medium" pad="xsmall"> | ||
| <CheckBox checked={checked} onChange={() => setChecked(false)} /> | ||
| <Icon | ||
| onClick={() => { | ||
| announce('Expanded content'); | ||
| setExpanded(!expanded); | ||
| }} | ||
| size="medium" | ||
| /> | ||
| </Box> | ||
| <Box direction="row"> | ||
| <Box | ||
| onClick={() => { | ||
| announce('Expanded content'); | ||
| setExpanded(!expanded); | ||
| }} | ||
| focusIndicator={false} | ||
| pad={ | ||
| size === 'small' | ||
| ? { vertical: 'large' } | ||
| : { vertical: 'xsmall' } | ||
| } | ||
| > | ||
| <Text size="large" weight="bold"> | ||
| {option.value} | ||
| </Text> | ||
| {expanded && ( | ||
| <> | ||
| <Paragraph>{option.description}</Paragraph> | ||
| <Anchor | ||
| label={`See Success Criterion ${option.number}`} | ||
| target="_blank" | ||
| href={option.link} | ||
| /> | ||
| </> | ||
| )} | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }} | ||
| </CheckBoxGroup> | ||
| ); | ||
|
|
||
| Checklist.propTypes = { | ||
| optionsOjects: PropTypes.array, | ||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './Checklist'; |
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,85 @@ | ||||||
| import { Checklist } from '../../components'; | ||||||
|
|
||||||
| There are three levels of compliance in the Web Content Accessibility Guidelines (WCAG) which reflect the priority of support: | ||||||
|
There was a problem hiding this comment. I think we should pull up the HPE requirement, mentioning it earlier.
Suggested change
|
||||||
|
|
||||||
| 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. | ||||||
|
Comment on lines
+5
to
+6
There was a problem hiding this comment. 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. |
||||||
| 2. **AA: Ideal Support** | ||||||
| - Required for multiple government and public websites. HPE strives for Level A and AA coverage on all products. | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| 3. **AAA: Specialized Support** | ||||||
| - Usually reserved for websites and applications that serve a specialized audience. | ||||||
|
|
||||||
| ### Success Criteria | ||||||
|
|
||||||
| Each item on the checklist refers to a specific, testable success criterion within the WCAG 2.1 described by a reference number and title. Some accessibility issues align with multiple rules. In these cases, the most relevant criterion is identified for the checklist item. | ||||||
|
|
||||||
| ### Does this checklist guarantee a product is fully accessible? | ||||||
|
|
||||||
| 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 | ||||||
|
There was a problem hiding this comment. I am not familiar with the term "global code" in this context. I was expecting this to be labeled something like "Checklist". There was a problem hiding this comment. 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. There was a problem hiding this comment. 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. |
||||||
|
|
||||||
| Global code affects an entire website or product application. | ||||||
|
|
||||||
| export const globalCodeOptionsObjects = [ | ||||||
|
There was a problem hiding this comment. We should place this in the |
||||||
| { | ||||||
| value: 'Validate your HTML by avoiding significant parsing errors.', | ||||||
|
There was a problem hiding this comment. 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. There was a problem hiding this comment. 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:
There was a problem hiding this comment. 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. |
||||||
| description: | ||||||
| 'Validating your HTML helps to provide a consistent, expected experience across all browsers and assistive technologies.', | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/parsing', | ||||||
| number: '4.1.1: Parsing', | ||||||
| }, | ||||||
| { | ||||||
| value: 'Use a lang attribute on the <html> element.', | ||||||
| description: | ||||||
| 'This allows assistive technologies such as screen readers to pronounce content correctly.', | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/language-of-page', | ||||||
| number: '3.1.1: Language of Page', | ||||||
| }, | ||||||
| { | ||||||
| value: | ||||||
| 'Provide a descriptive and informative <title> element for each page.', | ||||||
| description: | ||||||
| "The <title> element, found in the document's head element, is most often the first information announced by assistive technologies. A specific and helpful <title> element will help users find content and orient themselves within it to begin navigating on the page.", | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/page-titled', | ||||||
| number: '2.4.2: Page Title', | ||||||
| }, | ||||||
| { | ||||||
| value: 'Ensure that viewport zoom is not disabled.', | ||||||
| description: | ||||||
| 'Visually rendered text, including text-based controls, should be scalable by the user, so that they can best see and read content.', | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/resize-text', | ||||||
| number: '1.4.4: Resize Text', | ||||||
| }, | ||||||
| { | ||||||
| value: | ||||||
| 'Use landmark elements to help identify significant content regions of a page.', | ||||||
| description: | ||||||
| "Landmark regions help communicate the layout and important areas of a page. Identifying them correctly can help users quickly access these regions. For example, use the <nav> element to wrap a page's navigation and the <main> element for the page's primary content.", | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/name-role-value', | ||||||
| number: '4.1.2: Name, Role, Value', | ||||||
| }, | ||||||
| { | ||||||
| value: 'Ensure content can be navigated in a linear flow.', | ||||||
| description: | ||||||
| 'When users navigate sequentially through content, they should encounter information in an order that is consistent with the meaning of the page. Remove tabindex attribute values that are not either 0 or -1. Elements that are inherently focusable, such as links or button elements, do not require a tabindex. Elements that are not inherently focusable should not have a tabindex.', | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/focus-order', | ||||||
| number: '2.4.3: Focus Order', | ||||||
| }, | ||||||
| { | ||||||
| value: 'Avoid use of the autofocus attribute.', | ||||||
| description: | ||||||
| 'People who use assistive technologies may be confused or disoriented when focus is moved without action on their end. Using autofocus may also cause extra work for users to navigate out of the focused area and to other parts of the page.', | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/focus-order', | ||||||
| number: '2.4.3: Focus Order', | ||||||
| }, | ||||||
| { | ||||||
| value: 'Allow users to extend session timeouts.', | ||||||
| description: | ||||||
| 'Users need to be given an adequate amount of time to interact with the content of a page. If web functions are time-dependent, users will be unable to perform certain actions. If you cannot remove session timeouts altogether, then allow for users to easily adjust or turn off their session before it ends.', | ||||||
| link: 'https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable', | ||||||
| number: '2.2.1', | ||||||
| }, | ||||||
| ]; | ||||||
|
|
||||||
| <Checklist optionsObjects={globalCodeOptionsObjects} /> | ||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6732,9 +6732,9 @@ ejs@^2.7.4: | |
| integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA== | ||
|
|
||
| electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.488, electron-to-chromium@^1.4.17: | ||
| version "1.4.60" | ||
| resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.60.tgz#2b824d862f068a9794b2b75d66ad40ff44745f18" | ||
| integrity sha512-h53hbEiKC6hijelDgxgkgAUC3PKyR7TmIfvjHnBjUGPMg/3sBuTyG6eDormw+lY24uUJvHkUPzB8dpK8b2u3Sw== | ||
|
|
||
| elegant-spinner@^1.0.1: | ||
| version "1.0.1" | ||
|
|
@@ -8315,8 +8315,8 @@ grommet-styles@^0.2.0: | |
|
|
||
| "grommet@https://github.com/grommet/grommet/tarball/stable": | ||
| version "2.20.1" | ||
| uid d500f00543bc8db77bc7e475edceed3e20fbe233 | ||
| resolved "https://github.com/grommet/grommet/tarball/stable#d500f00543bc8db77bc7e475edceed3e20fbe233" | ||
| dependencies: | ||
| grommet-icons "^4.7.0" | ||
| hoist-non-react-statics "^3.2.0" | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.