SlideShare une entreprise Scribd logo
1  sur  49
Télécharger pour lire hors ligne
Writing great alt text
Whitney Quesenbery
Center for Civic Design
@civicdesign | @whitneyq | @awebforeveryone
https://www.slideshare.net/whitneyq/writing-great-alt-text-61826426
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/
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"
Because people need it
 People who use
screen readers
and other AT
 When images are
missing or turned
off
 For translations
Jacob Vishnu
MariaTrevor
Personas from A Web for Everyone by Sarah Horton and Whitney Quesenbery
http://rosenfeldmedia.com/books/a-web-for-everyone/resources/
The problem
Why are we (still) talking
about alt text?
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 some
accessibility checkers.
Banner Ad
<img src="banner-ad-176987362334876292.jpg"
alt="banner-ad-176987362334876292.jpg">
The tools don't help
They ask for the information at the
wrong time, and in the wrong way.
Or they are tedious.
And repetitive.
Why isn't it an easy part of creating
content?
 See the alt text
in context.
 Have a sticky
window where
it's easy to edit
at any time
 More ideas?
Jacob is working at a computer, using a Braille note
keypad. He has earphones on listening to something,
and has dark glasses.
Trevor sits...
The usual rules
A simple way to decide how to
write alt text
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?
If the image contains
<img src="useless image" alt="">
 Text Repeat the words
 Visual information Explain it
 Sensory information Describe it
 Nothing new Ignore it
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/
Or, a detailed analysis
HTML5: Techniques for providing useful text alternatives (updated Sept 8, 2014)
http://rawgit.com/w3c/alt-techniques/master/index.html
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
A writer's approach
Start with a content strategy
Know your audience
 What knowledge or background do
they have?
 What terminology will they know?
<img alt="Molecular structure of
diethyl diazenedicarboxylate">
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?
What is noise? What is important?
1. Icons for categories
2. Bookmark
3. Hero image
4. Title
5. Description
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?
Consider the fox
What should the alt text for this image be?
Image Credit: J. and K. Hollingsworth/USFWS
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.
Examples...examples..
.and more examples
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”
Don't create images of text
Bonus: makes it more responsive, too
Identify the target of a link
 Do these social media
images go to the
organizations' pages,
 Or are they share links?
Alt text:
“UXPA group on Facebook”
"@UXPA_Int on Twitter"
"UXPA's LinkedIN profile"
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.
Don't hide meaningful images
Is a profile photo part of the content?
<img alt="Photo of Caroline">
or
<img alt="Caroline Jarrett">
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
Captions & alt text work together
The caption:
“Figure 1. Meetings of the
branch of UXPA China in
Qingdao (photo by the
author)”
The alt text:
“A small group of people
around a table.”
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
Managing the punchline
How do you manage
content where the text
and visuals work
together to make a
point readers can
discover?
Managing the punchline
 Page title:
Rubes Cartoon: If you build it
 Image and alt text:
A cat teacher gives a presentation
 Caption/description:
“If you built it, they will come”
A cat teacher gives a presentation,
pointing to an illustration showing
how to construct a birdhouse
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.
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
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
Workflow
Alt text is part of writing
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)
Keep it concise
Focus on the important words
(no prizes for writing long prose).
Avoid noise words
 "Image of.. "
 "This is a..."
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
 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!
Add alt text to the writing workflow
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)
Make the web
a better place.
Write some (great) alt text today!
Every time you do, an accessibility fairy
gets their wings.
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/
Get in touch!
Whitney Quesenbery
whitneyq@civicdesign.org
@whitneyq
http://civicdesign.org
@civicdesign
Thank you.

Contenu connexe

Tendances

Cr pediatrics residents airway management part 2
Cr pediatrics residents airway management part 2Cr pediatrics residents airway management part 2
Cr pediatrics residents airway management part 2Danny Castro
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheetvijayta
 
하지정맥류 설명서 1
하지정맥류 설명서 1하지정맥류 설명서 1
하지정맥류 설명서 1Hwan-Kyu Roh
 
Videolaryngoscopes for tracheal intubation
Videolaryngoscopes for tracheal intubationVideolaryngoscopes for tracheal intubation
Videolaryngoscopes for tracheal intubationZIKRULLAH MALLICK
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS FilesLearningNerd
 
Unit ii java script and xhtml documents and dynamic documents with javascript
Unit ii java script and xhtml documents and dynamic documents with javascriptUnit ii java script and xhtml documents and dynamic documents with javascript
Unit ii java script and xhtml documents and dynamic documents with javascriptzahid7578
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shellAshwin Shiv
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic JavascriptBunlong Van
 
