Jeffrey P. Bigham Richard Ladner, Ryan Kaminsky, Gordon Hempton, Oscar Danielsson University of Washington Computer Science & Engineering.

Slides:



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

Making IT Accessibility Accessible (And Fun?) Greg Kraus (Temporarily Able Bodied) University IT Accessibility Coordinator North Carolina State University.
Iframes & Images Using HTML.
NSU Web Services Website Guidelines & Creating Accessible Website Content.
Introduction to Web Accessibility. What is Web Accessibility Web accessibility means that people with disabilities can use the Web Disabilities including.
EASI Equal Access to Software and Information EASI is the premier provider of online training about accessible information technology.
Supervised by Prof. LYU, Rung Tsong Michael Department of Computer Science & Engineering The Chinese University of Hong Kong Prepared by: Chan Pik Wah,
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
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.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Jeffrey P. Bigham Anna C. Cavender, Jeremy T. Brudvik, Jacob O. Wobbrock * and Richard E. Ladner Computer Science & Engineering The Information School*
WebInSight: Making Web Images Accessible Jeff Bigham Richard Ladner Ryan Kaminsky Gordon Hempton Oscar Danielsson.
How to Create Top Ranking Searchable and Accessible Documents Chris Pollett and Elizabeth Tu April, 2010.
Microsoft Office XP Illustrated Introductory, Enhanced Office Applications with Internet Explorer Integrating.
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.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Computer Sciences Department
Creating a Simple Page: HTML Overview
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Ku-Yaw Chang Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University.
1 Chapter 11 Implementation. 2 System implementation issues Acquisition techniques Site implementation tools Content management and updating System changeover.
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.
The Online Experience: Accessibility & Usability for Everyone Richard W. Smith.
Quality Matters Web Accessibility Standard Amy Kinsel, June 2, 2010.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
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.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
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 
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
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.
Week 11 Creating Framed Layouts Objectives Understand the benefits and drawbacks of frames Understand and use frame syntax Customize frame characteristics.
Development of the National Digital Forecast Database Web Display Presented by: Marc Saccucci NOAA/NWS/Meteorological Development Laboratory
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
Basic Search Engine Optimization. What is SEO?  SEO is an abbreviation for search engine optimization.
Copyright 2007, Information Builders. Slide 1 Have You Heard What We're Doing About Section 508? Jeffrey Friedman Director of Advanced QA and Operations.
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.
Accessibility Barriers Screen reader users will not be able to access content within a text box. Information presented as an image, animation, or video.
Adding Images to Your Web Page Web Design Section 5-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.
Headings are defined with the to tags. defines the largest heading. defines the smallest heading. Note: Browsers automatically add an empty line before.
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.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Working with Frames.
REEM ALMOTIRI Information Technology Department Majmaah University.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
Sitecore Basic Training Content Management System (CMS) University Communications Web Services
XHTML Introductory1 Frames Chapter 5. XHTML Introductory2 Objectives In this chapter, you will: Work with the Frameset Document Type Definition (DTD)
The User Experience “Keeping Web Accessibility In Mind” Video available online at:
Fall 2016 CSULA Saloni Chacha
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Section 508 At long last, two of the most looming accessibility questions in the United States have been answered.
Making the Web Accessible to Impaired Users
Inserting and Working with Images
Accessibility with WordPress
Adding Images to Your Web Page
HTML Images CS 1150 Spring 2017.
Introduction to Web Accessibility
Web Content Accessibility Beata M. Ofianewska (DG COMM) 7 December 2006 December 2006 COMM C2.
Basic HTML and Embed Codes
Accessibility with WordPress
Multimedia Information Retrieval
HTML Images CS 1150 Fall 2016.
Introduction to HTML.
Presentation transcript:

Jeffrey P. Bigham Richard Ladner, Ryan Kaminsky, Gordon Hempton, Oscar Danielsson University of Washington Computer Science & Engineering

Browsing while blind Screen readers Images cannot be read W3C accessibility standards  “Provide a text equivalent for every non-text element” What if no alternative text?  Nothing  Filename (060315_banner_253x100.gif)  Link address (

nav_svcs.gif

Outline Web Studies Providing Labels WebInSight System Evaluation Future Work

Web Studies: All Images != Significant images need alternative text  Informative  alt, title, and longdesc HTML attributes Insignificant images need empty alt text Automatic Determination? <img src=“graph.gif” alt=“sales graph” title=“sales graph” longdesc=“sales_descrip.txt”> More than one color AND both dimensions > 10 pixels An associated action (clickable, etc.)

Web Studies Previous studies  img tags with defined alt attribute: 27.9% [1], 47.7% [2], and 49.4% [2]  Significant images have a defined alt attribute? 76.9% [3] Gaps  Some Ignore Image Significance  Some Ignore Image Importance [1] T. C. Craven. “Some features of alt text associated with images in web pages.” (Information Research, Volume 11, 2006). [2] Luis von Ahn et al. “Improving accessibility of the web with a computer game.” (CHI 2006) [3] Helen Petrie et al. “Describing images on the web: a survey of current practice and prospects for the future.” (HCII 2005)

University of Washington CSE Department Traffic Web Studies Significant images without alternative text. Significant images with alternative text.  ~1 week  11,989,898 images.  40.8% significant  63.2% alt text

Study Results GroupSignificantPages > 90%PagesImages High-traffic39.6%21.8% Computer Science 52.5%27.0% Universities61.5%51.5% U.S. Federal Agencies 74.8%55.9% U.S. States82.5%52.9% Percentage of significant images provided alternative text, pages with over 90% of significant images provided alternative text, number of web sites in group, and number of images examined.

Outline Web Studies Providing Labels WebInSight System Evaluation Future Work

Providing Labels: Context Labeling Many important images are links  Linked page often describes image  What happens if you click People of UW People …

[4] Jain et al. “Automatic text location in images and video frames.” (ICPR 1998) Providing Labels: OCR Labeling Improvement through Color Clustering [4] ColorNew ImageText Produced,,.,,,,n Register now! (Optical Character Recognition) Improves recognition 25% relative to base OCR!

Providing Labels: Human Labeling Humans are best Recent games compel accurate labeling WebInSight database has over 10,000 images Could do this on demand [5] Ahn et al. “Labeling images with a computer game.” (CHI 2004) [6] Ahn et al. “Improving the accessibility of the web with a computer game.” (CHI 2006) [5] [6]

Outline Web Studies Providing Labels WebInSight System Evaluation Future Work

WebInSight System Tasks  Coordinate multiple labeling sources  Insert alternative text into web pages  Add code to insert alternative text later Features  Browsing speed preserved  Alternative text available when formulated  Immediate availability next time

The Interne t Proxy Context Labeling OCR Labeling Human Labeling Database Blind User

Outline Web Studies Providing Labels WebInSight System Evaluation Future Work

Evaluation Measuring System Performance  WebInSight tested on web pages from web studies  Used Context and OCR Labelers  Labeled 43.2% of unlabeled, significant images  Sampled 2500 for manual evaluation  94.1% were correct Proper Precision/Recall Trade-off

Evaluation: Demo

Conclusion Lack of alternative text is pervasive WebInSight calculates alternative text WebInSight inserts alternative text High precision and moderate recall

Future Work User Studies  What do users want?  How can we provide it?  Maintain experience. UsersContent Producers User Studies  Designer motivation. Tools for Web Design  People can always be better  Adapt user techniques Common Themes Technology  Improved labeling  Bring closer to user  Move beyond images More challenges  Content Structure  Dynamic Content  Web applications

WebInSight Thanks to: Luis von Ahn, Scott Rose, Steve Gribble and NSF.