Tools to help you design and develop accessible experiences

Tools to help you develop and design accessible experiences

In previous posts, we’ve looked at key terms and concepts related to accessibility and we’ve explored ways to audit existing digital products for accessibility. So how do we ensure that new products, re-designs, or project plans are designed accessibly from the start?

In this post we’ll explore some tools that can help UX designers and graphic designers create accessible digital experiences from the very beginning of the product life cycle.

Provide alternatives for non-text media

Catalogue all image, icon, diagram, multimedia, and miscellaneous non-text assets in a database. Associate appropriate alternative text with static non-text content (such as images or diagrams). This text can be informative or null, depending on the meaning of the asset. Associate captions, audio descriptions, or media alternatives (e.g. transcripts) for pre-recorded time based multimedia.

Consider forking the non-text content into “decorative” and “informative” databases. If you’ve got all your content ready to go at the start of your design phase, you can use a spreadsheet or image cataloguing software. If you’re getting the images and assets in tandem with design and development, consider cataloguing all the assets and alt text directly in your CMS.

Staying organized in this way will not only help you keep track of a large array of non-text content, it might actually help you step back and cull some of the decorative or non-essential elements scattered throughout your project. Is that icon really necessary?

Is that picture really more useful than the text that follows? Asking these kinds of strategic questions before starting development will cut costs, benefit the business, and benefit every single one of your users.

Tools to catalogue content:

Tools to caption time-based content:

Tools to transcribe time-based content:


Linearize content

During design, make sure that a linear reading of your page content makes sense, and flows logically according to western (top left to bottom right) convention.

Use headings in a meaningful, hierarchical way.

Make note of sections of the page that will be dynamic, or that will change with user input and ensure the user will be aware of these changes as they navigate the page linearly.

Make note of elements that cannot be easily linearized such as nested navigation trees or data tables. Document alternative text, keyboard functionality, and HTML mark-up that will improve linear readings or exploration of non-linear elements via keyboard, screen reader, or assistive technologies.

Once the page is in development, use a keyboard and screen reader to check the tabbing order and the reading sequence of the page.

Most popular screen readers for desktop:

Most popular screen readers for mobile:

Use a tool that disables the CSS of a live page, effectively linearizing any styled layouts.

Our favourite tool: Firefox web developer extension

Firefox Developer Extension used to remove all CSS styles on Google.ca

Firefox Web Developer Extension used to remove all CSS styles on Google.ca

 

Provide optimal colour contrast

When creating a colour palette or when using an existing branding colour scheme for a client, ensure that colours of foreground and background (for informative text and diagrams) have optimal contrast.

Our favourite tools:

Web AIM Color Contrast Checker. Failed color combination, left. Alternative accessible color combination, right.

Web AIM Color Contrast Checker. Failed color combination, left. Alternative accessible color combination, right.

 

Additionally, consider running your colour palette or designs through colour blindness filters to see how people with various visual impairments will perceive your work.

Colour blindness simulation tools:

Coblis Color Blind Simulator. Normal vision (top) and Blue Blind/Tritanopia (bottom).

Coblis Color Blind Simulator. Normal vision (top) and Blue Blind/Tritanopia (bottom).

 

Make your content works predictably and reliably in different browsers, on different devices, and for assistive technologies.

Once the product is in development, it’s important to go through several cycles of accessibility quality assurance using manual and automated code checks to ensure the code is conformant to the WCAG 2.0 guidelines, oftentimes improving conformance to HTML5 standards along the way.

It’s important to note that automated code checks are only as useful as the auditor is knowledgeable. False positives are common while more conceptual or important issues (e.g. keyboard accessibility) can be completely ignored. For example, an automated check does not discern easily between an informative image and a decorative image, so it is unable to recommend if an image missing an alt attribute requires a null or informative text string. The greatest advantage of automated code checking is being able to expediently tell if the code has semantic or parsing errors, or if specific types of components (e.g. tables) are missing certain labels.

Automated code checkers:

HTML codesniffer bookmarklet

HTML Code Sniffer bookmarklet

Web development tools:

Finally, leveraging a set of tools will not guarantee an accessible or even a usable product. To create truly accessible experiences, designers have to adopt a universal design mindset and carefully consider how the product will be usable by the most people, regardless of natural human variation.

This means taking into account human variation with every design decision and consistently providing this rationale to stakeholders in order to improve understanding and implementation of accessible design. It also means testing designs or prototypes early and often, not only with your target demographic, but also with persons with disabilities so you can be confident that your product works for real people.

References

http://webaim.org/projects/screenreadersurvey4/

Why