SlideShare a Scribd company logo

Writing Great Alt Text

Alt means alternative text. A look at how to write it, thinking about audience, content, context. These slides are from the Accessibility Summit, 2014. Register for access to recorded sessions: http://environmentsforhumans.com/2014/accessibility-summit

1 of 48
Download to read offline
Writing great alt text 
Whitney Quesenbery 
Center for Civic Design 
@civicdesign | @whitneyq 
Environments for Humans 
Accessibility Summit 2014
The basics 
Alt means alternative
Alt text is... 
A principle of accessibility 
Web Content Accessibility Guidelines 2.0 
Principle 1: Perceivable 
Information and user interface components 
must be presentable to users in ways they 
can perceive.
Alt text is... 
A requirement for accessibility 
Web Content Accessibility Guidelines 2.0 
Guideline 1.1 Text Alternatives: Provide 
text alternatives for any non-text content 
so that it can be changed into other forms 
people need, such as large print, braille, 
speech, symbols or simpler language.
Alt text is... 
Code. 
Specifically, an attribute in the image element 
<img src="tickets.jpg" alt="#A11YSUMMIT. Buy tickets">
Alt text is... 
Part of appealing to all senses. 
 Images – alternative text 
 Video – captions and video descriptions action 
 Audio - transcripts 
An accessible UX principle: 
Accessible Media: Appeal to all Senses 
A Web for Everyone by Sarah Horton and Whitney Quesenbery 
http://rosenfeldmedia.com/books/a-web-for-everyone/

Recommended

More Related Content

What's hot

Magazine Analysis
Magazine AnalysisMagazine Analysis
Magazine Analysis_megkiely
 
Magazine Analysis (Front Cover)
Magazine Analysis (Front Cover)Magazine Analysis (Front Cover)
Magazine Analysis (Front Cover)RyaaanWard
 
Hypertext presentation
Hypertext presentationHypertext presentation
Hypertext presentationIftikhar Alam
 
Magazine Analysis
Magazine AnalysisMagazine Analysis
Magazine AnalysisJessDruett
 
Html links
Html linksHtml links
Html linksJayjZens
 
Music Magazine Covers
Music Magazine CoversMusic Magazine Covers
Music Magazine Coverstaylzz1
 
Analysing Magazine Articles
Analysing Magazine ArticlesAnalysing Magazine Articles
Analysing Magazine ArticlesBitUser Nguyễn
 
Analysis magazine and newspaper
Analysis magazine and newspaperAnalysis magazine and newspaper
Analysis magazine and newspaperChronoPinoyX
 
Media Analysis of Magazine Articles
Media Analysis of Magazine ArticlesMedia Analysis of Magazine Articles
Media Analysis of Magazine Articlesa2columnd12
 
Magazine Contents page textual analysis media studies
Magazine Contents page textual analysis media studiesMagazine Contents page textual analysis media studies
Magazine Contents page textual analysis media studiesHumble Awan
 
Textual analysis of magazines
Textual analysis of magazinesTextual analysis of magazines
Textual analysis of magazinesMahnoor Tariq
 
Quoting paraphrasing and summarizing
Quoting paraphrasing and summarizingQuoting paraphrasing and summarizing
Quoting paraphrasing and summarizingRegina Navejar
 
Hypertext and hypermedia
Hypertext and hypermediaHypertext and hypermedia
Hypertext and hypermediaJay Patel
 
Codes and conventions of a magazine contents page
Codes and conventions of a magazine contents pageCodes and conventions of a magazine contents page
Codes and conventions of a magazine contents pageRachLou96
 

What's hot (20)

Magazine Analysis
Magazine AnalysisMagazine Analysis
Magazine Analysis
 
Magazine Analysis (Front Cover)
Magazine Analysis (Front Cover)Magazine Analysis (Front Cover)
Magazine Analysis (Front Cover)
 
magazine analysis
magazine analysismagazine analysis
magazine analysis
 
Hypertext presentation
Hypertext presentationHypertext presentation
Hypertext presentation
 
