Starting in Review Board 4.0, we're aiming to make accessibility a core part of our design process. We want all users to be able to use Review Board, regardless of whether they're using the mouse, keyboard, touch screen, screen reader, or any other form of input device or assistive technology.

<aside> 💡 We only got our feet wet in 4.0/5.0, and will be focusing on improving this for new UI components as we go.

</aside>

Requirements

Any and all new UI components are expected to have:

• Appropriate HTML elements
  • Use semantic elements like <button> instead of something like a <div>
• ARIA roles and attributes
  • Labels/Descriptions (aria-label=, aria-labelledby=, aria-describedby=, etc.)
  • State (aria-hidden=, aria-checked=, aria-busy=, aria-live=, etc.)
  • Roles (role="button", role="alertdialog", etc.)
  • etc.
• Keyboard navigation
  • Tab navigation should work as expected
  • Use Enter, Space, etc. to trigger actions
  • Use Escape to close out of things
  • Arrow-based navigation for lists when appropriate
  • Shortcut keys where appropriate and clear
• Consideration for visual impairment
  • Try to ensure a good color contrast ratio between foreground/background colors (browser dev tools will help guide this — see the tools reference below)
  • Don't rely on colors alone to convey information — use symbols or other visual indicators as well

All CSS Components are expected to document their HTML element, ARIA attribute, and keyboard requirements. See Writing CSS/LessCSS Docs.

Best Practices

<aside> 📍 Update this as we figure out new best practices.

This is absolutely not a comprehensive list!

</aside>

Font Awesome/Icon Fonts