Accessibility

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.

In the video below, Bill Tipton, an HPE Product Accessibility Champion, discusses his role and the importance of inclusive design and development.

Everyone has the right to fully access and take advantage of the web. Web accessibility is focused on making content usable for the widest set of people, including those with disabilities. Aligned with the Web Content Accessibility Guidelines (WCAG) 2.1, HPE adheres to the following four core principles to provide users with the most accessible experience:

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 permanent, temporary, or situational disability.

Accessibility covers a spectrum of disabilities, including but not restricted to blindness, low vision, hearing and cognitive impairments and situational disabilities. From using glasses to aid with sight to a temporary broken bone to carpal tunnel, about 25% of the United States population lives with some type of disability, permanent or not.

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.

The following collection of guides from the HPE Product Accessibility Program Office help designers and developers create accessible products which meet the needs of HPE’s clients.

A collection of 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 under HPE Accessible Design Training.

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

As an 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.

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

We recommend you develop your apps using Grommet because it seamlessly integrates with grommet-theme-hpeand 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.

The following are actions you can incorporate into your workflow to better test and ensure accessibility across the board:

• Accessibility first. If accessibility is incorporated into the design process and development lifecycle as early as possible, many violations could be avoided in the future. More research, dialogue, testing and empathy will increase the accessibility of HPE products.
• Conduct research. It is important to understand the limitations and pain points of the audience you are trying to engage with and build for. Read about the current best practices and standards for the interface you are building. Understand how users with disabilities will interact with your product.
• Try it yourself. When testing your products manually by yourself, it is important to simulate the experience of a person with a disability to the best of your capabilities in order to build empathy. For example:
  • Turn your monitor off when using a screen reader.
  • Avoid any reliance on your mouse.
  • Use technologies to aid in simulating disabilities such as color blindness, dyslexia and tunnel vision.
• Observe real people. The best way to understand the problems that users with disabilities face is to see how they navigate in their daily lives. Break down assumptions by learning about disabilities outside of the context of the web, too.
• Test with real users. Automated testing tools only catch approximately 30-50% of accessibility violations. Manual testing is essential to thoroughly conducting an accessibility test on a product. Test with a variety of users with disabilities to ensure full coverage. Bill Tipton, from the Product Accessibility Office, is an excellent internal resource for usability testing. Bill has used a screen reader in his daily life since 1999 when he lost his eyesight. Please email him or Bill Bettega with any of your product testing questions and they will respond at the earliest convenience.
• Be an advocate. Testing does not end at the final report of accessibility violations of a product. To further advance accessibility, after testing, you should remain an active ally and advocate for the disabled community. Amplifying all voices will lend a hand to making the internet more inclusive.

The following testing tools can be used to help check code, designs, and applications for accessibility. Automated testing tools will not catch 100% of your product's accessibility violations, but offer a good initial report of issues to track and fix.

• Lighthouse Github Action: Built into the Design System repo, this Github action performs a Lighthouse audit on open pull requests to ensure no accessibility violations, among other checks.
• axe-core: An accessibility testing engine built to integrate with existing functional testing to help automate accessibility checks.
• axe-testcafe: A TestCafe module that allows you to use the aXe accessibility engine in TestCafe tests. Some use of these tests has been incorporated into the Design System testing.

• AxeDev Tools: Identifies violations and pinpoints them so you are able to easily see and fix them.
• Access Assistant: Offered by Level Access, this tool identifies the most common, highest risk accessibility violations on a product. Reports can be saved to monitor compliance over time.
• WAVE (Web Accessibility Evaluation Tool) Browser Plugin: Scans webpages to recognize missing HTML requirements and color contrast standards.
• Lighthouse: Integrated into Chrome, this tools is available as a tab after clicking 'Inspect' on a webpage and will generate an accessibility report for the page.
• ANDI Browser Tool: Activate on a page to check the accessibility of images, headings, color contrast, data tables, links, and more.

• Silktide: An extension tool that helps simulate disabilities on the web including color blindness, dyslexia, tunnel vision, cataracts and blindness.
• 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.

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: 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: This site provides guidance for IT accessibility, covering program management, procurement, tools, training, and policy compliance.
• Americans with Disabilities Act (ADA): 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): A directive that aims to improve the market for accessible products and services that have been identified as most important for individuals with disabilities.

• WebAIM Introduction to Web Accessibility: An introduction on how accessibility improves the Web for all users.
• The A11y Project 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: These principles and key guidelines outline how you should approach accessibility from a design system perspective.