In the expansive digital landscape, UX/UI designers hold the power to bridge gaps and combat exclusion.

✦

In the realm of digital design, UX/UI professionals have the potential to greatly enhance accessibility by mastering fundamental principles like information architecture, navigation, and visual elements. However, achieving true 'Advanced Accessibility' requires an integrated approach, transcending mere visuals. This encompasses alternative text, nuanced element states, haptic feedback, and voice state modifications, among others. To truly realise this, it's essential for designers, developers, researchers, and testers to collaborate holistically, embedding accessibility from inception rather than as an afterthought. The designer's role is pivotal, ensuring comprehensive interface tests with diverse user abilities. Grounded in the Web Content Accessibility Guidelines (WCAG), these strategies not only elevate the user experience but also optimise compatibility with assistive technology. WCAG, directed at a gamut of digital professionals, delineates three tiers of accessibility: A, AA, and AAA, with AAA being the zenith. As we delve deeper, this article spotlights guidelines catered to address exclusions related to age, disability, education, and socio-economic factors.

Addressing Age-Based Exclusion

Every individual undergoes changes due to aging, the nature and onset of which can vary based on factors like genetics, environment, and living conditions. Though these changes manifest differently in everyone, general patterns emerge when looking at larger populations. Three primary areas impacted by age that influence interface efficiency are motor, sensory, and cognitive functions.

Motor Functions: As people age, muscle mass typically diminishes, which can lead to decreased strength and impaired musculoskeletal function. This can affect things like grip strength. Moreover, damage to the extrapyramidal system can disrupt motor functions and reduce muscle tone. For instance, someone with Parkinson’s may struggle with clicking on interface elements that have too small a clickable area.

Sensory Functions: Aging is synonymous with gradual sensory changes, notably in vision and hearing. From a design perspective, understanding the intricate functional changes in the eyes is crucial. This includes recognising the myriad individual vision impairments that can arise. A robust design approach would prioritise high contrast visuals and refrain from using small fonts.

Cognitive Functions: While cognitive capabilities vary widely and are often intertwined with educational backgrounds, age-induced changes frequently manifest as memory lapses or slowed information processing. As designers, it's imperative to ensure content is not only engaging but also easily comprehensible."

Addressing Disability-Related Exclusion

When discussing disability-related exclusion, it's essential to recognise and understand the varied experiences of individuals with disabilities. In this context, we'll focus on:

• Physical Disabilities: This encompasses individuals with challenges stemming from injuries, disorders, or diseases of the locomotor system, as well as those with certain speech disorders.

• Sensory Disabilities: This category includes those who are blind or visually impaired, and the deaf or hard of hearing.

• Mental Disabilities: This group comprises individuals with mental disorders or diseases, cognitive delays, and autism spectrum conditions.

• Multiple Disabilities: Some individuals face challenges in more than one of the above categories.

It's crucial to design with empathy and inclusivity, keeping these diverse needs in mind.

Understanding Assistive Technologies

The tools and technologies a user leverages often correlate with the nature and extent of their disability. Numerous innovative solutions, broadly termed as 'Assistive Technology', are designed specifically for individuals with disabilities to enhance their interactions and overall quality of life. These range from commonplace devices like hearing aids to advanced software that adapt interfaces based on user needs.

Let's delve deeper into this realm:

• Assistive Devices (Hardware):

• Basic and Non-technical Solutions: These tools, often non-electronic, enhance accessibility without connecting to digital devices. Think adjustable chairs for better posture or pointers designed for hands-free interaction.

• For the Visually Impaired: This category encompasses displays tailored for visual augmentation. They might magnify interface elements, offer high contrast modes, or even convert text into Braille for tactile reading.

• For Motor Function Impairments: Devices here are wide-ranging. From trackballs and joysticks to eye trackers that navigate and click with mere eye movements, these tools aim to make navigation seamless.

• For the Hearing Impaired: Beyond traditional hearing aids, there are now solutions that seamlessly integrate with computers and mobile devices for a synchronised experience.

• Assistive Software: This digital counterpart ensures interfaces are adaptable, readable, and navigable based on individual requirements.

While the array of available tools grows each year, catering to ever-specific needs, it's essential to note that not everyone can access these often-pricey solutions. Thus, inclusive design becomes even more pivotal.

Examples of assistive devices (hardware)

Assistive technology in the form of software offers an economically viable solution for many. Such technologies, embedded within operating systems, applications, or as standalone software settings, aim to enhance the user experience on mobile devices and computers. Their primary strength lies in their adaptability. Users benefit from a myriad of features tailored to their needs. Common functionalities include voice interface support, encompassing screen readers and voice commands, as well as screen customisations—from font size adjustments to adaptive colour inversion and animation toggling.