Fiberoptic intubation
Fiberoptic  intubationFiberoptic  intubation
Fiberoptic intubationWesam Mousa
 
Techniques of mask ventilation
Techniques of mask ventilation Techniques of mask ventilation
Techniques of mask ventilation Tess Jose
 
HTML & CSS: Chapter 04
HTML & CSS: Chapter 04HTML & CSS: Chapter 04
HTML & CSS: Chapter 04Steve Guinan
 
Anaesthesia machine by Dr. shailendra
Anaesthesia machine by Dr. shailendra Anaesthesia machine by Dr. shailendra
Anaesthesia machine by Dr. shailendra Shailendra Satpute
 

Tendances (20)

Cr pediatrics residents airway management part 2
Cr pediatrics residents airway management part 2Cr pediatrics residents airway management part 2
Cr pediatrics residents airway management part 2
 
HTML
HTMLHTML
HTML
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
하지정맥류 설명서 1
하지정맥류 설명서 1하지정맥류 설명서 1
하지정맥류 설명서 1
 
Videolaryngoscopes for tracheal intubation
Videolaryngoscopes for tracheal intubationVideolaryngoscopes for tracheal intubation
Videolaryngoscopes for tracheal intubation
 
ANESTHESIA MACHINE
ANESTHESIA MACHINEANESTHESIA MACHINE
ANESTHESIA MACHINE
 
AEC
AECAEC
AEC
 
How to Make HTML and CSS Files
How to Make HTML and CSS FilesHow to Make HTML and CSS Files
How to Make HTML and CSS Files
 
Unit ii java script and xhtml documents and dynamic documents with javascript
Unit ii java script and xhtml documents and dynamic documents with javascriptUnit ii java script and xhtml documents and dynamic documents with javascript
Unit ii java script and xhtml documents and dynamic documents with javascript
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
Html css
Html cssHtml css
Html css
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic Javascript
 
Fiberoptic intubation
Fiberoptic  intubationFiberoptic  intubation
Fiberoptic intubation
 
Techniques of mask ventilation
Techniques of mask ventilation Techniques of mask ventilation
Techniques of mask ventilation
 
HTML & CSS: Chapter 04
HTML & CSS: Chapter 04HTML & CSS: Chapter 04
HTML & CSS: Chapter 04
 
Anaesthesia machine by Dr. shailendra
Anaesthesia machine by Dr. shailendra Anaesthesia machine by Dr. shailendra
Anaesthesia machine by Dr. shailendra
 
Retrograde intubation
Retrograde intubationRetrograde intubation
Retrograde intubation
 

En vedette

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
 
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
 
I'm Sorry. I Can't. Don't Hate Me. The Post-it Breakup
I'm Sorry. I Can't. Don't Hate Me. The Post-it BreakupI'm Sorry. I Can't. Don't Hate Me. The Post-it Breakup
I'm Sorry. I Can't. Don't Hate Me. The Post-it BreakupKyle Soucy
 
Eerste grote fout van koning in de maak
Eerste grote fout van koning in de maakEerste grote fout van koning in de maak
Eerste grote fout van koning in de maakThierry Debels
 
Privacy and Security: Challenges and Opportunities in Healthcare Identity
Privacy and Security: Challenges and Opportunities in Healthcare IdentityPrivacy and Security: Challenges and Opportunities in Healthcare Identity
Privacy and Security: Challenges and Opportunities in Healthcare IdentityPaul Brian Contino
 
Studying the Link Between Volume of Media Coverage and Business Outcomes. 
Studying the Link Between Volume of Media Coverage and Business Outcomes.  Studying the Link Between Volume of Media Coverage and Business Outcomes. 
Studying the Link Between Volume of Media Coverage and Business Outcomes.  Udit Joshi
 
SharePoint - The hybrid story and beyond
SharePoint - The hybrid story and beyondSharePoint - The hybrid story and beyond
SharePoint - The hybrid story and beyondMikael Svenson
 
William jennings bryan:Golden Cross Speech
William jennings bryan:Golden Cross SpeechWilliam jennings bryan:Golden Cross Speech
William jennings bryan:Golden Cross Speechcfarinas
 
CVLAURA 2016 INGLES
CVLAURA 2016 INGLESCVLAURA 2016 INGLES
CVLAURA 2016 INGLESLaura Vidal
 
Subscriber Engagement Presentation
Subscriber Engagement PresentationSubscriber Engagement Presentation
Subscriber Engagement PresentationStrongView
 
