Juliana Pechinskaya
•
30/8/22
•
14
min
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:
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.
For example, due to Parkinson’s disease, it is almost impossible to click on an element whose clickable area is too small.
An important design decision can be providing contrasts as well as avoiding small font sizes.
During the design process try to make your content as understandable as possible.
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.
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).
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.
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.
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
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:
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.
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
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.
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.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.