Accessible Design: What To Know Before Designing | Compliant
Accessibility is prevalent in all forms of society. For example, architects must be mindful of entrances and doorways when designing buildings, to ensure wheelchair accessibility for those with mobility impairments.
But mobility isn’t relegated to new construction or home access. The accessible design also applies to web design and information and communications technology.
Web designers, like architects, must keep web accessibility in mind during the design process to ensure equal access for users with diverse abilities.
An accessible web interface can be thought of as the accessible front door. The usability of design systems is paramount for the web designer.
What Is Accessible Design?
You could sum up the concept of accessible design as being a design that works for all people, regardless of their hardware, software, location, or abilities. Creating accessible products is ideal. However, millions of websites still operate with numerous accessibility errors.
Having the proper accessibility features in place is essential for any web developer or organization looking to create high-quality websites and communication tools for all, including those with various disabilities.
Accessible design involves developing websites and web tools that are usable and inclusive. While accessibility addresses discriminatory elements related to the user experience of those with disabilities, usability ensures the design is effective and efficient for all. Inclusion in design simply ensures involvement for everyone to the greatest possible extent.
In terms of design, the accessibility basics ensure those with disabilities can understand, navigate, and interact in the digital environment.
The accessible design seeks to address all disabilities that could affect access to the websites, technologies, and tools, including:
- Physical impairments
- Speech issues
- Visual impairments (e.g. blindness, low vision, and color blindness)
- Auditory impairments (e.g. deafness)
- Cognitive issues (e.g. certain learning disabilities).
Accessible design helps give everyone an equal voice; it allows everyone a chance to contribute.
Why Is Accessible Design Important?
While universal design seeks to design products and environments that are usable for all people, accessible design involves the process in which the needs of people with various disabilities are specifically considered.
As mentioned, this process ensures an inclusive digital environment for millions of people with disabilities. According to data by the CDC, 1 in 4 adults in the U.S. live with some type of disability — that’s roughly 61 million people.
Of those In the United States, 10.8% live with some form of cognitive disability, nearly 6% have hearing difficulties, and 4.6% suffer from visual impairments.
But the internet is worldwide and not isolated to one continent. Worldwide, there are over 1 billion people living with a disability.
The internet is a growing resource for many aspects of life — including employment, education, and commerce — equal access must be made for all.
An accessible design is important because it supports social inclusion by removing barriers of discrimination for those with disabilities.
What Makes a Website Accessible?
We’ve seen how important accessibility is when it comes to individuals with disabilities and businesses. But, what makes a website accessible? Well, website accessibility depends on numerous elements working together, including web browsers, web technologies, and more. Thankfully, there are guidelines to help support web accessibility.
It is important to understand that accessibility in the digital environment follows from the provisions outlined in the Americans with Disabilities Act (ADA). This civil rights legislation defines the rights of people with disabilities as they relate to all areas of public life.
According to ADA standards, Title III specifically, persons with disabilities must have equal access to public accommodations (i.e. places open to the public), this includes informational websites of such places. This title is enforced and regulated by the U.S. Department of Justice.
Guidelines for website accessibility were developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). These are referred to as the Web Content Accessibility Guidelines (WCAG). These guidelines — WGAC 2.1 — are considered international standards for web accessibility and are also an ISO standard (ISO/IEC 40500).
Basic compliance for WGAC 2.1 guidelines for what makes a website accessible are as follows:
- Content is perceivable – All informational elements must be easily perceived to accommodate diverse abilities.
- Website is operable – Navigation of the user interface should be easy to operate for all users, especially those with disabilities.
- Content is understandable – Content should be clear and consistent in presentation, free from barriers to understanding.
- Compatibility is robust – Websites should maximize compatibility with all potential users and be made to accommodate assistive technology (e.g. screen readers, screen magnifiers, etc.).
Colors
The use of color is one of the most important elements to consider when it comes to website accessibility. Many individuals suffer from visual impairments (e.g. color blindness) that make it difficult to access the content. Accessible color palettes should be chosen carefully with this in mind.
The color ratio is important too. A sufficient color contrast should be used between texts and backgrounds. An optimal ratio according to the WCAG is 4.5 to 1. Color should highlight or complement what is already visible, not as a sole means to convey information.
Images
Images of text should be avoided and should only be employed for particular visual cues, such as use in logos. If a substantial amount of text is used as an image, the text should also be displayed elsewhere on the page. Also, all images that are essential for context or are informational in nature should also have text alternatives.
Alt Text
To ensure equal access to those with visual impairments, all appropriate images should have alt text. This includes informative and complex images, such as those that graphically represent concepts and information (e.g. graphs and diagrams). Also, this includes alt text on all functional images, such as links, labels, buttons, or an icon.
Images can create a major barrier to access context to information, alt text helps remove those barriers, especially for those who use assistive technologies such as screen readers or speech input software.
Graphics
Images could be put under the banner of graphics. Graphics are simply any visual representation used on a website to enhance the idea being portrayed. This could include things like maps or videos, or the general layout of a site and how elements are displayed through the CSS design.
Again, any element that invokes visual representation to enhance or provide context for information content must have a text alternative. For example, videos or audio elements should be optimized with closed captions or have transcriptions provided for the hearing impaired.
Links
Accessible design is also mindful of links and how they will be used on the site. Many individuals with disabilities that cannot use a mouse to navigate sites utilize voice recognition software. That means the texts for the links should be clear and unique; avoid duplicated link texts.
Also, many individuals utilize a keyboard for navigation, often using the tab key. Navigation should be optimized for this, including the use of links.
Fonts
Selecting the right fonts is also important when it comes to web accessibility. It is not only important from a visual acuity standpoint but also to ensure equal access to those with cognitive disabilities, such as dyslexia. Overall, sans-serif typefaces and fonts work best for online content with 12 to 14-point fonts for body texts.
Building Blocks
Of course, these can all be considered the building blocks for accessible design. Simple navigation, use of color, and alt texts are all essential.
UX designers spend a lot of time focusing on how to improve the interactions between users and digital products, including websites. This involves understanding user interface controls (e.g. HTML, JavaScript, etc.).
The Accessible Rich Internet Applications Suite (ARIA) of the WAI helps define the ways these building blocks, dynamic content, and advanced web applications, can be more accessible to individuals with disabilities.
What About Mobile Website Accessibility?
In our day, mobile website accessibility is equally as important, this can include the use of smartphones and tablets. Generally, issues concentrate on touchscreen interfaces and how individuals with disabilities can navigate from mobile devices. Optimization for this use is key.
Guidelines and mobile web best practices are outlined by the WCAG.
Conclusion
At the end of the day, it is important for web designers to understand that accessible design is not a barrier to innovation.
The guidelines outlined in the WCAG can help enhance the overall user experience while providing equal access to digital content for all.
There are many elements to consider when designing an accessible website, from color to functionality. But, the most important element is ensuring everyone has the same opportunity to access and contribute.
