Accessibility should not be an afterthought

This article is part of a larger series written by Benedict Ampea-Badu on including accessibility in your design thinking. You can find the list of series articles here.

In a world that thrives on connectivity and progress, the concept of accessibility has emerged as a fundamental bridge that connects diverse individuals to a shared digital landscape. Accessibility goes beyond mere convenience; it embodies the principles of equity and inclusion, ensuring that information, activities, and environments are not only usable but also beneficial to everyone. Whether the challenge is permanent, temporary, or situational, accessibility extends its hand to embrace all, especially those with disabilities.

Surrounded by Accessibility

To give you a clearer picture of accessibility, envision the sidewalks and buildings around you—these are the tactile embodiments of accessibility. Sidewalk ramps, designed initially for individuals in wheelchairs, have inadvertently paved the way for parents with strollers, shoppers with carts, and cyclists on wheeled adventures. Push-to-open buttons by doors intended to empower those with mobility impairments, also assist children, the elderly, and those recovering from accidents. These are just a glimpse of the numerous ways accessibility has subtly but profoundly woven itself into our daily lives.

Yet, as our physical world becomes more inclusive, our digital realm faces a persistent challenge. Technology, while promising boundless potential, often falls short of being universally accessible. This article delves into the intricate tapestry of accessibility, revealing not only its profound importance but also the significant strides needed to make our digital world as inclusive as our physical one.

What is Accessibility?

Accessibility is creating an avenue where information, activities, and elements of the general environment are understandable, beneficial, practical, meaningful, and usable for as many people as possible, including persons with disabilities. The disability may be permanent, temporal, or situational.

	Permanent	Temporary	Situational
Touch	One Arm	Arm Injury	New Parent
Sight	Blind	Cataract	Distracted Driver
Hearing	Deaf	Ear Infection	Bartender/Construction Worker
Speech	Non – Verbal	Laryngitis	Heavy Accent

Figure 1 Table showing the various Types of Disabilities and examples

Who Should Read This Article

This article is designed to cater to a diverse readership, ranging from those with a casual interest in expanding their knowledge to seasoned tech experts and stakeholders. Here’s a breakdown of who might find this content particularly relevant:

• Curious Minds and Avid Readers: If you’re someone who loves to explore new ideas and gain insights, this article provides a wealth of information that can quench your intellectual thirst and expand your understanding of technology’s impact on our lives.
• Tech Enthusiasts and Professionals: Tech-savvy individuals, including designers, developers, project managers, and UX/UI specialists, will discover valuable insights within these pages. Our discussions assume a basic familiarity with design principles, user experience, and development processes.
• Accessibility Advocates: Those passionate about creating inclusive digital experiences will find this article to be a valuable resource. A prior understanding of accessibility standards, such as WCAG (Web Content Accessibility Guidelines), and assistive technologies will enhance your comprehension of the content.

However, it’s important to note that certain sections of our discussion may pose a challenge, as we discuss the intricate process of creating accessible web pages and applications. While there may not be actual lines of code within the document, our primary focus is on unraveling the fundamental concepts that drive web development.

So, whether you’re here to satisfy your curiosity, deepen your tech knowledge, or champion digital inclusivity, you’re in the right place.

What is Accessible Technology?

Accessible technology refers to technology designed specifically to tend to the needs of a variety of people. This technology from its conception is built to cater to individualized user experience and needs (“Types of AT / Guide to assistive technology,” n.d.). Accessible technologies are built for users who exhibit remarkable diversity over a wide range of diversity (What Is Accessible Technology? – UW–⁠Madison Information Technology, 2023). In my blog Beyond Limitations, Redefining Abilities with Assistive Technology, I cover some of the different technologies available to help out with non-computing needs.

It is important to know, that even with the increasing number of assistive technologies, accessibility is not at its peak. Furthermore, assistive technologies on their own, cannot solve the accessibility crisis that has currently plagued our society (“Types of AT / Guide to assistive technology,” n.d.). This is the reason we need to transcend just the use of assistive technology and get to a place where both assistive and accessible technologies are used. A marriage of assistive and accessible technology, that is balanced, will increase accessibility, and improve the general quality of life. This improvement will not only be seen in the lives of persons with disabilities.

Usability versus Accessibility

Diving deeper into individualized user experience and needs, it is important to clarify between usability and accessibility. Accessibility and usability are companions down the same street until a technicality creates a divide. In the sense that accessibility deals more with compliance to the set technical standards according to various guidelines, to ensure that a piece of technology can be effectively used by all people – especially persons with disabilities. Accessibility also factors in the use of assistive technology.

Usability takes into consideration the wholesomeness of the user’s experience. This takes into consideration the quality, efficiency, and satisfaction of the user’s experience.