TOPIC SENTENCE AND THESIS STATEMENT
TOPIC SENTENCE AND THESIS STATEMENTTOPIC SENTENCE AND THESIS STATEMENT
TOPIC SENTENCE AND THESIS STATEMENT
 
Magazine analysis
Magazine analysisMagazine analysis
Magazine analysis
 
Magazine Analysis
Magazine AnalysisMagazine Analysis
Magazine Analysis
 
Outlines
OutlinesOutlines
Outlines
 
Html links
Html linksHtml links
Html links
 
Music Magazine Covers
Music Magazine CoversMusic Magazine Covers
Music Magazine Covers
 
Analysing Magazine Articles
Analysing Magazine ArticlesAnalysing Magazine Articles
Analysing Magazine Articles
 
Analysis magazine and newspaper
Analysis magazine and newspaperAnalysis magazine and newspaper
Analysis magazine and newspaper
 
Media Analysis of Magazine Articles
Media Analysis of Magazine ArticlesMedia Analysis of Magazine Articles
Media Analysis of Magazine Articles
 
Magazine Contents page textual analysis media studies
Magazine Contents page textual analysis media studiesMagazine Contents page textual analysis media studies
Magazine Contents page textual analysis media studies
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Markup Languages
Markup Languages Markup Languages
Markup Languages
 
Textual analysis of magazines
Textual analysis of magazinesTextual analysis of magazines
Textual analysis of magazines
 
Quoting paraphrasing and summarizing
Quoting paraphrasing and summarizingQuoting paraphrasing and summarizing
Quoting paraphrasing and summarizing
 
Hypertext and hypermedia
Hypertext and hypermediaHypertext and hypermedia
Hypertext and hypermedia
 
Codes and conventions of a magazine contents page
Codes and conventions of a magazine contents pageCodes and conventions of a magazine contents page
Codes and conventions of a magazine contents page
 

Viewers also liked

Falling in Love with Forms [BlendConf 2014]
Falling in Love with Forms [BlendConf 2014]Falling in Love with Forms [BlendConf 2014]
Falling in Love with Forms [BlendConf 2014]Aaron Gustafson
 
Validating UX Strategy Concepts Through Service Design
Validating UX Strategy Concepts Through Service DesignValidating UX Strategy Concepts Through Service Design
Validating UX Strategy Concepts Through Service DesignAshley Halsey Hemingway
 
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...Yury Vetrov
 
9 Secrets of Kano Model
9 Secrets of Kano Model9 Secrets of Kano Model
9 Secrets of Kano ModelGena Drahun
 
Usability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheapUsability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheapWhitney Quesenbery
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightfulWhitney Quesenbery
 
3 Управление требованиями в Agile, Story Mapping для формирования баклога про...
3 Управление требованиями в Agile, Story Mapping для формирования баклога про...3 Управление требованиями в Agile, Story Mapping для формирования баклога про...
3 Управление требованиями в Agile, Story Mapping для формирования баклога про...Magneta AI
 
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014Andrew Sikorskiy
 
A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid...
 A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid... A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid...
A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid...Jenny Benevento
 
UX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyUX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyYury Vetrov
 
Why users can't find answers in help material
Why users can't find answers in help materialWhy users can't find answers in help material
Why users can't find answers in help materialTom Johnson
 
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуреCodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуреYury Vetrov
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаYury Vetrov
 
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Yury Vetrov
 
User Story Mapping in Practice
User Story Mapping in PracticeUser Story Mapping in Practice
User Story Mapping in PracticeSteve Rogalsky
 
5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design JourneyJamin Hegeman
 

Viewers also liked (19)

Falling in Love with Forms [BlendConf 2014]
Falling in Love with Forms [BlendConf 2014]Falling in Love with Forms [BlendConf 2014]
Falling in Love with Forms [BlendConf 2014]
 
Validating UX Strategy Concepts Through Service Design
Validating UX Strategy Concepts Through Service DesignValidating UX Strategy Concepts Through Service Design
Validating UX Strategy Concepts Through Service Design
 
