Transcript Drupal Training Series Accessibility Basics for the Web Gabriel Merrell Interim Associate Director for Accessibility Office of Equity & Inclusion.

Drupal Training Series
Accessibility Basics for the Web
Gabriel Merrell
Interim Associate Director for Accessibility
Office of Equity & Inclusion
What We’ll Be Covering…
•Why Web Access Should be a Focus
•When to Consider Accessibility
•OSU IT Access Policy
•User Perspective
•Drupal Accessibility
•Overview
•Headings
•Menus/Site Navigation
•Color
•Images (Alt Text)
•Links (Descriptive)
•Tables
•Forms
•Lists
•Resources & Tools
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
2
Why Web Accessibility Should be a Focus
Ethical Sense
• To prevent the intentional or unintentional exclusion of others on the basis of a disability
• Reach the widest possible audience – 20% of U.S. Pop has a disability (2000 Census) –
largest underrepresented group
Legal Sense
• It’s the Law – DOJ ruled that ADA applies to the web, and is currently creating new regs
• Legal obligation to provide equal access through communications – ADA
“communications with people with disabilities must be as effective as communication
with non-disabled persons”
• Many instances of legal cases and complaints that apply to us
Business Sense
• Accessibility standards have been researched and vetted to work with all emerging
technologies (smart phones, tablets, cross-platform compatibility)
• Will increase web traffic and search optimization
• Web increasingly becoming way we all do business
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
3
When to Consider Accessibility
Accessibility should be considered throughout the entire design and
implementation of content, but is most useful and the least
time/cost intensive when built into the initial design concepts.
An accessible website can look and feel the exact same as an
inaccessible website – very little about access changes the visual
look of a web page.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
4
OSU IT Access Policy
Can be found on the OSU Accessibility Website
(http://oregonstate.edu/accessibility).
Requires web page designs consistent with policy standards (WCAG 2.0 Level AA).
• All new and revised pages, templates and themes published after the effective date
(Feb 22, 2012) must comply with policy standards
• Users must be able to report difficulty accessing site content
• Certain high priority pages, such as pages with core institutional information,
regardless of current status, will need to comply with the policy. These units will be
contacted and offered assistance in ensuring the accessibility of their web pages
Exemptions for certain situations
• Archived (no intention for alteration again), or legacy pages (published prior to
effective date – Feb 22, 2012) not deemed high priority
• Undue burden and non-availability as determined by OEI through consultation with
others with expertise and/or perspective (Media Services, CWS, DAS, etc.)
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
5
User Perspective
Visual disabilities
Screen Readers
Magnifiers
Speech Recognition
Increased contrast
Hearing disabilities
Captions/Transcripts
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
6
Mobility disabilities
Speech Recognition
Keyboards
Headsticks
Mouthwands
Cognitive/mental disabilities
Speech Recognition
E-text/e-books
Content most impt
User Perspective: Screen Reader Demos (VoiceOver)
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
7
User Perspective: Screen Reader Demos (JAWS)
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
8
Drupal Accessibility: Overview
Now that you’ve heard how a screen reader works, and how
individuals with disabilities interact with websites, there are a
few simple key concepts to keep in mind.
Linearization - all screen readers and assistive technology
linearize web content – taking code and lining up items one
after the other. While most of us can just look at a web page
and determine what section we are looking for, many
individuals can not.
Keyboard Access – many users with disabilities can not use a
mouse to interact with websites. The keyboard is the only way
to navigate content. You can try this for yourself. The “TAB”
key moves one link forward at a time. The “SHIFT-TAB” key
combo moves one link backwards at a time.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
9
Drupal Accessibility: Overview
Template accessibility
Content accessibility
Template accessibility and end-user created
content accessibility are two separate
things that need to be considered in full.
Template end-users (you) need to
understand how the template is laid out to
build off of predefined structure.
The templates provides a lot of the
framework that you need to build off of.
How you create menus, headings, images,
links, tables, lists, and forms is very
important to how accessible your site will
be.
Many colors have been predefined.
Headings have been predefined, so,
consider the template headings.
How menus are structured has been
defined.
For most of the rest of the hour, we’ll
spend time looking at how to use Drupal to
make this specific items accessible.
Learn much more at:
http://oregonstate.edu/accessibility/web
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
10
Drupal Accessibility: Headings
When thinking of headings, think outline. It’s about organization.
Never use bold, italicize, underline or font size to create this
structure. Headings are proper standard, as headings provide
structural navigation.
Headings are the only way to create structural sections on your
page.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
13
Drupal Accessibility: Headings
Headings should be used to define sections, should be
properly nested, usually one (maybe two) H1s per page,
and that H1 should usually be the same as the page title.
So a proper heading structure on one page would be
similar to…
H1 – Page Title
H2 – First Main Content Section
H3 – First Section
H4 – Subsection
H4 – Subsection
H3 – Second Section
H3 – Third Section
H2 – Second Main Content Section
In both Confident and Standard, the Site Name is an H1
and each specific Page Title is an H2. Built off of that.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
14
Drupal Accessibility: Headings
Since Confident and Standard define the Site Name as H1
and each specific Page Title as H2, all of your created
content should start with H3 to be properly nested.
H1 – Site Name (e.g. Gabe’s Trial Drupal Site)
H2 – Page Title (e.g. Home)
H3 – First Section on homepage
H4 – Subsection
H4 – Subsection
H3 – Second Section
H3 – Third Section
Using another H1 or H2 would be inappropriate.
The template has also defined other site features with Headings,
including menus as H3 (side, footer and nice-menus), News and
Events sections in Standard as H3.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
15
Drupal Accessibility: Menus
More than one menu can be confusing
Menus should be consistent from page
to page within a site. This is handled
mostly through the template.
Accordion/Expanded menus are okay
Page titles and menu should be related
– should use same words.
All Drupal menus are accessible
If you have a web page with a lot of
content, consider using a Table of
Contents (TOC). (e.g. DAS)
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
16
Drupal Accessibility: Color
Don’t rely on color alone to convey meaning.
1 in 12 men in the US has some form of colorblindness
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
17
Drupal Accessibility: Color or Is this hard to read?
People with low-vision are most affected by contrast. The templates are
getting better about pre-defined color accessibility, but you still have to
manage any color you define or include.
Use sufficient contrast
WCAG 2.0 Guideline 1.4.3 requires at least 4.5:1 contrast ratio
But how do you check for that without doing math?
My Favorites: Paciello Contrast Analyser for PC
Paciello Contrast Analyser for Mac
Others: Snook.ca, WebAIM, Juice Studio (Firefox add-on)
Learn more about color, and simulate colorblindness, at Vischeck.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
18
Drupal Accessibility: Images (Alt Text)
Alt Text provides users the ability to
interact with images.
Context matters most when
deciding what to write for the ALT
text, and if the image is meant to
convey info or meaning.
Avoid using words such as “image”
“photo” “graphic” in the alt text
as the screen reader announces
what the item is first.
Many types of images: simple, with
text, link images, decorative,
complex.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
19
Drupal Accessibility: Images (Alt Text)
Simple/Standard Images
Decorative Images
Be clear and concise. Remember
what the context of the image is.
Many images are just used for visual
interest – for decoration only.
If this was on a biography of Sher
Fenn page the alt text just needs to
be “Sher Fenn.”
In this case it is best to use <alt=“”>
NULL alt text. This hides the image
from a screen reader, and can
drastically reduce time spent
navigating a page.
This is not possible with our text
editor in Drupal (well it is, but it’s
complicated). In this case, be as
concise and simple as possible.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
20
Drupal Accessibility: Images (Alt Text)
Images with Text
Linked Images
Just use the text from the image as
the alt text, as long as the image isn’t
also a link.
When using images for links, you
want the alt text to describe what
clicking the link would do.
If the images below were being used,
the alt text just needs to be “Daisy
Farm Project” or “Bowling.”
If a college mascot icon was used as
a link to a history of mascots page,
we would want to identify in the alt
text that the link goes to that page.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
21
Drupal Accessibility: Images (Alt Text)
Complex Images
Pictures of charts, graphs, tables,
images with complex meanings.
Best to describe image in content of
your page, as this will describe image
for all users.
Many options, you could describe,
create a list, use an actual table
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
22
Drupal Accessibility: Images (Alt Text)
CAPTCHAs
You might not implement CAPTCHAs,
but, if you do, know how to select
the most accessible one possible.
These two CAPTCHAs are quite
different. Which one is less
accessible?
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
23
Drupal Accessibility: Links (Descriptive)
When writing link text, use descriptive links , links that
make sense when read out of context. Don’t use
ambiguous text like “click here” or “read more.”
Use this: Visit the Disability Access Services website.
Instead of: To visit the Disability Access Services website
click here.
Remember - screen reader software announces what the
function/content is.
Which would be easier to understand?
[link http://ds.oregonstate.edu/home]
[link click here]
[link Disability Access Services]
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
24
Drupal Accessibility: Fonts
Fonts have been defined by the templates already. If you
change fonts, be aware of the following.
Real text instead of pictures of words is always preferred.
Size – larger font size enhances accessibility, some fonts
are larger by default (Verdana).
Ease of Reading – fonts without much embellishment/with
clean lines are generally thought to be easier to read
(sans-serif – without “details”).
Serif vs. Sans-Serif fonts
Georgia is a serif font
Tahoma is a sans-serif font
From Wikipedia
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
25
Drupal Accessibility: Tables
Tables have a bad rap in the accessibility field, sometimes for good reason,
but if implemented well tables can be fully accessible.
Two types of tables: data tables and layout tables.
Seed Cost
Monsanto
Pioneer
Dekalb
Corn
$100/acre
$90/acre
$80/acre
Soybean
$60/acre
$65/acre
$70/acre
If you have a simple table, consider using a list instead. At the least, try to
linearize your data.
Current Seed Prices per Acre
•Corn: Monsanto $100, Pioneer $90, Dekalb $80
• Soybean: Monsanto $60, Pioneer $65, Dekalb $70
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
26
Drupal Accessibility: Tables for Data
In Drupal, any table is added from the toolbar. If you are using a table for
data, you must define header cells and should define the scope (col/row).
Make a table more accessible by adding <th> cells instead of <td> cells when
you have headers for rows or columns.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
27
Drupal Accessibility: Tables for Data
Adding a <caption> is highly preferred.
If you are creating a more complicated table, there are other coding
techniques that need to be used.
Avoid nesting data tables, or splitting cells in two.
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
28
Drupal Accessibility: Tables for Layout
Karen Hanson
Jennifer Gossett
Jo D. Alexander
Alternative Testing Services
Notetaking and Support Services
Deaf and Hard of Hearing Access Services
(541) 737-8582
(541) 737-4098
(541) 737-3670
[email protected]
[email protected]
[email protected]
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
29
Drupal Accessibility: Tables for Layout
Karen Hanson
Alternative Testing
Services
(541) 737-8582
Karen.Hanson@orego
nstate.edu
Jennifer Gossett
Notetaking and Support
Services
(541) 737-4098
Jennifer.Gossett@ore
gonstate.edu
Jo D. Alexander
Deaf and Hard of Hearing
Access Services
(541) 737-3670
Jo.D.Alexander@oreg
onstate.edu
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
30
Drupal Accessibility: Forms
The biggest difficulty with forms is in making sure they are labeled properly.
If you use Webform, this happens automatically, as do the items below.
Ask yourself:
• Does the form linearize well?
• Are labels for the form boxes listed before the form box/radio button/etc?
• Are you using color to identify required fields?
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
31
Drupal Accessibility: Lists
Lists (bulleted and numbered) are linear by nature, so
usually they are accessible from the outset.
Check to make sure lists are actual lists, not just
independent bullets.
Screen readers will announce the presence of a list.
[list of 9 items: one, two, three….]
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
32
Drupal Accessibility: A quick note about Videos
All multimedia (video plus audio) presentations
must be captioned
Free (and paid) software exists to help you caption
your own videos
Many companies also exist that will gladly caption
your videos for you
DAS could be a low cost on-campus solution
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
33
Drupal Accessibility: Resources & Tools
Laws, Standards & Guidelines:
• Section 508 (Draft Update)
• Web Content Accessibility
Guidelines (WCAG 2.0)
• OSU Accessibility website
Articles & Other Resources:
• WebAIM out of Utah State
• Jim Thatcher Accessibility Course
– original screen reader creator
Testing Tools:
• WAVE by WebAIM
• U of Illinois Firefox Accessibility
Extension
• W3C complete list of tools
Multimedia Resources:
• MAGpie (free captioning tool)
• YouTube captioning
• WebAIM - Captioning
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
34
Conclusion
There is a lot to consider to make your content accessible,
but, there are plenty of resources available:
http://oregonstate.edu/accessibility
If you are interested in learning more about web
accessibility, want to have your site reviewed, or just have
questions:
[email protected]
[email protected]
Provided by the Office of Equity and Inclusion & Disability Access Services
http://oregonstate.edu/oei
http://ds.oregonstate.edu
35