Examples of assistive technology (software)

Both iOS and Android operating systems have been designed to seamlessly integrate with select assistive devices, such as hearing aids or Braille displays.

iPhone’s Braille Keyboard

Exclusion Due to Education Levels

Education-based exclusion is a nuanced category. In the realm of design, it's crucial to recognise that not every user has the same educational background or language proficiency. When designing for a specific market, like Poland, it's prudent to minimise the use of foreign words or jargon, as these may not resonate universally. Similarly, eschewing specialist language or local slang can help make your interface more universally accessible. For official or state-affiliated platforms, inclusivity is key. Accommodating various ethnic groups that reside or visit the country can be pivotal. Offering multi-language support is ideal, but when that's not feasible, leaning towards simplicity and clarity in language can bridge the gap. Avoiding potentially confusing contexts or terminologies is always a good rule of thumb.

Material Exclusion: Designing for Every Device

In the world of design, it's common to use high-end devices with sharp resolutions and powerful processors. However, it's essential to remember that not every user possesses or requires such advanced equipment in their daily lives. As designers, embracing the vast diversity of devices—spanning different price points and technical capabilities—is crucial. When creating designs, recognise that what appears vibrant and clear on a high-resolution screen, like Apple’s Retina, might not translate as well on a device with a lower resolution. Also, while intricate animations can add flair, they might hinder performance on less powerful devices. It's always a balance—designing for both the high-end and the everyday.

Key Steps to Enhance Accessibility

1. Scalability and Adaptability‍

For those with visual impairments, the ability to scale a page for clearer content and typography is crucial. Every browser has a scaling feature that can amplify up to 500%. To break it down:

• Up to 200%, the scaling increments by 25%.

• Beyond 200%, it increments by 50%.

• 100% is the standard desktop view, while 500% is optimal for mobile devices.

• The 200-300% range typically aligns with tablet views.

For AA-level accessibility, there's no need to fine-tune the layout for each scaling increment. Simply ensuring a 200% content scale without relying on assistive technologies or compromising functionality is key. Fundamentally, a responsive layout is the foundation of effective page scaling. Crafting adaptive designs caters not only to those with visual impairments but also provides a seamless experience across various device sizes and screen dimensions.

Responsive layout and scaling values

2. Enhancing Readability‍

Making content easily understandable is at the heart of readability, with language clarity playing a pivotal role. Prioritising straightforward language particularly benefits individuals with dyslexia and non-native users.

While incorporating multiple languages boosts accessibility, it's not always within the designer's purview. If multilingual options aren't feasible, focus on refining language simplicity. Specialised or technical terms should be used sparingly and, when necessary, accompanied by explanations. Eschewing jargon and idioms further clarifies content.‍

Strategies for Readability:

• Headline Hierarchy: Make headlines stand out by varying size, weight, style, or color to guide users through content structure.

• Text Length: Aim for line lengths between 45–75 characters, with 66 characters being the sweet spot. Shorter paragraphs facilitate better comprehension for all users.

• Alignment: Opt for left alignment. Justified text can be daunting for dyslexic users, appearing as an overwhelming wall of text.

Poor vs. Good Readability

3. Prioritising Legibility through Typography‍

Typography plays a crucial role in product accessibility. Thoughtfully crafted typography significantly elevates accessibility levels.

Select font sizes that offer a pleasant reading experience. While 16 pixels is a recommended starting point for body text, this can vary with the typeface. Generally, sans-serif fonts work best for interfaces, while serif fonts suit lengthier documents.‍

Key Font Considerations:

• Scaling: Ensure text maintains clarity across varying sizes.

• X-height: Opt for fonts with a pronounced x-height for lowercase characters.

• Language & Symbol Support: Your chosen typeface should flawlessly render necessary characters and styles, preventing issues like misinterpreted symbols in different languages.

• Text Styles: Avoid excessively thin or light styles. They can be challenging to read and might not meet contrast requirements.‍

‍Strategies for Legibility:

• Line Spacing: A font's line height should be around 1.5 times its size. For body text, a ratio of 1.4–1.65 is ideal. Headings should be between 1–1.3, and captions or shorter lines around 1.3.

• Paragraph Spacing: The gap between paragraphs should be at least double the font size.

• Letter Spacing: Ensure a spacing of at least 0.16 times the font size to maintain clarity.

Poor vs. Good Legibility

4. Emphasising Colour and Contrast

‍Contrast plays a pivotal role in ensuring accessibility. While it's commonly considered in the context of text and background, it's equally essential for other interface components like buttons, input fields, and more. An optimal contrast ratio stands at 4.5:1. However, for larger text, this requirement eases slightly to a ratio of 3:1.

Low vs. High Contrast

