Accessibility and Drupal: Where do you begin?

pielibraryInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

65 εμφανίσεις

Accessibility and Drupal:

Where do you begin?

Communications & Marketing

Wright 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




I
ndustry experts


Define the Problem

UX Study/Research/Personas

Undercover User Experience Design

Cennydd

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, 2010

Best and Worst College Web Sites for Blind Students

http://chronicle.com/article/BestWorst
-
College
-
Web/125642

University of Illinois at Urbana
-
Champaign

Illinois Center for Information Technology and Web Accessibility

www.cita.uiuc.edu


The Bad News…

Why
Is Accessibility Important?

It

s the law

Currently 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
h
ttp://webaim.org/blog/target
-
lawsuit
-
settled/

accessed 11
-
29
-
11


Accessibility Basics

Examples of Accessibility User by Profiles

Visual Impairments


Blind users


Low vision


Motor Impairments


Device independent (cannot not use input device)


Learning Disability Impairments


Dyslexia (reading impairment)


Dyscalculia

(
math

impairment
)



Audial Impairments


Hearing 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

Linking

Remember 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 blocks


http://dotsub.com/view/121318e1
-
4f35
-
459b
-
a91c
-
d07bb275310e



Don’t assume anything; throw out your misconceptions



Watch impairment personas provided by the W3C

http://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
Ball

Take 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 responsibility

Each 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 institution

Talk 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.0

Some WAI
-
ARIA support

Other 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 Accessibility

http://groups.drupal.org/node/85199



Theme switching


Theme changes


Text resizing


HTML clean up/modification



Drupal’s Accessibility Resources

Drupal Groups

http://groups.drupal.org/accessibility



Monthly Skype Calls, Dec. 13th


Roadmap Discussions


Technical Help


Wiki


Drupal Documentation

http://drupal.org/node/394094

Theming for Accessibility

Tool for testing

Voice over on OSX

Zen


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 changes

Not using sub themes

Get 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 & Marketing

Wright State University


Jessi

Sparks (
jessica.sparks@wright.edu
)

Mark Anderson (
mark.anderson@wright.edu
)