Designing for accessibility
Designers provide a visual framework to ensure that all of our customers and team members, regardless of their abilities, can enjoy great digital experiences. It’s important for designers to be aware of our accessibility standards to design across any device or screen size.
Accessibility is a legal requirement, mandated by the Accessibility for Ontarians with Disabilities Act (AODA) and Canadian Radio-Television and Telecommunications Commission (CRTC).
UX and Visual designers have different roles in accessibility
UX professionals need to understand the interaction models of people with disabilities on user interfaces, and build their designs with the intention to accommodate for those use cases and be able to communicate the interactions model (e.g. functionality is it a link or a button).
Defining the interaction model helps to build out documentation and identifies existing accessibility patterns that were built into the product. The documentation supports the visual design, coding and testing.
An advanced understanding of accessibility is to look at the business requirements for a project and see opportunities to amplify an experience for people with different needs that might have a specific need for that service.
Visual designers ensure that the colours, fonts, shapes, and general visual representation as a whole are inclusive. Accessible design is a clear representation of content and the intended semantics of that structure, based of off the visual design. The visual design and annotated interactions allow developers to code accordingly (eg. Unordered lists vs. tables, headers vs. strong text, buttons vs. links).
A more advanced understanding of visual design and accessibility considers how the brain consumes colours, shape, and layouts, and how with different methods of organizing content can create better experiences for people of all needs. Design governs the intended experience and defines the requirements for the developers and testers, which ensures that accessibility is carried throughout the project.
Designing accessible elements
This section discusses TELUS accessibility standards for designers. Following these best practices will help designers create a clear, simple and accessible user experience for customers and team members.
Design is visual. It includes clearly structured content, colour, white space, and images. Images can be part of the layout (decorative) or be part of the message (descriptive).
Images, logos, charts, or animations that convey meaning, need descriptive text to convey that meaning to people who are blind or have low vision.
Determining the meaning behind an image is a team effort. Content creators and designers can work together to determine if an image is decorative or descriptive. Content creators can provide the appropriate description.
Designers need to make sure there is a proper amount of colour contrast between the page background and text. User interface elements like links, buttons, and headers also need to have the right colour contrast on the page. Proper contrast benefits page visitors with visual disabilities and those viewing the page on lower quality devices.
Here are some tips to help you with colour contrast:
The minimum colour contrast ratio is 4.5:1 but TELUS aims for 7:1 for mobile and responsive websites
Use colour contrast analyzing tools to test your design
Run automated tests on your website to flag potential contrast issues
Validate automated tests with manual tools
Design dictates the outcome of all interactions on a page. Designers should create an experience with recognizable user interface elements and a familiar design pattern. For an accessible experience for all users, design elements like headers, tables, and buttons need to be clear. The functionality of links and buttons should be clear to page visitors too so that they can complete the page function.
Usable focus states
The visible outline around links, input fields and buttons is known as a focus indicator. They help people know which element has keyboard focus and helps them understand where they are when they are navigating a site. Focus indicators are often used by people who use the keyboard as a primary way of navigating the web, including people who use screen readers.
Elements that should be focusable include links, form fields, functional widgets, buttons and menu items. They need to look different than the elements around them so that their functionality is observed. Designers should ensure these elements are highly visible with good contrast to stand out from the rest of the content.
Designing for colour-blindness
Some people have difficulty distinguishing between colours. The most common colour-blindness is red-green deficiencies. Communicating through colour alone can make it difficult from some page visitors to use an application. Colour cues should always be accompanied by text or a symbol that indicates the function of the user interface element.
Here are a few tips for designing for colour-blindness:
Convert designs to grayscale to test colour and look for similar shades of grey
Use textures to distinguish between colours
Utilize online tools to test the colour on your page