On a basic level, UX/UI Designers alone may considerably improve the accessibility of digital products by simply following simple rules regarding information architecture, navigation, typography, contrasts, colours, and sizes. However, products that satisfy Advanced Accessibility criteria usually move beyond visual design by employing further accessibility improvements such as alternative text, clickable fields, label names, alternative (non-visual) system status information, haptic effects, element voicing rules, voice state changes, element state logic, text formatting, and validation.

Fulfilling Advanced Accessibility requirements demands adapting the design and development process. To do this successfully, designers, researchers, developers, editors, and QA testers must collaborate to consider accessibility at all stages and not just at the end of the road. The designer must be present throughout the whole process in order to ensure mandatory interface testing with people on a different spectrum of abilities.

By following some GUI (Graphical User Interface) design recommendations, it’s possible to improve the overall user experience and the product’s compatibility with assistive technology. The rules and guidelines of accessibility are contained in the Web Content Accessibility Guidelines — WCAG. WCAG rules are directed at designers, programmers, and editors. The recommendations cover three levels of content availability: A, AA, and AAA, where AAA represents the highest level of accessibility. In the further part of this article, I will talk about the recommendations related to the GUI based on the following groups of users affected by exclusion:

• age-based exclusion;
• disability-related exclusion;
• exclusion related to the level of education;
• material exclusion.

Age-based exclusion

All people with age show some changes related to the ageing process. Possible age-related changes start individually for each individual and may depend on various factors such as living conditions, environment, and genetic characteristics. Despite the individuality of these changes, scientists identified general trends when considering the overall population.

The most common changes that can potentially impact interface efficiency are changes related to motor, sensory, and cognitive functions.

• Motor function
  Over the years, muscle mass tends to decline, which may be associated with a decline in strength and a decline in musculoskeletal function, which in turn affects grip strength. As a result of damage to the extrapyramidal system, violations of motor functions may occur and muscle tone may decrease.
  Problems with motor functions directly affect the efficiency of using the interface.

For example, due to Parkinson’s disease, it is almost impossible to click on an element whose clickable area is too small.

• Sensory functions
  Ageing is often associated with impaired vision and hearing. In the context of inclusive design, it is important to take into account the complex functional changes in the eyes that lead to the impairment of the ability to focus. There are also many other individual changes related to vision impairment.

An important design decision can be providing contrasts as well as avoiding small font sizes.

• Cognitive functions
  Cognitive functions in humans are very diverse and closely related to the education level, but memory and information processing speed disorders are commonly generalized changes in cognitive functions.

During the design process try to make your content as understandable as possible.

Disability-related exclusion

In this article I want to consider the following categories of people with disabilities:

• people with physical disabilities — who suffer from damage, disorder, disease of the locomotor organs, or some speech disorders.

• people with sensory disabilities — blind, visually impaired, deaf, hard of hearing.

• people with mental disabilities — people with mental disorders and diseases, mental retardation, and autism.

• people with multiple disabilities — people with more than one disability.

Assistive technologies

The way a user interacts with an interface depends on the degree of disability. Many special technologies enable users with more severe constraints to control devices. These technological solutions are assigned to a common term — Assistive technology. This term describes technological solutions or pieces of equipment that are intended for people with disabilities and serve to improve their quality of life. Assistive technologies include prostheses, wheelchairs, hearing aids, and other common assistive devices.

The general term “assistive technologies” can be divided into two categories: assistive devices (hardware)and assistive technologies (software).

Assistive devices can be divided into the following categories:

• Minimal technical or non-technical computer access options

This type of assistive technology includes special furniture and non-technical gadgets. These gadgets do not require a connection to a computer, system, or mobile device. Examples of such technologies are an adjustable chair or a pointer, which is placed over the head and chin and allows hands-free writing.

• Devices intended for users with visual impairments

All types of displays are included in this category. Assistant displays can provide greater contrast, improve visibility, increase interface elements or selected parts of the screen. Some alternative displays and devices convert text to Braille.

• Devices intended for users with impaired motor functions

This category covers a wide variety of devices. Such devices include trackballs, joysticks, footswitches, various keyboards and eye trackers. Eye trackers allow controlling the cursor and performing a mouse click function.

• Devices intended for hearing impaired users

This category includes different types of hearing aids that can be integrated into mobile devices and computers.

The above examples do not represent the full range of assistive devices available in the market. Every year, new models are produced, tailored to specific needs. Despite the great variety, the cost of assistive devices is very high and therefore assistive devices are not available to everyone.

A more affordable solution is assistive technology (software). This term describes special solutions integrated into the operating system or program, as well as separate software or settings of mobile devices and computers. The big advantage is the wide range of functions, which allow for maximum personalization of the device. The most popular features are voice interface support (various screen readers and voice control), complete screen adaptation (from increasing the font to adaptive color inversion and disabling animations).

