O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Alt text as poetry for gov campnorth

151 visualizações

Publicada em

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

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Alt text as poetry for gov campnorth

  1. 1. Alt text as poetry A creative look at the importance of alt text from Sigma's content team
  2. 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. 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. 4. What is alt text and why is it important?
  5. 5. 1 in 7 1 billion people have a long-term disability, worldwide
  6. 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. 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. 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. 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. 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. 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. 12. Writing alt text can be hard
  13. 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. 14. Writing alt text can be hard ► Here it is again with some context. ► Does this change your approach? ► Answer in the chat.
  15. 15. How poetry can help
  16. 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. 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. 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. 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. 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. 21. Your turn
  22. 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. 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. 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. 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. 26. Thank you

×