This page serves as a statement on our position regarding web accessibility and efforts to both create and support a better web experience for everyone.
The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.
Where possible and where knowingly, designers, developers and content people that make the Mesh design system strive to be inclusive and support a wide diversity of users. We attempt to accommodate everyone and provide the best experience possible, however we will be the first to admit that there will be things missed and areas for greater investment — that is why we highly encourage any and all feedback to make the experience we provide as accessible as possible. So if you spot something please shout out. We are always learning.
We use ARIA tags where appropriate and strive to continue to invest effort into creating a accesible library of components which help to create a more accessible web for our users.
Consideration is always applied when using heading levels which helps to ensure that a page and it's content are well organised and also to provide a structure that can aid assistive technologies with navigation.
Our core brand color palette uses a small, but strict selection of colors that when used together create high contrast designs and interface elements. As a rule, we make sure that all colors which make their way into the Mesh design system meet a minimum AA contrast ratio.
There are known semantic markup issues that largely come from the Mesh design system team working on a component level and the consumers of Mesh executing at a page and app level. As a result of this disparity, we can't guarantee a complete accessible outcome. Therefore a degree of responsibility is placed on consumers of Mesh to apply appropriate html landmarks and heading hierarchies when building pages and experiences.
For components that include our Heading component there is an option to set the heading level ("h3" for example) that will allow a heading style to be applied to the underlying DOM element, although this additional prop is not comprehensive across the design system.
If there are any accesibility issues that you have identified or recommend we turn our attention to, please let us know. We are always happy to recieve feedback and suggestions.