Accessibility in Design
Niagara Falls has travelled 11 kilometres upstream in the past 12,000 years. Let’s hope your company advocates for accessibility at a faster rate. And if not, here are some easy things you can do to make sure that your team does pick up the pace moving forward.
As a tool for both the study and development of a project, a UX Designer should always be mindful of how accessibility becomes more and more an essential part of their design process. Just like any wireframing step, no designed experience is truly complete unless taken through accessibility tests and accommodations.
Fundamental to every design process, the debate on accessibility extends beyond the act of only designing. Making a tool accessible has a goal of not only allowing it to reach more people, but in doing so projecting itself through barriers—be they physical, technical, visual, or cognitive. Ample participation should be promoted across the diverse societal spectrum and users should decide by themselves, rather than having that choice made for them from the start.
But how does accessibility translate into elements? Some would say that subtitles are about resolving an issue pertaining to users who have impaired hearing, but in doing so we also satisfy the requirements of those who are not language proficient. A more contrasting colour pallet may be leveraged for users who are colourblind but may also be used by someone whose vision is significantly reduced in other ways. But these are all holistic examples of accessibility, occurrences that happen to be. How can we promote such a level of accessibility in a proactive manner? For that there are a few methods, worth noting would be the following.
Inclusivity vs equity
Before we go in-depth on the tools and processes that promote accessible design, we need to deepen some definitions of accessibility that will better assist in our comprehension of a user’s true needs of accessibility, which our project intends to accommodate.
One of the main differences that we must understand is that designing with inclusivity versus equity in mind.
Inclusivity — is based on promoting equal treatment for everyone, and providing the same resources and support for everyone, equally.
Equity — stems from the principle that we are all different, and that must be factored in. Acting as a counterweight to personal imbalances, pairing different resources to different needs, thus allowing all to have the same opportunity irrespective of their differences.
Both possess the same intent, to promote equal usage opportunities across (mostly) digital environments. Albeit with a key difference, the means through which this usage is promoted.
When we focus on equity, we acknowledge the diversity of contexts, pain points, needs and demands within each group. Leveraging that as the starting point of our decision-making process, we can allocate resources accordingly to achieve the highest possible efficacy in a project.
When it comes to design there are a few processes that revolve around the same goal, of including and promoting opportunities of use, but each with their schisms in terms of how they work.
Universal design
This is the default methodology, which seeks to leverage design principles able to include the most amount of people, from all age ranges and skill levels. It creates a solution that does not tie itself to any specific limitation but takes on a more holistic approach. Accompanied by a series of guidelines such as WCAG2.0 and others as a checklist of baseline requirements.
While approaching subjects of inclusivity, it uses flexibility and tolerance to avoid potential errors, but without trying to solve a specific issue. This blanket approach can be effective in designing what is a “one size fits all” solution, able to bring in a wider spectrum of users, but does little in terms of accommodating more impactful types of disability.
Inclusive design
Geared towards addressing a specific accessibility concern — be they cultural, social, linguistic, regarding age or technical ability. The inclusive design approach focuses on tailoring the product toward a specific group, which albeit diverse, still has similar accessibility issues across the board. For instance, an app made for seniors will have a more generous sizing on their typography, while an app that solves the same issue but is made for people with low ability to focus can have a reduced amount of clicks to reach the same outcome. These are solutions that take a specific issue and take special care in addressing them. Said elements can also be used in conjunction with one another, and they do not exclude users that do not need said assistive design. Usability and accessibility are some of the principles that govern the inclusive design, which may open doors to other markets as resources are developed and solutions are created.
Equity-focused design
This is the next step up from inclusive design. This methodology involves targeting groups that are oftentimes excluded, ignored, marginalized or without representation in what is deemed mainstream platforms. An equity-focused design understands that equal opportunities don’t occur on a whim, but with intent and focus. And this can be achieved through simple reflections such as “what demographics did not have adhesion to a product?” and “how can we tailor our product to them?”. Considering these aspects, we can build products in a way that is open to both users that do require accommodations and those that don’t. With due prioritization, testing and observance, one can make more equity-focused design decisions to accommodate these needs while maintaining established market footholds.
Considerations
More than 1 billion people live with some form of disability, irrespective of origin, that may limit or impede their engagement with design. Although accessibility restrictions may vary through demographics, some design implications may be quite similar across the board.
Visual
Impairments such as colour-blindness, low vision, or epilepsy can find issues when encountering the following:
- low contrast
- poorly signified links
- colours as the only identification of an action
- the usage of bad layout or poorly classified information
- context/action separation, such as fields and forms
Motor
These impairments such as lack of fine motor coordination, muscle spasms or palsy may result in challenges when faced with the following:
- content that lies behind precision clicks such as those of small clickable areas
- actions with different outcomes being grouped too close together
- excessive scrolling or repetitive movements being a requirement for a flow
Hearing
These impairments come in different levels of severity and may cause issues with the following:
- content that is available only as part audio or video
- structural dependency of multimedia content
- longer segments of audio without any subtitles
- voice channels as the only means of communication
Cognisant
These impairments may hinder a user’s ability to interpret the following:
- figures/icons as the only language of idiomatic expression
- underlined words, italicized or capitalized text
- reliance on memory of pages or previous actions
- orthographically correct input requirements
- vague or “unpredictable” buttons
Socioeconomic
These limitations are technically not an individual shortcoming, but a societal issue. A very important factor to consider, as design is not only about a problem being resolved, it’s also about the context to which this resolution occurs. Here are some examples to consider:
- Rural areas may not be able to rely on broadband connectivity, will the techstack be impacted by this?
- How will the socioeconomic aspects of our users impact the devices that they will have access to?
- Time limitations, how will users with tight schedules accomplish the activities/flows proposed?
Societal/cultural upbringing
Societies develop differently, how is the text written in the language of this demographic and how will that impact design elements? An important example is gender issues, where in some cases women may encounter restrictions when accessing certain services, face hardship in finding reliable content, and be subject to harassment and persecution. Amongst other challenges that stem from gender inequality, an issue not particularly considered in digital environments, how will we prevent/remedy issues such as these?
The next billion users (NBU)
Every week, millions of users start using the internet for the first time, therefore, products and services have to be developed with that amplitude in mind. The directive of promoting equal access to all is not only a good market decision, but possesses some implications greater than ourselves. New users can come with many limitations—be they economical, informational, contextual, or environmental—which may limit their exposure to technology or make it less reliable for them to trust.
In the next part of this blog series, we’ll discuss some of the best practices for addressing these factors. We’ll also dive a little deeper into some of the small things that can be done to achieve more accessible design decisions and include resources to consult.
Moving forward from understanding, we then have the means to take action and accommodate for accessibility in our works. Under the context of universal accessible design, we can leverage some methodologies and standards to ensure that some grounds are covered in terms of “blanket accessibility”.
Following WCAG 2.0 (Web Content Accessibility Guidelines), we can jump into the accessibility discussion from quite a few angles. The main goal is making your designs accessible, but overall also:
- Perceivable — providing the best means of presenting information through which text, media, alternative layouts (simpler) or background separation makes the content more simple to access, be it by reading, or listening.
- Operable — ensuring that all functionalities are accessible through the keyboard, providing time for reading and usage of the content. Avoiding excessive animations that may cause discomfort, convulsions, or compete overall with the content itself. All the while assisting with navigation and system status visualization.
- Comprehensible — elaborating clear and cohesive texts, predictable actions and error prevention.
- Robust — maximizing the compatibility with available devices, past and present, including visual assistance (e-readers). Future-proofing components to always be readable/adjustable.
But above all, designs must be usable. As this is fundamental to assist not only impaired users but also to ensure that the whole experience is assertive, useful, operable, accessible and simply pleasant for all users.
On that note, one of the main tools that enable designers to promote this level of accessibility is the 10 Usability Heuristics by Jakob Nielsen.
Working with accessibility
Having accessible digital products is no longer a competitive edge, but a necessity which impacts a product’s direct success. Digital inclusivity is a legal standard in the EU, USA and Canada, as well as many other countries throughout the world. So it’s not only a nice-to-have, compliance is required by law. This legislation was put in place to remove technological barriers that limit digital access for those with accessibility needs.
Many SEO standards also weigh in factors of accessibility when it comes to search rankings. So not only does a website require good content, but it has to be presented in an accessible and user-friendly way.
In this series, I’ll outline a few strategies and recommendations that we can incorporate in making products accessible. Having these steps take place from inception, allows us to implement them more seamlessly, ensuring that accessibility is achieved without issues.
Learning locally
Try and have your team participate in meetups with professionals that are familiar with “thematic regions” so you can better understand your users and their possible needs. There are digital communities focused specifically on addressing the needs of different devices and platforms. Some groups may even be willing to be sourced to guarantee accessibility for other users.
Expanding your visual knowledge
This is where the considerations mentioned in the first part of this blog series (visual, motor, hearing, cognisant, socioeconomic, societal/cultural upbringing) come up. Keep them in mind as you establish personas and represent your users through your visuals.
Be attentive to detail here. For example, you can represent left-handed users and assure yourself that this characteristic will not interfere with the usability of your product. If needed, make the necessary visual adjustments to accommodate.
Considering unique user needs
Include users that may have difficulties within your outlined personas, research relevant usability tests to carry out, and reach out to groups with strong web presences for their input. Familiarize yourself with the accessibility configurations that are offered by the OS you’ll be working with. Test new technologies within these frameworks and simulate navigation/flow usage.
Empowering users through privacy and data security
Some users may need assistance conducting activities that rely on the input of private data, such as conducting payments or creating accounts. Make them feel comfortable by openly sharing what information is collected and how this information will be used in the future. Be transparent in regards to privacy options. Make these options clear and visible, as well as easy to find. Explain clearly the way data is used within the context of your product, and prompt them to share any feedback and clarify any underlying questions they may have.
Incorporating feedback
Be accepting of change. Users will tell you why and how they have issues with your product. As a professional of the digital age, you should be accepting of this feedback and develop the skill of interpreting feedback. This skill is especially important as feedback may not always come in the form of actionable items, therefore requiring careful analysis and consideration.
In the next article of this three-part series, we’ll go over some of the avenues of change that can be pursued when developing a product that caters to wider audiences.
arlier in the series, we covered the plans to ensure that your product can become more accessible to a wider audience. However, a lot like the falls, change can be slow to implement due to a series of reasons, from a stakeholder’s final say of nay, to code written in ways that make it difficult to restructure without refactoring. However, where there’s a will there’s a way! And for that way, here are some low-hanging fruits that can make your day-to-day as an agent of change a task more feasible than monumental.
Good HTML
Leverage the following validation methods to check whether your content is published directly on the HTML to allow for assistive technologies to correctly interpret the information required for content transcribing.
- W3 Markup Validation service — helps validate the language to find any issues which may impede readers that use devices such as e-readers or text translators.
- Accessible Rich Internet Applications or ARIA Landmark Roles — can also facilitate assistive technology for text scanners.
- Accessibility tests along with usage of plugins — can expedite the process of testing by leveraging WCAG compliant directives.
These techniques can assist in the accessibility classification, which can assist with error prevention. Other tools worth mentioning include Site Improve and Google Lighthouse.
Great projects, modest devices
The next point ties into why it’s important to structure more than just the HTML. As a tie-in on the previous article’s point of “Socioeconomic limitations,” one should ensure that users whose access depends on more limited devices are not left out. These limitations are more often present through the presence of low memory devices and access to high-speed internet, or lack thereof.
- Test your layout in a 480 x 800 px resolution.
- Reduce the application size, and promote a lite version whenever possible.
- Reduce the amount of process that your application uses to promote battery life.
- Make your content available offline, and allow for progress indicators.
- Render your content as you go to reduce memory usage.
- Conduct testing in airplane mode to simulate low connectivity/bandwidth.
- Minimize updating and refactoring in favour of relevant updates, and explain to your user what was improved when doing so.
- Allow for user access to test branch and collect feedback.
- Test your layouts in both portrait and landscape modes.
- Zoom in to check for layout issues when above a 200% zoom.
Peripheral usage
Prioritize the usage of keyboard and keyboard compatibility. Some users may have issues utilizing the mouse due to motor limitations, some may not have access to a mouse device altogether.
- Consider projecting for mobile and other touch screens, while testing the navigation for all the content by the usage of keyboard or voice commands.
- Group your actions, buttons and CTAs to specific areas, this crosses into the HTML as well, try and reduce the space between interactable areas.
- Allow for the user to personalize and configure their experience, and communication platforms.
Minimizing errors and communicating system status
Also known as Heuristics 1 and 5; preventing possible navigation errors, all the while offering help undoing actions.
- Create easy-to-understand warning labels, allowing users to perceive them easily, and reduce cognitive load through confirmation modals, or informative warnings.
- Allow for an easy undo button, in a clean and efficient way.
- Include action buttons and notifications within the context of your flows.
- Establish the channels for system feedback, how will you address the users before, during, and after a flow.
Considerations when layouting
Maintain a layout that is simple, consistent, linear, and logical to facilitate dynamic reading and access to people with cognitive disabilities, try and eliminate unnecessary complications.
- Utilize captions and transcriptions to describe images.
- Leverage good spacing and manipulate components regardless of the user’s physiognomy, posture or mobility, remember that at the end of the day, the average size of fingertips is 1.6–2cm or 60–76 px.
- The size for a minimal clickable element should be 48×48 px as per WCAG standards.
Pay attention to your colours
Try to bring good contrasts and simple colours to your product’s identity, and consider the change they’ll undergo through different backgrounds.
Remember that colours also carry meaning to different cultures, including that in the research of your market prior to releasing your product.
- A good contrast proportion follows a 4.5:1 for normal texts and 3:1 for titles (or texts bigger than 18px).
- Test your product on smaller screens, use plugins that simulate and scan for the perspective of users with low vision or who may be colour blind.
- Utilize visual elements in conjunction with colours to indicate actions, status and contexts. Pairing text, icons and colours can help the users recognize patterns and more easily make decisions.
Be mindful when formatting text
- Consider how localization will affect your product’s interface, the text will grow/shrink and even text direction may change in RTL languages.
- Avoid jargon and technical terms whenever possible; limiting your audience to “industry professionals” prevents the wider audience from participating.
Formatting
- Combine shapes, colours and texts harmonically, and leverage imagery so that the audience can understand your content more intuitively.
- Increase the size of components and fonts to allow for more legibility and visual accessibility.
- Maintain a left side alignment.
Links
- Allow for ample clickable areas, remember the 48 x 48px standard.
- Use self-describing titles.
Leverage every tech you can
There are several tools in the market that allow you to elaborate more inclusive design.
Try to always design screens that are light on memory and cognitive load. Educate yourself on the latest tool updated whenever possible.
And as an easy tip, keep in mind that we have some great tools available such as:
- TTS software and voice synthesizers.
- Screen readers with phrasal highlighting.
- Tactile devices.
- Voice commands (present as both OS Native and third party options).
- Camera-operated cursors that rely on head, mouth or eye movement.
- Visual assistance through video call and screen share.
Never settle
We started this series to raise awareness of the many needs of non-conforming user types, however the idea behind this article is not to be the end-all be-all accessibility guide, but a conversation starter.
The ideal path to understanding digital accessibility is yet to be developed and expanded on. If the “digital entrepreneur” profession is a new one, imagine that of the digital accessibility consultant. That however should be taken more as an incentive than a detriment, as this allows for a lot of contribution and room for innovation.
This can include strategic decisions, design frameworks, time and effort being developed as well as other factors to be considered during planning phases. And when that comes to be, it’s best to be proactive than reactive. Yes, it costs to account for accessibility. But so do ADA Lawsuits.
To participate in this theme, inclusive design can open important doors for users all throughout the globe so that they too can participate in developing the technologies we’ll have tomorrow.
Remember that when designing with accessibility in mind, we can empower people to achieve their independence. After all, technology should be within everyone’s reach.