Accessibility Conventions and Standards

It is important that the OpenBMC Web UI meet accessibility guidelines established by the World Wide Web Consortium (W3C) (opens new window). These guidelines are known as the Web Content Accessibility Guidelines (WCAG) (opens new window). Making the Web UI accessible to as many users as possible is the right thing to do. In many countries, it is also legally required. Organizations providing interfaces that users with permanent or temporary disabilities can not use, may lose sales or be susceptible to discriminatory lawsuits.

Accessibility Principles

These principles (opens new window) reference a set of international standards from the W3C Web Accessibility Intitiative (WAI) (opens new window).

• Perceiveable (opens new window)
• Operable (opens new window)
• Understandable (opens new window)
• Robust (opens new window)

Semantic HTML

Coding the UI using semantic markup is the most important step in creating an inclusive interface. The use of WAI-ARIA (opens new window) can help make an interface accessible to assistive technologies. However, there are two critical rules to follow:

1. Always favor semantic markup over ARIA
2. No ARIA is better than Bad ARIA

Testing

Assuring the Web UI meets accessibility guidelines requires a combination of automated and manual testing. Automated tests will test the application against common problems such as color contrast and ARIA use. Automated testing can be built into the CI process, integrated with code editors, and run using browser extensions.

The OpenBMC Web UI developers should test their development pages using one of the tools listed in the tools section below. If using Chrome, the Lighthouse application comes bundled with the browser and also includes testing for performance and best practices. If there is an issue that is created when using a Bootstrap-Vue component, we can create an issue in the Bootstrap-vue repo (opens new window). Contributing to the Bootstrap-Vue open-source library, when possible, is strongly encouraged.

Tools

• Deque Axe (opens new window)
• Firefox Accessibility Inspector (opens new window)
• IBM Accessibility Tools (opens new window)
• Lighthouse (opens new window)

Screen Readers

• Jaws - (Windows only) (opens new window)
• Narrator - (Windows only) (opens new window)
• NVDA (Windows only) (opens new window)
• Voiceover (Mac only) (opens new window)

Resources

• Mozilla Developer Network - Accessibility (opens new window)
• Web Content Accessibility Guidelines (WCAG) (opens new window)
• WAI-ARIA Authoring Practices (opens new window)
• WAI-ARIA Basics (opens new window)
• WebAIM Articles (opens new window)
• A11Y Project (opens new window)
• IBM Accessibility (opens new window)
• Inclusive Components (opens new window)