Monkeyshot baant een weg in de jungle van UX en design en deelt een jaar lang expertise en plezier met jullie tijdens 'het jaar van de aap’.

 

Accessibility 101: online typography

12/09/2016

Monkeyshot

90% of Belgian families own a personal computer or laptop. 80% of them use this device daily and 28% use it more than 5 hours a day.
58.3% of the Belgian families owns a tablet and we see a decline in weekly use from 69% to 53%. Mostly people between 40–64 years are using a tablet.
As far as smartphone usage is concerned, it is very balanced over the different population groups. 68.5% of the Belgian people own a smartphone. And 93% use it daily between 10 minutes and 3 hours.
We use our smartphone mostly for mailing services, social media, messenger apps, e-commerce and consulting government sites.
 
In general, people read a lot on (small) screens. All this content is observed through our eyes and processed by our brains.
 
Our eyes are very important, and we only have one irreplaceable set. We better take care of them. From this angle we collected some guidelines to optimize reading on screens for our eyes. How to design for people with visual restrictions and how to save the eyes of people who can see properly?

Monkeyshot eye-test

Monkeyname

Any monkey who wants to understand what is written down

Birthplace

Monkeytown

1.

Some numbers

8
percent
…of Belgian men have some form of color blindness. Among women, this is only 0.5%
0.2
percent
…of the Belgian population is visually impaired or blind.
20
percent
…of the Belgian population shows symptoms of dyslexia and 3 to 7% is diagnosed with this reading disorder. It is the biggest learning restriction.
Sources: iMinds Digimeter report and Statbel

2.

Guidelines to help us all

2.1
contrast in colour

Contrast

Make sure the contrast between your font color and your background is big enough. It makes it easy to read for everyone.

Tip: Measure the contrast of your colors. The tool color contrast analyser helps you to discover the degree of contrast by measuring the used colors of text and background.

2.2
font choice

Font choice

Make sure your font is still easy to read when you zoom out 200%.

The font type should have enough ‘color’. A fine font with a lot of ornaments is harder to read. Don’t use a font with over the top contrast (very thick and very thin lines in one font or letter).

Use fonts with a big x-height, open ends, robust ends and slab-serifs or no serifs (i.e. Source Sans, Méridien, Minion Pro, Calibri, officia ICT, Open Sans, Aller, Calibri, Lucida).

Upper and lower case (like in this blog post) is easier to read than ALL CAPS TEXT.

Choose a basic size for your font. Make sure it is big enough. 16px is not too big.

2.3
reading lines

Alignment

In our Western world, we read from left to right. It is recommended to align big chunks of text to the left. People with visual restrictions use the zoom function a lot. This way they have a visual clue to know where to start reading.

Limit the reading length of your text to 80 characters, so you don’t have ‘springers’ in your text.

Add paragraphs and visual elements (white space, little ornaments) to guide the reader where to start and end.

3.

guidelines
A lot of blind people and persons with visual restrictions aren’t born this way. The process from great visibility to a cloudy vision usually takes a while. The following guidelines help people with a blurry vision to have a better experience.
3.1

Specific software and use of keyboard

background music

People with visual restrictions often use specific software to experience an interface with higher contrasts or to read out what’s on the page. Try to avoid moving copy and background music.

desktop

Think mobile first. UI elements and navigation are more user-friendly on a mobile site. The focus lies more on the text and there are less visual elements that could bother the screen reader.

navigation

To navigate fast, they use the tab-key in combination with the arrow-keys and enter-key to confirm. Because of this intensive use of the keyboard, it is recommended to make all interface elements accessible via keyboard. (the hoover is not recommended to use)

3.2

Lay-out of the page

text

Add alt text to all graphical elements in HTML (images, icons, videos, graphs) and interface controls. (buttons, opt-in check-boxes, navigation icons) Screen readers read this text out loud. This way, people with visual limitations know what is on your website. Furthermore, it benefits your SEO.

hierarchy

Order and hierarchy are important for people with visual restrictions. Use the HTML5 components in the right way. (<h1>, <h2>, <p>, <button>… ) This gives structure to the user with visual restrictions and is also good for your SEO. I.e. “confirm” is different than “button: confirm”.

compass

Make sure the user can navigate well through the entry fields, and does not get stuck, because it is impossible to exit these fields through the tab-key.

label

Add labels above the entry fields. Screen readers do not read the placeholder text. I.e. a screen reader reads: “entry field ” and not “name: entry field”.

hidden view

Use hidden form elements as little as possible. It is unlikely that a user with visual restrictions sees hidden fields since they are not accessible via the tab-key.

Download hier de Nederlandstalige pdf
| share

Andere berichten

10 health producten volgens de designprincipes van Dieter Rams

閱讀更多 lees meer

UX-conferenties: wat hebben we onthouden.

閱讀更多 lees meer

Er is leven onder de fold line … we geven enkele tips.

閱讀更多 lees meer