Inclusive Design: Creating Accessibility for Everyone

Inclusive Design | Creating Accessibility for Everyone

Imagine struggling to navigate a website or decipher text on a document, even though you have full vision and cognitive abilities. Now consider the tenfold frustration someone with visual or cognitive impairments might experience with these same elements.

‍

Accessibility encompasses a wide range of considerations beyond physical disabilities. It extends to ensuring usability for people with cognitive disabilities, sensory impairments (visual, hearing), and situational limitations (mobility). This is fundamentally why the design world must account for all abilities, including color blindness, deafness, low vision, cataracts, age-related macular degeneration (AMD), and so forth.

The purpose of design accessibility aims to eliminate the barriers created by these impairments, bridging the gap between access and ability, through the creation of interfaces, environments and documents that are usable by everyone.

‍

Essentially, accessible design is inclusive design. It's about ensuring that everyone can perceive, understand, navigate, interact with designs. This includes aspects such as: websites, mobile apps, physical products, and even printed documents.

‍

But why is accessibility so important? Beyond the ethical imperative of ensuring everyone can participate with various aspects of design, there are practical reasons too. Accessible design reaches a wider audience, which can boost positive rapport for your business and help all audience segments learn more about what it is you offer.

By considering accessibility from the start, you can create a more user-friendly and successful design.

‍

Design Accessibility

Accessibility refers to the practice of creating products, services, and environments that can be used and experienced by individuals of all abilities.

It is about removing barriers and ensuring inclusivity.

We’re exploring the critical role accessibility plays in design and why it should be a top priority for designers and organizations alike.

Accessibility encompasses a wide range of considerations beyond physical disabilities.

It also extends to:

• Cognitive disabilities,
• Sensory impairments (visual, hearing),
• Situational limitations (mobility).

‍

Legal and Ethical Considerations

Many countries have their own accessibility laws and standards, so it's essential to be aware of local regulations if you design for a global audience.

‍

WCAG (Web Content Accessibility Guidelines): WCAG is a globally recognised set of guidelines developed by the World Wide Web Consortium (W3C). 

‍

ADA (Americans with Disabilities Act): The ADA is a landmark U.S. law that prohibits discrimination against individuals with disabilities. Title III of the ADA applies to public accommodations, including websites and digital services. Courts have increasingly ruled in favour of web accessibility as part of ADA compliance.

‍

Section 508: Section 508 of the Rehabilitation Act requires federal agencies in the United States to make their electronic and information technology accessible to people with disabilities. 

‍

EU Web Accessibility Directive: In the European Union, this directive requires public sector websites and mobile applications to be accessible. Member states have adopted varying levels of implementation.

‍

‍

Principles of Accessible Design

Perceivable: Info must be presentable to users in ways that users can understand without being presented.

Example: Text alternatives

‍

Operable: Components and navigation cannot require interaction that a user cannot perform.

Example: Keyboard accessibility

‍

Understandable: Users must be able to understand how to use the interface.

Example: Labels and Instructions when user input is required

‍

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents,
including assistive technologies.

Example: Parsing- ensuring languages are coded correctly.

‍

Assistive Technologies

Screen readers: Software used by blind or visually impaired people to read the content of the computer screen. 

Example: JAWS for Windows, NVDA, or Voiceover for Mac.

‍

Screen magnification software: Allow users to control the size of text and or graphics on the screen. 

‍

Speech input software: Provides people with an alternate way to type text and control the computer. Users can give the system commands to perform mouse actions. They can tell their computer to click a link or use a menu item. 

Example: Dragon Naturally Speaking 

‍

Alternative input devices: Some users may not be able to use a mouse or a keyboard to use computers. 

Instead, they may use:

• Head pointers
• Motion tracking or eye tracking

Colour and Contract

‍Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text.

Slightly temper the contrast between your text and background color. Stark contrast can result in blurred or moving text for people with Irlen syndrome.

Exceptions:

• Only applies text and graphics that are essential for understanding the content or functionality
• Disabled buttons or text
• Logos and logo text 

‍

‍

Typography and Text Readability

‍

Legibility: The measure of how distinguishable individual characters and words are to the eye of the reader.

‍

Readability: The measure of how easy it is to read the text overall.

Good examples:

