WCAG 2.0 training & orientation Fundamentals and how-to’s for web & content developers

Developer’s course overview Overview and understanding WCAG 2.0 Page content and behavior Navigation Images and Flash Forms and form behavior Client-side scripting Working WCAG into your development cycle Top ten issue recap

Beyond the legality Understanding the importance of compliance to WCAG 2.0 guidelines Standards that are accepted world-wide Improved development practices and end results It’s in the statutes and will be an enterprise-wide baseline Everyone benefits from these improvements

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

Page content presentation & behavior Your content is perceivable Received via sight, hearing or touch Context and relationship is conveyed through mark-up Always use proper document structure Your content is distinguishable and adaptable Separation of content from presentation Do not depend upon visuals to convey information

Your website is perceivable Layers of separation for web content Content is format neutral Formatting unique to end use Easier to migrate and re-tool Benefits of re-use of content /code

Page content presentation & behavior Your website is operable Interactive, allowing multiple ways of accessing info Concerns with time limitations (remember state) Keyboard accessible (no mouse-only restrictions) Your content, forms and applications are navigable Help the user recover from errors (prevention is key)

Page content presentation & behavior Your website is understandable Language barriers (when applicable) are addressed Meaning enhanced with supplemental information Predictable page behavior Relevant helps and assistance with user interaction Self-descriptive links (“click here” is not helpful)

Navigation is intuitive Your navigation is perceivable Proper context and structure to your menu system Consistency on every page Navigation links are intuitive and self-explanatory

Navigation is intuitive Your navigation is operable Keyboard accessible What is your plan for no Javascript? Skip past redundant sections to content Considerations for disabled mouse users )

Navigation is intuitive Your navigation is understandable Predictable behavior Self-descriptive menu items Sufficient contrast of text against background

Working with images & flash Visual issues Seizures – minimal page flashing Alternatives to color for conveying function

Working with images & flash Essential vs. non-essential images Does it convey information? Decorative images presented with CSS Informative images presented in-line ALT / title attributes Links to descriptions for longer text CSS alternative

Working with forms Perceivable See, hear, touch – forms accessible to all Label tags for all input points Exceptions: buttons (image, submit, reset) & hidden Accessible CAPTCHA

Working with forms Operable Keyboard accessible (including on submit) Correct tab sequence Provide access keys for laborious and repetitive forms For process-oriented forms, indicate their current step

Working with forms Understandable Make your form labels legible Give clear instructions and cues to prevent mistakes Don’t rely on color or visual elements to explain form functionality or processes

Working with client-side scripting Considerations for working with Javascript Javascript is OK, but there are associated risks Progressive enhancement vs. Graceful degradation Cue your user on user-driven event changes Remember not to rely upon visual cues

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 Two approaches to client-side development: Progressive enhancement: http://en.wikipedia.org/wiki/Progressive_enhancement Graceful degradation: http://en.wikipedia.org/wiki/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 Example table structure: http://accessibility.designbymichael.com/examples/other-html-elements.html#thead

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 2.0 http://www.w3.org/TR/WCAG20/ WebAIM accessibility testing http://wave.webaim.org/ How people with disabilities use the web http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ Examples used in this presentation http://accessibility.designbymichael.com/examples/

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 michael.tangen@state.mn.us (651) 201-1045 This presentation was developed in 2010 for the Technology Accessibility project. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported License Rev 2010-09.03.0947