Building capacity for open, data-driven science - Grand Rounds
Building capacity for open, data-driven science - Grand RoundsBuilding capacity for open, data-driven science - Grand Rounds
Building capacity for open, data-driven science - Grand RoundsKaitlin Thaney
 
Games as Logic Machines: Learning the Humanities through the Logic and Parate...
Games as Logic Machines: Learning the Humanities through the Logic and Parate...Games as Logic Machines: Learning the Humanities through the Logic and Parate...
Games as Logic Machines: Learning the Humanities through the Logic and Parate...Sherry Jones
 

En vedette (17)

From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
Plain language is accessibility for content
Plain language is accessibility for contentPlain language is accessibility for content
Plain language is accessibility for content
 
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...
 
I'm Sorry. I Can't. Don't Hate Me. The Post-it Breakup
I'm Sorry. I Can't. Don't Hate Me. The Post-it BreakupI'm Sorry. I Can't. Don't Hate Me. The Post-it Breakup
I'm Sorry. I Can't. Don't Hate Me. The Post-it Breakup
 
Eerste grote fout van koning in de maak
Eerste grote fout van koning in de maakEerste grote fout van koning in de maak
Eerste grote fout van koning in de maak
 
Privacy and Security: Challenges and Opportunities in Healthcare Identity
Privacy and Security: Challenges and Opportunities in Healthcare IdentityPrivacy and Security: Challenges and Opportunities in Healthcare Identity
Privacy and Security: Challenges and Opportunities in Healthcare Identity
 
Studying the Link Between Volume of Media Coverage and Business Outcomes. 
Studying the Link Between Volume of Media Coverage and Business Outcomes.  Studying the Link Between Volume of Media Coverage and Business Outcomes. 
Studying the Link Between Volume of Media Coverage and Business Outcomes. 
 
Zaragoza turismo 225
Zaragoza turismo 225Zaragoza turismo 225
Zaragoza turismo 225
 
SharePoint - The hybrid story and beyond
SharePoint - The hybrid story and beyondSharePoint - The hybrid story and beyond
SharePoint - The hybrid story and beyond
 
Встреча МАМИ по вопросам EVENT рынка
Встреча МАМИ по вопросам EVENT рынкаВстреча МАМИ по вопросам EVENT рынка
Встреча МАМИ по вопросам EVENT рынка
 
William jennings bryan:Golden Cross Speech
William jennings bryan:Golden Cross SpeechWilliam jennings bryan:Golden Cross Speech
William jennings bryan:Golden Cross Speech
 
CVLAURA 2016 INGLES
CVLAURA 2016 INGLESCVLAURA 2016 INGLES
CVLAURA 2016 INGLES
 
Subscriber Engagement Presentation
Subscriber Engagement PresentationSubscriber Engagement Presentation
Subscriber Engagement Presentation
 
Future of Asia
Future of AsiaFuture of Asia
Future of Asia
 
Banking
BankingBanking
Banking
 
Building capacity for open, data-driven science - Grand Rounds
Building capacity for open, data-driven science - Grand RoundsBuilding capacity for open, data-driven science - Grand Rounds
Building capacity for open, data-driven science - Grand Rounds
 
Games as Logic Machines: Learning the Humanities through the Logic and Parate...
Games as Logic Machines: Learning the Humanities through the Logic and Parate...Games as Logic Machines: Learning the Humanities through the Logic and Parate...
Games as Logic Machines: Learning the Humanities through the Logic and Parate...
 

Similaire à 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
 
HarambeeNet: Data by the people, for the people
HarambeeNet: Data by the people, for the peopleHarambeeNet: Data by the people, for the people
HarambeeNet: Data by the people, for the peopleMichael Bernstein
 
Accessibility Guidance for Digital Cultural Heritage
Accessibility Guidance for Digital Cultural HeritageAccessibility Guidance for Digital Cultural Heritage
Accessibility Guidance for Digital Cultural HeritageVisual Resources Association
 
Future Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design InclusivelyFuture Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design InclusivelyMichael Larsen
 
Name __________ Grading Rubric for a Power Point Projec.docx
Name __________ Grading Rubric for a  Power Point Projec.docxName __________ Grading Rubric for a  Power Point Projec.docx
Name __________ Grading Rubric for a Power Point Projec.docxroushhsiu
 
Mi 291 chapter 6 (aethetics in engineering design)(1)
Mi 291 chapter 6 (aethetics in engineering design)(1)Mi 291 chapter 6 (aethetics in engineering design)(1)
Mi 291 chapter 6 (aethetics in engineering design)(1)varun teja G.V.V
 
