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).
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.
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).
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).
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.
People use iQualify on a range of devices, with a range of screen sizes.
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.
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).
White space is the space around and between elements on a page. Let’s take a look at a few examples.
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:
If the text colour is too similar to the background, legibility suffers (people will struggle to read it).
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.
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.
This problem is a good reason why there are a number of “spotlight” reading extensions available for browsers.
The shape and look of objects often give us clues about how they can be used.
The same is true for online.
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).
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.
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.
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.
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!
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.
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.
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).
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.
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.