This means a technology could be accessible, providing users with the ability to interact with the technology, but not provide a shared enjoyable user experience amongst users. This does not make accessibility inferior in comparison to usability. Accessibility serves as a precursor to usability, even though accessibility places its emphasis on persons with disabilities. In a nutshell, technology that meets the requirements for accessibility and usability is a technology that is beneficial to all users (UsableNet, 2022).

Figure 2 The Common Ground of Usability and Accessibility Where Design is Beneficial Universally

Benefits of Accessibility

Accessibility offers a clear advantage by enabling individuals with disabilities to access and appreciate products, and services. However, the benefits of accessibility, especially in web design, extend beyond immediate improvements for people with disabilities and may hold unexpected advantages that can positively impact a broader audience. In this article, I will highlight five of such benefits.

• Accessibility broadens your scope of influence: Technology with accessibility inbuilt, especially from conception, is a technology that meets the needs of the general populace – including persons with disabilities. More specifically, a web design made with accessibility does not cut off an entire group of people. Persons with disabilities make up about 16% of the world’s populace, which converts to about 1.3 billion people (World Health Organization: WHO, 2023). You will be doing yourself a great disservice if you eliminate these people from your reach and scope of influence. Keep in mind that, by increasing your scope of influence and your reach, you also increase the probability and possibility of your technology or website being used or visited.
• Accessibility enhances search engine optimization (SEO): At the end of the day, what every web designer or product designer aims for is that their product will be visible to a larger audience. Accessibility besides increasing your reach, also makes your website or product more visible when searched for with search engines. This is generally due to the improved user experience, even though accessibility is not considered one of the factors that influence ranking (UserWay, 2023). Accessibility increases your reach, therefore increasing the number of users you have, which will suggest to the algorithm that your site may be what a lot of people want. Therefore, to exclude accessibility, may just be detrimental to you.
• Accessibility establishes a favorable public image: We live in a society where inclusion is the order of the day. No faction wants to be excluded for any reason, nor should they. Your impact on society is directly proportional to your relevance in society. A negative image, such as being labelled a promoter of exclusion, will affect your public image and brand.
• Ensures non-discriminatory practices: Exclusion, besides being publicly unacceptable, is also against human rights. This is clearly stated in Article 9 of the Convention on the Rights of Persons with Disabilities and its Optional Protocol, adopted by the United Nations in December 2006. The article vividly spells out that not only should accessibility be inculcated into daily living, but also calls for the identification and elimination of all barriers that affect accessibility (Article 9 – Accessibility | United Nations Enable, n.d.). So, not giving accessibility its due attention might just land you in a friendly chat with a judge someday!  
• Makes you implement better standard coding practices: This benefit goes without saying and does not need much light thrown on it. A codebase written with accessibility at its core will be of better quality than a codebase that has accessibility written as an add-on. A web designer that builds with accessibility in mind from conception, will provide outstanding and societal–relevant designs and codes. The fact that you make such coding practices part of your regular coding process, will also make you relevant in this current society.

How Do We Make Web Designs Accessible?

Currently, when it comes to web design accessibility, the standards accepted worldwide are the standards established in the Web Content Accessibility Guidelines (WCAG). The WCAG is published by a group of individuals and groups called the World Wide Web Consortium (W3C) and it is updated regularly. Although the last published WCAG (WCAG 2.1), was published on 5^th June 2018, there is a WCAG 2.2 Draft. This draft was published on 17^th May 2023 – and is intended to be published by the end of this year. There is also a WCAG 3.0 Draft available.

The intent of the WCAG 3.0, is to expand the breadth of coverage beyond “content” and to make it stand out from its predecessors due to the popularity of the “WCAG” acronym. This is reflected in the name given to the WCAG 3.0 – “W3C Accessibility Guidelines (WCAG) 3.0″, instead of Web Content Accessibility Guidelines. Although the first working draft for WCAG 3.0 was published on 21^st January 2021, the complete work has some unresolved issues. This puts the final publishing date probably a few years from now (W3C Web Accessibility Initiative (WAI), 2023).

In this article, the WCAG 2.2 Draft will be the main guideline used. The difference between the WCAG 2.2 Draft and its predecessor the WCAG 2.1 is in the drive to enhance accessibility for three groups of users with disabilities. These are users with low vision, those with cognitive limitations or learning disabilities, and those with challenges related to motor disabilities or large fingers when using mobile devices. The drive for this enhancement was fuelled by the growing numbers of mobile phone users and to facilitate an improved user experience for these users. Despite these changes, not all the needs of users have been completely met and regular improvements will be made to meet them. The WCAG 2.2 Draft is also compatible with its predecessors (Web Content Accessibility Guidelines (WCAG) 2.2, 2023).

Based on the guideline, accessibility should have three levels of conformance to meet the wide range of needs. The levels are:

• A – the lowest
• AA
• AAA – the highest