Экономическая логика Customer Experience
Экономическая логика Customer Experience Экономическая логика Customer Experience
Экономическая логика Customer Experience
 
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...
UXRussia2014: Юрий Ветров ― Burger-Driven Design. Фреймворк Mail.Ru для унифи...
 
9 Secrets of Kano Model
9 Secrets of Kano Model9 Secrets of Kano Model
9 Secrets of Kano Model
 
Usability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheapUsability Testing: Making it fast, good, and cheap
Usability Testing: Making it fast, good, and cheap
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
3 Управление требованиями в Agile, Story Mapping для формирования баклога про...
3 Управление требованиями в Agile, Story Mapping для формирования баклога про...3 Управление требованиями в Agile, Story Mapping для формирования баклога про...
3 Управление требованиями в Agile, Story Mapping для формирования баклога про...
 
Story mapping
Story mappingStory mapping
Story mapping
 
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014
Будущее UX методологии и проблемы/«дорожная карта» // RIF'2014
 
A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid...
 A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid... A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid...
A Taxonomist, a Software Engineer, and a UX Researcher Walk Into a Bar: Brid...
 
UX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX StrategyUX Poland 2014: Y.Vetrov — Applied UX Strategy
UX Poland 2014: Y.Vetrov — Applied UX Strategy
 
Why users can't find answers in help material
Why users can't find answers in help materialWhy users can't find answers in help material
Why users can't find answers in help material
 
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуреCodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
CodeFest2015: Ю.Ветров — От дизайн-команды к дизайн-культуре
 
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практикаUXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
UXPeople2013: Юрий Ветров — UX-стратегия. Теория и практика
 
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
Design Weekend Ярославль 2014: Юрий Ветров — Продуктовый дизайнер. Современно...
 
From Paths to Sandboxes
From Paths to SandboxesFrom Paths to Sandboxes
From Paths to Sandboxes
 
User Story Mapping in Practice
User Story Mapping in PracticeUser Story Mapping in Practice
User Story Mapping in Practice
 
5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey5 Things I Wish I Knew – A Service Design Journey
5 Things I Wish I Knew – A Service Design Journey
 

Similar to Writing Great Alt Text

Alt text as poetry for gov campnorth
Alt text as poetry for gov campnorthAlt text as poetry for gov campnorth
Alt text as poetry for gov campnorthNexer Digital
 
6 Awesomely Practical Tips: Making content better for everyone
6 Awesomely Practical Tips: Making content better for everyone6 Awesomely Practical Tips: Making content better for everyone
6 Awesomely Practical Tips: Making content better for everyoneWhitney Quesenbery
 
Seeing is believing: why images hold the key to high impact communications
Seeing is believing: why images hold the key to high impact communications   Seeing is believing: why images hold the key to high impact communications
Seeing is believing: why images hold the key to high impact communications Helen McInnes
 
Intro to Website Accessibility for Libraries
Intro to Website Accessibility for LibrariesIntro to Website Accessibility for Libraries
Intro to Website Accessibility for LibrariesCindy Leonard
 
Page 1 CCJ 410 Crime Myths Hickman In the News
Page  1 CCJ 410 Crime Myths Hickman  In the NewsPage  1 CCJ 410 Crime Myths Hickman  In the News
Page 1 CCJ 410 Crime Myths Hickman In the Newsemelyvalg9
 
Future Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design InclusivelyFuture Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design InclusivelyMichael Larsen
 
Page 1 CCJ 410 Crime Myths Hickman In the News.docx
Page  1 CCJ 410 Crime Myths Hickman  In the News.docxPage  1 CCJ 410 Crime Myths Hickman  In the News.docx
Page 1 CCJ 410 Crime Myths Hickman In the News.docxkarlhennesey
 
Content Strategy in Higher Education
Content Strategy in Higher EducationContent Strategy in Higher Education
Content Strategy in Higher EducationJ. Todd Bennett
 
Infographics in the Classroom
Infographics in the ClassroomInfographics in the Classroom
Infographics in the ClassroomEllen Cordeiro
 
Applying the Multimedia Principle
Applying the Multimedia PrincipleApplying the Multimedia Principle
Applying the Multimedia PrincipleDorea Hardy
 
