A product that is well-designed considers all types of users including those with hearing problems, blindness, low vision, cognitive and motor impairments. Designing with all users in mind enhances the experience for all of your visitors and can cause your website and/or app to perform at a higher level. This blog, written by our Technical Lead, Khodor Ammar, looks at the core principles for accessible design, and includes specific examples to watch out for.
Website accessibility, in its simplest form, is designing a product that is accessible for use by anyone.It is about making sure something - in our context, a website or web application - works for those who are physically disabled. Maybe they are blind or quadriplegic and unable to use a keyboard or mouse in the traditional sense. 15% of the world's population have some form of disability, which includes conditions that affect seeing, hearing, motor abilities and cognitive abilities. App and website accessibility ensures that all types of users can use and access a certain product.
There are three levels of compliance - A, AA and AAA. They build on each other, meaning Level A requirements are the most basic and crucial guidelines to meet and AAA guidelines are what some might consider 'nice to haves'.
The process of including accessibility in a design starts early in the wireframing and design phase. A product designed from the beginning to accommodate to people with certain disabilities will make it easier and less time consuming for developers assigned to implement it.
Perceivable:Information and user interface components must be presentable to users in ways that they can perceive it easily. Here are some examples of ways to help with perception:
Text alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.Adaptable: Create content that can be presented in different ways (for example, simpler layout) without losing information of structure.Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Operable:User interface components and navigation must be operable, in that each user can use each aspect of the website with ease. Here are some ways to make the UI operable:
Make the keyboard accessible: Make all functionality available from a keyboard.Allow enough time: Provide users enough time to read and use content.Consider seizures: Do not design content in a way that is known to cause seizures (flashing elements etc)Navigation: Provide ways to help users navigate, find content and determine where they are.
UnderstandableThe information and the operation of the user interface must be understandable.
Readable: Make text content readable and understandable.Predictable: Make web pages appear and operate in predictable ways.Input assistance: Help users avoid and correct mistakes.
RobustContent must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Compatibility: Maximize compatibility with current and future user agents, including assistive technologies such as Google's screen reader TalkBack.
In addition to the four main principles, also consider the following:
Use contrasting colours - This will help users interpret your website and/or app's content and encourage them to interact with the right elements and navigational actions.Consider colour blindness - user's who are colourblind use different design elements as cues instead of colour, such as strokes, patterns and textures.Use different shades instead of multiple colours.Avoid using colour alone as an indicator.Use texture in place of colour.Additional Elements:Be mindful of animations, parallax, videos and other fancy things - Give alternatives to sounds and vice versa, such as a transcript. Also avoid sounds and videos that play automatically - let users decide to play such elements on the page or app.Ensure links make sense out of context - Every link should make sense when the link text is read out of context. The types of links that may be confusing are link text, such as, 'Click Here' or 'Read More'.Be careful about forms - make sure each form element has a label and ensure that each label is associated to the correct form element using the tag. Ensure all users can submit the form and can understand how to fix any errors from incomplete fields.
Developers do the accessibility heavy lifting, however they cannot do it without a mindful design. Design with everyone in mind.
Consult with Prototype, an award-winning UX agency, today.
June 14, 2020
May 17, 2020
Subscribe to our blog to receive relevant news and tips about digital transformation, app development, website development, UX, and UI design. Promise we won't spam you.