These levels of conformance are based on the four principles that determine the basis for accessibility (sometimes referred to as the POUR principles):

• Perceivable: Items you can perceive with your senses. Touch, sound, vision, etc.
• Operable: Items referencing how the reader operates the software, like buttons, menus, navigation, etc.
• Understandable: These items are related to how a user will recognize and remember elements of your interface. When interfaces do the same things in the same way, it is more understandable to the user.
• Robust: Making sure the interface works the same way in all the technologies that are supported. So, if you use a site in Edge and Chrome, they should ideally work the same.

Based on these principles, there are thirteen guidelines. While the guidelines themselves may not be easily testable, they serve as a framework and set overall objectives that assist authors in comprehending the success criteria and effectively implementing the recommended techniques.

1. Text Alternatives (Perceivable): Ensure that non-text content, such as images, icons, and multimedia, has text alternatives (e.g., alt text) that convey the same meaning or function to users who cannot see the content.
2. Time-Based Media (Perceivable): Provide alternatives or text transcripts for time-based media (e.g., audio and video) so that users with disabilities can access the content.
3. Adaptable (Perceivable, Operable): Create content that can be presented in different ways without losing information or structure. This helps users with disabilities who may need to adjust the presentation.
4. Distinguishable (Perceivable): Ensure that content, including text and images, is easily distinguishable, such as having sufficient contrast between text and its background, making it more accessible to those with visual impairments.
5. Keyboard Accessible (Operable): Ensure all functionality can be operated through a keyboard interface without requiring specific time-dependent actions like hovering or double-clicking. This benefits users who rely on keyboards or other input devices.
6. Enough Time (Operable): Provide users with enough time to read and use content. This includes adjustable time limits for time-sensitive tasks, so users with disabilities have time to complete them.
7. Seizures and Physical Reactions (Operable): Avoid content that could cause seizures or physical discomfort for users with photosensitive epilepsy and other sensitivities.
8. Navigation and Consistency (Navigable): Ensure consistent and predictable navigation throughout your website or app. Users should be able to find content easily and understand how the site is structured.
9. Input Modalities (Operable): Make content available and operable through various input methods, such as a mouse, keyboard, or touch screen. This helps users who rely on alternative input devices.
10. Readable (Understandable): Ensure that text content is easily readable and understandable. This includes clear and simple language, consistent navigation, and a predictable layout.
11. Predictable (Understandable): Make web pages and applications behave in a predictable way, which helps users understand and interact with the content effectively.
12. Input Assistance (Operable): Assist users by providing input suggestions, error prevention, and clear instructions, making it easier for them to complete forms and other tasks.
13. Robust (Robust): Ensure that your content is compatible with a wide range of user agents and technologies, including assistive technologies used by people with disabilities.

Within the WCAG 2.2 document, the working group has meticulously documented a diverse array of techniques corresponding to each guideline and success criteria. These techniques serve an informative purpose and can be classified into two distinct categories: those that are deemed sufficient to meet the success criteria and those that are advisory. While the former ensures compliance with specific requirements, the latter goes beyond such obligations and empowers authors to effectively address the guidelines. Additionally, the advisory techniques tackle accessibility barriers that may not be covered by the testable success criteria. The document also encompasses the documentation of common failures, whenever they are known, further enhancing its comprehensive nature.

This article, however, will focus on the visual patterns of accessibility and the guidelines that relate to it. The four visual patterns that will be discussed are:

Color Contrasting

Color contrasting, in the context of design and accessibility, involves strategically selecting color combinations that enhance the visibility and legibility of content. One of the most widely recognized guidelines related to color contrast is the Web Content Accessibility Guidelines (WCAG) 2.0 and its subsequent versions.

WCAG 2.0 provides specific criteria for color contrast ratios to ensure that text and images are distinguishable from their backgrounds. According to these guidelines, text should have a minimum contrast ratio of 4.5:1 against its background for normal text, while larger text (18 point or 14 point bold) requires a minimum contrast ratio of 3:1. This ensures that text content is easily readable, especially for individuals with visual impairments or color deficiencies.

By adhering to the WCAG 2.0 guidelines on color contrast, designers and developers can create digital materials that are not only visually appealing but also accessible to a broader audience, including those with varying levels of visual acuity.

In part 2 of this series, I will provide you with some additional tools to help you make sure your colors are acceptable.

Font Sizing

Font sizing in the context of design and accessibility refers to the selection and presentation of text to ensure it is legible and adjustable for various user preferences and needs. Font sizing plays a crucial role in creating an inclusive and user-friendly digital experience.

WCAG provides specific recommendations regarding font sizing to enhance accessibility. It advises that text should be resizable up to 200% without requiring assistive technology or loss of content functionality. This guideline ensures that individuals with visual impairments or those who simply prefer larger text can easily adjust font sizes to meet their reading needs.

