fbpx

Things to keep in mind while designing for web accessibility

Idea Theorem Accessible

Things to keep in mind while designing for web accessibility

Digital products can not be experienced in the same way as physical products. Some users with disabilities might not be able to see or recognize colors or move the mouse. This is why it is necessary to design digital products as accessible. Web accessibility has become an integral part of the designing for websites, SaaS products and mobile apps. While designing the digital products, the designers need to make sure that each element is understandable by the users or by the assistive technology like screen readers.

 

What is web accessibility?

Designing for web accessibility is the practice of designing for a wide range of people. This is for people who may have sensory, auditory, cognitive disabilities, and much more. In order to avoid having to re-design and implement accessible solutions at a later stage (especially since websites will be required to be accessible in the near future), it is best to do it from the start. Design with accessibility in mind right when you are at the stage of designing screens.

 

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

 

Why web accessibility in your design is important?

Web accessibility is becoming an essential part of the design, ensuring that websites and applications are accessible for everyone, including users with disabilities. Good design does not just mean making something look good visually, it also needs to function well. Can a person who uses a screen-reader use your website well? If not, do you think that person would consider your site to be well-designed? As designers, we have the responsibility to create digital work that is usable and provides a great experience. It’s not just people with permanent disabilities that will benefit from your accessible design, it is also those with temporary and situational conditions. When you design for accessibility, you design for everyone. 

 

How to apply web accessibility in your design? 

Accessibility Guidelines (WCAG) 2.1 site is a guide to WCAG 2.1, helping businesses to comprehend the guidelines and principles of WCAG 2.1 easily. We are gonna introduce some guidelines on how to meet WCAG 2.1 which you can apply to your design easily. 

 

 

Color and Contrast

Depending on how to use the color on your design, your design can be considered as good or bad. Because color usage affects not only users who have color blind or low vision but also other users. If the background and text color does not have enough contrast, users have difficulty reading the text. Moreover, enough color contrast has benefits for people who have low vision or color blind. Also, giving more than a minimum contrast level between text and the background increases the readability of the reader. Furthermore, smaller text compared to the larger ones requires higher contrast. If you are not sure how to check the contrast on your design, There are a ton of contrast checkers out there in the form of plugins for Figma, Sketch and browsers. Use those plugins to check the contrast.

 

Things to keep in mind while designing for web accessibility

Checklist:

  • Text and images of text have a contrast ratio of at least 4.5:1
  • Large text (18 point text+) or 14 bold text has a contrast ratio of at least 3:1
  • Interactive elements provide at least 3:1 contrast in different states such as focus, hover, pressed, and disabled. 

 

Reference:

1.4.3 Contrast (Minimum) (WCAG 2.1 Level AA)

1.4.11 Non-text Contrast (WCAG 2.1 Level AA) 

 

 

Keyboard Accessible

Keyboard control should be able to access all the contents on the page for users using the keyboard only. Some users only rely on assistive technologies to navigate through the site. If some contents are not accessible using the keyboard, they will easily miss the contents and they would end up failing to achieve their goals. If you are unsure your design meets all those requirements, try to use your keyboard only to navigate the design. Then, you will see whether it is accessible with a keyboard or not.

 

Checklist:

  • When the components received the focus state, other action doesn’t occur
  • Unless the user control the focus state, it doesn’t go to the next elements automatically
  • Focus state is visually visible
  • All the elements are accessible with keyboard only

 

Reference:

2.1.1 Keyboard (WCAG 2.1 Level A)

2.1.3 Keyboard (No Exception) (WCAG 2.1 Level AAA)

2.4.7: Focus Visible (WCAG 2.1 Level A)

 

 

Page Layout and structure

A clear layout and hierarchy allow users to get the core information quickly at a glance. When you form the structure of the information on the page, you have to keep in mind if all content is logically structured.  Moreover, users learn functionality while they are using the website and they expect the same functionality throughout the site. Also, for those who have cognitive, learning disabilities, or using a screen reader, the page layout and the organization of the contents should be well structured. In order to help them to understand the contents, try to group associated items together.

 

Checklist:

  • If you use the icon more than one place, these two should have the same or similar functionality throughout the site
  • Navigation and the placing of the contents are consistent
  • Users can easily identify sections and groups of information.
  • Headings and labels provide the topic or purpose
  • All non-text components have an alternative text providing information

 

Reference:

3.2.3 Consistent Navigation (WCAG 2.1 Level AA)

3.2.4 Consistent Identification (WCAG 2.1 Level AA)

2.4.6 Headings and Labels (WCAG 2.1 Level AA)

 

 

Text Spacing

Giving a better text space increases readability when the users read it. Tracking is often measured as a percentage of font size and having 130% to 150% for tracking is optimal. To find the proper tracking, attempt to try different percentages and apply to the one you think works best for you. Also, those who have low vision can read better and faster with increased lines, letters and paragraph spaces. In order to make your text more readable, these are the suggested text properties to apply: 

 

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

 

Checklist:

  • Your text doesn’t disappear or get cut off when adjustments to the text styles are applied
  • Text, images, and other content do not overlap with each other
  • All buttons, form fields, and other controls are usable and not broken
  • Avoid using a scrollbar when the text size is increased. It is best practice to show all of the text in a sentence. However, it is acceptable to have to scroll horizontally to get to different sections of a page

 

Reference:

1.4.12 Text Spacing (WCAG 2.1 Level AA)

 

Keep Color Blindness in Mind

According to Wikipedia, Color blindness (color vision deficiency) is the decreased ability to see color or differences in color. It can impair such tasks as selecting ripe fruit, choosing to clothe, and reading traffic lights. It affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. The designers need to keep that in mind while designing digital products for color blind population.

 

There are different types of colour blind including:

  • Protanopia
  • Protanomaly
  • Deuteranopia
  • Deuteranomaly
  • Tritanopia (rare)
  • Tritanomaly (rare)
  • Cone Monochromacy (very rare)
  • Rod Monochromacy or Achromatopsia (extremely rare)

 

The designs should not be dependent on the colors. Any color based component should be followed by a caption or description. Adding a pattern, texture or underline helps in creating a contrast between different components.

 

 

 

What Next

 

Idea Theorem is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.