WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.
-
Upload
rudolf-cook -
Category
Documents
-
view
219 -
download
3
Transcript of WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.
![Page 1: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/1.jpg)
WCAG 2.0 training & orientationFundamentals and perspectives for analysts
![Page 2: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/2.jpg)
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
![Page 3: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/3.jpg)
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
![Page 4: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/4.jpg)
WCAG principle: POUR
Developing with the POUR model
• Perceivable
• Operable
• Understandable
• Robust
![Page 5: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/5.jpg)
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)
![Page 6: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/6.jpg)
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
![Page 7: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/7.jpg)
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
![Page 8: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/8.jpg)
WCAG principle: POUR
Developing with the POUR model: robust
• Maximize compatibility with current and future user agents
• Support for assistive technologies
![Page 9: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/9.jpg)
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
![Page 10: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/10.jpg)
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)
![Page 11: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/11.jpg)
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
![Page 12: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/12.jpg)
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
![Page 13: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/13.jpg)
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
![Page 14: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/14.jpg)
Your website is operable
Keyboard accessible
• No mouse-only functionality
• No keyboard traps (stuck position requiring mouse)
• Page short-cuts and access keys
![Page 15: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/15.jpg)
Your website is operable
Time-sensitive data entry
• Adjustable time for entry
• Pausing, stopping or hiding content
• Remembering user state and input
![Page 16: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/16.jpg)
Your website is operable
Visual issues
• Seizures – minimal page flashing
• Alternatives to color for conveying function/meaning
![Page 17: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/17.jpg)
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
![Page 18: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/18.jpg)
Your website is understandable
Content is readable
• Language barriers
• Unusual words, acronyms and terms explained
• Reading level
• Contrast and sizing issues
![Page 19: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/19.jpg)
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
![Page 20: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/20.jpg)
Your website is understandable
Input assistance
• Field labels, instructions and cues
• Error identification with instructions and tips
• Proactive error prevention steps
• Context-sensitive helps
![Page 21: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/21.jpg)
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
![Page 22: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/22.jpg)
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
![Page 23: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/23.jpg)
WCAG 2.0 integration in your process
Waterfall model
• Requirements
• Design
• Implementation
• Integration
• Testing and debugging
• Installation and maintenance
![Page 24: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/24.jpg)
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
![Page 25: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/25.jpg)
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
![Page 26: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/26.jpg)
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
![Page 27: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/27.jpg)
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
![Page 28: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/28.jpg)
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
![Page 29: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/29.jpg)
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
![Page 30: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/30.jpg)
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
![Page 31: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/31.jpg)
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
![Page 32: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/32.jpg)
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
![Page 33: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/33.jpg)
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
![Page 34: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/34.jpg)
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
![Page 35: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/35.jpg)
WCAG 2.0 top ten considerations
2. Document structure
• Meaningful page titles
• Heading tags
• Tags that convey meaning (paragraph, lists, etc.)
![Page 36: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/36.jpg)
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
![Page 37: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/37.jpg)
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
![Page 38: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/38.jpg)
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
![Page 39: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/39.jpg)
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)
![Page 40: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/40.jpg)
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
![Page 41: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/41.jpg)
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
![Page 42: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/42.jpg)
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
![Page 43: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/43.jpg)
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
![Page 44: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/44.jpg)
WCAG 2.0 resourcesResources
WCAG 2.0http://www.w3.org/TR/WCAG20/
WebAIM accessibility testinghttp://wave.webaim.org/
How people with disabilities use the webhttp://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Examples used in this presentationhttp://accessibility.designbymichael.com/examples/
![Page 45: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/45.jpg)
WCAG 2.0 resources
Tools and testing
Must-have Firefox extensions:• WAVE toolbar• Web Developer Toolbar• WCAG Contrast Checker• Fangs Screen Reader Emulator
![Page 46: WCAG 2.0 training & orientation Fundamentals and perspectives for analysts.](https://reader033.fdocuments.in/reader033/viewer/2022052414/56649dba5503460f94aaa27f/html5/thumbnails/46.jpg)
WCAG 2.0 Q&A
Questions?
Michael Tangen | web interface designer-developerOffice of Enterprise [email protected] (651) 201-1045
This presentation was developed in 2010 for the Technology Accessibility project. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported LicenseRev 2010-09.03.0947