There are 19 million Americans with disabilities which makes it obvious that universal design is much needed to have a high-quality web presence.
According to a website accessibility consultant, of those users that suffer from physical and mental challenges, the universal design aims to represent and advocate for those with:
- Color blindness
- Blindness and low vision
- Deafness and hearing loss
- Learning disabilities
- Cognitive limitations
- Physical dexterity issues like the inability to use a keyboard or mouse.
To enhance the inclusive design features and help navigate the web, software designers have worked extensively to provide assistive technologies such as screen readers, interactive voice assistants, Braille output devices, and closed captioning.
With continuous innovations aiding with these technology tools and more, 18% of the United States population with disabilities continues to have problems with accessibility. Even with imposed fines of up to $150,000 or settlements that count in millions, most website owners still are asking themselves, “Is my website ADA compliant?” On just the core business and investment level, accessibility is still an important issue to resolve because it’ll be naive to ignore almost 20% of their target audience with a mighty $200 billion of discretionary spending power.
The World Wide Web Consortium, or W3C, providing contours of making the websites accessible, has come up with Web Content Accessibility Guidelines (WCAG). The guideline is meant to give the designers standards for making web content more accessible universally. This means that a new definition of inclusive design is needed.
We can readily use a practiced ADA-compliant website checklist, but instead, we will discuss more nuanced facets of website design that many projects are designed around. Here are some design attributes that are worth mentioning when doing universal design for inclusiveness:
It’s All in the Header (Structure)
Accessibility tools like screen readers offer the users shortcuts, enabling users to browse by types of content, on a given web page things like forms, tables, headings, and links. In that effort, it is very most important to make a website accessible by orienting users to the website and the content they’re interacting with. Having incorporated a well-designed header structure is essential to accomplish this.
Visually designing a webpage and making headings on a website by changing the font sizes is easy. However, if those headers are not labeled correctly as headers, the structure of the website and the structured way content is positioned will not be recognized by screen readers. Missing a well-defined header structure can also mean having inconsistencies on different pages of your website. To streamline your content and make it understandable to screen readers, set up a structure for your website representing a clear hierarchy of headers. This would mean having dedicated H1, H2, H3 tags that are visually apparent and embedded in the code itself. This is necessary to be helpful to screen readers and ensure consistency throughout your website by providing a consistent UX.
Having a dedicated header structure, it turns out, also allows search engines to scan your website better, resulting in higher ranking and better SEO.
Making More Accessible Links
Website and the world wide web have been around long enough for users to have well-established expectations for what they see and how they interact within digital spaces. Links are one of those expected elements that are ever-present and expected. As a practice, within the body of text, most users assume that the linked text will be underlined and be of a different color than the rest of the body text. Since it is a standard user expectation, every developer and designer embraces it rather than depart from it when choosing styles. In this way, the visual of an underlined text cues a user to decide whether or not to interact with the element while simultaneously providing access to the information referred to via the link.
However, developers usually assume that the user is not using tools to read the web page when it comes to universal design. This results in designing linked text that is confusing and not very accessible. Especially when the linked text lacks a description of where it leads to. When used, phrases like “Learn More” and “Click Here” may sound intuitive, but they provide users with any clear indication of what they will encounter through the link. To make it universally accessible, we must use a descriptive link text such as “view our UX resources” that gives users a better hint of what to expect when clicking the link.
Minding Your Ps and Qs
Universal design, at its core, considers everything in terms of UX. That also means the impact typography has on accessibility. Your website typography must give users the information they came to expect in a legible, easy-to-understand manner. In the case of accessibility, legibility is crucial for users who still see the screen but are unable to discern all of the details as clearly on a webpage.
Legible typeface(s) requires paying particular attention to having characters distinguishable from one another and ensuring the font has proper spacing between letters. Additional best practices also require that typography for accessible design include correct alignment for text according to the direction in which a language is written. Easily discernable characters, along with ensuring resizable text is mandatory.
Places like the Braille Institute have gone as far as developing more accessible fonts to help combat inaccessible typography. To facilitate designers and to make their websites accessible, the institute also recommended that designers opt for larger font sizes to make the text easier to read and characters easier to distinguish.
Surfing Made Easy
One of the issues many users complain about is the GUI-centric website structure. Those designers who are not graduates of “the DOS school of computer design” overlook the need to develop a website to be accessible for users navigating using a keyboard. Universal design should be particularly mindful of these users during the design phase. We see this problem consistently affecting a website’s navigation. While regular users are more attuned to using a mouse, typically after they have scanned a website with their eyes, users navigating with the keyboard alone typically utilizes the “tab” key to get around a web page to get a sense of the content of the page before engaging with it. A website’s cumbersome of largely GUI-centric navigation often renders a keyboard user frustrated while navigating the vast number of options to get through, trying to find the information they are looking to access. Therefore, ensuring that your site navigation only contains the critical items that get users where they want to go. Ensuring that the code follows navigation best practices to thoroughly accommodate people using a keyboard around the website quickly without having to go through a long list of items they’re not interested in.
Break It Fast
A good designer never leaves anything to chance. With computer hardware put together with parts and pieces, it isn’t as farfetched to envision a user’s PC preloaded with stylesheets that are not native.
Now a designer may argue that this isn’t something they would usually think of testing and argue something this remote to be not their responsibility, but it’s something undoubtedly important. Users are known to load all kinds of tools to make the site easier to use. Testing out this scenario is part of ensuring that the website is still accessible to everyone.
This problem is especially true for users who have dyslexia. It is critical to ensure that they can utilize the content better. Yes, indeed, it can often break layouts and cause text overlaps or have it run out of its “area.” Doing reading for some users become more of a challenge.
It is often not perceived by designers that users may change colors, so the contrast is high enough for them to read or minimize font sizes to see all the text on the page. By testing, we can see what breaks our code to fix it by using em/rem for fonts, so our layouts are flexible and work with various fonts and font sizes.
Accessibility means serving everyone—whether visually impaired users, hard of hearing users, or those with cognitive disabilities. And this includes the entire spectrum of physical or cognitive challenges, whatever they are. Thorough testing under various scenarios is a critical element of good design.
The design challenges have become ever more urgent under a mobile-first world, where everyone is temporarily or situationally impaired and computing ‘on edge’. The mobile-first model threatens to be less comfortable to users with unique challenges, whether they are trying to watch a video as they multitask or carrying out tasks one-handed while looking after a baby.
Designers must always keep this in mind while making small changes and tweaks to ensure that their designs positively affect more people than they might think.
In conclusion, the design suggestions listed above are not bull and final by any means but an effort to make designers realize that their work has a direct and immediate impact. Every technology, feature, or code changes they include is more nuanced than rigid.
