Functional Accessibility Evaluation of Web 2.0 Applications Testing Jon Gunderson, Ph.D University of Illinois.

Slides:



Advertisements
Similar presentations
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Advertisements

Introduction to HTML & CSS
Accessibility, Joomla! Markup languages and you
Creating dynamic and accessible content in Drupal 7 using WAI-ARIA Sarah Pulis Web Accessibility Evangelist DruaplCon | Content Authoring |
National Center for Accessible Transportation Proposed Guidelines for Web Accessibility in the Travel Industry R.J. Zaworski, and K.M. Hunter-Zaworski,
WAHEP Website Check-up A Look at the Project Midway Website Evaluations.
Website Accessibility Testing Todd M. Weissenberger Web Accessibility Coordinator University of Iowa
© 2007 IBM Corporation IBM Emerging Technologies Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect.
Introduction to Web Accessibility. What is Web Accessibility Web accessibility means that people with disabilities can use the Web Disabilities including.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Scripted, Tab Accessible Tree Control Hierarchical view of data via tree control. Keyboard Navigation from initially closed tree to view above with focus.
An Introduction to WAI-ARIA Dan Jackson Web Team Leader City University London.
© 2008 IBM Corporation Emerging Internet Technologies Real World Accessibility with ARIA Becky Gibson Web Accessibility Architect.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
CGS3066: Web Programming and Design Summer 2014 Instructor Mir Anamul Hasan.
JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes from David Shrader, NSU GSCIS 2.Some material adapted.
Alternative Views of the Web Jon Gunderson, Ph.D. Division of Rehabilitation-Education Services University of Illinois at Urbana/Champaign.
IT Introduction to Website Development Welcome!
JavaScript Teppo Räisänen LIIKE/OAMK HTML, CSS, JavaScript HTML defines the structure CSS defines the layout JavaScript is used for scripting It.
Go to the MTSD Home Page In the URL add “/admin”
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Overview of Previous Lesson(s) Over View  ASP.NET Pages  Modular in nature and divided into the core sections  Page directives  Code Section  Page.
TERMINALFOUR SiteManager Introduction January, 2014.
Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Specialist
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Accessible DHTML Simon Bates David Bolter ATRC
Lecture 5: HTML Structure and Navigation LIS350AR: Designing Universally Accessible Web Resources Instructor: Jon Gunderson.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
Client side web programming Introduction Jaana Holvikivi, DSc. School of ICT.
Student Records Degree Processing. About the Instructor Genice Milliner Student Enrollment Services (SES) Trainer 15 Years in Documentation and Training.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
+ A11y assessment Lisa Liskovoi. + WCAG POUR some accessibility sugar on me Perceivable – Can I see it? Hear it? Feel it? Operable – Can I scroll it?
WaveMaker Visual AJAX Studio 4.0 Training Basics: Building Your First Application Designer Basics.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
Accessible Web Publishing Tool for Microsoft Office Jon Gunderson, Ph.D. University of Illinois at Urbana/Champaign.
Week 8.  Form controls  Accessibility with ARIA.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
ET-710 WEB-DESIGN By Bart Chuchro Queensborough Community College.
John Foushee Andrew Hulbert Brian Louden. What is the Hawking Toolbar?  Short Description  Project Goal Allow Users to Access Web Content and Browser.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Drexel’s full-featured web content management system (CMS) Web Support Information Resources & Technology (IRT)
Sitecore Basic Training Content Management System (CMS) University Communications Web Services
G046 – Lecture 2A Recognising Web-Technologies Mr C Johnston ICT Teacher
DHTML.
Web Basics: HTML/CSS/JavaScript What are they?
Objective % Select and utilize tools to design and develop websites.
Jon Gunderson, Ph.D. University of Illinois at Urbana/Champaign
Making the Web Accessible to Impaired Users
**Please view the instructional guide as a slideshow**
Objective % Select and utilize tools to design and develop websites.
Introduction to Web Accessibility
Section 10.1 YOU WILL LEARN TO… Define scripting
APTECH JANAKPURI INSTITUTE PROVIDING WEB DESIGNING COURSES Address:- J-1,2nd Floor, Opp Metro Pillar No – 559, Janakpuri East, Delhi /42.
What Designers Need to Know about Accessibility (A11y)
DHTML Javascript Internet Technology.
Web Content Accessibility Beata M. Ofianewska (DG COMM) 7 December 2006 December 2006 COMM C2.
DHTML Javascript Internet Technology.
International University of Japan
Teaching slides Chapter 6.
Adobe Acrobat DC Accessibility - Metadata, Reading Order, Links
Interface Design 2 Week 11.
Adobe Acrobat DC Accessibility Non-Text Elements
Adobe Acrobat DC Accessibility Data Tables
Client-Server Model: Requesting a Web Page
Adobe Acrobat DC Accessibility: Accessibility Checker
Adobe Acrobat DC Accessibility Page Structure
Presentation transcript:

Functional Accessibility Evaluation of Web 2.0 Applications Testing Jon Gunderson, Ph.D University of Illinois

What is Web 2.0 URL does not define content: Login Content updates with out user interaction: Chat Content changes based on user actions: wiki Non-html controls for interacting with page

Illinois Web 2.0 Examples University create web services Calendars Surveys Forms Purchased Services Blackboard: Course management tools Xythos: Document sharing via the web Confluence: Wiki Mirapoint: Web interface

Web 2.0 Widgets and Dynamic Content Javascript, HTML and CSS to create user interface controls Keyboard support Roles Tree, slider, menu…. Properties Labels, description, level, …. States Checked, disabled, invalid, ….

Best Practices Navigation and Orientation Text Equivalents Scripting and Automation Styling Standards

Navigation and Orientation Titling Menus Sub Headings Form Labeling Links Data Tables Lists Language Frames

Text Equivalents Informative images Charts Tables Pictures Graphs Decorative images Status images

Scripting Adding styling effects to hover content Adding Content when loading page Adding/updating content based on user input Client side validation of form fields Widgets

Styling Use of CSS Text styling Layout of content Background images Layout and linearization Keyboard focus styling Interoperability with mobile web technologies

Free Best Practices Tools Illinois Functional Accessibility Evaluator Illinois Firefox Accessibility Extension

Demonstration of Free Tools

Web 2.0 Issues Keyboard support Links and controls Widgets Focus management Navigation Sections Navigation bars Dynamic Content Content updated by user action Content updated by external events

Widgets Keyboard Navigation Best Practices Accessible Rich Internet Application (ARIA) Markup WAI ARIA Best Practices Example Accessible Widgets

Explore Accessibility of Web Widget Tree Widget

Explore Accessibility of Web Application

Thank you for attending this session at ATIA 2009 Chicago! Watch for us in Orlando this January! Please help us improve the quality of our conference by completing your session evaluation form. Completed evaluation forms should be submitted as you exit or to staff at the registration desk. Thank You!