WCAG 2.0 training & orientation

  • View

  • Download

Embed Size (px)


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. - PowerPoint PPT Presentation

Text of WCAG 2.0 training & orientation

  • WCAG 2.0 training & orientationFundamentals and perspectives for analysts

  • Course overviewUnderstanding why WCAG is importantWhat is WCAG 2.0? Ensure your website is:Perceivable OperableUnderstandableRobustHow to integrate WCAG 2.0 guidelinesRecap and top ten considerations

  • Beyond the legalityWCAG 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: POURDeveloping with the POUR model

    Perceivable Operable Understandable Robust

  • WCAG principle: POURDeveloping 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: POURDeveloping 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: POURDeveloping 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: POURDeveloping with the POUR model: robust

    Maximize compatibility with current and future user agents Support for assistive technologies

  • Your website is perceivableNon-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 perceivableTime-based media

    Video: provide captioning and descriptive text Audio: provide text transcript Flash: provide combination of the two (case by case)

  • Your website is perceivableAdaptable 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 perceivableLayers of separation for web content Content can be re-used Formatting unique to end use Easier to migrate and re-tool

  • Your website is perceivableContent 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 operableKeyboard accessible

    No mouse-only functionality No keyboard traps (stuck position requiring mouse) Page short-cuts and access keys

  • Your website is operableTime-sensitive data entry

    Adjustable time for entry Pausing, stopping or hiding content Remembering user state and input

  • Your website is operableVisual issues

    Seizures minimal page flashing Alternatives to color for conveying function/meaning

  • Your website is operableNavigable 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 understandableContent is readable

    Language barriers Unusual words, acronyms and terms explained Reading level Contrast and sizing issues

  • Your website is understandableContent is predictable

    Initial focus on page load (dont 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 understandableInput 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 processFail to plan, plan to fail

    Iterative testing reduces the burden of full-on site testing You already test for functionality; add accessibility Its the right thing to do and its 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 processWaterfall model

    Requirements Design Implementation Integration Testing and debugging Installation and maintenance

  • WCAG 2.0 integration in your processWaterfall 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 processWaterfall 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 processWaterfall 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 processWaterfall 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 processWaterfall 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 processSpiral or Agile model

    Determine objectives Identify and resolve the risks Development and test Plan your next iteration

  • WCAG 2.0 integration in your processSpiral or Agile model: determine objectives

    Establish WCAG guidelines as a foundation Consider accessibility factors into this build iteration

  • WCAG 2.0 integration in your processSpiral 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 processSpiral 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 processSpiral 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 considerations1. 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 considerations2. Document structure

    Meaningful page titles Heading tags Tags that convey meaning (paragraph, lists, etc.)

  • WCAG 2.0 top ten considerations3. 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 considerations4. 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 considerations5. 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 considerations6. 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 considerations7. 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 considerations8. 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 considerations9. 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 considerations10. Site and process context

    Breadcrumb navigation If there are multiple steps, indicate