• Verdana (sans serif)—used by many accessibility sites.
• Tahoma (sans serif)
• Arial (sans serif)
• Georgia (serif)—UNCG brand body font.
• Palatino (serif)—UNCG brand body font.
• Lucida Sans (sans serif—Windows)/Lucida Grande (sans serif—Mac)
• Book Antiqua (serif)
• Helvetica (sans serif)

‍

‍

Semantic HTML elements

1. Semantic HTML Elements Define Content Structure These include elements, such as headings, paragraphs, lists, and links that define the structure and hierarchy of the content on a web page. 
2. Improved Navigation Screen reader users navigate pages by jumping between headings, links, and landmarks (like nav bars or sidebars). Using semantic elements correctly allows users to skim and skip to the content they're interested in quickly.
3. Semantic Elements Provide Context E.g. a screen reader knows that a link is different from a button, and a heading is distinct from a list item. This contextual information helps screen reader users understand the purpose of each element and how they can interact with it.
4. ARIA Roles and Attributes You can enhance accessibility with ARIA (Accessible Rich Internet Applications) roles and attributes. These can be added to non-semantic elements to provide extra accessibility information.  Example below:

‍

Keyboard Accessibility

Keyboard accessibility is crucial for ensuring that individuals with disabilities, especially those who cannot use a mouse or other pointing devices, can effectively navigate and interact with digital interfaces. 

‍

Common Keyboard Shortcuts: 

• Tab key for navigating through interactive elements.
• Enter key for activating links and buttons.
• Arrow keys for navigating menus and lists.
• Access keys (when implemented) for quick navigation to specific sections.

‍

Common Keyboard Traps to Avoid:

• Modals or pop-ups that cannot be closed with the keyboard.
• Focus traps that prevent keyboard users from moving to other parts of the interface.
• Complex widgets like carousels that are difficult to navigate with the keyboard.

‍

Images and Multimedia 

Alt text: A brief description of an image's content or function. It provides context to users who cannot see the image, such as those using screen readers or with slow internet connections.

‍

Screen Readers: Alt text is read aloud by screen readers, allowing users to understand the image's purpose and content.

‍

Writing Effective Alt Text:
Be Descriptive - Describe the image accurately and concisely.

Context Matters - Consider the image's context and its role on the page.

Skip Redundancy - If an image's content is already described in nearby text, you can use empty alt text (alt="") to indicate it's decorative.

‍

‍

Form and Interactivity 

Labels: Every form element should have a clear and associated label. Labels provide context and instructions for users, including those using screen readers. Use the <label> element or associate labels with form elements using the for attribute.

‍

Input Types: Utilize appropriate input types (e.g., text, email, password) to convey the expected data format and trigger relevant keyboard layouts on mobile devices.

‍

Placeholder Text: Avoid relying solely on placeholder text to convey important information. Placeholder text disappears when users start typing and may not be accessible to all users.

‍

Future Trends 

Automated Image Descriptions: AI-powered algorithms are being developed to generate accurate and context-aware image descriptions automatically. This technology benefits users who rely on screen readers.

‍

Natural Language Processing (NLP): NLP algorithms are improving text-to-speech synthesis, making it more natural and expressive, and enabling better comprehension for users with cognitive disabilities.

‍

Voice-Activated Assistants: Voice-activated virtual assistants like Siri and Alexa are becoming more accessible, offering users with mobility impairments new ways to interact with digital devices.

‍

Conclusion

In conclusion, accessible design is a critical practice that ensures everyone can experience and use products, services, and environments. It goes beyond physical disabilities and incorporates cognitive limitations, sensory impairments, and situational constraints.  

By following accessibility guidelines and best practices,  designers can create inclusive experiences that reach a wider audience. Legal and ethical considerations are important aspects as well, with various regulations mandating accessibility in different regions.

‍

This article explored the core principles of accessible design, including perceivable information, operable components, understandable instructions, and robust content.

Assistive technologies were introduced,  demonstrating how screen readers, screen magnifiers, and alternative input devices can empower users with disabilities.

‍

Specific design elements were addressed, including color contrast, readable fonts, semantic HTML elements, and keyboard accessibility.  The importance of alt text for images and clear labeling of forms were highlighted.  

Looking towards the future, the presentation mentioned advancements in AI-powered image descriptions, natural language processing, and voice-activated assistants, all contributing to a more inclusive digital landscape.