Content Accessibility

Katherine Barcham

Department of Internal Affairs

Who am I thinking about?

Person with words Non-verbal, Permanent; person with words Laryngitis, Temporary; person with words Heavy accent, Situational Microsoft Inclusive Design Kit, CC-BY-ND-ND

Disclaimer: I'm not a magician

Magician pulling a rabbit and flowers out of a hat.

Context

Background image source

Example

National Library blog

In the beginning, there was...

Link text

Conference Centre

The conference will be held on two floors of the venue on Saturday.

A map of the venue is available HERE

Conference Programme

There are two streams of lectures with plenary sessions.

The Full Programme HERE

Accommodation

Some nearby motels are offering attendee discounts.

Download a list of motels in the vicinity HERE

Writing good link text

Links should:

  • be clear about where they will take the reader(!)
  • look and be marked up consistently
  • be descriptive
  • use keywords
  • make sense when removed from its context
  • not be forced to open in a new window.

Better link text

Conference Centre

The conference will be held on two floors of the venue on Saturday.

View a map of the Conference Centre

Conference Programme

There are two streams of lectures with plenary sessions.

The Full Conference Programme

Accommodation

Some nearby motels are offering attendee discounts.

Discounted motels near the venue

When seeing is an issue

Person with words Blind, Permanent; person with words Cataract, Temporary; person with words Distracted driver, Situational Microsoft Inclusive Design Kit, CC-BY-ND-ND
Warning sign with alt=warning next to it

Text alternatives for images

Anything you say with an image, also say with text.

Who it affects

  • People who can't see images:
    • vision disability
    • bad internet connection
    • old browser
    • limited data
  • Search engines (Google)

Decorative images

The benefits of owning a dog

Photo of a dachshund running, in mid-stride, with all legs off the ground. Image source

There are many benefits to owning a dog. They are fun, loyal companions.

Decorative images

Phone 04 555 1212


Phone: 04 555 1212

Meaningful images

Chippy the hero!

Chippy running over the grass. Image source

Chippy, a dachshund, saved the life of his owner after she had a fall.

Meaningful images

Dogs can fly!

Photo of Chippy running in mid-stride, all his legs off the ground, as if in flight. Image source

Chippy the dachshund flies above the ground.

Text in images

Dachshunds

This is a popular breed of dog.

Department of Internal Affairs - Te Tari Taiwhenua

Linked images

Pick a dog

Select a dog to see their personality traits.

Dachshund Image source
Golden Retriever Image source

More examples!

What about complex images?

A map of the sky in the Southern Hemisphere demonstrating a complex image. Image source

Long descriptions

  • Still need brief alt text
  • Helps people with vision and learning disabilities
  • Text equivalent of essential information, in context

Examples

What alt text is needed

W3C Alternative text decision tree

W3C Web Accessibility Tutorials - Images Concepts

Break time

15 mins

Background image source

Captions and transcripts

Person with words Deaf, Permanent; person with words Ear infection, Temporary; person with words Bartender, Situational Microsoft Inclusive Design Kit, CC-BY-ND-ND
Photo from movie with captions.

Video needs captions.

Video and audio need descriptive text transcripts.

Who it affects

Captions are good for people:

  • with a hearing impairment
  • with a learning or language difficulty
  • who forgot their headphones and are in a noisy place, or in a quiet place.

Auto captions

Still from video. Autocaption reads No Gods stand up for Constance. Title reads Now gods, stand up for bastards. YouTube

Who it affects

Full descriptive text transcripts are good for people who:

  • can't see and hear the video
  • prefer to read than watch/listen
  • don't have the data for streaming.

Also good for Google and other search engines.

What goes in a transcript?

Transcripts:

  • don't have to be verbatim accounts of the audio track in a video
  • need to include extra explanations or comments that may be helpful, like indications of laughter or an explosion.

Example for discussion

Example time

Barriers for everyone

Stick figures of 15 people representing differnet disabilities Situational Microsoft Inclusive Design Kit, CC-BY-ND-ND

Doing text right

Hand-drawn wireframe of a web page showing HTML markup.

Use headings to mark up structure!

Who it affects

  • EVERYONE!
  • But especially anyone:
    • using assistive tech, e.g. screen reader or speech rec
    • with a reading or learning difficulty
    • trying to skim the page or find information quickly
    • using custom style sheets or display preferences
  • Google and other search engines.

Headings

Headings example

Let's review

Resources

Web accessibility for content editors — quick reference guide

Thanks for coming along today!

Any questions?

ICT Web Standards
@kgbarcham

Dog with his head on an angle.