By adhering to the WCAG recommendations on font sizing, designers and developers can accommodate a wide range of users. Providing flexible font sizing options allows individuals to customize their reading experience, ultimately enhancing the usability and accessibility of digital content.

Labelling and Iconography

Labelling and iconography are essential elements in design and accessibility, particularly in web and application interfaces. They play a significant role in providing context, guiding user interactions, and ensuring that content is comprehensible to a diverse range of users.

WCAG emphasizes the importance of clear and descriptive labels for form fields, buttons, links, and other interactive elements. Descriptive labels enable users, including those who rely on screen readers or assistive technologies, to understand the purpose and function of various interface elements. This ensures that users can navigate and interact with digital content effectively.

Additionally, WCAG guides the use of iconography. Icons should have clear and consistent meanings to avoid confusion. Alternative text (alt text) for icons is essential for users who cannot perceive the visual content.

Incorporating well-labeled and appropriately designed icons enhances the overall user experience and helps individuals interact with digital content more effectively, regardless of their abilities or assistive technology usage.

Navigation and flow

Navigation and flow are fundamental aspects of design and accessibility, impacting how users interact with digital interfaces. These elements are crucial in ensuring that users, including those with disabilities, can navigate content easily and efficiently.

WCAG highlights the importance of consistent and logical navigation structures. Menus, links, and other navigation elements should be organized clearly and predictably. This helps users understand the layout of a website or application and find their way around it with ease.

Flow, on the other hand, involves the sequence of interactions within a digital interface. WCAG advises that interactive elements, such as forms or multi-step processes, should follow a logical and intuitive flow. This ensures that users can complete tasks without confusion or errors. For individuals with cognitive disabilities or those using assistive technologies, a well-structured flow can significantly improve the user experience.

Understanding and practicalizing these guidelines help individuals, including those with disabilities, interact with content seamlessly, resulting in a more accommodating digital environment.

In part 2 of this series on Accessibility, we will delve deeper into the details of each of these topics. We will explore their intricacies and share practical tips needed to create digital experiences that are not only visually engaging but also accessible to all.

Conclusion

It is imperative to recognize that accessibility goes beyond being used as add-ons, plugins, or optional services. It should be ingrained in the very fabric of digital experiences and seamlessly integrated into every aspect of web development. Embracing accessibility is not just about catering to persons with disabilities; it’s about creating a digital landscape that benefits everyone. By making our websites, applications, and content accessible, we foster a more inclusive online world for all users, regardless of their abilities or disabilities.

Furthermore, accessibility serves as a powerful catalyst for positive change – making the online realm a better place for everyone. It allows individuals to participate fully, access information, and engage with digital services on an equal footing. Thus, by breaking down barriers, and fostering a more empathetic and user-centric approach, we create a web environment that empowers and enriches the lives of all individuals.

Ultimately, let us begin to see accessibility as an integral part of our digital DNA, not as an afterthought or an optional extra. Realizing that, by embracing accessibility wholeheartedly, we not only create a better experience for users with disabilities but also elevate the user experience of the digital landscape for every single one of us. Together, let us work towards building a more inclusive, compassionate, and harmonious digital world that leaves no one behind.

References

Article 9 – Accessibility | United Nations enable. (n.d.). https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/article-9-accessibility.html

UsableNet. (2022, August 22). Accessibility vs Usability: What is the Difference to the Disability Community? UsableNet Blog. Retrieved July 13, 2023, from https://blog.usablenet.com/accessibility-vs-usability-what-is-the-difference-to-the-disability-community#:~:text=To%20help%20these%20users%20accomplish,effective%20experiences%20for%20all%20users.

UserWay. (2023). SEO and Accessibility: Essential Factors to Keep in Mind. UserWay Blog. https://userway.org/blog/the-impact-of-accessibility-on-seo/#:~:text=Accessibility%20is%20not%20an%20SEO,content%20better%20and%20improve%20searchability.

W3C Web Accessibility Initiative (WAI). (2023, May 16). WCAG 3 introduction. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/

W3c Web Accessibility Initiative. (2019, July 27). Form instructions. Web Accessibility Initiative (WAI). Retrieved July 17, 2023, from https://www.w3.org/WAI/tutorials/forms/instructions/

Web Content Accessibility Guidelines (WCAG) 2.2. (2023, May 17). https://www.w3.org/TR/WCAG22/

What is accessible technology? – UW–⁠Madison Information Technology. (2023, May 23). UW–⁠Madison Information Technology. https://it.wisc.edu/learn/make-it-accessible/what-is-accessible-technology/

World Health Organization: WHO. (2023). Disability. www.who.int. https://www.who.int/news-room/fact-sheets/detail/disability-and-health#:~:text=Key%20facts,earlier%20than%20those%20without%20disabilities.