*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *
Accessibility
- Nick Harris
Reckitt is home to the world's best loved and trusted hygiene, health and nutrition brands and we are united by one passionate purpose: a cleaner, healthier world for all.
It is all of our responsibilities to make sure that the products and services we create are accessible to everyone.
Creating accessible products and services doesn’t just help people with disabilities. By optimising for accessibility we provide a better experience for all users.
The Chameleon Design system is built to comply with accessibility best practices and aims for AA compliance across all components.
See the Web Content Accessibility Guidelines for information.
What makes an experience accessible?
Accessible experiences are built around the Four Principles of Accessibility which lay the foundation necessary for anyone to use web content.
Perceivable: Can't be invisible to all of their senses
Operable: Interface cannot require interaction that a user cannot perform
Understandable: Content or operation cannot be beyond their understanding
What steps do you need to take to make sure your project is accessible?
Using the design system is a great start as every component is designed to be accessible out of the box.
Components are also built with the principle of progressive enhancement which means that every component will provide users with a usable experience, even if CSS, and Javascript fail to load.
There are still accessibility considerations you need to think about when using the design system.
Here are a few to get your started:
Do’s
Make sure you include all necessary alt text
Design your pages with a clear content hierarchy and consider where you want to break up content with headings
Make sure your colour choices meet the required contrast ratios
Make sure any images have relevant file names.
Provide transcripts for videos that need them
Avoid capitalisation
Dont’s
Use images that contain text
Write uninformative links and heading - for example, Click here
Only use colour to convey meaning
Make users read long blocks of content
Useful references
If you want to learn more about what makes a digital experience accessible, here are great some resources.
Accessibility and assisted digital - Service Manual - GOV.UK
WebAIM: WebAIM's WCAG 2 Checklist