5 tips for an accessible web application.
Web accessibility is a vast topic and there are a lot of very good resources around standards and implementation details. But its very hard to know where to begin. In this article, you will learn how to improve your web applications accessibility by following 5 basic techniques.
Avoid non-native interactive elements.
This is an issue I see a lot on web applications. Div tags, or other container elements, with onClick handlers. They are used to have pretty looking interactive elements and also often used in the context of (multi) selectable data. Like lists of elements to choose from. While they are easier to style with CSS they are not accessible via keyboard. And also are not able to be interpreted correctly by screen readers. There are two simple ways to make them accessible
a) Use a native interactive element like buttons, a-tags, input fields. These elements are recognized by the browser as interactive elements and therefore are focusable and triggerable via keyboard. Also, screen readers can interpret them and inform a visually impaired user about their semantic meaning.
b) Make use of the aria-role attribute. This attribute can turn the non-semantic HTML tag into an interpretable one by giving it the appropriate aria role. It is also important to mark this element as part of the focusable elements by adding the tabindex attribute. It has to be 0 to follow alongside the rest of the pages focus hierarchy.
Use image descriptions, but know when better skip them.
Images are an attention grabber and used very often not only to set a tone of voice but also sometimes for decorative purposes or to help users easier to find what they are looking for. For visual impaired users or users with a bad internet connection, they are not accessible. Maybe because they can not be seen at all, or the information is not clear for them. This is where the alt attribute comes into play for images. The text of the alt attribute will be read by screenreaders or shown instead of a not loaded image.
But there are cases where an image description causes more confusion than it actually helps to understand the context. And this is when an image is used for decorative purposes.
Even without an alt attribute, the filename might get read by some screenreads. There are two ways to solve this issue. If your decorative image is an SVG icon paste the SVG inline, they are by default ignored by screen readers. In other cases you can use the aria attribute hidden to tell screenreaders that they can ignore this image.
Use clear descriptive language in links.
If you use an a-tag or a button for a clickable element and also hide unnecessary image information, you might end up in a link element that is not actually telling a user where this link leads to. In other cases the used symbols can be confusing, like does this symbol mean close or delete? In these situations, it is best to combine text and image. If this is for whatever reason not possible you can also use the title attribute. It is a global attribute and can be set for every HTML tag. You can use it as a glossary or abbreviation helper, or to give further information about link destinations or functionalities.
Take care of sufficient colour contrast
How understandable or readable a text is, also depends on the colour contrast. A lot of visual impairments are coupled with the inability to see differences in colour shades. So it is best to follow the WCAG guidelines for sufficient colour contrast. Several tools help you check if your colours for fore and background have enough contrast. For example contrast checker from webAIM.
Font size, spacing and the ype
For visually impaired users and also for dyslexic and other neurodiverse users, readability can be improved by using a font size with a minimum of 14px. Also it is preferable to have a clear distinction on what a headline and what a normal paragraph is. This can be done by either increasing the font-size or font-weight or also using a different font-type. When choosing font-types, always reach for more readability, rather than aesthetics. So prefer simple, less decorated types with clearly distinguishable letters. The line spacing can also influence readability, if it is too narrow, the letters can flow into each other, while a too wide space might distract and the user looses the reading flow.
It is also always preferable to test your website when increasing the zoom factor. Some users increase the font-size on their own with the browser tools or use a monitor magnifyier. And so it is important to make sure that your design is not falling flat when the space, occupied by a text, is increased.