Many corporations incorporate accessible colour palettes into their design frameworks. Notably, Google's Material Design and Apple's Human Interface Guidelines offer high-contrast color patterns, catering to both dark and light modes, in their design directives.

Inaccessible vs. Accessible Colour Palette

Refrain from relying solely on colour to convey information or indicate an element's status. Using just colour can create hurdles for those who are blind or have visual impairments. For instance, red underlines often signify input errors, but this may be insufficient. Colourblind individuals might overlook the change, and blind users won't receive error notifications. Enhancing this with supplemental error text is beneficial. For better contrast and visibility among other fields, consider using bolder lines to underscore errors.

Designing accessible forms is intricate, warranting its own detailed discussion.

Also, it's advisable to be cautious when using images as backgrounds, especially when they're combined with text and other UI components. Such backgrounds can diminish contrast. To enhance visibility, consider overlaying a semi-transparent background atop the image, darkening the image, or selecting images with neutral, uniform areas where UI elements can be positioned.

Images in backgrounds — Low vs. High Contrast

Contrast accessibility is crucial across various gadgets and devices, as screen quality can influence colour representation and element clarity. Some devices may struggle to render lines thinner than 1 pixel, so it's best to steer clear of designs with elements or lines under this width to ensure universal display and clarity. Moreover, colour accuracy and saturation can differ from screen to screen, impacting contrast levels. It's prudent to opt for colour schemes that translate well across diverse devices.

On a related note, while discussing visual aspects, it's vital to avoid elements that might pose health risks. Specifically, refrain from using components that flash more than three times a second. For individuals with certain conditions, such rapid flashing can trigger epileptic seizures.

5. Designing Accessible Forms

Forms are ubiquitous in interfaces and often pose the most challenges. Accessible form design encompasses visual layout, validation processes, state indicators, textual labels, and error prevention. Given that some users grapple with short-term memory issues, visual impairments requiring assistive technologies, or physical disabilities, form-filling can be particularly daunting. Here's how to simplify this process:

States & Indicators: During the design phase, it's crucial to delineate clear form states, which at minimum should include: active vs. inactive fields, validated states, and mandatory vs. optional fields. Relying solely on colour to signal these states falls short of ideal accessibility. It's advisable to incorporate bold styles, symbols, icons, typography, and supplemental text for clearer distinction. For instance, optional fields could be labeled accordingly, while mandatory ones can have an asterisk, accompanied by a note explaining its meaning.

Validation Logic: Form validation is intricate but crucial for designers. Real-time validation can enhance user experience by providing feedback after each field entry, allowing for immediate error correction. Combining icons with text can clarify validation. For instance, a tick icon and green shading can indicate correct entries, while a red highlight, a cross icon, and an error message can flag incorrect ones.

Data Entry & Formatting: Many mistakes arise from misformatted entries. Preemptively warning users about the desired format can mitigate this. For instance, offering pre-set formats within the form can reduce manual input errors. Yet, ensure that these pre-defined formats cater to the diverse data standards of all users. For instance, Polish postal codes (xx-xxx) differ from those in Belarus (xxxxxx).

Text Labels: Clear, persistent text labels in input fields enhance accessibility. Some designs place these labels within the input, but they disappear upon entry, posing challenges for users with memory constraints. A more user-friendly approach would place these labels adjacent to, above, or seamlessly integrated with the input field so they remain visible throughout the entry process.

By adhering to these principles, designers can create forms that cater to a broader spectrum of users without sacrificing functionality or aesthetics.

Inaccessible vs. Accessible Forms

6. Designing Clickable Areas

For seamless user interaction, the size of clickable areas is paramount, especially considering accessibility. While the clickable dimension often matches the visual size of an element, like a 48x48 pixel menu icon having a click area of the same dimensions, this isn't always the optimal approach for accessibility.

The recommended size for a clickable area is a minimum of 44 CSS pixels. Yet, this doesn't necessitate enlarging the graphic itself. Consider this: a visually smaller 28x28 pixel icon can still have an invisible clickable perimeter of 44x44 pixels. Moreover, when an icon is paired with a textual label, the clickable zone should encompass both the icon and the associated label. This ensures a consistent and intuitive interaction for users.

Such adherence becomes even more critical for touchscreen devices. Users often interact using their thumbs on devices of varying sizes, making easily accessible touchpoints vital. To minimise errors, maintain a spacing of at least 8 pixels between clickable elements, ensuring users can confidently select their intended target.

Clickable area — Good vs. Bad Practice

Conclusion

Implementing these design recommendations will not only enhance the accessibility of a website but also elevate the overall user experience. Many of these guidelines align with best practices in usability, ensuring that all users, regardless of their abilities, benefit. By adopting these strategies, we can create products that are not only compliant but also universally intuitive and user-friendly.