Before starting this series of posts about how people with disabilities use the internet, I would like to share my first experience with people with disabilities back in the days when I was in primary school.

I grew up in Campinas, Brazil, where I assisted the public school next to my house. For me, it was a “normal” school; we had classes in the morning and lunchtime and sports in the afternoon. What I didn’t know was that it was a “model school”- a government test to mix students with disabilities with students without disabilities.
During those eight years of school, I had friends and shared all my classes with kids with Down syndrome, blind, deaf and with physical deficiencies. I never thought about it, for me all the schools were like this. One day, already as a grown-up man, talking with some friends about our childhood and school experiences, I realized that no other school was like mine. My friends didn’t have the same experience growing up with people with special necessities.
That’s why I chose to start writing about it: to try to explain how people with disabilities interact with our world so that maybe one day, they can have the same access to information that we have.

This article will explore the wide range of diversity of people and some of the types of web accessibility barriers that people commonly encounter due to websites’ inaccessible design.

Visual disability:

In a fact sheet on visual impairment and blindness [WHO-VI] the World Health Organization (WHO) estimates that there are over 246 million people worldwide who have low vision and 39 million people who are blind, indicating that 86% of the people with visual impairments have low vision.

A person with visual disabilities might have moderate vision loss in one or both eyes (low vision) or substantial and uncorrectable vision loss in both eyes (blindness). Others might have reduced or lacked sensitivity to certain colours (colour blindness) or increased sensitivity to bright colours.

Low vision

In a brief explanation, a person with low vision is someone who, even with regular glasses, contact lenses, medicine or surgery, still finds it difficult to do some tasks. There are different methods that people with low vision have to use the computer. I will talk a little bit about some of them:

1- Configuring the computer’s default resolution:
The simpler way is to set up the resolution default font size and higher contrast as this video perfectly This way, the computer will automatically be with larger fonts and contrast when you turn it on.
If you want to know more details about how to set up a computer for people with low vision disabilities, have a look at this post on the All About Vision website.

Some people prefer only to use the zoom feature available on most browsers; you can increase a web page on your screen by holding “Ctrl” on your keyboard and pressing the “+” key. To return the view to actual size, press the “0” (zero) key while holding the “Ctrl”.

The most common problem when people with low vision increase the text size and the text doesn’t “reflow”, is when they have to scroll horizontally several screens to read a single line of text. Additionally, the scrollbar and cursor are harder for some people to find.

If you want to know more about how to make the fonts on your website accessible, I recommend that you read this great article by WebAIM about fonts.

2- Screen Magnification Software

There are also magnifier software like supernova and MAGic that go way beyond a simple zoom feature. Through them, the user is able to display not just larger text on their screen but also larger icons, mouse pointers and other navigation items.
Watch this video introducing all the SuperNova Magnifier features:

The most recent Windows 10 comes with very good accessibility tools already installed in the operational system by default. You can find accessible tools like Narrator and Screen Readers, Magnifier, Closed Captions, Keyboard and Mouse Settings:

How can we improve accessibility for low-vision users?

Here are a few tips on how to improve accessibility in your website. If you want to know more details about Accessibility Requirements for People with Low Vision, have a look at this document by W3C.

1- Font Size and styling
A good design should look good without requiring the user to enlarge or reduce the text size. Some people believe that small fonts make your website look better and cleaner, which is not always true. Here are some points on how to improve the use and styling of your fonts:

• Do not use Capital letters: it’s more difficult to read for most people with or without disabilities.
• Be careful when using Italic and underline: for some people, it’s difficult to read text that is all italicized or underlined. On the other hand, bold text is easier to read.
• Use CSS to set the font size of your website: This is strongly recommended for the use of <font> tags in HTML, basically because CSS is more flexible and easier to maintain, and the Screen Reader will understand it better when increasing the font size of the elements.
• Justification impacts readability and tracking: Most of the time, full justification makes reading more difficult when using accessibility tools. This is because the extra space between words makes it difficult to track along a line of text, or less space between words makes it difficult to distinguish separate words.

2- Effective Color Contrast
This Success Criterion intends to provide enough contrast between the text and its background so that people with moderately low vision can read it. According to the W3C, the contrast ratio for an AA standard (to know more about accessibility compliance, have a look at this article) between text and the background should be at least 4.5 to 1. This means the lighter colour must be at least 4.5 times more luminosity than the darker one. For an AAA standard, the contrast should be 7 to 1.