The Reflection Of Working In An Enterprise Environment
The Reflection Of Working In An Enterprise EnvironmentThe Reflection Of Working In An Enterprise Environment
The Reflection Of Working In An Enterprise EnvironmentKristina Camacho
 
Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...
Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...
Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...Buffy Hamilton
 
Ambient Findability
Ambient FindabilityAmbient Findability
Ambient Findabilityishmaelb
 
The Dumbest Generation By Mark Bauerlein
The Dumbest Generation By Mark BauerleinThe Dumbest Generation By Mark Bauerlein
The Dumbest Generation By Mark BauerleinRoxy Roberts
 
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
 
Accessible Social Media
Accessible Social MediaAccessible Social Media
Accessible Social Media3Play Media
 
Effective Presentations using Data Visualization
Effective Presentations using Data VisualizationEffective Presentations using Data Visualization
Effective Presentations using Data VisualizationHeather Wilmore Hornbeak
 
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura BradyEbook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura BradyBookNet Canada
 
The article of the Future - or is it?
The article of the Future - or is it?The article of the Future - or is it?
The article of the Future - or is it?Pratt_Symposium
 

Similaire à Writing Great Alt Text (20)

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
 
Desrosiers "Image Description"
Desrosiers "Image Description"Desrosiers "Image Description"
Desrosiers "Image Description"
 
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
 
HarambeeNet: Data by the people, for the people
HarambeeNet: Data by the people, for the peopleHarambeeNet: Data by the people, for the people
HarambeeNet: Data by the people, for the people
 
Accessibility Guidance for Digital Cultural Heritage
Accessibility Guidance for Digital Cultural HeritageAccessibility Guidance for Digital Cultural Heritage
Accessibility Guidance for Digital Cultural Heritage
 
Future Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design InclusivelyFuture Proofing Your Sofware: Design Inclusively
Future Proofing Your Sofware: Design Inclusively
 
Name __________ Grading Rubric for a Power Point Projec.docx
Name __________ Grading Rubric for a  Power Point Projec.docxName __________ Grading Rubric for a  Power Point Projec.docx
Name __________ Grading Rubric for a Power Point Projec.docx
 
Mi 291 chapter 6 (aethetics in engineering design)(1)
Mi 291 chapter 6 (aethetics in engineering design)(1)Mi 291 chapter 6 (aethetics in engineering design)(1)
Mi 291 chapter 6 (aethetics in engineering design)(1)
 
Example Of Visual Rhetoric
Example Of Visual RhetoricExample Of Visual Rhetoric
Example Of Visual Rhetoric
 
Facs online tutorial
Facs online tutorialFacs online tutorial
Facs online tutorial
 
The Reflection Of Working In An Enterprise Environment
The Reflection Of Working In An Enterprise EnvironmentThe Reflection Of Working In An Enterprise Environment
The Reflection Of Working In An Enterprise Environment
 