I segreti degli Alt-Text | WordCamp Italia 2021
I segreti degli Alt-Text | WordCamp Italia 2021I segreti degli Alt-Text | WordCamp Italia 2021
I segreti degli Alt-Text | WordCamp Italia 2021Alice Orrù
 
MD 400 Introduction
MD 400 IntroductionMD 400 Introduction
MD 400 Introductionjjh3810
 
Principles of Multimedia and Contiguity
Principles of Multimedia and ContiguityPrinciples of Multimedia and Contiguity
Principles of Multimedia and Contiguitybobkilner
 
User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...
User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...
User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...springshare
 
Introduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS PractitionersIntroduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS PractitionersEmanuele Della Valle
 
How to write articles for CAP
How to write articles for CAPHow to write articles for CAP
How to write articles for CAPmtphillipscap
 
Writing A Good Thesis Statement
Writing A Good Thesis StatementWriting A Good Thesis Statement
Writing A Good Thesis StatementWendy Hager
 

Similar to Writing Great Alt Text (20)

Desrosiers "Image Description"
Desrosiers "Image Description"Desrosiers "Image Description"
Desrosiers "Image Description"
 
Alt text as poetry for gov campnorth
Alt text as poetry for gov campnorthAlt text as poetry for gov campnorth
Alt text as poetry for gov campnorth
 
6 Awesomely Practical Tips: Making content better for everyone
6 Awesomely Practical Tips: Making content better for everyone6 Awesomely Practical Tips: Making content better for everyone
6 Awesomely Practical Tips: Making content better for everyone
 
Seeing is believing: why images hold the key to high impact communications
Seeing is believing: why images hold the key to high impact communications   Seeing is believing: why images hold the key to high impact communications
Seeing is believing: why images hold the key to high impact communications
 
Intro to Website Accessibility for Libraries
Intro to Website Accessibility for LibrariesIntro to Website Accessibility for Libraries
Intro to Website Accessibility for Libraries
 
Page 1 CCJ 410 Crime Myths Hickman In the News
Page  1 CCJ 410 Crime Myths Hickman  In the NewsPage  1 CCJ 410 Crime Myths Hickman  In the News
Page 1 CCJ 410 Crime Myths Hickman In the News
 
Future Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design InclusivelyFuture Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design Inclusively
 
Page 1 CCJ 410 Crime Myths Hickman In the News.docx
Page  1 CCJ 410 Crime Myths Hickman  In the News.docxPage  1 CCJ 410 Crime Myths Hickman  In the News.docx
Page 1 CCJ 410 Crime Myths Hickman In the News.docx
 
Content Strategy in Higher Education
Content Strategy in Higher EducationContent Strategy in Higher Education
Content Strategy in Higher Education
 
Infographics in the Classroom
Infographics in the ClassroomInfographics in the Classroom
Infographics in the Classroom
 
Visual Argument Essay Examples
Visual Argument Essay ExamplesVisual Argument Essay Examples
Visual Argument Essay Examples
 
Applying the Multimedia Principle
Applying the Multimedia PrincipleApplying the Multimedia Principle
Applying the Multimedia Principle
 
I segreti degli Alt-Text | WordCamp Italia 2021
I segreti degli Alt-Text | WordCamp Italia 2021I segreti degli Alt-Text | WordCamp Italia 2021
I segreti degli Alt-Text | WordCamp Italia 2021
 
MD 400 Introduction
MD 400 IntroductionMD 400 Introduction
MD 400 Introduction
 
Principles of Multimedia and Contiguity
Principles of Multimedia and ContiguityPrinciples of Multimedia and Contiguity
Principles of Multimedia and Contiguity
 
Visual Argument Analysis
Visual Argument AnalysisVisual Argument Analysis
Visual Argument Analysis
 
User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...
User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...
User Experience Webinar 1 - Eye-popping Content: Creating a User-friendly Fra...
 
Introduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS PractitionersIntroduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS Practitioners
 
How to write articles for CAP
How to write articles for CAPHow to write articles for CAP
How to write articles for CAP
 
