HPE
Design System
Foundation
Components
Templates
Extend
Foundation

Accessibility

Central to the HPE Design System, accessibility is incorporated into all Design System facets, ensuring HPE applications are usable by as many people as possible.

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. We believe that being accessible is a requirement, not an option.

"The power of the Web is in its universality. Access by everyone, regardless of disability, is an essential aspect."

— Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Built into all Design System tools

Creating accessible applications means providing experiences that are easily usable by those who rely on keyboard navigation or screen readers, who are colorblind, or who are experiencing some other temporary, situational, or permanent disability.

Considerations for sight, mobility, hearing, and cognition are incorporated into all HPE Design System components, patterns, and guidance, providing design and development tools for all teams to build accessible applications.

Get started with these resources and tools to perform a baseline audit of the accessibility of your application.

Accessibility in design

Usability testing and best practice research build the foundation for all design decisions. Each HPE Design System Figma file contains a "Use Cases and Research" page detailing the considerations and decision making process for a given component.

Not part of the Design System Figma? See our Designer Guidance to sign up.

As example, the HPE Design System Colors were selected to meet WCAG standards. Notably, text colors are accessible on background colors and call-to-action colors, like HPE Green.

Accessibility in development

We recommend you develop your apps using Grommet because it seamlessly integrates with grommet-theme-hpe and is built to support keyboard navigation, HTML landmarks, and many ARIA attributes out of the box.

While supplemental attributes may need to be implemented and accessibility testing should still be performed, Grommet handles many of the general DOM requirements for you.

For guidance on setting up your development environment, see Developer Guidance.

Resources

These tools can help you take a baseline assessment of the accessibility of your application. While these tools are not exhaustive in identifying all accessibility criteria, they are a powerful start.

  • HPE Video Guides on Accessibility (HPE internal link): A collection of educational videos from HPE Product Accessibility Program Office to assist all stakeholders in understanding and implementing accessible design.
  • HPE Accessible Web, Software & Hardware Design Guides (HPE internal link): Text-based guides from HPE Product Accessibility Program Office on designing and implementing accessible products.
  • WCAG 2.1: A robust set of accessibility design guidelines for software and web-based products. HPE policy is to conform to all applicable guidelines identified as Level A and AA.
  • WAVE (Web Accessibility Evaluation Tool) Browser Plugin: Scans webpages to identify missing HTML requirements and color contrast standards.
  • ANDI Browser Tool: Activate on a page to check the accessibility of images, headings, color contrast, data tables, links, and more.
  • WebAIM Color Contrast Checker: Check color contrast ratios of specific color values to identify if they meet WCAG AA and/or AAA standards.
  • Colorblind Web Page Filter: See what your application looks like to users with various types of colorblindness.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page
© 2021 Hewlett Packard Enterprise
Terms
Privacy
Security
Feedback