WCAG 2.0 top ten checkpoints Ten popular area of focus for compliance and accessibility.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
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?
Accessibility, Joomla! Markup languages and you
Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.
Web Accessibility: Mastering the Essentials for Compliance Annie Bélanger Liam Morland May 2013.
WAHEP Website Check-up A Look at the Project Midway Website Evaluations.
SEO Best Practices with Web Content Management Brent Arrington, Services Developer, Hannon Hill Morgan Griffith, Marketing Director, Hannon Hill 2009 Cascade.
Website Accessibility Testing Todd M. Weissenberger Web Accessibility Coordinator University of Iowa
WCAG 2.0 training & orientation Fundamentals and how-to’s for web & content developers.
Web Accessibility Web Services Office of Communications.
The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.
The accessible web developer What it takes to make your website accessible Presenter: Michael Tangen.
Web Content Accessibility Guidelines (WCAG) 2.0 by Julius Charles Serrano, Even Grounds.
Browser Toolbars You Shouldn’t Do Without How the WAT and WDT Can Help You Design Accessible Websites.
The ACCESS Project Jesse Hausler, UDL/Accessibility Coordinator Craig Spooner, Coordinator.
Introduction to Web Accessibility. What is Web Accessibility Web accessibility means that people with disabilities can use the Web Disabilities including.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
How to Create Top Ranking Searchable and Accessible Documents Chris Pollett and Elizabeth Tu April, 2010.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Dhananjay Bhole, Coordinator, Accessibility Research Group, Department of Education and Extension, University of Pune.
Accessible Word Document Training Microsoft Word 2010.
WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.
INFORMATION TECHNOLOGY FOR MINNESOTA GOVERNMENT Accessibility: How does it impact you? Jay Wyant, MN CIAO Digital Learning Forum November 11, 2013.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Computer Concepts 2014 Chapter 7 The Web and .
Understanding WCAG Elizabeth J. Pyatt, Ph.D. Information Technology Services.
Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications.
The Internet Writer’s Handbook 2/e Web Accessibility Writing for the Web.
IE 411/511: Visual Programming for Industrial Applications
Americans with Disabilities Act (ADA): Compliance on the University Libraries Web Portal John Pardavila Library Systems May 29, 2013.
Web Programming: Client/Server Applications Server sends the web pages to the client. –built into Visual Studio for development purposes Client displays.
Web Accessibility PRESENTED BY CINDY BARRY, LITS.
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.
Is Your Site Accessible? Web Site Testing for Accessibility Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast.
Copyright © 2007 Knowbility, Inc. Accessibility Testing 1 ► Code Validators – XHTML & CSS ► Accessibility Validators – Page by Page ► Listening to Your.
Section 508 requirements for Federal Website Design Jon Brundage MDCFUG 4/10/01.
Design Principles for the Web Lavanya Koppaka. Why follow design principles? Structure the information being presented Increase the readability Ease of.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
+ 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?
Dive into Mobile Guidelines for Testing Native, Hybrid, and Web Apps Susan Hewitt, Accessibility Consultant, Deque Systems Jeanine Lineback, Accessibility.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Building accessible web forms Ensuring compliance to Section 508.
Is Your Site Accessible? Validating Your Web Site.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Introduction to Web Site Development John Hurley Department of Computer Science California State University, Los Angeles Lecture 4: Favicons Tables and.
Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.
Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.
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
 Accessibility & Information Architecture Presented by Liz Molleur INF385E April 5 th, 2009.
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.
INFORMATION TECHNOLOGY FOR MINNESOTA GOVERNMENT IT Accessibility: How does it impact you? Jay Wyant, CIAO Horizon Room 202 (Harbor Side) Age & Disabilities.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Creating Accessible PDFs from Word Docs
Information Architecture and Design I
Sharon Trerise & Kara Patten Graphics from webaim.org
Introduction to Web Accessibility
WCAG 2.0 training & orientation
Information Architecture and Design I
Introduction to HTML.
Pertemuan 1 Desain web Pertemuan 1
Demystifying Web Content Accessibility Guidelines
WebAIM Screen Reader Survey Results
Presentation transcript:

