Accessibility and Drupal: Where do you begin? Communications & Marketing Wright State University...

Accessibility and Drupal:Where do you begin?

Communications & MarketingWright State University

(not accessibility experts)Jessi Sparks (jessica.sparks@wright.edu)

Mark Anderson (mark.anderson@wright.edu)

Why Drupal?

Choosing Drupal for Wright State

CMS Selection Committee• Technology• Accessibility• Branding

Committee Recommendations• Drupal• Web Team• Central IT

DrupalCon Chicago• Beta• Usability• Drupal Rebuild

Accessibility

Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

www.w3.org/WAI/intro/accessibility.php

Usability

Usability means making products and systems easier to use, and matching them more closely to user needs and requirements.

www.usabilitynet.org/management/b_what.htm

User Experience Considerations

• 40+ interviews, 1:1• 8 surveys, including 1,000s of responses• 2 years Google Analytics• Sub committees• 3 conferences• Heuristic evaluation• Best practice methods of other institutions• Industry experts

Define the ProblemUX Study/Research/Personas

Undercover User Experience DesignCennydd Bowles; James Box

User Scenarios allow us to plan the pathways to specific user needs – i.e. Future Faculty: What do they need based on the personas?

Wireframes are the blueprints before design

Define the Solution & Plan the Architecture

Web Scenarios & Wireframes

Why the Urgency on Accessibility?

Chronicle of Higher Education – December 12, 2010Best and Worst College Web Sites for Blind Studentshttp://chronicle.com/article/BestWorst-College-Web/125642

University of Illinois at Urbana-ChampaignIllinois Center for Information Technology and Web Accessibilitywww.cita.uiuc.edu

The Bad News…

Why Is Accessibility Important?It’s the lawCurrently there are only federal and state requirements for government websites from the Americans with Disabilities Act of 1973, however it’s clear this will be an ongoing issue, and legal precedents set recently in the commercial and public sectors will only increase

It hurts your bottom line to ignore• Stress the importance to upper and middle management, buy-in is key• Remember 25% of internet users are disabled—do the math! That’s 1 in 4

opportunities to miss out in e-commerce, advertising, and promotions.*• Lawsuits are expensive• Target Corporation: $6 Million in Damages + Court-ordered $145,000 in

Certification Fees**• Florida State University, Arizona State University, and Penn State University

It’s the right thing to do*An Idiot’s Guide To Accessible Website Design “According to a report by the Danish Center for Accessibility, as many as 25% of the world’s Internet users have some sort of visual, auditory or mobility disability.“http://webdesignledger.com/tips/an-idiot%E2%80%99s-guide-to-accessible-website-design Accessed on 11/22 ** Target lawsuit settled http://webaim.org/blog/target-lawsuit-settled/ accessed 11-29-11

Accessibility Basics

Examples of Accessibility User by Profiles

Visual ImpairmentsBlind usersLow vision

Motor ImpairmentsDevice independent (cannot not use input device)

Learning Disability ImpairmentsDyslexia (reading impairment)Dyscalculia (math impairment)

Audial ImpairmentsHearing Loss

Basic Accessibility Considerations for Content

Copy & Layout

•Check color contrast: Not about “red and green,” but about contrast ratios•Avoid PDF-only delivery: Include html option for each PDF, if you can•Do not use color as a directional tool (i.e. “Click the blue link”)•Avoid tables for layout: Tables should only be used for tabular data; use CSS for layout•Text size should be able to be increased or decreased •Institute Aria tagging if you can•Avoid animations on your website or implement a way to disable animations•Allow users to tab from section to section, instead of being reliant on a mouse•Provide text-only option if all else fails that syncs to real-time content•Avoid embedding math equations by image; use MathML if need be

Basic Accessibility Considerations for Content

LinkingRemember the word “Link” is being inserted right before or after your text by the screen reader

•Avoid link references embedded in the paragraphs, try to place at the end of copy•Use directional statements, “Visit the Bursar Website now” not “Click Here” •Always label the file in parentheses, so users and screen readers are aware of a download, “Common Text (PDF)” not “Common Text”•Provide skip navigation feature

Basic Accessibility Considerations for Content

Media •Videos and/or audio should not be Flash, move to H264 (HTML 5)

• Remove Flash from your website as its inaccessible (and will be depreciated soon)

•Have synchronized transcript for videos if possible; or at least have HTML-based text under the video

• Good news! YouTube already does this. Use the YouTube transcription service

Images•Use Alt Tags for ALL images•Avoid embedding text into graphics that cannot be replaced by straight HTML•Images should always be used as supplemental content.•Avoid data delivery in images only (i.e. graphs and charts only in an image)•Have an HTML version with data only if need be (i.e. Say “67% of college students”)

Files• Avoid PDF-only delivery; have an HTML option for each PDF option if you can

Basic Accessibility Considerations for Content

Training End Users

