Text me slowly · Web Design 1

Text me slowly

What & why

When learning about accessibility & HTML semantics it’s difficult to understand what’s helpful.

By practicing defining an interface through text & speech we can more clearly understand what’s helpful.

Text is one of the most important accessibility tools—with some practice we can help everybody use our website.

Set up

Form into pairs
Get out a pencil and a piece of paper or do it digitally
We’ll do each activity one-by-one and discuss the results
Volunteers can even read their solutions out in robot voices!

Don’t look ahead the answers are within!

Instructions

Describe each interface with only text, like a computer or a screen reader.

What should be described?
What order should the information be described?
Are there elements that have functionality?
Are there repeated patterns?
What should be read for a person to interact properly?

**1. What text would be helpful for the flamingo image?**

Markdown

A group of sleeping flamingos showing their bright pink colours

**2. What text would be helpful for this graphic?**

Markdown

Send the “grinning face with smiling eyes” emoji

**3. What text would be helpful for this graphic?**

Markdown

Number of moons for each gas giant

Jupiter: 67 moons
Saturn: 62 moons
Neptune: 14 moons
Uranus: 27 moons

**4. What text would be helpful for the column graphics?**

Markdown

*Nothing—they’re purely decoration*

**5. Describe this interface using only text—explaining it to someone who can’t see it**

Markdown

ARTICLE

Image of Godzilla destroying Japan in black & white.

[Send to a friend]
[Save to your collection]
[Enlarge the image]

Saved from <notitleproductionfiles.com>
[Visit the No Title Production Files website]

1 comment

**6. Describe this interface using only text—explaining it to someone who can’t see it**

Markdown

VIDEO

Star Wars: B-Wing (Canon) · Spacedock
Spacedock takes a look at one of the most innovative spacecraft designs in the Star Wars Galaxy.
54 200 views

[Play]
[Skip ahead]
[Change volume]
[Enable captions]
[Configure video playback]
[Go fullscreen]
[Thumbs up]
[Thumbs down]
[Share]

Published: Sept. 19, 2017
Author: Spacedock
Subscribers: 81 000

**7. Describe this interface using only text—explaining it to someone who can’t see it**

Markdown

CHAT

Chatting with Liz Bradley (Active 1m ago)
[More info about Liz]

[Switch to voice chat]
[Switch to video chat]

{Type a message…}
[Send message]

Messages:
- Liz:
  “That is super cool”
  Mon, 3:35 PM
- You:
  [Link: XKCD—Board game players doing taxes]
  Today, 2:03 PM
- Liz:
  “Sticker: Princess Leia, ‘I love you’”
  Less than a minute ago

[Thumbs up]
[Send files]
[Send sticker]
[Send GIF]
[Send emoji]
[Send voice message]
[Play a game]
[Send a photo]