Accessibility in Design — Pt. 3 Deep Dive

Written by: John Freire, Product Designer, TribalScale

📫 Subscribe to receive our content here.

💬 Have any questions about our design capabilities? Click here to chat with one of our experts!

Photo by Edho Pratama on Unsplash

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.

Check out Part 1 here which explains the fundamentals of accessibility in design.

Check out Part 2 here which goes over more specific actions and best practices for design accessibility.

Earlier 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 48x48 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

Language

• 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.

Formating

• 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.

John is a Product Designer here at TribalScale and is always eager to jump in with out-of-the-box solutions. John never shies away from bringing up the importance of good UX for stakeholders and always applies a problem-resolution methodology. Outside of work hours you can find him in the wild trying to balance his love for his dog and video-games.

TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!