Education of users is really key; teaching users the basics will help improve overall accessibility

Mobile is Key

Consider “mobile-friendliness,” “accessible-friendliness” because many of the same considerations for mobile apply for accessibility

Tips to Implement an Accessibility Plan

Houston…We Have a Problem

• Admit your site has a problem

• Write up a list of accessibility issues you know of first-hand, then compare this to your checklist of bugs to fix after you write and develop your plan

• You may instinctively know more than you realize about your website’s user interface, or lack thereof

Document: Your Current Web Accessibility• Make a comprehensive

document that itemizes site problems, non-compliance for federal, state, and internal institutional standards

• List areas to improve

• Be harsh & honest

Get Compassionate

• Understand the user problems

• Experience first-hand the stumbling blockshttp://dotsub.com/view/121318e1-4f35-459b-a91c-d07bb275310e

• Don’t assume anything; throw out your misconceptions

• Watch impairment personas provided by the W3Chttp://www.w3.org/WAI/intro/people-use-web/

Get Passionate!

• Know the difference between 508 Compliance and WCAG A-AAA Priorities

• Read the entire specification

• Read any institutional regulations required by your client and/or office

• Familiarity is key as you will have to draft the guidelines, check your team’s work, and/or work through problems with developers

Grab the BallTake Ownership

• Appoint an “Accessibility Czar” This should be a primary task assigned for one member of your team

• It’s not the responsibility of your “________” (fill in the blank) team.

• It’s your whole team’s responsibilityEach member above and below should have buy in

Join the Pack

Attend conferences on accessibility

• Focus on technology, but be open to the whole experience

• Attend non-technology related sessions

• Some of the most riveting experiences at conferences don’t have anything to do with technology

(This session at OhioDrupalCamp counts)

Location, Location, Location

• Find users and experts in your office or institutionTalk with HR and/or your ODS office

• Don’t have any? Network with organizations that support these users for options

• Illicit their help to solve this problem together– Honesty– Communication

Follow the Little Birdie

Follow some accessibility experts on Twitter• StandardsSherpa• webaxe• Stcaccess

Get connected, ask questions, join groups. Drupal Accessibility Groups:

groups.drupal.org Accessibility

Define the Problem: Create Disability Persona

Form a Disability Persona specifically along side your other personas; create as many as needed

Develop the Solution: The Matrix Document• Create a WCAG Matrix categorizing

A-AAA or 508 Compliance

• Detailed document outlines exact requirements needed from design and development team

• Listed A-AAA requirements with projections in coordination with the project plan

• Three-column layout– Criteria– Support features with priority level

(Tiers 1-4)– Remarks/explanation for development

team

A - Priority 1

AA – Priority 2

AAA – Priority 3

Organize Efforts, Keep Moving Forward

• Make deadlines and stick to them

• Have disabled user group; solicit feedback

• Test and re-test

• Good accessibility user experience doesn’t stop—keep building on the foundation you have set

The Demo wright.edu Accessibility and Usability Features

www.wright.edu

Ticket System • Content type• Views• Custom code

• Email notifications• Change log

Tooltips

Menu Structure• Mega menus• Flat structure

Drupal’s Accessibility

D7 core – WCAG 2.0 and ATAG 2.0Some WAI-ARIA supportOther improvements:

• Search engine form and presentation• Drag-and-drop functionality• Color contrast and intensity• Adding skip navigation to core themes• Image handling• Form labeling• Removing duplicate or null tags

http://drupal.org/about/accessibility

Drupal’s Accessibility Resources

Modules that Improve Accessibilityhttp://groups.drupal.org/node/85199

Theme switchingTheme changesText resizingHTML clean up/modification

Drupal’s Accessibility Resources

Drupal Groupshttp://groups.drupal.org/accessibility

Monthly Skype Calls, Dec. 13thRoadmap DiscussionsTechnical HelpWiki

Drupal Documentationhttp://drupal.org/node/394094

Theming for Accessibility

Tool for testing—Voice over on OSXZen

• Well documented• Does not really have accessibility features built in off the top

HTML Changes• ARIA, defining CSS Classes

Jquery• Be careful (hiding things)

CSS• Readable by screen readers but hidden from view• Place items off screen

Theming for Accessibility

Text-only and high-contrast theme changesNot using sub themesGet Variables

• Did not want to rely on cookies due to embedding of pages on other systems• Google ranks Get Variables as separate pages

• Poor for SEO• Robots meta tag to ignore Get Variable pages of same content• Server side, which allows us to kill Javascript

Once Get Variable is set• Reset CSS• Reset Javascript• Set new CSS

Theming for Accessibility

Disabling animations• Setting a hash tag• Set a cookie

Use hash tags as they do not compromise SEO • Not embedding pages with this feature• Client side

Questions?

Communications & MarketingWright State University

Jessi Sparks (jessica.sparks@wright.edu)Mark Anderson (mark.anderson@wright.edu)