WCAG 2.0 training & orientation Fundamentals and perspectives for analysts

Course overview Understanding why WCAG is important What is WCAG 2.0? Ensure your website is: Perceivable Operable Understandable Robust How to integrate WCAG 2.0 guidelines Recap and top ten considerations

Beyond the legality WCAG sets a standard for great development practices that benefit us all in various ways Flexible and extensible mark-up/code Mobile devices Adaptable content presentation Reach a broader audience Tied into wider network of world-wide standards

WCAG principle: POUR Developing with the POUR model Perceivable Operable Understandable Robust

WCAG principle: POUR Developing with the POUR model: perceivable Non-text elements must have a text alternative Provide alternatives for time-based media Create content that can be presented in different ways without losing structure or information Give sufficient distinction between foreground and background (not just text and images of text, but audio and video as well)

WCAG principle: POUR Developing with the POUR model: operable Make all functionality available from a keyboard Provide sufficient time to read and use content Do not design in ways that cause seizures Provide clear and consistent navigation and context

WCAG principle: POUR Developing with the POUR model: understandable Make text readable and understandable Make your website appear and operate predictably Help your users avoid and correct their mistakes

WCAG principle: POUR Developing with the POUR model: robust Maximize compatibility with current and future user agents Support for assistive technologies

Your website is perceivable Non-text elements that convey information Text alternatives for images of text or information Long description pages/content for some images Consider alternatives to using images/non-text Documents with images are in the same boat

Your website is perceivable Time-based media Video: provide captioning and descriptive text Audio: provide text transcript Flash: provide combination of the two (case by case)

Your website is perceivable Adaptable content Proper use of document structure Meaningful and accurate sequence of content Sensory issues (size, color, contrast, etc.) Separation of content and presentation Layout controlled by CSS

Your website is perceivable Layers of separation for web content Content can be re-used Formatting unique to end use Easier to migrate and re-tool

Your website is perceivable Content is distinguishable Color and contrast of your text and images Controls for audio and video Text can be resized and made color-neutral Audio: background and foreground contrast Put the user in control

Your website is operable Keyboard accessible No mouse-only functionality No keyboard traps (stuck position requiring mouse) Page short-cuts and access keys

Your website is operable Time-sensitive data entry Adjustable time for entry Pausing, stopping or hiding content Remembering user state and input

Your website is operable Visual issues Seizures – minimal page flashing Alternatives to color for conveying function/meaning

Your website is operable Navigable content Bypass navigational and header elements Descriptive page titles and document headings Menu and focus order is intuitive and consistent Purposeful and intuitive links Multiple ways of reaching content Context and location is made apparent

Your website is understandable Content is readable Language barriers Unusual words, acronyms and terms explained Reading level Contrast and sizing issues

Your website is understandable Content is predictable Initial focus on page load (don’t confuse the user) Notification of changes in page behavior on user input Consistent navigation and document structure links Instructions and cues for complicated tasks and forms

Your website is understandable Input assistance Field labels, instructions and cues Error identification with instructions and tips Proactive error prevention steps Context-sensitive helps

Your website is reliable (robust) Beyond compatible: adaptable and flexible Avoid browser-specific requirements (e.g. IE only) Use markup that facilitates accessibility Design and build towards extensibility Always validate your content and mark-up

WCAG 2.0 integration in your process Fail to plan, plan to fail Iterative testing reduces the burden of full-on site testing You already test for functionality; add accessibility It’s the right thing to do… and it’s in the statutes Acting on WCAG 2.0 improves the quality of your site Progressive Enhancement vs. Graceful Degradation

WCAG 2.0 integration in your process Waterfall model Requirements Design Implementation Integration Testing and debugging Installation and maintenance

WCAG 2.0 integration in your process Waterfall model: requirements Require compliance with WCAG 2.0 guidelines Require well-formed (x)HTML and CSS OK to require reasonably modern browsers Not OK to require a specific browser alone

WCAG 2.0 integration in your process Waterfall model: design Wireframes and document/page structure Considerations with client/server side processing How will people navigate through complex pages/forms Correct document/code structure and CSS formatting Content can be rendered solely as text Plan for error handling, helps and other assistance

WCAG 2.0 integration in your process Waterfall model: implementation Pages and forms built with proper markup and structure EVERY point of input has a label Check tab order Access keys for repetitive activities in long forms Iterative testing of components and in page assembly

WCAG 2.0 integration in your process Waterfall model: integration, testing & debugging Redundancy (extra eyes) catches human error Well-formed HTML/CSS reduces errors and debugging Building for WCAG means well thought out code

WCAG 2.0 integration in your process Waterfall model: installation and maintenance No development effort is perfect Address accessibility or usability issues as alerted Striving for accessibility is evolutionary

WCAG 2.0 integration in your process Spiral or Agile model Determine objectives Identify and resolve the risks Development and test Plan your next iteration

WCAG 2.0 integration in your process Spiral or Agile model: determine objectives Establish WCAG guidelines as a foundation Consider accessibility factors into this build iteration

WCAG 2.0 integration in your process Spiral or Agile model: identify and resolve risks Plan for client-side degradation Plan for navigating long content and complex forms Conceptualize and construct proper page structure Review your plan against WCAG high level areas

WCAG 2.0 integration in your process Spiral or Agile model: development and test Build it right with proper markup and structure Test for well-formed HTML and CSS Test for WCAG 2.0 compliance Involve persons with disabilities into user acceptance

WCAG 2.0 integration in your process Spiral or Agile model: plan the next iteration Take note of what needs to be addressed and fixed Bring in third parties to help with trouble issues Minnesota STAR Program for additional assistance

WCAG 2.0 top ten considerations 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 considerations 2. Document structure Meaningful page titles Heading tags Tags that convey meaning (paragraph, lists, etc.)

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

WCAG 2.0 top ten considerations 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 considerations 5. Tables Do NOT use tables to format your document Tables are for tabular data Use THEAD/TFOOT tags to convey data relationship Rely on CSS and avoid depreciated tags

WCAG 2.0 top ten considerations 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 considerations 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 considerations 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 considerations 9. Display adaptation Support multiple browser environments Text: size, color, contrast, max width, no full justification Allow user to override formatting

WCAG 2.0 top ten considerations 10. Site and process context Breadcrumb navigation If there are multiple steps, indicate their context Use title and heading tags to convey site context Save user’s input/state if session times out Let the user pick up where they left off Provide a sitemap

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

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

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