Accessibility guidelines

Visual identity ͏

Downloads and resources

#p10 #st1684229163534-2{ overflow-y: auto; }

height: 4px;

Accessibility guidelines

For designers

As digital designers, we are responsible for making design inclusive and accessible to people with diverse abilities and in many contexts. Here you will find topics like typography, contrast and click-states on interactive elements. These guidelines are applicable to online and offline formats, even though some are only for digital.

Typography

When designing for accessibility, there are a few key considerations to keep in mind in relation to your typography.

Alignment

Left-alignment makes the text easier to read and scan

A large sized capital A and a smaller capital A side by side

Font size and weight

The larger the font and wider the stroke, the more legible it will be with lower contrast.

Line length

A readable line length is between 50 and 75 characters per line, with 66 characters considered ideal. Text with more space between lines can have somewhat longer length.

Line-height

Line height is the amount of space between lines of text within a paragraph. Too tight and text will feel crowded and become hard to read. Too large and lines will appear unrelated and spacey. For text, the recommended height is 1.5x the font size.

Paragraph spacing

The spacing between two text blocks should be 2x the font size.

Spacing

Spacing between typographic elements should be open enough to feel light, but close enough to establish a proper relationship between elements.

Size

It should be possible to resize text without assistive technology up to 200% without loss of content or functionality.

Color contrast

Make sure there is enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.

The AA contrast requirement: Normal text needs a ratio of 4.5:1 between the foreground and background colors, while large text (at least 24 px/18 px Bold) and interactive elements can have a 3:1 ratio.
Color as indicator: Color should not be the only way to convey meaning or interaction.
Color blindness: Avoid green on red or red on green (think especially about avoiding using red and green for "bad" and "good" indicators).

Headings and spacing

Organizing content visually with relevant headings and spacing makes your websites and web apps more scannable. Headings provide a clear roadmap for users, allowing them to quickly scan and understand the content's structure and hierarchy. They assist screen readers in conveying the information effectively to individuals with visual impairments.

In the realm of SEO, search engines use headings to understand the context and relevance of content, which can influence a website's ranking. Additionally, white space is useful for creating clear relationships between headings and paragraphs.

Indented paras with titles indicating H1 page title, H2 section heading, H3 subsection and H4 sub su

Interactive elements

Interactive elements, such as links, forms and buttons, should be distinguishable from non-interactive elements with visual cues. Providing visual hints will help users operate, navigate and interact with your content. For example, change the appearance of links on mouse hover, keyboard focus, and touch-screen activation. Ensure that styles and naming of interactive elements are consistent throughout the website.

Default states should have a distinguishable visual indicator from non-interactive elements. For example, links should have an icon or text decorations that separate it from ordinary text. Just changing colors it not sufficient.
Hover states help us understand that we can interact with an element. It is the state that occurs by putting your cursor over the button.
Focus states are essential for people using keyboards and keyboard emulators. It indicates that the interactive element is ready to be active. Unfortunately, we cannot rely on the default styles alone because some browser defaults are simply not sufficiently noticeable.
Active states help users understand that they were able to successfully activate an element.

Form and form labels

Input fields, check boxes, and radio buttons are some of the most common elements in user interfaces. They are the main controls users need to interact with a product.

Add clear labels to every control.
Provide distinct differences between default, hover, or focus states and check the contrast.
Add an asterisk if the field is required (it is possible to add a markup to the form field to instruct screen readers to say the word "required" whenever they encounter an asterisk next to the field label).
Don’t rely on color alone when providing important information.
Use standard visual representations for check boxes and radios. Check boxes are never round and radio buttons are never square.

Buttons and links

A button triggers interactions on the same page, while a link is a navigation element, which leads to a different page or section and has a contextual menu. This is why these two elements should not be treated and displayed the same way. Pay attention to this while considering user interactions. There are many examples where a link is styled as a button and vice versa.

Checklist

A few simple things a designer can do to ensure accessibility:

☑

Contrast and size:

Make sure your design element has good contrasts and readable font sizes. Avoid using low color contrasts, similar colors on top of each other, overcrowding content and small font sizes.

☑

Text styles:

Ensure your text styles are readable and avoid small text. Use proper headings to organize and structure your design and content in sections.

☑

Click state:

Ensure all clickable elements have different click-states, such as: hover, focus, active. Always provide a visible focus state to show keyboard users where they are on the page.

☑

Forms:

Provide descriptive error explanations close to the invalid input, explaining what is wrong and how to fix it. Simply coloring the field red is not enough.

You can find more learning opportunities on accessibility on our Hub page.