The iOS and Android operating systems are also adapted to be integrated with some assistive devices (for example, connecting a hearing aid or a Braille display).

Exclusion related to the level of education

The next category is exclusion related to the level of education. It is important to understand that this category is very relative.

In the context of design, attention should be paid primarily to the interface language.

For example, if your digital product focuses on the Polish market, it makes sense to refrain from using foreign words and labels as not all users have the same understanding of foreign languages.

It’s also recommended to avoid highly specialised language or slang in the interface.

In the case of websites of state organisations, it is worth ensuring the availability of the service for various ethnic groups living or temporarily staying in the country. The ideal solution is providing multi-language support. If it is not possible, linguistic simplicity may help. In this case, potentially incomprehensible contexts should be avoided.

Material exclusion

The specificity of working with graphics forces designers to use higher quality devices with higher screen resolution and more powerful processor. However, not every user needs such gadgets in everyday life. For this reason, it is worth considering the variety of devices available, their price range, and technical specifications.

During the design process, it’s important to understand that graphical solutions (color matching, contrast, divider width, and thickness of other interface elements) that look good on better screens (such as Apple’s Retina screens) may look different on devices whose screens have a lower resolution.

It’s also recommended to not saturate the page with complex animations and other solutions that may adversely affect the speed and quality of display on devices with weak processors.

Essential recommendations to improve accessibility

1. Scalability and adaptability

Visually impaired users often resort to page scaling to increase content size and typography. The scaling feature is available in any browser. The maximum scaling value is 500%. Change range: up to 200% the step is 25% and above that the step is 50%, where the 100% version is the standard version for the desktop, and 500% version for mobile devices. The values ​​of 200% — 300% will correspond to the tablet version. To ensure the AA level of availability, you do not need to adjust the layout for each value, it’s enough to ensure content scaling to 200% without the use of assistive technologies and loss of functionality.

Page scaling relies on a responsive layout.

By preparing adaptive versions, it is possible to meet the needs of users with visual impairments. This approach will apply to other users using different types of devices with different screen sizes.

2. Readability

Readability is about conveying content understandably and simply, where the clarity of the language is a major aspect. The simplicity of the language will primarily improve the user experience for people with dyslexia and foreigners using the product.

Multilingualism is one of the recommended aspects of accessibility, but a designer is not responsible for ensuring multilingualism. If multilingualism is not possible, a designer can improve the simplicity of the language. Specialist or technical terms should be avoided. If it’s necessary to use special terms, these terms should be explained. It is also recommended to avoid jargon and idioms.

How to improve readability

• Highlight headlines to draw the user’s attention to the hierarchy. Headlines should differ from the main text in size, thickness, style, and/or color.
• Do not make text lines too long or too short: 45–75 characters are the acceptable number, 66 is the optimal number. Short paragraphs improve the perception of information by all users.
• Use left alignment instead of justified. For dyslexic users, justified text looks like a wall of characters that makes it too difficult to read.

3. Legibility

Legibility is about typography. Typography is one of the most important part of a product that affects its accessibility. Properly designed typography can significantly increase the level of accessibility.

You need to choose a font size sufficient for comfortable reading. The recommended minimum for body text is 16 pixels, but the size may vary depending on the typeface. It’s good practice to use sans-serif fonts for interfaces and serif for long documents.

When choosing a font, pay attention to:

• Scaling. The text must remain legible regardless of size;
• X-height. The selected font must have a high-height lowercase (x-height);
• Support for various languages ​​and symbols. The selected typeface must support all the required characters and styles. It often happens that the font “breaks” symbols or/and displays the characters incorrectly (ex. Polish — ę, ł, ą);
• Text style. Try to avoid text styles such as thin, light, extra light, etc. These styles are difficult to read and rarely pass the contrast test.

How to improve legibility

• Take care of the line spacing. The line height depends on the size and style of the font. The line height must be at least 1.5 times bigger than the font size. In the case of body text, the ratio of leading to vertical font height should be around 1.4–1.65, for headings — 1–1.3, and for captions and short lines — 1.3.
• The space between paragraphs should be at least twice the font size.
• The distance between letters (tracking or letter-spacing) should be at least 0.16 times the font size.

4. Color and contrast

Contrast is another important aspect of accessibility. The rules of contrast apply to text and background. However, you should also check the contrast of other interface elements (buttons, inputs, etc.). The accessible contrast ratio is 4.5:1. For large text, the contrast level is lower — 3:1.

A lot of companies include available colors in their design systems. For example, Google’s Material Design and Apple’s Human Interface Guidelines have high contrast color patterns for dark and light modes in their design guidelines.

