Upload
beverly-doyle
View
215
Download
1
Tags:
Embed Size (px)
Citation preview
Accessibility and Drupal:Where do you begin?
Communications & MarketingWright State University
(not accessibility experts)Jessi Sparks ([email protected])
Mark Anderson ([email protected])
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 ([email protected])Mark Anderson ([email protected])