Writing A Good Thesis Statement
Writing A Good Thesis StatementWriting A Good Thesis Statement
Writing A Good Thesis Statement
 

More from Whitney Quesenbery

Designing for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challengeDesigning for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challengeWhitney Quesenbery
 
Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data Whitney Quesenbery
 
Storytelling makes research data come to life
Storytelling makes research data come to lifeStorytelling makes research data come to life
Storytelling makes research data come to lifeWhitney Quesenbery
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightfulWhitney Quesenbery
 
Plain language is accessibility for content
Plain language is accessibility for contentPlain language is accessibility for content
Plain language is accessibility for contentWhitney Quesenbery
 
Accessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesAccessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesWhitney Quesenbery
 
Usability testing for accessible UX
Usability testing for accessible UXUsability testing for accessible UX
Usability testing for accessible UXWhitney Quesenbery
 
Security insights & issues for poll workers
Security insights & issues for poll workersSecurity insights & issues for poll workers
Security insights & issues for poll workersWhitney Quesenbery
 
Plain language (accessibility for content)
Plain language (accessibility for content)Plain language (accessibility for content)
Plain language (accessibility for content)Whitney Quesenbery
 
The power of stories: creating empathy and connection
The power of stories: creating empathy and connectionThe power of stories: creating empathy and connection
The power of stories: creating empathy and connectionWhitney Quesenbery
 
What you can learn from usability testing
What you can learn from usability testingWhat you can learn from usability testing
What you can learn from usability testingWhitney Quesenbery
 
Accessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiencesAccessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiencesWhitney Quesenbery
 
Using Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPAUsing Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPAWhitney Quesenbery
 
Persona Stories: Weaving together quant & qual for a richer picture
Persona Stories: Weaving together quant & qual for a richer picturePersona Stories: Weaving together quant & qual for a richer picture
Persona Stories: Weaving together quant & qual for a richer pictureWhitney Quesenbery
 

More from Whitney Quesenbery (20)

Designing for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challengeDesigning for difference: Are you failing at the most important design challenge
Designing for difference: Are you failing at the most important design challenge
 
Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data Storytelling: Finding the insights in research data
Storytelling: Finding the insights in research data
 
Storytelling makes research data come to life
Storytelling makes research data come to lifeStorytelling makes research data come to life
Storytelling makes research data come to life
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
Accessibility Basics
Accessibility BasicsAccessibility Basics
Accessibility Basics
 
Plain language is accessibility for content
Plain language is accessibility for contentPlain language is accessibility for content
Plain language is accessibility for content
 
Accessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiencesAccessible UX: Beyond the checklist to great experiences
Accessible UX: Beyond the checklist to great experiences
 
Usability testing for accessible UX
Usability testing for accessible UXUsability testing for accessible UX
Usability testing for accessible UX
 
Accessibility as innovation
Accessibility as innovationAccessibility as innovation
Accessibility as innovation
 
Security insights & issues for poll workers
Security insights & issues for poll workersSecurity insights & issues for poll workers
Security insights & issues for poll workers
 
Don't Make Me Read
Don't Make Me ReadDon't Make Me Read
Don't Make Me Read
 
Plain language (accessibility for content)
Plain language (accessibility for content)Plain language (accessibility for content)
Plain language (accessibility for content)
 
The power of stories: creating empathy and connection
The power of stories: creating empathy and connectionThe power of stories: creating empathy and connection
The power of stories: creating empathy and connection
 
Personas for Accessible UX
Personas for Accessible UXPersonas for Accessible UX
Personas for Accessible UX
 
What you can learn from usability testing
What you can learn from usability testingWhat you can learn from usability testing
What you can learn from usability testing
 
Accessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiencesAccessibility as Innovation: Creating accessible user experiences
Accessibility as Innovation: Creating accessible user experiences
 
Usability meets accessibility
Usability meets accessibilityUsability meets accessibility
Usability meets accessibility
 
Using Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPAUsing Personas and Stories Effectively - Workshop for TriUXPA
Using Personas and Stories Effectively - Workshop for TriUXPA
 
