Accessibility

Accessibility is the ability of user interfaces to allow best usability to as many user groups as possible, regardless devices used, user disabilities, age, situational limitations, etc. Accessibility (A11Y) is best achieved when considered early in the design and development process. But it must still be always kept in mind during the entire lifecycle of Bauhaus Design System in order to meet the needs of different user types in different use cases.

We must always rely on semantic HTML when building our components. Along with many other benefits of using the correct HTML element for the correct purpose, it can make the great deal of web contents accessible with the default accessibility attributes without too much effort. As an initial approach the following accessibility considerations are addressed:

Vision

Users with low vision can have different needs depending on the nature of their visual impairment. Users may have difficulty with color differentiation, blurriness, or lack of vision in central or peripheral areas. These needs mean that interfaces should not rely only on color to communicate information, palettes need to have sufficient contrast, and layouts should be responsive when font sizes are increased. The following practices are to be followed:

• Color should not be the only differentiator when it comes to interactive elements. Distinguishable borders, sufficient contrast, icons and accessibility properties of HTML tags must be employed to ensure maximum accessibility.
• Rely on Contrast Table that is made according to WCAG (Web Content Accessibility Guidelines) compliance when choosing a color pair, especially when it is concerning text on background. Color pairs are given one of the three values A, AA, and AAA in ascending order of accessibility. It is best to strive for AAA when possible. AA is acceptable and A is avoided except for some scenarios where it is imminent, such as Disabled states.
• Cursor must always have the most prominent appearance in terms of shadows, edges, and contrast.
• Screen readers must be able to communicate each element explicitly, thus relying on semantic HTML,'alt' and 'aria-label' attributes is crucial in required areas.

• Shadows can be a tricky topic when it comes to accessibility, as Bauhaus DS follows some features of Neumorphism (embossed and debossed effects) that in many cases rely on shadows only to communicate borders. Therefore, we must utilize this UI trend sparingly. Making the user interfaces accessible is of utmost importance and must overrule the aesthetic choices. So where in doubt, it is always better to go for more accessible design decisions and rely on usability testing to validate these decisions. A good example of this is shown below. You can see that default states of certain components (input elements and secondary buttons) have Neumorphic style, as well as hover states of certain components. However, there is a distinction in implementation of these styles. In case of default states of components, there are slight outlines around the edges to avoid relying solely on shadows to communicate shapes. In cases of hover states of components, we don't have to have these edges as this transient state is also well communicated with the change in the shape of the cursor.

Motor

• For users who rely on keyboard we must ensure each interactive component is accessible with a Tab key and is highly visible when in focus.
• Users who rely on a mouse or touch need target areas that are large enough to be hit easily.

Device limitations

In addition to periodic user testing of components, there should be cross-device, cross-browser tests conducted. Components can be tested in the context of applications and improved iteratively in following scenarios:

• Different devices
• Different browsers
• Modes: portrait, landscape
• Screen resolutions, screen qualities and some thresholds of custom contrast-brightness ratios
• Different bandwidths

There are plenty of free and paid resources online to test web applications live. Google Dev Tools is one of the most commonly used free tools. It allows to quickly check the UI in multitude of different screen sizes and resolutions. You can simulate touch inputs, device orientation, and geo-location to test how they work. It’s great to easily spot problems using their remote debugging tool to view, change, debug and profile a page’s code directly from the laptop.