WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson.

Slides:



Advertisements
Similar presentations
AHEAD HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.
Advertisements

Web Accessibility Guidelines Office of Web Services January 2012.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
To. An easy way to explain the internet is to think of your school computers all linked together into a network that you can put information into.
. Website and file organization. How websites work.
Introduction to Web Accessibility. What is Web Accessibility Web accessibility means that people with disabilities can use the Web Disabilities including.
Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.
$1 Million $500,000 $250,000 $125,000 $64,000 $32,000 $16,000 $8,000 $4,000 $2,000 $1,000 $500 $300 $200 $100 Welcome.
DESIGN FOR ALL Dap01s, Mehtiö Reija. Agenda Introduction Different types of disabilities - what to consider?
Richard E. Ladner and Jeffrey P. Bigham Work with Ryan Kaminsky, Gordon Hempton, Oscar Danielsson University of Washington Computer Science & Engineering.
WebInSight Goals Automatically add alt text to webpages Coordinate multiple labeling sources Receive and process labeling requests Do all without harming.
Jeffrey P. Bigham Anna C. Cavender, Jeremy T. Brudvik, Jacob O. Wobbrock * and Richard E. Ladner Computer Science & Engineering The Information School*
Human Computation CSC4170 Web Intelligence and Social Computing Tutorial 7 Tutor: Tom Chao Zhou
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
1 AccessMonkey A scripting framework for improving web accessibility Jeremy Brudvik Jessica Leung.
Jeffrey P. Bigham Richard Ladner, Ryan Kaminsky, Gordon Hempton, Oscar Danielsson University of Washington Computer Science & Engineering.
Dhananjay Bhole, Coordinator, Accessibility Research Group, Department of Education and Extension, University of Pune.
Blogging Using Schoolwires Blogging Using Schoolwires Gail Dickinson
Americans with Disabilities Act Ms. Sam Wainford.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Universal Design & Web Accessibility Iain Murray Kerry Hoath Iain Murray Kerry Hoath.
Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.
XP Tutorial 6New Perspectives on HTML and XHTML, Comprehensive 1 Creating Web Page Forms Designing a Product Registration Form Tutorial 6.
Ku-Yaw Chang Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University.
December 10th Inservice Presenter: Linda Lopresti 9-10 English Department (K112) Contact Info: twitter:

The Internet Writer’s Handbook 2/e Web Accessibility Writing for the Web.
Quality Attributes of Web Software Applications – Jeff Offutt By Julia Erdman SE 510 October 8, 2003.
TROY University Rebecca Ingram, Ph.D. TROY University Rebecca Ingram, Ph.D. College of Education.
The Online Experience: Accessibility & Usability for Everyone Richard W. Smith.
Web Designing By Bhupendra Ratha, Lecturer School of Library & Information Science D.A.V.V., Indore.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
Developed with material from W3C Web Accessibility Initiative (WAI) IMPORTANT: Instructions Please read carefully the Instructions for.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Database Application Security Models Database Application Security Models 1.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
Architecture Planning and designing a successful system Use tried and tested techniques Easy to maintain Robust and long lasting.
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
© 2010 Delmar, Cengage Learning Chapter 8 Collecting Data with Forms.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
XHTML1 Images N100 Building a Simple Web Page. XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
Promotion of e-Commerce sites. A business which uses e- commerce to trade online must also advertise. Several traditional methods can be used, such as.
Serif Part 2 Adding text popups to pictures Adding a rollover image Adding a popup rollover Adding a Voki.
MEMBERSHIP AND IDENTITY Active server pages (ASP.NET) 1 Chapter-4.
HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
Writing a Web Page. Using Frontpage FrontPage is a user-friendly WYSIWYG html editor. To begin, open the program and a new page. FrontPage is a user-friendly.
Web Browsing *TAKE NOTES*. Millions of people browse the Web every day for research, shopping, job duties and entertainment. Installing a web browser.
1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.
GRAPHICS. PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest.
Developed with material from W3C Web Accessibility Initiative (WAI) IMPORTANT: Instructions Please read carefully the Instructions for.
Sitecore Basic Training Content Management System (CMS) University Communications Web Services
 Accessibility & Information Architecture Presented by Liz Molleur INF385E April 5 th, 2009.
Web Accessibility. Why accessibility? "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
Introduction to Information Systems SSD1: Introduction to Information Systems Unit 1. The World Wide Web Unit 2. Introduction to Java and Object- Oriented.
Section 508 At long last, two of the most looming accessibility questions in the United States have been answered.
Active Server Pages Computer Science 40S.
Inserting and Working with Images
MUG Tuesday, May 31, 2016.
Information Architecture and Design I
Introduction to Web Accessibility
WebAnywhere Addressing Performance and Security
Website Accessibility
International University of Japan
Information Architecture and Design I
Course Web Technology Guus Schreiber
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson

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

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

Outline Web Studies WebInSight System Where Labels Come From Evaluation Future Work

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

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

Study Results GroupSignificantInsignificant> 90%Number High-traffic Computer Science Universities U.S. Federal Agencies U.S. States

Result Graphs

Outline Web Studies WebInSight System Where Labels Come From Evaluation Future Work

WebInSight Add alternative text as a user browses Coordinate multiple labeling sources Avoid harming the user experience Maintain security and privacy

Database WebInSight Architecture The Internet Context Labeling OCR Labeling Human Labeling Transformation Proxy GET GET GET Login: _______ Pass: _______ Login: _login___ Pass: _pass___

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

Outline Web Studies WebInSight System Where Labels Come From Evaluation Future Work

Providing Labels: Context Labeling Many important images are links  Linked page often describes image  Function much better than nothing

Providing Labels: OCR Labeling Original image not recognized (No Text) Find major colors Highlight major colors & try again

Providing Labels: OCR Labeling 2 ColorImageOCR Text (No Text) (PIC)t (No Text),,.,,,,.,.,,,,,.,,,n(PIC) (PIC) Register now!

Providing Labels: OCR Evaluation Tested 100 images containing text  The OCR correctly labeled 52  Our processing correctly labeled 65

Providing Labels: Human Labeling Humans are best labelers Luis von Ahn’s games get people to do it WebInSight sends images to such services

Outline Web Studies WebInSight System Where Labels Come From Evaluation Future Work

Evaluation Experiment  Run WebInSight on pages from Web Studies  43.2% of unlabelled sig. images labelled  Of these, 94.1% were correct

Evaluation: UCLA

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

Demo