Workshop accessible content

How do you create content that can be understood by everyone, also for people that use the web in another way than you would expect? Keeping your content accessible isn’t hard. You just need to look at your text differently.

In this workshop, we’ll tell you what is important to keep your content accessible and also why. Have you ever ‘listened’ to your own website, how accessible is your content? We will talk about headings, images, links, video and audio.

Did you know Google is blind and deaf? Everything you do for accessibility is also good for SEO!

Introduction

Web accessibility is the degree to which a website is usable by as many people as possible.

We don’t all use the web always the same way. When adding responsive design we create a site accessible on desktop with different browsers and screen sizes, and also for different kind of mobile devices used with a mouse or touch.

We don’t always use the web the same way or in optimal circumstances. For example: reading on a smartphone in the sun in a noise environment is different than reading on a desktop in a quiet office.

In the future there will be even more options and technology, as we use the web not exclusively in our office or at home anymore. Not only people with a disability, but everyone that has an online connection will benefit from a robust and accessible website.

Change your point of view!
Don’t depend on how the website looks, but how the content is structured.

Content of the workshop

Have you ever listened to your website?

Try it yourself with Apple VoiceOver:

Under the hood

Have you ever looked under the hood of a website? Look at your site without style (CSS): this is also what Google depends on.

Reading level

Keep the reading level: 12 years old maximum.
Why? When you write at a high reading level, you expect that the reader it her best when she reads this. Maybe the reader is tired, hungover, in a car, distracted by the TV or annoyed by a nagging child.

Good reads:

Readability test tools:

Readability

  • Make text easy to skim and read. People don’t read on the internet, they
  • Skim for keywords and only read the part they are interested in.
  • Short summary at the top (TL;DR)
  • Divide the text in short paragraphs, use meaningful headings
  • No large blocks of text
  • UPPERCASE font is harder to read when you are dyslexic, only use if for
  • Short text
  • 16 pixels minimum is best for most devices
  • Keep it clean, restful

Headings

  • One H1 per page that tells what the page is about, the rest meaningful
  • A heading should be followed by the content it describes
  • Do not skip a heading level

Good reads about headings:

Heading test tools:

Link text

  • Use meaningful text
  • Avoid “click here”, “read more”, ”download”, ‘continue reading”. It’s meaningless and people have to read around the link to see what’s it about
  • If you use an image as link, use the alt text as link text

Images

  • Check if an image has a proper alternative text
  • If an image is purely decorative: leave alternative text empty (use alt=””)
  • If an image has meaning: give a short describing alternative text, don’t use this as spamming tool, keep it to the point
  • Don’t use “image of” in the alt text. A screen reader already announces the image as image
  • If the image is a chart or an infographic, add an alternative in content, on the same page or on a different page and and link that

Video

Use Subtitles: not only useful for deaf people, but also for example when useful you are in the train and forgot your headset, your native language differs, there is much background noise and you can’t hear it well.

Do not autoplay: screen reader users can’t hear their software speaking. Your spouse will wake up if you forgot to turn off the sound when you work in bed.

Audio

Transcript the text, write it out. Provide a link to that text below the audio track and do not autoplay (same as video)

Alternative text, subtitles and transcriptions are content Google can read. So this is valuable content to add for SEO.

New Zealand All Blacks perform their Haka, with subtitles. Did you know what they were saying? Subtitles can give a complete different perspective.