Persona Stories: Weaving together quant & qual for a richer picture
Persona Stories: Weaving together quant & qual for a richer picturePersona Stories: Weaving together quant & qual for a richer picture
Persona Stories: Weaving together quant & qual for a richer picture
 
Notetaking workshop
Notetaking workshopNotetaking workshop
Notetaking workshop
 

Recently uploaded

Jamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingJamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingPriyanka Singhvi
 
Personal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSPersonal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSvnendicottstudent
 
introduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxintroduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxrajeshkapahi786
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and OptionsJIT KUMAR GUPTA
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm22nvatafu
 
Book on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsBook on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsJIT KUMAR GUPTA
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignAlbany Glass
 
Explore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfExplore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfCREATIVEDESIGNS9
 
Concept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptConcept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptAr. TANIA BERA
 
Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023maker Money
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Peter139483
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv22nvatafu
 
International Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxInternational Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxzulamirulhaq1
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfanishdishis
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionNityaSharma77
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...JIT KUMAR GUPTA
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryDarshiniPatel16
 

Recently uploaded (17)

Jamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani weddingJamnagar Event Guide_anantambani wedding
Jamnagar Event Guide_anantambani wedding
 
Personal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FSPersonal Brand Exploration Presentation | FS
Personal Brand Exploration Presentation | FS
 
introduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptxintroduction_to_small_business_environment_amy_shapiro.pptx
introduction_to_small_business_environment_amy_shapiro.pptx
 
Hill Area development- Issues and Options
Hill Area development- Issues and OptionsHill Area development- Issues and Options
Hill Area development- Issues and Options
 
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
40 Shots.docxmjggggggggggggmgjjjjjjjjjjmjm
 
Book on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural ProjectsBook on-Identifying, Analysing and Planning sites for Architectural Projects
Book on-Identifying, Analysing and Planning sites for Architectural Projects
 
The Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel DesignThe Role Of Antique Mirrors In Boutique Hotel Design
The Role Of Antique Mirrors In Boutique Hotel Design
 
Explore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdfExplore the Culinary Delights by the Pool.pdf
Explore the Culinary Delights by the Pool.pdf
 
Concept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.pptConcept of Partition Wall Panelling Cladding.ppt
Concept of Partition Wall Panelling Cladding.ppt
 
Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023Trends and Innovations: Home Decor in 2023
Trends and Innovations: Home Decor in 2023
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbvStoryboard.pdfbueiearviaelvr;aeibvribrvipervwbv
Storyboard.pdfbueiearviaelvr;aeibvribrvipervwbv
 
International Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptxInternational Anti-Corruption Day XL by Slidesgo.pptx
International Anti-Corruption Day XL by Slidesgo.pptx
 
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdfAnavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
Anavi Gold And Diamond Ring by Dishis Designer Jewellery.pdf
 
Interior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features ExtractionInterior Landscape and Landscape Features Extraction
Interior Landscape and Landscape Features Extraction
 
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...SECMOL School In Leh- A  Role Model of Vernacular , Passive and Sustainable H...
SECMOL School In Leh- A Role Model of Vernacular , Passive and Sustainable H...
 
Cargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industryCargo joggers tech pack for womenswear used in industry
Cargo joggers tech pack for womenswear used in industry
 

