Development of Accessible E- documents and Programs for the Visually Impaired Web accessibility testing (v2010)

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

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?
Essentials for Design JavaScript Level One Michael Brooks
Architecting and Designing for Accessibility Darien Large.
Website Accessibility Testing Todd M. Weissenberger Web Accessibility Coordinator University of Iowa
Adapting Technology Changing Lives JavaScript Advanced web accessibility JavaScript – do’s and don’ts of client-side scripting Forms – how to create accessible,
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
2/23/ Enterprise Web Accessibility Standards Version 2.0 WebMASSters Presentation 2/23/2005.
Browser Toolbars You Shouldn’t Do Without How the WAT and WDT Can Help You Design Accessible Websites.
Introduction to Web Accessibility. What is Web Accessibility Web accessibility means that people with disabilities can use the Web Disabilities including.
CM143 - Web Week 11 Accessibility Priority Checkpoints.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Creating and publishing accessible course materials Practical advise you can replicate.
 What I hate about you things people often do that hurt their Web site’s chances with search engines.
1 Vendor RFI - Event User Guide. 2 Minimum System Requirements Internet connection - Modem, ISDN, DSL, T1. Your connection speed determines your access.
Universal Design & Web Accessibility Iain Murray Kerry Hoath Iain Murray Kerry Hoath.
Assistive Technology and Web Accessibility University of Hawaii Information Technology Services Jon Nakasone.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Alternative Views of the Web Jon Gunderson, Ph.D. Division of Rehabilitation-Education Services University of Illinois at Urbana/Champaign.
Classroom User Training June 29, 2005 Presented by:
Understanding WCAG Elizabeth J. Pyatt, Ph.D. Information Technology Services.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
Nov 4, 2002K. Smale - Section 5081 Section 508 What it means for you, the HEASARC and LHEA web developer.
The Internet Writer’s Handbook 2/e Web Accessibility Writing for the Web.
Chapter 19: Adding JavaScript
JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.
Website Accessibility Testing. Why consider accessibility People with disabilities – Visual, Hearing, Physical, Cognitive (learning, reading, attention.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
Web Programming: Client/Server Applications Server sends the web pages to the client. –built into Visual Studio for development purposes Client displays.
Web Accessiblity Carol Gordon SIU Medical Library.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Is Your Site Accessible? Web Site Testing for Accessibility Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast.
Emily Gibson The College of New Jersey An Evaluation of Current Software Tools* Evaluation & Repair Software.
Everything in it’s right place Revisiting website accessibility Jeff Coburn Senior Web Specialist Institute for Community Inclusion.
Development of Accessible E- documents and Programs for the Visually Impaired Internet browsing and accessibility.
Section 508 requirements for Federal Website Design Jon Brundage MDCFUG 4/10/01.
CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.
Daniel Njuguna – IT Officer/ Adaptive Technology Trainer Kenya Society For The Blind Accessibility in ICT’s.
Overview of the web accessibility guidelines at RMIT: W3C's WAI Level A Conformance Praneeth Putlur Rajiv Pandya Rohit Sharma.
Making Web Pages Accessible Chapter 9 Learn how to… List guidelines and standards for making Web sites accessible. List HTML coding practices to make.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
Usability and Accessibility CIS 376 Bruce R. Maxim UM-Dearborn.
ADA Americans with Disabilities Act. Many people with disabilities are unable to access information on websites because of a variety of barriers that.
ITCS373: Internet Technology Lecture 5: More HTML.
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 1 Accessibility Testing ► Code Validators – XHTML & CSS ► Accessibility Validators –
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Is Your Site Accessible? Validating Your Web Site.
Project 8: Reacting to Events Essentials for Design JavaScript Level One Michael Brooks.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: Variables, Functions and Events (NON-Audio version) © Dr. David C. Gibbs WDMD.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
Accessibility Mohammed Alabdulkareem
A centre of expertise in digital information managementwww.ukoln.ac.uk Accessibility and Usability For Web Sites: An Introduction to Web Accessibility.
Easy WP Guide V2.6 for WordPress 3.8. easywpguide.com Adding Tags within your Post Adding Tags whilst editing your Post, will automatically assign those.
 Accessibility & Information Architecture Presented by Liz Molleur INF385E April 5 th, 2009.
The User Experience “Keeping Web Accessibility In Mind” Video available online at:
Accessibility Basics on creating accessible websites Accessibility Seth Duffey presentation for MAG Telecommunications.
Web Accessibility June 2, 2016 Evaluation and Workflow.
1 Making an Accessible Web Site Sec 508 Standards – How Tos Evelyn Li University of Wisconsin-Fox Valley.
Project Objectives Publish to a remote server
Making the Web Accessible to Impaired Users
These standards will serve us well in any technical communication job.
Introduction to Web Accessibility
Silverlight and Section 508 compliance
Web Content Accessibility Beata M. Ofianewska (DG COMM) 7 December 2006 December 2006 COMM C2.
International University of Japan
Web Standards and Accessible Design.
WebAIM Screen Reader Survey Results
Presentation transcript:

Development of Accessible E- documents and Programs for the Visually Impaired Web accessibility testing (v2010)

1. Methods testing using automatic tools Manual testing Testing by a user from the target group

2. Automatic tools (A.T.) There are different solutions from different vendors Limited online versions, Fully functional commercial products Approximately 50% of mistakes can be caught by these tools

3. A.T. How it works Checking syntactical aspects are "alt" options defined? Are all image maps client-based? Are the row and column headers in tables defined? Are the frames named?... Heuristics Can answer yes/no questions

4. A.T. demonstration Mostly used tool: Cynthia Says: One page per minute / site can be tested

5. A.T. : limitations False positives Incomplete results not a single Priority 1 checkpoint could be fully checked by automated testing tools

6. A.T. failures (general) Checkpoint 1.1 Provide a text equivalent for every non- text element Checkpoint 2.1 Ensure that all information conveyed with color is also available without color, for example, from context or markup Checkpoint 6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. Checkpoint 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes.

7. A.T. failures (images and image maps) Checkpoint 1.2 Provide redundant text links for each active region of a server- side image map Checkpoint 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

8. A.T. failures (tables) Checkpoint 5.1 For data tables, identify row and column headers. Checkpoint 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

9. A.T. failures (miscellaneous) Applets and scripts: Checkpoint 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.

10. A.T. failures (miscellaneous) Multimedia: Checkpoint 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation multimedia: Checkpoint 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.

11. A.T. false positives Automated tools frequently falsely detect errors. E.G. will often be detected as an audio file without text alternative. "123.jpg" can be in some situations a good content of "alt" attribute, but tools with some kind of intelligence may report it as an error

12. A.T. tools Cynthia Says: WebThing markup validation: WebThing Accessibility validation: SSB Technologies Ask Alice: /anon/index.jsp WebAIM wave:

13. Manual Testing As you seen on previous slides, there are many situations where automatic testing fails Manual testing is the necessary part of web accessibility testing There are many offline tools (accessibility toolbars,...) which may help Mozilla Firefox Web Developer Toolbar: Internet Explorer Accessibility Toolbar: Colour contrast analyzer: =628

14. Manual testing (2) Use toolbars from prior slide to manually test the page Find the representers of groups of pages (mainly for sites using Content management systems) Disable CSS to test if document structure exists and is defined by correct tags (headings, item lists,...)

15. Manual testing (2) Disable page colours to test if the colours are not used incorrectly Disable images and enable "display alt attributes" to test relevance of your alts Enable "display form details" and debug your forms

16. Testing by users from the target group (TTG) This is focused mainly on usability testing Choose the group of testers with different disabilities Think about the site which will be tested Find important things (which parts need to be tested?) Prepare tasks for the target group ask them to do prepared tasks and value successfullness, speed, measure of comfort,...

17. TTG: example We have to test a site of internet shop Target group: visually impaired people Registered users can search for goods by browsing the categories or by search form Payment by credit card Question: Ideas about the target group?

18. TTG: target group Persons with different level of vision (blind, color blindness, low vision,...) Persons with different level of internet browsing experiences (programmers are able to read a html so results from them are not very relevant) Users of different assistive technologies (different screen readers,...) question: What is important to test?

19. TTG: What to test Registration process (new users must register) Login process... Operations with goods (searching, reviewing, finding detailed information about particular thing,...) Basket operations (reviewing the content, adding and removing goods, finding information about final price,...)

20. TTG: What to test Payment process Online help accessibility is the license and other important information accessible? question: Ideas about tasks for testers?

21. TTG: Tasks for testers Create a new account Find the price of one particular thing Is the particular thing in stock? Buy the portable MP3 player with record button (record function is activated by a button not from a menu) Copy and paste (to an external file) some topic from online help (E.G. using basket)... question: how to evaluate the test?

22. TTG: evaluation Were all tasks realizable for all members of the group? Compare time requirements of testers with requirements estimated by specialist Summarization of member's comments

23. Results of testing The primary goal of testing is to inform developer about problems on the site Resulting document must be transparent and relevant It is very important to uniquely determine tested document (url and date) Report must contain information about testing environment More info and examples here: sprava-pristupnost polrok/5112c

24. Accessibility and modern technologies

25. JavaScript Some accessibility issues: Navigation. Inability or difficulty navigating using a keyboard or assistive technology. Hidden content. Presentation of content or functionality that is not accessible to assistive technologies. User control. Lack of user control over automated content changes. Confusion/Disorientation. Altering or disabling the normal functionality of the user agent (browser) or triggering events that the user may not be aware of

26. JavaScript event handlers Do not use device dependent event handlers (OnMouseOver, OnMouseOut, OnDblClick, OnKeyDown, OnKeyUp,...) Device independent handlers are mostly ok (OnFocus, OnBlur, OnChange, OnSelect, OnClick(if not used on inactive text)) Actions of some device independent event handlers must be analyzed to determine if they cause accessibility problems (OnChange, OnSelect) It is possible to combine device dependent event handlers to provide device independent controll of a site but it is hard to test More information:

32. Flash The majority of Flash content cannot be made natively accessible to screen readers Flash content is time - based and often changes over time Supported only marginally and only by few up- to-date versions of screen readers Hard to track by screen readers because of dynamic content MSAA (Microsoft active accessibility) is supported

33. Flash: accessibility Make the Flash content natively accessible to screen readers Make the flash content self-voicing, eliminating the need for the screen reader Provide an accessible alternative to the Flash content More info:

34. Image CAPTCHA alternatives (1) Following techniques are mainly server - sided May not work on enterprise level applications where spammers may target forms specifically These techniques primarily stop bots and automated spam submission programs

35. Image CAPTCHA alternatives (2) Detect spam-like contents within submitted form elements Detect content within a hidden form element: Ignore this text box. It is used to detect spammers. If you enter anything into this text box, your message will not be sent.

36. Image CAPTCHA alternatives (3) Validate the submitted form values Search for the same content in multiple form elements (e.g. are the first and last name equal?) Generate dynamic content to ensure the form is submitted within a specific time window or by the same user

37. Image CAPTCHA alternatives (3) Create a multi-stage form or form verification page Check the referrer Detailed descriptions with examples are here: cessible_forms /