Skip to content

Yours *TrulyJuly*

I do everything content.

How do blind people see the internet? - Not like this: A blind man is tapping with his white cane at a screen showing a website...

How do blind people see the internet?

 

Making your website accessible is not just about adding the right metadata or choosing an accessibility theme.

It’s really about putting yourself in the shoes of your users and learning about their way of interacting with your website.

Blind people use screen readers to navigate the internet. Here some tips how to design your site to be more inclusive:

 

How to optimise your website for blind users


1) Think linear

When looking at a website, it is possible to grasp many aspects of it at once and directly click on the desired information.

When a blind person gets a website read out, the screen reader always starts at the top and reads out down to the bottom.

While to a seeing person the header image looks like it stays the same, to a blind person it gets read out every single time they go to another page of the site.

To design a good accessible website, we therefore need to think linear, from top to bottom. Follow the flow of the website from the top down to understand how it feels like for blind users.

 

2) Expectation management

We live in a visual world. Websites contain visual cues, sometimes even symbols without any description. These are invisible to a blind person. Make up for this lack of instruction by adding an explanation in the copy what to expect when taking a certain action.

E.g. “Click to download an application form in PDF format.”

This also applies to the content itself: In our fast paced environment no-one has time or the attention span for long-winded copy. Use ‘front-loaded’ content, where the conclusion comes first, followed by the what, how, where, when and why. This way you allow for scanning, skimming and skipping, but still provide more detailed information for the ones interested.

Similarly any media on your website, such as video, audio, sliders or carousels should not simply start by default. Any actions or changes should only occur through clear user interaction.

 

3) Organise your content

The better structured your article is presented, the easier it is to understand. Make use of standard formatting, such as headlines, paragraphs, bullet points, bold, underlined, italic, etc. Most screen readers interpret these correctly and read them out with different emphasis accordingly.

E.g. creating lists with the <li> tag means the screen reader announces how many items on the list to expect before reading them out.

 

4) Be mindful with the use of images

Any image on your website is invisible to a blind user – this includes buttons, symbols, logos, tables, charts, infographics, emoticons, photos.

Unless you fill in the <alt> tag:

The <alt> tag stands for ‘alternative text’, which is provided instead of an image. The tag should be a concise description of the image and its context.

If the image does not have a real function besides being a pretty placeholder, keep the <alt> information at a minimum.

 

5) Use adequate code to help with shortcuts

Blind users navigate the internet with their keyboard. They use shortcuts to skip content or only read out certain information.

We need to ensure we’re using the right html tags for the correct result.

E.g. using the <h> tag for headlines helps blind users skip content and only read out a list of headlines for quicker navigation.

E.g. Give your site a descriptive page title with the <title> tag, as this is the first thing the screen reader announces.

E.g. using <i> for italics looks the same as using <em> for emphasis, but sounds different, as some screen readers accentuate them differently.

 

6) No repetition of content

You might intend it as a friendly gesture and for better orientation include your website menu on the top and then repeat it at the bottom again.

For a blind user this can be confusing, as hearing the same content being read out again might prompt them to think they’re back where they started.

 

7) Home Page: Make it a Welcome Page

Our ever changing world demands real-time updates, which we literally feed to our home page via an RSS feed.

A blind person who visits your website for the first time might think they somehow landed up on the wrong site if they encounter news content that veers too far off form what your website is about.

Ideally you’d have a short introduction to your website with hyperlinks to the most important menu items.

 

8) One long infinite scrolling page

Rather than linking out to many different micro sites, stick to one long consecutive page with all the relevant information in one place.

List anchor links at the top, so it’s possible to skip ahead and get to the desired information quicker.

Rather than providing links to the next page, offer infinite scrolling, where the user can continue reading without having to click on any links.

Keep the amount of clicks it takes to get a specific information at a minimum: Adhere to the three-click rule.

 

9) Announce the bottom of the page and offer further navigation

The screen reader does not know it has reached the bottom of a website. It simply stops reading out. It is up to the blind user to figure out the reason.

Therefore add the information to the bottom of every page that this is the bottom of the page and offer to click on links to go back / go back to the top / go to the home page.

E.g. “Bottom of page. Click to go back to the top. Or return to home page.”

 

10) Announce and explain all links in the copy

Correctly coded links are announced as links by the screen reader. That still doesn’t help a blind user much, if they are not guided about the purpose of the link: Always outline what the content is and where it links to.

E.g. “Click to read more about us.” works better as explanatory text than “Click here”.

This is especially important if the link takes the user outside of the current page.

E.g. “Click for more information on screen readers on the Wikipedia website.”

 

 

Advertisements

Tags:

%d bloggers like this: