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!
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.
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.
- 1Up Your Writing with Plain Language, by Ashley Bischoff (slides)
- Writing Accessible Content by Sami Keijonen
Readability test tools:
- 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
- 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:
- Web Accessibility Tutorials – Headings
- Accessible HTML5 heading structure in WordPressHeadings, Web Accessibility Tutorials
- The Truth about “The Truth About Multiple H1 Tags”
Heading test tools:
- Headings map for Chrome
- Headings list VoiceOver
- WAVE accessibility check tool
- 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
- 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
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.
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.