Back to Articles

Evidence-based good defaults for accessibility

Expert Tips
Caitlin Foran
Written by
Caitlin Foran

We are committed to doing what we can to minimise barriers to learning. In this post you’ll see a bit more on how we aim to provide good defaults to enhance readability and accessibility (while still leaving things open for people to use their own tools on top).

Providing good defaults

First and foremost, we follow the Web Content Accessibility guidelines and Nielson Norman Group guidance to provide good defaults so as many people as possible find their courses easy to read and navigate.

Providing good defaults is one of the key reasons you can’t fiddle with styles, colours and sizes in iQualify as much as you might be able to in other systems. We provide evidence-based good defaults so that you know you’re always getting it right. And so that you don’t have to spend time ensuring text and background styling is applied consistently within a course and within an organisation.

A legible font

We use Roboto for all course text, avoiding any strangely shaped fonts. Fonts that emulate handwriting or are highly stylised have reduced legibility (not as clear to read).

See caption.
Compare these three fonts (Caveat, Lobster, and Roboto) all at 12pt. The top two require much more effort to read.

Sans serif fonts are often said to have better legibility online. Although it may have been true of earlier technology, these days serif type is fine for high resolution monitors. In fact, a review of more than 50 empirical studies found that readability and legibility are more strongly affected by the particular font and the reader’s familiarity with that font than they are by whether the font is serif or san serif. 

With all this information, we’ve gone with a sans serif font as people tend to be more familiar with these for online reading. And, in particular a sans serif with limited ambiguity between characters (which can be helpful for those with dyslexia).

A large default font size

Tiny text dooms legibility but “tiny” is open to interpretation and depends on the person. Visual acuity declines with age so older users need bigger text, but even young and teenage users dislike tiny font sizes as much as adults do. We use a default font size and make sure people can resize the font without assistive technology up to 200 percent without loss of content or functionality.

Liquid layout

People use iQualify on a range of devices, with a range of screen sizes.

iQualify resizing for different devices.

You get even greater variability when you consider that people don't always maximise their browsers. So, we don’t design solely for a specific monitor size. Instead, we often use a liquid layout that stretches to suit whichever device and window size you’re using. 

A “liquid layout” means that the text, tasks, and images shuffle easily as you change the size of the window you’re viewing iQualify on. You can check this out for yourself by simply changing the size of your browser’s window.

Visual hierarchy

Our headings are at least 1.4 times larger than the body text and we use only 2–3 heading levels sizes. This means people can clearly see what pieces of content are most important or at the highest level in the page’s mini information architecture. This helps people to quickly make sense of the structure of a page (and the information in it).

Plenty of white space

White space is the space around and between elements on a page. Let’s take a look at a few examples.

Image on left has headings, text images, and videos tightly stacked one on top of another. On the right, you see the same elements, but with much greater spacing.
White space between elements on a page. On the left the elements are crowded together. On the right, there is more white space.

Image on left has headings and text tightly stacked one on top of another. On the right, you see the same text, but with much greater spacing between heading and paragraphs and between lines of text.
White space between text elements. On the left the headings and text are tightly spaced and more difficult to read. On the right, there is more white space.

Hopefully from the examples above, you can see that the right white space on a page really does make a difference. Here are some of what it can achieve:

Good contrast between the background and text colours

If the text colour is too similar to the background, legibility suffers (people will struggle to read it). 

See caption.
Low contrast (left) of dark grey text on a light grey background and high contrast (right) of black text on a white background.

We use a high contrast between text and its plain background (whether light or dark). High contrast tends to be better for most people, but especially helpful for those with low vision or colour blindness.

Minimal peripheral distractions

Ads, ads, ads. They’re the worst. They’re everywhere on most sites, even ones you use to learn. Many of us use an ad blocker. But still, things sneak through. 

And, on other learning platforms, sometimes people get carried away and put this, that and every other widget or bulletin on the left and right sides of the screen.

In fact, looking at other LMSs was one of our key reasons for prioritising a clean, clear interface for people (but especially learners!).

Consider the two search engine pages shown below. The amount of white space the Google page employs leaves no ambiguity about what action we should take.

See caption.
Screenshots of search engine pages: Yahoo on the left, Google on the right.

This problem is a good reason why there are a number of “spotlight” reading extensions available for browsers.

Common signifiers

The shape and look of objects often give us clues about how they can be used. 

Mug and door with handle (door has the sign "Push" on it).
People recognise the handle on a mug as something to grip with your hand and a handle on a door as something to pull (hence why you see doors like this requiring a push sign, because people think handle = pull). 

The same is true for online.

See caption.
People recognise the three lines as opening a menu, text within a shape as a “button” that will perform an action, and underlined text as a link that will take you somewhere. 

Signifiers are visual cues that help people understand that particular elements are interactive and what kind of interaction to expect from them. For instance, the underline on linked text is a signifier that communicates “clickability”.

Our style for linked files includes the well-known link icon and bolds the linked text. This means that links that are identifiable beyond a colour (important for those with low vision or colourblindness).

Visible system status

Systems should keep people informed about what is going on. We need feedback when they interact with an interface. In iQualify when you save a draft, or submit a task, you want to know whether it’s worked. 

See caption.
Success message after saving a task.

These success (and failure) messages are “system feedback”. In iQualify, this feedback is sometimes provided as a coloured message (as seen above). But you also see it in the more subtle change of colour for a label or button.

Communicating the current state lets people feel in control of the system, take appropriate actions to reach their goal, and ultimately, trust us.

Being standards compliant to be adaptable

Good defaults go a long way to improving accessibility. But one size does not fit all. So, it’s important that we still be able to flex based on the browsers and tools people use. By ensuring we’re standards compliant we know we can work with widely-used browsers and, for the most part, the extensions that can be used on those browsers.

Mobile friendly

As well as the liquid layout (described earlier in the article) we also design pages to be mobile friendly for when people are working on very small screens. This means doing things like collapsing menus (so they don’t take up your entire screen!) and reformatting elements on a page. This means that not only can learners complete their courses on their mobiles or tablets, but facilitators can mark and manage their classes, and authors can build their courses all from that tiny thing in their pocket!

Keyboard accessible

You don’t need a mouse to use iQualify. You can use your keyboard to navigate between all links, buttons, form fields, and other elements. And we make sure it’s clear to see which element is currently being focused on. 

Screen reader accessible

As with keyboard accessibility, all links, buttons, form fields, and other elements can be read aloud by screen reader software. And, especially useful for learners, we have a Skip to main content option so they don’t have to listen to the same repeated page elements (e.g. menu items) being read over and over when they change to the next page.

We also provide options for course authors to ensure their content can be accessible as well e.g. providing alt-text fields for images, transcripts for videos, and aria labels for image based tasks.

Zoomable

Browsers have a built in zoom function so people can change the font size to resize text up to 200 percent without assistive technology. I personally use this a lot to switch the view slightly depending on whether I’m learning or building (I zoom out when building so I can better see the flow of a page).

Browser extensions

People might want to use extensions to support their reading and learning for a whole range of reasons - changing the font or colours, reading text aloud, defining words. We’ll be looking at some examples of how people can personalise iQualify in an upcoming blog. What’s important to us is not necessarily the varied reasons people might have for using an extension, just that we make it meets the standards so things are likely to work on iQualify.

Summary

At iQualify we provide evidence-based good defaults to save our authors time and ensure all learners on all courses get readable, accessible content and a consistent experience. But, if these good defaults don’t work for you, we make sure we can adapt for your devices and tools so you can personalise iQualify to suit your needs.

Try us for free
Want to talk to someone? Get in touch.
Contact us