How do we know something is available enough?
It is not always easy to assess whether a digital product is available enough, as this largely depends on the user group and associated extremes. In some cases, it may be necessary to do product-specific availability tests. Fortunately, we have some key points that are defined in the W3C guidelines: Web Content Accessibility Guidelines (WCAG). This is an international standard and serves as a reference book with examples and criteria that must be met for a digital product to be available.
The WCAG defines four principles of accessibility: Content must be possible to perceiving, possible to operate, it must be understandably and rugged.
It is important to take into account that users can apply various assistant tools to navigate a digital product. Examples of this can be screen readers, magnifying tools, voice recognition, keyboard, mouse, and touch screens.
In many cases, it is also important to take into account that the digital product should be available on different devices and browsers.
Some things to consider
There are many measures that should be considered in terms of accessibility. I will definitely not go into everything, but rather want to convey some elementary principles.
Visual Hierarchy
The hierarchy of a user interface must be clear and understandable. Gestalt principles about proximity, common area, similarity, closure, symmetry and continuity provide a good starting point for creating a visually neat interface. In addition to this, it must be possible to navigate in a logical way with alternative input methods. Therefore, it is important to pay attention to semantic HTML, which implies that the elements of the code are also structured in a logical way, so that, for example, screen readers pick up the elements in the intended order.
Colors, Typography and Contrast
Proper use of colors and contrast helps to make a product understandable and, among other things, helps the user identify important interactive elements and feedback. In the WCAG, various levels are defined to satisfy minimum requirements from A—AAA.
In the case of interactive elements, the color should have a contrast with the background of at least 3:1.
In terms of typography, the minimum requirement is for the text to have a 4:5 contrast to the background color if the text is less than 18px (or 14px bold). If it is larger than this, the minimum contrast requirement is 3:1.
Clicking surfaces and sizes
WCAG has defined a minimum size of 44x44 dp as most favorable for click surfaces (AAA) with some exceptions:
- Clickfaces available elsewhere on the same page that are at least 44x44
- The link is in running text
- The size of the click surface is determined by the user
- A specific presentation of the click surface is essential for the information to be disseminated.
With the same exception, the WCAG defines 24x24 dp as the absolute minimum requirement (AA).
WCAG is not always faceted
As a designer, it is important to pay attention to the content of WCAG, but it is not something that should necessarily be followed dogmatically. There are several examples where WCAG falls short. Looking at the buttons below, the majority will say that the white text is easier to read even if the contrast suggests the opposite. The reason for this is that WCAG's calculation of contrast only takes into account brightness contrast and not color contrast.
Society adapts
In Norway, we have a regulatory framework that includes universal design. EU Web Directive was adopted in 2021, and constantly makes new demands. By 1. February 2023 requires, among other things, all public sector companies to have an accessibility statement on their website. Furthermore, Norway is in the process of incorporating the EU Accessibility Directive (EAA) into national legislation.
In general, accessibility in digital products is essential for all users to interact with the products in a meaningful way, and should always be a priority for designers.
Is there anything you wonder or want to discuss? Take liaise Well with us!
