webinsight: making web images accessible jeff bigham richard ladner ryan kaminsky gordon hempton...
Post on 22-Dec-2015
220 views
TRANSCRIPT
![Page 1: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/1.jpg)
WebInSight:Making Web Images Accessible
Jeff Bigham
Richard LadnerRyan KaminskyGordon HemptonOscar Danielsson
![Page 2: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/2.jpg)
Some statistics
10 million blind people in the U.S. 55,000 blind children 5 million blind people over 65
Computer and Internet Use 1 million use computers < 200,000 have access to the Internet < 100,000 use a computer regularly 32% of legally blind adults employed
Source: American Foundation for the Blind Blindness Statistics http://www.afb.org/Section.asp?SectionID=15
![Page 3: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/3.jpg)
Browsing the web while blind
Blind users use screen readers Alternative text is substituted for images When no alternative text provided
nothing filename (060315_banner_253x100.gif) link address
W3C accessibility standards “Provide a text equivalent for every non-text element” For images with purely visual purpose, a text equivalent is
an empty string
![Page 4: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/4.jpg)
![Page 5: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/5.jpg)
![Page 6: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/6.jpg)
Outline
Web Studies
WebInSight System
Where Labels Come From
Evaluation
Future Work
![Page 7: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/7.jpg)
Web Studies Images can be significant or insignificant Significant images need alternative text
alt, title, and longdesc HTML attributes Insignificant images need empty
alternative text(spacers, lines, wacky backgrounds, etc.)
Significance from size, color and function
![Page 8: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/8.jpg)
Web Studies: Groups
CSE Traffic 1 week. 11,989,898 images. 40.8% significant
63.2% assigned alternative text
Popular/Important Websites 500 High-Traffic International Sites 100 Top International Universities 158 Computer Science Departments 137 Federal Agencies 50 States plus District of Columbia
![Page 9: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/9.jpg)
Study Results
Group Significant Insignificant > 90% Number
High-traffic 39.6 27.4 21.8 32913
Computer Science
52.5 41.6 27.0 4233
Universities 61.5 70.2 51.5 3910
U.S. Federal Agencies
74.8 66.6 55.9 5902
U.S. States 82.5 77.1 52.9 2707
![Page 10: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/10.jpg)
Result Graphs
U.S. Federal Agencies
0
20
40
60
80
100
0 20 40 60 80 100 120 140
High-Traffic Websites
0
20
40
60
80
100
0 50 100 150 200 250 300 350 400 450 500
Universities
0
20
40
60
80
100
0 20 40 60 80 100
Comp. Science Departments
0
20
40
60
80
100
0 20 40 60 80 100 120 140 160
![Page 11: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/11.jpg)
Outline
Web Studies
WebInSight System
Where Labels Come From
Evaluation
Future Work
![Page 12: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/12.jpg)
WebInSight
Add alternative text as a user browses
Coordinate multiple labeling sources
Avoid harming the user experience
Maintain security and privacy
![Page 13: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/13.jpg)
Database
WebInSight Architecture
The InternetThe Internet
Context Labeling
OCR Labeling
Human Labeling
TransformationProxy
GET http://www.cs.washington.eduGET http://www.cs.washington.edu/
GET http://www.cs.washington.edu
Login: _______
Pass: _______
Login: _login___
Pass: _pass___
![Page 14: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/14.jpg)
![Page 15: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/15.jpg)
WebInSight as a Proxy
Transformation proxy Inserts alternative text into webpages Inserts AJAX hooks to allow later changes
Advantages Centralized control Simple setup and administration
Disadvantages Potentially a bottleneck Less control over user interface Secure connections don’t benefit or are less secure
![Page 16: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/16.jpg)
Outline
Web Studies
WebInSight System
Where Labels Come From
Evaluation
Future Work
![Page 17: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/17.jpg)
Providing Labels: Context Labeling Many important images are links
Linked page often describes imageFunction much better than nothing
![Page 18: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/18.jpg)
Providing Labels: OCR Labeling
Original image not recognized(No Text)
Find major colors
Highlight major colors & try again
![Page 19: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/19.jpg)
Providing Labels: OCR Labeling 2
Color Image OCR Text(No Text)
(No Text)
(PIC)t
(No Text)
,, ., ,, ,. ,., , ,,, .,,,n(PIC)(PIC)
Register now!
![Page 20: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/20.jpg)
Providing Labels: OCR Evaluation
Tested 100 images containing text The OCR correctly labeled 52 Our processing correctly labeled 65
![Page 21: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/21.jpg)
Providing Labels: Human Labeling
Humans are best labelers
Luis von Ahn’s games get people to do it
WebInSight sends images to such services
![Page 22: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/22.jpg)
Outline
Web Studies
WebInSight System
Where Labels Come From
Evaluation
Future Work
![Page 23: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/23.jpg)
Evaluation
Experiment Run WebInSight on pages from Web Studies 43.2% of unlabelled sig. images labelled Of these, 94.1% were correct
![Page 24: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/24.jpg)
Evaluation:UCLA
![Page 25: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/25.jpg)
Future Work
User Studies Does it help? What do user’s want out of alt text? When should WebInSight provide it?
Refactoring alt text Present alt text in the best way possible for users
Tool for Webmasters People will always be better but they need help
![Page 26: WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson](https://reader035.vdocuments.site/reader035/viewer/2022062320/56649d795503460f94a5be90/html5/thumbnails/26.jpg)
Demo