A creative session on how to write Alt text to help improve your communications, presentations and social media posts

1. Alt text as poetry
A creative look at the importance of alt text from Sigma's content team

2. Sigma
► We design digital products and services that help people
live and work better
► A human-centred research, design and development company
► We believe that putting people at the heart of our approach delivers
better products to a happier audience

3. Overview
► What is alt text and why is it important?
► Writing alt text can be hard
► How poetry can help
► Your turn
► Some resources

4. What is alt text and why is it
important?

5. 1 in 7
1 billion
people have a long-term disability, worldwide

6. 21%
13.3 million
people in the UK
have some form of disability
https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/791271/family-resources-survey-2017-18.pdf

7. ► Disability is more common than
you may think
► We will all experience some kind of
disability at some point
► By the age of 45, most of us will
need glasses
► Yet many websites do not support
dynamic text
► Many people on iPhone use “Large
Text”; a lot of apps aren’t
compatible
Anyone can have challenges

8. How does this impact you?
Even if you never edit a website, you have the option to improve accessibility every time you:
► Tweet
► Post on Facebook
► Build a PowerPoint slide show
► Write a blog post…
And even if you never do those things, you can influence those who do.
https://alt-text-as-poetry.net/

9. What is alt text
► Alternative text provides a textual alternative to non-text content (for example images) in web pages
► This text can be provided on the page in descriptions around non-text content
► Alt text is alternative text provided in HTML code as an “alt” attribute
► Alt text is read out by screen readers so that screen reader users can access the image
► “Adding alternative text for images is the first principle of web accessibility”
https://webaim.org/techniques/alttext/

10. Alt text example 1
alt="Two hexagon shaped photographs with a
smaller picture slightly overlaid by a
larger picture. In the small picture, people
are grouped around a table chatting and
drinking tea. In the larger picture, a
ginger haired white man is sat down,
concentrating, and looking at a laptop."
https://www.designedbysigma.com/

11. Alt text example 2
alt="A woman looks unhappy at the one cherry
tomato on her place"
https://www.bbc.co.uk/food/articles/veg_variety

12. Writing alt text can be hard

13. Writing alt text can be hard
► How would you approach the image on the
right?
► Type your answers in the chat.
Image from: https://www.mind.org.uk/information-support/your-stories/riding-
the-pandemic/

14. Writing alt text can be hard
► Here it is again with some context.
► Does this change your approach?
► Answer in the chat.

15. How poetry can help

16. How poetry can help
► I was reminded of the idea of alt text as poetry by my colleague Lisa Matthews (poet and Content Designer
at Sigma)
► She sent me this site: https://alt-text-as-poetry.net/ created by disabled activists and artists Bojana Coklyat
and Shannon Finnegan (I wrote to them to ask if I could use their materials*)
► I can’t hope to cover all of it today, please check it out
*They said yes, the materials are also available under a Creative Commons Attribution-NonCommercial 4.0 International License.

17. 3 ideas from the world of poetry that we can apply to alt-text:
► Attention to Language
► Word Economy
► Experimental Spirit
https://alt-text-as-poetry.net/

18. Attention to Language
► What words are we using?
► What are their connotations?
► What is the tone of our writing (the way in which we’re doing the writing)?
► What is the voice (who the reader hears)?
► How do these align with, or contrast, the tone and perspective of the image?
https://alt-text-as-poetry.net/

19. Word Economy
► Alt-text usually aims for brevity
► For most images, one to two sentences will do
► Poetry has a lot to teach us about paring down language to create something that is expressive, yet
concise
https://alt-text-as-poetry.net/

20. Experimental Spirit
► There are lots of complex and interesting questions that come up when translating visual information
into text
► We need to try out different ways of doing this, learning from each other's strategies and techniques
https://alt-text-as-poetry.net/

21. Your turn

22. Exercise 1 (warm up)
Part 1
Choose one of the images on the right
In the chat, list things (objects, people, stuff, nouns) that are
present in the image or related to the image.
Aim to write 5 words, but if you are on a roll, write as many
as come to mind.
Part 2
List descriptive words or adjectives that describe the image,
a part of the image, or your response to it. How does it make
you feel? What’s the mood of the image?What associations
do you have?
Again, aim to write 5 words, but if you are on a roll, write as
many as come to mind.
Second image from: https://www.studiomuseum.org/collection-item/5-pm-harlem

23. Exercise 2: Prioritisation
With the same image
In the chat, write a single sentence to describe the
image.The sentence should capture whatever you
think is most important about the image.
Now write a second sentence about the second most
important thing in, or about, the image.
Write a third sentence about the third most
important thing.
We’ll discuss together

24. Some resources
► https://webaim.org/techniques/alttext/
► https://www.microsoft.com/en-us/accessibility/
► https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/
► https://adamsilver.io/articles/
► https://design-system.service.gov.uk/
► https://www.a11yproject.com/
► https://www.digitala11y.com/
► https://www.24a11y.com/
► https://hiddedevries.nl/en/blog/
► https://developer.mozilla.org/en-US/docs/Web/Accessibility

25. designedbysigma.com @wearesigma
Summary
► Alt text is important
► Alt text is like life: it can be tricky, but poetry helps
► You can make a difference
► Check out alt-text-as-poetry.net
► Get in touch (@Just_UX)
► A sidenote:
www.designedbysigma.com/news-and-thoughts/help-shape-future-cms-accessibility/

26. Thank you