• Avoid using color as the only reference point for conveying information, indicating the status of an element, system, etc. The color highlighting can lead to potential interface problems for blind or visually impaired users. For example, in the input validation behavior, red is often used to underline the field with an error. However, this solution may not be enough. Colorblind users may not notice changes to the system, and blind users will not be informed of the error. A good practice is to add some additional error text. To highlight fields with errors, you can use bold lines to provide more contrast and make it easier to find among other fields.Form design is a more complex process, so I will describe the design of available forms separately.
• Try to avoid using images in backgrounds overlaid with text and other interface elements. Background images negatively affect the contrast. To provide better contrast put an additional background on the image or interface element (ex. use a background rectangle for navigation bar), darken the image, select the image to contain neutral areas with a uniform background to place the interface elements.

Accessible contrasts also matter in the context of the variety of gadgets and devices. The quality of the screen directly affects the color reproduction and thickness of the elements. Many devices do not support the rendering of lines that are less than 1 pixel wide, so avoid using elements and shapes that are less than 1 pixel thick. Otherwise, the interface element may not be displayed correctly or may not be displayed at all. The quality of the screen also affects the representation of colors and saturation, which in turn is important in the context of maintaining contrasts. So try to find a safe color solution for various devices.

In the context of contrasts, I would like to write about one recommendation, not related to contrast, but related to visual and media content. Do not use “items potentially hazardous to health”. These are items that flash more than three times per second. For some users with certain types of disorders, these component types can lead to an epilepsy attack.

5. Form design

Forms are one of the most common interface elements and are often the most problematic. Designing accessible forms includes visual design, validation logic, selection states, text labels, error prevention.

In the context of accessibility, it’s necessary to take into account problems with short-term memory, vision defects that require the use of technologies and supporting functions (ex. magnifying glass), lack of limbs, problems with motor skills. For these users, filling in input forms becomes a very confusing process. To facilitate this process, it is worth following some recommendations.

Starting UI design, it is worth taking care of designing understandable states of the form, and these are at least: active and inactive fields and their validation, mandatory and optional fields. As I mentioned, only using color for validation or selection states doesn’t provide a high enough level of accessibility.

Good practice to use bold style, visual elements, icons, typography, additional text to highlight states.

For example, optional forms can be marked with an appropriate text label and visual elements such as an asterisk for additional marking. In the case of additional visual elements (such as asterisk) don’t forget about adding a textual explanation to interpret the mark unambiguously.

The validation logic of input forms is one of the most complicated challenges for each designer.

How to improve the accessibility of forms

• In the case of accessibility instant validation significantly improves the user experience. The user receives feedback from the system after each field completion. This approach provides the possibility of immediate correction of errors.
• Icons and text cues can be used to improve validation logic. A correctly completed form can be marked with green color and a tick icon. An incorrectly completed form can be highlighted in red, marked with a cross icon and a text hint corresponding to the error.
• Many errors during filling the fields are related to the incorrectly entered data format. To help users avoid potential errors, it is advisable to warn about the required data format. Good form design practices include predefined data formats entered directly into the form to minimize manual data entry when filling out fields. However, make sure that this format applies to all users’ data. For example, the postal code format in Poland (xx-xxx) is different than the postal code format in Belarus (xxxxxx).
• Another important recommendation is clear text labels in the input fields that remain visible even after filling in the field. Many designers put the text label in the input field. This solution is problematic for users with short-term memory problems. This is because when filling in this field, the text label disappears and the user may not remember what information they have to enter. In this case, it is recommended that you adjust the text labels so that they are visible even while filling in the field. Typically, the text label fits above the input field next to it, or the text label is placed directly on the edge of the input field, breaking the field line and continuing with the text label.

6. Clickable area

Another aspect related to accessibility is adherence to the recommended sizes of pressing areas. The area that can be clicked is often the size of an element. For example, the click area of ​​a 48-by-48-pixel menu icon corresponds to 48 by 48 pixels. However, in the context of accessibility, this is not always the correct solution.

The recommended clickable area must be at least 44 CSS pixels. However, not every clickable element fits this size. You do not need to increase the size of the graphic to increase the clickable area. The clickable area it’s just an invisible area around the elements. For example a 28 by 28-pixel icon might have a clickable area of ​​44 by 44 pixels. It is also worth taking care of the logic of the so-called click areas. If the 28-by-28-pixel icon is accompanied by a text label, its clickable box must contain a text label. Adherence to the recommended requirements for clickable areas is especially important in the context of touch screens. The user has to reach for the main clickable elements with thumbs and left and right hands, even on large phones.

Clickable elements should be separated by an 8-pixel space. This will allow the user to hit the desired element.

Final words

All the recommendations for graphic design will not only increase the availability of the website but also improve the user experience for all users, as the overwhelming number of recommendations are good usability practices. The described recommendations will significantly increase the usability of the product and satisfy the needs of all users.

‍