Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/accessibility-videos-2008: added new videos section #2009

Merged
merged 8 commits into from
Nov 4, 2021
Merged

Feat/accessibility-videos-2008: added new videos section #2009

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fc8642b
added new videos section for accessibility page
amandadupell Nov 2, 2021
33c50ee
format documents
amandadupell Nov 2, 2021
4487154
renamed some files
amandadupell Nov 2, 2021
0949eee
added to sections in foundations.js
amandadupell Nov 2, 2021
7fae44c
Update aries-site/src/pages/foundation/accessibility.mdx
amandadupell Nov 2, 2021
425cddb
abstracted some things and moved files around
amandadupell Nov 3, 2021
2daa98e
Update aries-site/src/pages/foundation/accessibility.mdx
amandadupell Nov 3, 2021
93e69fa
made adjustment based on quote block error
amandadupell Nov 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions aries-site/src/components/cards/LinkCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Box, Card, CardBody, Text } from 'grommet';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Link as LinkIcon } from 'grommet-icons';
import { Link as LinkIcon, CirclePlay } from 'grommet-icons';

export const LinkCard = ({ title, link }) => {
export const LinkCard = ({ link, title, type }) => {
const Wrapper = Link;
const wrapperProps = {
href: link,
Expand All @@ -21,7 +21,11 @@ export const LinkCard = ({ title, link }) => {
background="background-back"
flex={false}
>
<LinkIcon size="large" />
{type === 'guides' ? (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Though this works, from a design perspective, this probably doesn't scale very well. If we were to add a handful more "types", this could get messy.

What if LinkCard could be "dumb" and not have any logic in it? We could make it so that it just a presentation/layout component and the caller could pass it anything they want.

export const LinkCard = ({ icon, link, title }) => {

<LinkIcon size="large" />
) : (
<CirclePlay size="large" />
)}
</Box>
<Text color="text-strong" weight="bold" size="xlarge">
{title}
Expand Down
48 changes: 42 additions & 6 deletions aries-site/src/examples/foundation/accessibility/GuideCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,62 @@ const guides = [
'https://hpe.sharepoint.com/:b:/s/F5/CTO/Office/Accessibility/EbNhmRbHK6BCsiyLbRRNaE0BQZQlM3D2lVM60cL3nPR67g?e=dgfrFs',
},
{
title: 'Documentation to Inform and Enable ',
title: 'Documentation to Inform and Enable',
link:
'https://hpe.sharepoint.com/:b:/s/F5/CTO/Office/Accessibility/EbKbkBd8q2NLkmc2KKz5j_4BnuVCs6voFzhH2KwKuqFFIQ?e=ZcMBfn',
},
];

export const GuideCards = () => {
const videos = [
{
title: 'Designing Accessible Software',
link:
'https://hpe.sharepoint.com/portals/hub/_layouts/15/PointPublishing.aspx?app=video&p=p&chid=33203c05%2D71a0%2D49cf%2D8daf%2De7bc7c0c920d&vid=7f47a741%2D9bfe%2D40d0%2Db084%2D01f41fe12cc0&from=1',
},
{
title: 'Layout and Page Structure',
link:
'https://hpe.sharepoint.com/portals/hub/_layouts/15/PointPublishing.aspx?app=video&p=p&chid=33203c05-71a0-49cf-8daf-e7bc7c0c920d&vid=1edcc9f5-9192-49d3-a139-6b695a098695&from=1',
},
{
title: 'Understanding Keyboard Design',
link:
'https://hpe.sharepoint.com/portals/hub/_layouts/15/PointPublishing.aspx?app=video&p=p&chid=33203c05%2D71a0%2D49cf%2D8daf%2De7bc7c0c920d&vid=5989e0ea%2D716e%2D42f0%2Da4f0%2Dca9944b20c07&from=1',
},
{
title: 'Tab Order and on-Screen Focus',
link:
'https://hpe.sharepoint.com/:b:/s/F5/CTO/Office/Accessibility/EbKbkBd8q2NLkmc2KKz5j_4BnuVCs6voFzhH2KwKuqFFIQ?e=ZcMBfn',
},
];

const SectionCards = ({ items, type }) => {
const size = useContext(ResponsiveContext);
const href =
type === 'guides'
? 'https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/accessible-web-software-and-hardware-design.aspx'
: 'https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/accessible-design-training.aspx';

return (
<Box gap="large">
<Grid
columns={size !== 'small' ? 'medium' : '100%'}
rows="auto"
gap="medium"
>
{guides.map(item => (
<LinkCard key={item.title} title={item.title} link={item.link} />
{items.map(item => (
<LinkCard
type={type}
key={item.title}
title={item.title}
link={item.link}
/>
))}
</Grid>
<Button
alignSelf="start"
href="https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/accessible-web-software-and-hardware-design.aspx"
label="View all guides"
href={href}
label={`View all ${type}`}
size="large"
target="_blank"
rel="noreferrer noopener"
Expand All @@ -50,3 +83,6 @@ export const GuideCards = () => {
</Box>
);
};

export const GuideSection = () => <SectionCards type="guides" items={guides} />;
export const VideoSection = () => <SectionCards type="videos" items={videos} />;
21 changes: 11 additions & 10 deletions aries-site/src/pages/foundation/accessibility.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { GuideCards } from '../../examples/foundation';
import { GuideSection, VideoSection } from '../../examples/foundation';

At HPE, we believe in being a force for good. We solve for humanity with humanity.
We use technology to make the world better. We are unconditionally inclusive.
Expand Down Expand Up @@ -29,7 +29,13 @@ baseline audit of the accessibility of your application.

The following collection of guides from the [HPE Product Accessibility Program Office](https://hpe.sharepoint.com/sites/F5/CTO/Office/Accessibility/Pages/index.aspx) help designers and developers create accessible products which meet the needs of HPE’s clients.

<GuideCards />
<GuideSection />

## Accessible Product Design Videos
halocline marked this conversation as resolved.
Show resolved Hide resolved

A collection of internal short, educational videos from HPE explaining basic accessible design principles in software and web technologies. Each video is less than 10 minutes and is accompanied by a “Pocket Guide” with key takeaways that can be found [here](https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/accessible-design-training.aspx).
amandadupell marked this conversation as resolved.
Show resolved Hide resolved

<VideoSection />

## Accessibility in Design

Expand Down Expand Up @@ -60,26 +66,21 @@ For guidance on setting up your development environment, see [Developer Guidance

## Government Standards and Regulations

To help enforce the World Wide Web's accessibility, policies and laws have been put in place which require certain standards to be met for all web, software and non-web documents.
To help enforce the World Wide Web's accessibility, policies and laws have been put in place which require certain standards to be met for all web, software and non-web documents.

As a designer or developer, we are morally responsible for creating accessible products, and it is necessary that we are aware of the mandated standards established across the world. The following links provide insight into how governments and policy makers have come to include accessibility into laws, emphasizing the importance of making the web inclusive for all. In general, it is helpful to understand some of these policies and how they may affect your work product.

- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/): A robust set of international accessibility design guidelines. The guidelines identified as level A and AA are the required design elements for all applications and are incorporated in the US Section 508 standard and HPE's Design System.
- [U.S. Section 508](https://www.section508.gov/): This site provides guidance for IT accessibility, covering program management, procurement, tools, training, and policy compliance.
- [U.S. Section 508](https://www.section508.gov/): This site provides guidance for IT accessibility, covering program management, procurement, tools, training, and policy compliance.
- [Americans with Disabilities Act (ADA)](https://www.ada.gov/ada_intro.htm): An equal opportunity law that prohibits discrimination against people with disabilities where public services are offered — now including the public web domain.
- [European Accessibility Act (EAA)](https://ec.europa.eu/social/main.jsp?catId=1202): A directive that aims to improve the market for accessible products and services that have been identified as most important for individuals with disabilities.

## Internal Resources

- [HPE Video Guides on Accessibility (HPE internal link)](https://hpe.sharepoint.com/sites/f5/cto/office/Accessibility/Pages/accessible-design-training.aspx): A collection of educational videos from HPE Product Accessibility Program Office to assist all stakeholders in understanding and implementing accessible design.

## External Resources

- [WebAIM Introduction to Web Accessibility](https://webaim.org/intro/): An introduction on how accessibility improves the Web for all users.
- [The A11y Project Checklist](https://www.a11yproject.com/checklist/): A checklist using WCAG 2.1 as a reference for developers and designers to ensure their product's accessibility.
- [The A11y Project Checklist](https://www.a11yproject.com/checklist/): A checklist using WCAG 2.1 as a reference for developers and designers to ensure their product's accessibility.
- [U.S. Web Design System Principles](https://designsystem.digital.gov/design-principles/#embrace-accessibility): These principles and key guidelines outline how you should approach accessibility from a design system perspective.
- [WAVE (Web Accessibility Evaluation Tool) Browser Plugin](https://wave.webaim.org/extension/): Scans webpages to identify missing HTML requirements and color contrast standards.
- [ANDI Browser Tool](https://www.ssa.gov/accessibility/andi/help/install.html): Activate on a page to check the accessibility of images, headings, color contrast, data tables, links, and more.
- [WebAIM Color Contrast Checker](https://webaim.org/resources/contrastchecker/): Check color contrast ratios of specific color values to identify if they meet WCAG AA and/or AAA standards.
- [Colorblind Web Page Filter](https://www.toptal.com/designers/colorfilter/): See what your application looks like to users with various types of colorblindness.