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