Accessibility Principles
What is Accessibility?
Web accessibility ensures that people with disabilities can perceive, understand, navigate, interact with, and contribute to the applications you create. This means that pages are Perceivable, Operable, Understandable and Robust. This includes providing keyboard interaction alternatives for all mouse-based actions, properly identifying all form fields and buttons, text-based alternatives for all images, videos, icons and SVGs, as well as building components that properly convey their identity, operation model, and state to assistive technologies.
The Design System enables accessible development by providing a set of semantically correct components, each with appropriate ARIA markup so they can be identified correctly to users of assistive technologies
Standards Compliant Markup
The semantic markup and use of ARIA roles in our components are based on the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) for 2.1 level AA. This markup is the starting point for building accessible components.
Keyboard Navigation
While we do not provide the JavaScript that is necessary to make our components interactive, we offer advice on how to use scripting languages to create keyboard-accessible components.
Appropriate use of color
Our components follow the two main rules of accessibility as it relates to color:
We never use color as the only means of providing information or requesting an action. The combinations of text and their background colors do not fall below the WCAG recommended threshold ratio of 4.5:1 for standard or small text and 3:1 for larger text.
Accessibility Check List
Accessibility testing is a subset of usability testing where in the users under consideration of people with all abilities and disabilities. The significance of this testing is to verify both usability and accessibility.
Minimum requirements:
- Aim to conform to international standards of WCAG 2.1 level AA
- Verify and ensure pages and user journeys have been manually tested. Sites’ document object models (DOM) have a logical and intuitive navigation order when using keyboard tabbed browsing and that it has a focusable state to indicate where a user is on the page
- Do user testing including people with disabilities to catch potential issues that testing tools don’t. Contact ITSOP with questions
- Verify and ensure all webpages have meaningful Page Title and Headline / (H1) tags for webpages and
tags that follow sequential order (H1, H2, H3, etc.) - Typography and branding that are accessible
- Verify and ensure all meaningful alternative text tags (“alt text”) for all images
- No flashing or flickering media content that could trigger seizures
- A Site Accessibility page has been created. See worldbank.org's Site Accessibility page as an example
Best practice:
Verify and ensure
- Link text is meaningful
- Color alone isn’t used to convey information
- Multimedia (e.g., videos, podcasts) includes captions and/or transcripts
- Written content is as clear as possible
- Form fields and tables have clear labels and focus styles
- Verify and ensure form elements are associated only with a single label
- Verify and ensure Frames/iFrames have "Title" attribute value
- Verify and ensure all form elements (Input/Select/Text Area) have corresponding label value