You can use a few tools to check if you are using the colours correctly. One of them is WebAIM Color contrast Checker, there are a few tools you can use to check if you are using the colors correctly. One of them is

If you want to check the colour contrast efficiency of a live website, you can use the WAVE Evaluation Tool. It’s also developed by WebAIM.org and provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page.

Using colour contrast efficiently also includes using text overlaid on background images, which is very popular with carousels and headers. Text overlaid is very tricky because some or all of the images may not have sufficient contrast in relation to the text.

Reducing the background luminosity increases the contrast, making the text easier to read.

Colour blindness

A person with colour blindness has difficulty distinguishing between colours such as red and green or yellow and blue and sometimes cannot perceive any colour. Globally, approximately 1 in 12 men (8%) and 1 in 200 women have colour vision deficiencies.

Basically, there are 4 subtypes of colour blindness:

Protanopia: There are no working red cone cells in males with protanopia. Red appears as black. Certain shades of orange, yellow, and green all appear as yellow. Protanopia is an X-linked disorder that is estimated to affect 1 per cent of males.

Deuteranopia: There are no working green cone cells in males with deuteranopia. They tend to see reds as brownish-yellow and greens as beige. Deuteranopia is an X-linked disorder that affects about 1 percent of males.

Tritanopia: People with tritanomaly have functionally limited blue cone cells. Blue appears greener and it can be difficult to tell yellow and red from pink. Tritanomaly is extremely rare. It is an autosomal dominant disorder affecting males and females equally.

Cone monochromacy: This rare form of colour blindness results from a failure of two of the three cone cell photopigments to work. There is red cone monochromacy, green cone monochromacy, and blue cone monochromacy. People with cone monochromacy have trouble distinguishing colours because the brain needs to compare the signals from different types of cones in order to see colour. When only one type of cone works, this comparison isn’t possible. People with blue cone monochromacy, may also have reduced visual acuity, near-sightedness, and uncontrollable eye movements, a condition known as nystagmus. Cone monochromacy is an autosomal recessive disorder.

Source: www.nei.nih.gov/health/color_blindness/facts_about

Colourblind simulation

Would you like to see how a person with colour blindness sees your website? There are many colour-blind simulation out there:

If you are a Mac user you should try Sim Daltonism, a colour-blindness simulator for Mac OS X. Its floating palette filters your web page in real time, showing how the area around your mouse cursor looks to people with many different kinds of colour-blindness.

For Windows and Linux users, you should check out the Colorblind Web Page Filter. This is what I use to test my designs. See below how a medium website looks for a person with protanopia:

If you want to know more about how to Design for color blindness, check this amazing video on YouTube by Geri Coady about How to Design for Colour-Blindness

How to improve accessibility for colour-blind users?

People who are color blind are not the only ones you need to pay attention to when design your product, the ability to see and differentiate between colors decreases as people age and can become seriously damaged in old age. We know that in many cases, it’s hard to create something 100% accessible, but it’s important to give them the option to switch to a version adapted to them; here is a few tips to think when design to colour blind users:

• Colour Combinations
  When designing, try not use color that shares the same luminosity, a good method to avoid it is by using the color wheel, choosing colors that are opposite each other in the color wheel will provide your enough contrast making it readable for a color blind person:

• Use proper description for any photograph and colour names
  This is a problem that occurs in 6 in 10 websites I visited when looking for examples for this post, on the example bellow from Torpedo7 website. The way they place the colour description on the page is great, visible in many places included together with the photography, but the problem here is that the colour name doesn’t need to be completely ambiguous like “mist,” “loganberry,” or “woodrush”, I can see colours and I have no idea what Sea Breeze means, try to use basic colour terms as possible, like “light blue,” “dark red,” or “dark green.”

• When should red and green be used together? Never!
  People with colour-blind conditions see red and green as brown, which means that they will not be able to distinguish the two; you should always tend to avoid this combination and never use them together, but if you really want to use this combination, you can always combine the two where it is not required by the reader to make a difference between them.

If you want to know more about How to Optimize Charts For Color Blind Readers have a look on this post on venngage.com.

I hope you found this brief explanation helpful. Feel free to leave any feedback or comments.