Visual Argument Essay
Visual Argument EssayVisual Argument Essay
Visual Argument Essay
 
Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...
Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...
Multigenre Research Project Guidelines Mixed Formats (Text + Multigenre Eleme...
 
Ambient Findability
Ambient FindabilityAmbient Findability
Ambient Findability
 
The Dumbest Generation By Mark Bauerlein
The Dumbest Generation By Mark BauerleinThe Dumbest Generation By Mark Bauerlein
The Dumbest Generation By Mark Bauerlein
 
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
 
Accessible Social Media
Accessible Social MediaAccessible Social Media
Accessible Social Media
 
Effective Presentations using Data Visualization
Effective Presentations using Data VisualizationEffective Presentations using Data Visualization
Effective Presentations using Data Visualization
 
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura BradyEbook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
Ebook Accessibility: Why, How, and What For - ebookcraft 2016 - Laura Brady
 
The article of the Future - or is it?
The article of the Future - or is it?The article of the Future - or is it?
The article of the Future - or is it?
 

Plus de 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
 
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
 
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
 
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
 

Plus de 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
 
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
 
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
 
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
 

Dernier

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Dernier (19)

Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

Writing Great Alt Text

  • 1. Writing great alt text Whitney Quesenbery Center for Civic Design @civicdesign | @whitneyq | @awebforeveryone https://www.slideshare.net/whitneyq/writing-great-alt-text-61826426
  • 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 MariaTrevor 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 some accessibility checkers. Banner Ad <img src="banner-ad-176987362334876292.jpg" alt="banner-ad-176987362334876292.jpg">
  • 11. The tools don't help They ask for the information at the wrong time, and in the wrong way. Or they are tedious. And repetitive.
  • 12. Why isn't it an easy part of creating content?  See the alt text in context.  Have a sticky window where it's easy to edit at any time  More ideas? Jacob is working at a computer, using a Braille note keypad. He has earphones on listening to something, and has dark glasses. Trevor sits...
  • 13. The usual rules A simple way to decide how to write alt text
  • 14. 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?
  • 15. If the image contains <img src="useless image" alt="">  Text Repeat the words  Visual information Explain it  Sensory information Describe it  Nothing new Ignore it
  • 16. 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/
  • 17. Or, a detailed analysis HTML5: Techniques for providing useful text alternatives (updated Sept 8, 2014) http://rawgit.com/w3c/alt-techniques/master/index.html
  • 18. 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
  • 19. A writer's approach Start with a content strategy
  • 20. Know your audience  What knowledge or background do they have?  What terminology will they know? <img alt="Molecular structure of diethyl diazenedicarboxylate">
  • 21. 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?
  • 22. What is noise? What is important? 1. Icons for categories 2. Bookmark 3. Hero image 4. Title 5. Description
  • 23. 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.
  • 27. 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”
  • 28. Don't create images of text Bonus: makes it more responsive, too
  • 29. Identify the target of a link  Do these social media images go to the organizations' pages,  Or are they share links? 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. 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
  • 33. Captions & alt text work together The caption: “Figure 1. Meetings of the branch of UXPA China in Qingdao (photo by the author)” The alt text: “A small group of people around a table.”
  • 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. Managing the punchline How do you manage content where the text and visuals work together to make a point readers can discover?
  • 36. Managing the punchline  Page title: Rubes Cartoon: If you build it  Image and alt text: A cat teacher gives a presentation  Caption/description: “If you built it, they will come” A cat teacher gives a presentation, pointing to an illustration showing how to construct a birdhouse
  • 37. 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.
  • 38. 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
  • 39. 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
  • 40. Workflow Alt text is part of writing
  • 41. 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)
  • 42. Keep it concise Focus on the important words (no prizes for writing long prose). Avoid noise words  "Image of.. "  "This is a..."
  • 43. 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
  • 44.  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! Add alt text to the writing workflow
  • 45. 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)
  • 46. Make the web a better place. Write some (great) alt text today! Every time you do, an accessibility fairy gets their wings.
  • 47. 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/
  • 48. Get in touch! Whitney Quesenbery whitneyq@civicdesign.org @whitneyq http://civicdesign.org @civicdesign

Notes de l'éditeur

  1. alt text is so simple that it's surprising how erratically it's implemented and how often it's only in places where it's not really needed.
  2. "I know it's an ad because it reads all this junk to me"
  3. They ask for the information at the wrong time, and in the wrong way.
  4. Is is content or code? It's content inside code. Web developers don't know what to write, because they may not even see the image. Art directors may not know how the image will be used when they add it to the library
  5. Back to our regularly scheduled programming – how to write alt text.
  6. If you are looking for code examples, this is a great place.
  7. figcaption will replace or work with alt text few browsers support it yet
  8. But today, I'd like to put aside the technical analysis a little bit, and just look at this from a writer's point of view. We'll start with some principles
  9. If you are talking to chemists, the name of a compound may be all they need in the alt. But they would also know that DEADCAT is just slang for a group of compounds, and not unique. (This example came from a workshop, where one of the attendees managed an annual scientific report with hundreds of chemical diagrams in an appendix. He thought he would have to describe them. Even though the general public might read the report, they would be unlikely to read the appendix unless they had some chemical knowledge.)
  10. Which of these things are important Which should be voiced or described?
  11. Well.... it's photo of a fox. A red fox. Looking over it's shoulder at the camera. What should we describe about this images?Fox Red fox Red fox at Sachuest Point National Wildlife Refuge A red fox, standing alone on a pile of rocks, looks back at the camera.
  12. Don't
  13. Because this might mean "share on Facebook" Don't need to say "Go to" because that's implied in the link
  14. It's especially true when the thumbnail is a miniature version of the full illustration on the linked article.
  15. Big debate on WebAIM about this – is this just noise, or meaningful. On UXPA's magazine we went with the first option. But I believe you should not "null" this image, as it is important to the sense of this profile page.
  16. In this case, there is a caption that provides some of the information, but other useful information is hidden in the alt text, and some is duplicated
  17. This is often a problem when images come from image libraries or other databases. This one is particularly bad because if it was just the alt text it would hide information. The other mistake is to repeat the headline of the article in the image.
  18. Is the image style important?
  19. Alt text is too important to leave to random coding. Even if you write your own HTML, think about the alt text as you draft the article.
  20. The nice thing is that each time you get it right, you add a tiny bit of goodness to the web