WCAG 2.0 top ten checkpoints Ten popular area of focus for compliance and accessibility

WCAG 2.0 top ten checkpoints 1. Forms Label tags for ALL input points Correct tab sequence Access keys for complex, long and laborious forms that are used frequently Navigable and able to submit with keyboard

WCAG 2.0 top ten checkpoints 2. Document structure Title tag to convey relationship of page to the site Meaningful page titles Heading tags Tags that convey meaning (paragraph, lists, etc.)

WCAG 2.0 top ten checkpoints 3. Navigation and links Consistent navigation (predictable) Skip to content Navigating with anchor tags in long bodies of content Breadcrumb navigation Meaningful link text that conveys purpose

WCAG 2.0 top ten checkpoints 4. Images and non-text elements ALT tags for informative images (non-decorative) Link to descriptions for longer text blocks Decorative images presented with CSS (not in content) Contrast ratio between background and text

WCAG 2.0 top ten checkpoints 5. Tables Do NOT use tables to format your document Tables are for tabular data Use THEAD, TFOOT, and TBODY tags to convey data relationship Rely on CSS and avoid depreciated tags

WCAG 2.0 top ten checkpoints 6. Mouse and keyboard issues Test and ensure you can navigate with keyboard only Do not rely upon mouse clicks Be cognizant of tedious clicking issues (e.g. menus)

WCAG 2.0 top ten checkpoints 7. Client-side to server-side handling It is OK to use Javascript Build base-level, server-side functionality first Add your AJAX/Javascript functionality on top Have a plan to degrade from client- to server-side Inform user of user input and changes in page behavior

WCAG 2.0 top ten checkpoints 8. Cues, instructions and error handling Inform and instruct the user Provide contextual helps and guide user input Offer intuitive error messages

WCAG 2.0 top ten checkpoints 9. Display adaptation Support multiple browser environments Content is format-neutral, format only with CSS Text: size, color, contrast, max width, no full justification Allow user to override formatting

WCAG 2.0 top ten checkpoints 10. Site and process context Breadcrumb navigation If there are multiple steps, indicate their context Use title and heading tags to convey site context Provide a sitemap

WCAG 2.0 resources Resources WCAG WebAIM accessibility testing How people with disabilities use the web Examples used in this presentation Links to presentation files:

WCAG 2.0 resources Tools and testing: Firefox WAVE toolbar Web Developer Toolbar WCAG Contrast Checker Fangs Screen Reader Emulator

WCAG 2.0 resources Tools and testing: Safari BetterSource (by Awarepixel)BetterSource Firebug Lite (by Slice Factory)Firebug Lite Unicorn HTML/CSS validator (by Ocoder)Unicorn HTML/CSS validator Validator (by Jerome Danthinne)Validator

WCAG 2.0 resources Tools and testing: Google Chrome Web Developer View Selection Source HTML Validator

WCAG 2.0 resources Tools and testing: Internet Explorer IE developer toolbar native to version 7.0+ Not a widely accessible list of developer add-ons Accessibility testing tools available in Visual Studio 2010

WCAG 2.0 resources Tools and testing: Client-side apps Color Contrast AnalyzerColor Contrast Analyzer (stand-alone contrast checker for Windows) TotalValidator (test for valid HTML, WCAG compliance, spelling, etc) Basic desktop applicationBasic desktop application (free, single-page testing) Pro desktop applicationPro desktop application (inexpensive, site-wide testing) Web-based testingWeb-based testing (free single-page testing) Firefox add-onFirefox add-on (free, single-page testing) WebbIEWebbIE (free browser for those with little or no sight abilities, great for testing) System Access To GoSystem Access To Go (free Windows-based screen reader utility)

WCAG 2.0 Q&A Questions? Michael Tangen | web interface designer-developer Office of Enterprise Technology (651) This presentation was developed in 2010 for the Technology Accessibility project. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported LicenseCreative Commons Attribution-ShareAlike 3.0 Unported License Rev