1# Accessibility Conventions and Standards
2
3It is important that the OpenBMC Web UI meet accessibility guidelines
4established by the [World Wide Web Consortium (W3C)](https://www.w3.org/). These
5guidelines are known as the [Web Content Accessibility Guidelines
6(WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/). Making the Web UI
7accessible to as many users as possible is the right thing to do. In many
8countries, it is also legally required. Organizations providing interfaces that
9users with permanent or temporary disabilities can not use, may lose sales or be
10susceptible to discriminatory lawsuits.
11
12## Accessibility Principles
13These
14[principles](https://www.w3.org/WAI/fundamentals/accessibility-principles/)
15reference a set of international standards from the [W3C Web Accessibility
16Intitiative (WAI)](https://www.w3.org/WAI/).
17
18- [Perceiveable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable)
19- [Operable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#operable)
20- [Understandable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#understandable)
21- [Robust](https://www.w3.org/WAI/fundamentals/accessibility-principles/#robust)
22
23## Semantic HTML
24Coding the UI using semantic markup is the most important step in creating an
25inclusive interface. The use of
26[WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) can help make an
27interface accessible to assistive technologies. However, there are two critical
28rules to follow:
29
301. Always favor semantic markup over ARIA
312. No ARIA is better than Bad ARIA
32
33## Testing
34Assuring the Web UI meets accessibility guidelines requires a combination of
35automated and manual testing. Automated tests will test the application against
36common problems such as color contrast and ARIA use. Automated testing can be
37built into the CI process, integrated with code editors, and run using browser
38extensions.
39
40The OpenBMC Web UI developers should test their development pages using one of
41the tools listed in the tools section below. If using Chrome, the Lighthouse
42application comes bundled with the browser and also includes testing for
43performance and best practices. If there is an issue that is created when using
44a Bootstrap-Vue component, we can [create an issue in the Bootstrap-vue
45repo](https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose).
46Contributing to the Bootstrap-Vue open-source library, when possible, is
47strongly encouraged.
48
49## Tools
50- [Deque Axe](https://www.deque.com/axe/)
51- [Firefox Accessibility
52  Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
53- [IBM Accessibility Tools](https://www.ibm.com/able/toolkit/tools)
54- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
55
56## Screen Readers
57- [Jaws - (Windows only)](https://webaim.org/articles/jaws/)
58- [Narrator - (Windows
59  only)](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)
60- [NVDA (Windows only)](https://webaim.org/articles/nvda/)
61- [Voiceover (Mac only)](https://webaim.org/articles/voiceover/)
62
63## Resources
64- [Mozilla Developer Network -
65  Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
66- [Web Content Accessibility Guidelines
67  (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
68- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/)
69- [WAI-ARIA
70  Basics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
71- [WebAIM Articles](https://webaim.org/articles/)
72- [A11Y Project](https://a11yproject.com/)
73- [IBM Accessibility](https://www.ibm.com/able/)
74- [Inclusive Components](https://inclusive-components.design/)
75
76