Illustration of a young Mozambican web developer sitting at their desk, surrounded by stacks of books, a lamp and a clock.

How accessible are key websites in Mozambique?

Data-driven investigation

We used automated tools to measure the accessibility violations of 90 key websites in Mozambique. Here is what we found.

Study by FAMOD and Data4Change

February 2021

7 mins read

This is a really bad web page containing lots of accessibility violations. This is intentional.

This web page is the result of the data-driven investigation we carried out on key websites in Mozambique. On it we will show you exactly how some of the most important websites in our country continue to exclude many of us.

What we found

We have reviewed 90 websites in total. They range from key government services to online banking, shopping and health news.

Across these 90 websites we uncovered over 700,000 accessibility violations. That works out as 38 accessibility violations per unique web page.

Let’s look at the top five most common violations.

Illustration of a group of young Mozambicans with accessibility needs: a woman wearing glasses, a woman walking with crutches and her leg in a cast, and a man in a wheelchair. In the background are images of example mobile and desktop websites that they wish to use.

1 Low colour contrast

The most common violation in our investigation was

Huh?

I said !!!

If you missed that, what I was trying to say was colour contrast.

Colour contrast is the visual difference between

the colour of text; and
the colour of the background that it sits on.

On average, the web pages that we surveyed had 14 colour contrast violations per page.

Lack of colour contrast excludes people with low or poor vision. Having insufficient colour contrast on your website is like putting yourself on mute. People won’t know what you’re trying to tell them.

But like unmuting yourself, there is a simple fix!

We can measure and check the colour contrast of text on a web page using free online tools. For example, Corhexa (Opens in a new window). We’ve listed many more colour contrast tools in our digital toolkit.

2 Lack of landmarks

Want to know the second most common violation in our investigation? It's lack of structure when it comes to page content.

Imagine seeing or hearing a web page like this…

An imaginary web page that’s just unstructured text.

How about this?

If you have a visual impairment you may be used to using what’s known as a ‘screen reader’. Screen readers are software on computers that convert text to speech.

It's easier to navigate a web page with a screen reader when the content is organised in clear sections. For example a header, navigation, main content and a footer.

It may be difficult for a screen reader user to find content if it's not contained in a section. Its purpose may also be unclear.

The average web page in our sample had 13 bits of page content with no clear structure.

There is a simple fix for this issue: developers can use either “HTML5 elements” or “ARIA landmarks”. These label the sections in the website code.

3 Lost links

Then there were the links.

Want to buy this book for your studies? Go here.

You didn’t click?

Okay, want to collect the online payment transfer that your friend sent here?

You didn’t click that either?!

Someone who isn’t able to use a mouse and relies on their keyboard to navigate the web won’t be able to select a link unless this has been coded by the developer. Likewise, someone who uses a screen reader to navigate the web won’t know that a link is there unless this has been coded by the developer.

Without this information, keyboard and screen reader users are unable to do the most basic activity on the web: following links.

The average web page in our sample had 4 “lost” links.

There is a simple fix: developers can ensure that they give all links on a web page “programmatic focus”. This is a term to describe treating an item on a web page as an interactive ‘event’.

4 No text for images

Say you’d like to find out about the different colleges you can apply to.

You read about one and it has a course you’re interested in. Great!

Then you’re faced with this:

What is it? Why is this website showing me an empty image?

When we don’t put text around images on websites, we leave screen reader users wondering ‘what did I miss?’

Was it…?

There’s a simple fix: use alt text. Content creators must give every image a text alternative that a screen reader can read out. Web developers: every <img> must have an alt="" attribute.

If we do that, everyone knows that the image was of

The average web page in our sample had one image with no alt text.

5 No text for interactive elements

Question: Are you enjoying this really bad web page?

You can answer it’s confusing, it’s ugly, I don’t understand, Other.

So does that mean it’s possible to say ‘It is confusing’ and ‘Other – I don’t like it’? What if you want to say ‘all the above’ – is that possible too?

If you’re sighted, you get to see that the answers to this question are in fact laid out as checkboxes.

The visual design here hints that yes, you can answer as many answers that apply.

If you’re not sighted, and there is no alternative text for the interactive buttons, then you don’t know you have this option. In frustration you might select ‘It is confusing’ and leave it at that. But in the process you haven’t been able to say what you really think. You’ve been silenced.

The average web page in our sample had at least one interactive element with no text to go with it.

There is a simple fix for this. Developers can include alternative text with interactive buttons on forms. Including this text removes ambiguity for the screen reader user. They now have as much opportunity to answer the question as anyone else.

This is just the tip of the iceberg

An image showing a half submerged iceberg

The automated method we used to collect this data can only capture a small proportion of accessibility violations.

For example, it does not capture things like:

Confusing, technical, vague or unhelpful text content
Colour providing the only identification of links
A mismatch between
1. the order a designer lays out items on a page; and
2. the order a screen reader will read them out

This mismatch can arise when changes are made to the page layout in the underlying code.

There is a fix to all this:

inclusive and accessible web design.

Learn about how to include

Illustration of two young Mozambican web developers sitting at their desks.

What happens when a web page isn’t accessible

Automated accessibility testing is never enough. You need to test websites on real users too. This is what we found when we asked visually impaired users to try using some of these sites:

Sources

axe-core API (Opens in a new window), Colour Contrast Analyzer tool from the Pacielo Group (Opens in a new window)

Methodology

We compiled and categorised a list of 90 website domains and internal links (up to level 2) for each website. This gave us 18,704 unique web pages in total. We then collected the accessibility violations on each web page using axe-core. Axe-core is a popular automatic web accessibility testing tool. In total we collected 128,377 accessibility violations across all the web pages.

Acknowledgements

We would like to thank Deque for making their axe-core API open source(Opens in a new window). We would also like to thank the following accessibility experts for the advice and support they gave us in the early stages of this project: Steve Green, Andy Keyworth, Aurelien Levy and Leonie Watson. Finally, we would like to thank members of the WAI Interest Group public Discussion List(Opens in a new window) who so kindly responded to our request for feedback and advice in the early stages of our investigation.