Writing Great Alt Text

  • 1. Writing great alt text Whitney Quesenbery Center for Civic Design @civicdesign | @whitneyq Environments for Humans Accessibility Summit 2014
  • 2. The basics Alt means alternative
  • 3. Alt text is... A principle of accessibility Web Content Accessibility Guidelines 2.0 Principle 1: Perceivable Information and user interface components must be presentable to users in ways they can perceive.
  • 4. Alt text is... A requirement for accessibility Web Content Accessibility Guidelines 2.0 Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • 5. Alt text is... Code. Specifically, an attribute in the image element <img src="tickets.jpg" alt="#A11YSUMMIT. Buy tickets">
  • 6. Alt text is... Part of appealing to all senses.  Images – alternative text  Video – captions and video descriptions action  Audio - transcripts An accessible UX principle: Accessible Media: Appeal to all Senses A Web for Everyone by Sarah Horton and Whitney Quesenbery http://rosenfeldmedia.com/books/a-web-for-everyone/
  • 7. Because technology needs it Screen readers (and other assistive technology) can't interpret the meaning of the image without it. <img src="fb.jpg"> <img src="twitter.jpg"> <img src="li-logo-square.jpg"> <img src="g.jpg> <img src="btn1875412.jpg"
  • 8. Because people need it  People who use screen readers and other AT  When images are missing or turned off  For translations Jacob Vishnu Trevor Maria Personas from A Web for Everyone by Sarah Horton and Whitney Quesenbery http://rosenfeldmedia.com/books/a-web-for-everyone/resources/
  • 9. The problem Why are we (still) talking about alt text?
  • 10. Alt text is invisible content  It's hard to tell if it's good or bad...or even it it's there.  Even bad alt text passes accessibility checkers. Banner Ad <img src="banner-ad-176987362334876292.jpg" alt="banner-ad-176987362334876292.jpg">
  • 11. Is it code or content? Who "owns" the alt text?  Developers  Art directors  Authors
  • 12. The tools don't help It's no fun to 1. find each image 2. click open the properties sheet 3. navigate to the right page 4. to enter the alt text over and over and over for each image
  • 13. Or they get in the way They ask for the information at the wrong time, and in the wrong way.
  • 14. The usual rules A simple way to decide how to write alt text
  • 15. The simplest guideline Start with this question: What information does this image add?  Does the page make sense without it?  What kind of information is it?
  • 16. If the image contains  Text Repeat the words  Visual information Explain it  Sensory information Describe it  Nothing new Ignore it <img src="useless image" alt="">
  • 17. A simple decision tree  What is the role of the image?  Decorative? Use null alt text or CSS  Sensory? Write a descriptive identificaation  Informative?  No new info? Use null alt text  Simple or a link? Write short alt text  Complex image? Create long text  Section of the same page  Linked page  Longdesc 4 Syllables - http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
  • 18. Or, a detailed analysis HTML5: Techniques for providing useful text alternatives (updated Sept 8, 2014) http://rawgit.com/w3c/alt-techniques/master/index.html
  • 19. On the HTML5 standards horizon: <figure> and <figcaption>  Keeps the image, alt text, and caption together <figure><img src="castle-painting.jpg" alt="The castle now has two towers and two walls."> <figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption></figure> Example from: http://rawgit.com/w3c/alt-techniques/master/index.html#m6
  • 20. A writer's approach Start with a content strategy
  • 21. 1. Know your audience  What knowledge or background do they have?  What terminology will they know? <img alt="Molecular structure of diethyl diazenedicarboxylate">
  • 22. 2. Context, not just rules  What is the reader's goal?  How does the image fit into the page?  What other information is around the image?
  • 23. 3. Create a consistent 'voice' Make the alt text part of the (stylistic) voice of the site, in how images are voiced (by assistive technology). Functional? Descriptive? Emotional?
  • 24. Consider the fox What should the alt text for this image be? Image Credit: J. and K. Hollingsworth/USFWS
  • 25. What if we see it on this page? The text on page shown in the image says Red Fox (Vulpes vulpes) Description Red foxes are a rusty reddish color on the upper side of their body and tail. They have a white underside, chin and throat. Their tail is very bushy with a characteristic white tip, and they have prominent pointed ears. The backs of the ears, lower legs and feet are black. Other than the common rusty red, red foxes have three different color variations: a black phase where they are almost completely black, a silver phase in which they are black with silver-tipped hairs, and a "cross" phase where individuals are reddish brown with a dark cross across their shoulders. Adults typically stand 15 to 16 inches from the ground and are 35 to 41 inches in length. They can weigh between 8 and 15 pounds.
  • 26. Or on this one The screen shows 3 images with this caption: From left to right: 1. Monarch butterfly on a New England aster, credit: Greg Thompson/USFWS 2. Red fox, credit: John & Karen Hollingsworth 3. Eastern brook trout, credit: USFWS Click image for full-size.
  • 28. Get the basics right Repeat the text in the image. Alt text: “Webcast. Applying 21st Century Toxicology to Green Chemical and Material Design. September 20-21, 2011”
  • 29. Get the basics right Identify the target of a link Alt text: “UXPA group on Facebook” "@UXPA_Int on Twitter" "UXPA's LinkedIN profile"
  • 30. Don't create noise When images are used like a bullet, they can have empty alt text. If they are clickable make them part of the text link.
  • 31. Don't hide meaningful images Is a profile photo part of the content? <img alt="Photo of Caroline"> or <img alt="Caroline Jarrett">
  • 32. Make captions and alt text work together The caption: “Birnbaum, right, joined Collins at front stage as she accepted a Director’s Award on behalf of employees honored for their contributions to the Deepwater Horizon Gulf Oil Spill Response. (Photo courtesy of NIH)” The alt text: “NIEHS/NTP Director Linda Birnbaum, Ph.D. accepts award from NIH Director Francis Collins, M.D., Ph.D.”
  • 33. Don't hide information in the alt text Caption: Red fox, credit: John & Karen Hollingsworth Alt text: Red Fox as Sachuest Point NWR. Credit J and K Hollingsworth
  • 34. Don't just repeat the same text Caption and alt text both say: Gerald Chan is an alumnus of the public health school, having earned master’s and doctorate degrees in the 1970s
  • 35. Consider the surrounding text The caption: “Figure 1: The ABC of research methods” The alt text: “ABC diagram.” or "ABC diagram sketched on a chalkboard.” or “A diagram sketched on a chalkboard as a triangle. Top: Attitude. Right: Behavior. Left: Comprehension.
  • 36. When the text is long... Put the text on the same page, and link to it. The alt text: “Two personas" The caption includes a link: “Read the text in this image” The text is in a box at the end of the article. The caption reads: Example snapshots of personas demonstrate Spanish-speaking users’ language needs and preferences, as well as medical literacy, web skills, and other relevant characteristics. Read the text in this image." The link points to a grey box below
  • 37. When the information is in a chart... Combine the visual chart with a data table. The alt text: "Bar chart of data in table below" The title: "More Education Means More Money" http://www.careerinfonet.org/finaidadviso r/earnings.aspx?nodeid=21
  • 38. When the text is in an infographic.. Design the infographic in HTML and CSS so the text is text. Not as easy to do, but a better experience for everyone. http://simplyaccessible.com/article/text-is-text/ and http://apps.washingtonpost.com/g/page/national/the-health-hazards-of-sitting/ 750/
  • 39. Workflow Make alt text part of the writing process
  • 40. How long should alt text be?  No more than a few words? (WebAIM)  5-15 words? (Many sources)  30-50 words (2-3 sentences)? (W3C Draft)
  • 41. Keep it short Focus on the important words (no prizes for writing long prose). Avoid noise words  "Image of.. "  "This is a..."
  • 42. Be consistent Each image, each page, each section is all part of your site or app. Use the same approach everywhere, especially for functional elements:  Providing additional text  Locating explanatory text or data  Identifying figures in the text
  • 43. Add alt text to the writing workflow  Write the text, caption, alt text together  Hiding the image in the manuscript makes it easier to visualize the flow of the words. This is the text in the image: ...mall, we realized that even everyday items such as clothing and shoes would also be bought in installments (see Figure 1). A light bulb went off for us—not only was it common to pay in installments, but it applied to items we did not expect, too. Alt text: Picture of shoes with installment pricing sign Figure 1. In a mall in Sao Paulo, our research team spotted more items sold in installments than we initially expected. Notice that the installment price is more visually prominent than the total price!
  • 44. This is change!  Admit it  Embrace it  Set a reasonable pace Rome wasn't built in a day (but if you don't start, you never get there)
  • 45. Make the web a better place. Write some (great) alt text today!
  • 46. Storytelling for User Experience with Kevin Brooks Global UX with Daniel Szuc A Web for Everyone with Sarah Horton http://rosenfeldmedia.com/books/a-web-for-everyone/
  • 47. Get in touch! Whitney Quesenbery whitneyq@civicdesign.org @whitneyq http://civicdesign.org @civicdesign