Transcript Accessibility Basics for the Web OSU Pro Devo Classesx

Accessibility Basics for the
Web
OSU Professional Development Class
Gabriel Merrell – Office of Equity & Inclusion and Disability Access Services
Accessibility Basics for the Web: Outline
• Vision for the Course
• Goals for the Course
• Why Web Accessibility Should be a Focus
• IT Access Policy
• User Perspective
• Resources & Tools
• Website Accessibility
• Documents
• Multimedia
Access 101
May 16, 2011
1
Vision for the Course
For you to see that web accessibility:
• is important
• is easy
• is a challenge
• can’t be fully learned, and that is okay
• is a process
• is all about lack of restrictions, opening pathways to all
• is an even playing field
Access 101
May 16, 2011
2
Goals for the Course
1. To express why web access is important and how people with
disabilities interact with the web
2. Discuss the IT policy and how it applies to participants
3. Learn basic concepts about web accessibility
4. Introduce you to resources and tools so you can continue to
learn
5. Influence you to make small (or large) changes to increase the
access of your sites
6. Motivate you to share with others, help create positive
change
Access 101
May 16, 2011
3
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
Access 101
May 16, 2011
4
Why Web Accessibility Should be a Focus
Legal Sense
•It’s the Law – the Dept of Justice maintains that the ADA
applies to the web, and is currently creating new regulations
•Legal obligation to provide equal access through
communications – ADA “communications with people with
disabilities must be as effective as communication with nondisabled persons”
•Many instances of legal cases and complaints that apply to us
Access 101
May 16, 2011
5
Why Web Accessibility Should be a Focus
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
Access 101
May 16, 2011
6
The IT Access Policy
How Was It Developed?
• Many peer institutions already have policies with defined standards:
Cal State System (2004 - Accessible Technology Initiative)
Purdue (2010), Michigan State (2009), UC Davis (2006), NC State (2006),
Ohio State (2004)
• Research and integration of peer policies into OSU language
• Updated wording and standards to follow ANPRM
• Talked with campus constituents (Provost’s Council, Cabinet, General
Counsel, VP for Information Services, COSID, ITCC, Web Comm & Central
Web)
The Importance of Accessibility & IT
June 15, 2011
7
The IT Access Policy - Requirements
Web page designs consistent with policy standards
• All new and revised pages, templates and themes published after the
effective date 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
Electronic documents & multimedia on web pages consistent
with policy standards
The Importance of Accessibility & IT
June 15, 2011
8
The IT Access Policy - Conditions
Applicability
• All OSU web presence; inclusive of web pages, web applications,
electronic documents and multimedia used to provide university
programs, services or activities
Exemptions
• 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.)
The Importance of Accessibility & IT
June 15, 2011
9
Website Accessibility - The User Perspective
Visual disabilities
Screen Readers
Magnifiers
Speech Recognition
Increased contrast
Hearing disabilities
Captions/Transcripts
Making IT Communications Accessible
April 27, 2011
10
Mobility disabilities
Speech Recognition
Keyboards
Headsticks
Mouthwands
Cognitive/mental disabilities
Speech Recognition
E-text/e-books
Content most impt
Website Accessibility - The User Perspective
Access 101
May 16, 2011
11
Testing for Accessibility & Resources
Laws, Standards & Guidelines:
Articles & Other Resources:
• Section 508 (Draft Update)
• Web Content Accessibility
Guidelines (WCAG 2.0)
• OSU Accessibility website
• WebAIM out of Utah State
• Jim Thatcher Accessibility Course –
original screen reader creator
Testing Tools:
Multimedia Resources:
• WAVE by WebAIM
• U of Illinois Firefox Accessibility
Extension
• W3C complete list of tools
Access 101
May 16, 2011
12
• MAGpie (free captioning tool)
• YouTube captioning
• WebAIM - Captioning
Website Accessibility
Important Items to Implement
1. Headings
2. Navigation
3. Layout & Tab Order
4. Color Combinations - Is this hard to read?
5. Alt Text (Images)
6. Links
7. Fonts
8. Forms
9. Tables
10.Lists
Access 101
May 16, 2011
13
Headings
When thinking of structure, 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.
Access 101
May 16, 2011
14
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
Access 101
May 16, 2011
15
Headings
Lets try it out.
http://ds.oregonstate.edu/prospective/services.php
Access 101
May 16, 2011
16
Navigation
Page structure and navigation should be related – be similar.
If you have a web page with a lot of content, consider using a Table of
Contents (TOC). (Ex: DAS)
Navigation should be consistent from page to page within a site.
Access 101
May 16, 2011
17
Navigation
A note about Drop Down Menus.
Access 101
May 16, 2011
18
Layout & Tab Order
Tab order refers to how the web page will be read by a screen reader.
Linearization is most important.
You can change the tab order of your site using <tab index=“#”>
Let’s try it out – http://oregonstate.edu/accessibility/class/tabindex
WAVE has a great tool to help visualize tab order
Access 101
May 16, 2011
19
Color Combinations or: Is this hard to read?
Don’t rely on color alone to convey meaning.
1 in 12 men in the US has some form of colorblindness
Access 101
May 16, 2011
20
Color Combinations or: Is this hard to read?
People with low-vision are most affected by contrast
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 Favorite: Web Accessibility Toolbar from Paciello
For Mac Users: Paciello Contrast Analyzer for Mac
Others: Snook.ca, WebAIM, Juice Studio (Firefox add-on)
Learn more about color, and simulate colorblindness, at Vischeck.
Access 101
May 16, 2011
21
Alternative Text
Alt Text provides screen reader 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 first
Many types of images: simple, with text, link images, decorative, complex
Access 101
May 16, 2011
22
Alternative Text
Simple/Standard Images
Be as simple and concise as possible. Just describe the image in context.
Access 101
May 16, 2011
23
Alternative Text
Images with Text
Just use the text in the image as the alt text.
Access 101
May 16, 2011
24
Alternative Text
Images that serve as Links
If a college mascot icon was used as a link, we would want to identify what
clicking the link would do, not describe the image
Access 101
May 16, 2011
25
Alternative Text
Decorative Images
Many images are just used for visual interest – for decoration only.
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.
Access 101
May 16, 2011
26
Alternative Text
Complex Images
Sometimes we use charts, graphs, tables that are images and not HTML code.
Sometimes the meaning of the image is much more complicated that a
simple short alt text is appropriate for.
In these cases, it is always best to describe the image in the content of your
page as this will describe the image in detail for all users.
You must always still use alt text for the image,
Access 101
May 16, 2011
27
Alternative Text & a Note about CAPTCHAs
Access 101
May 16, 2011
28
Alternative Text
Let’s try it out.
http://oregonstate.edu/accessibility/class/alt-text
Access 101
May 16, 2011
29
Links
Descriptive Links
Use descriptive link text, don’t use ambiguous text like “click here.”
Use this: Visit the Disability Access Services website.
Instead of: To visit the Disability Access Services website click here.
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]
Be judicious about how many links you use.
Access 101
May 16, 2011
30
Links
Skip Links
Skip links are same page links that allow users to skip over content to certain
sections of your web page.
Must be the first link/the first item on the page
Can be implemented in different ways:
• Hidden (http://oregonstate.edu/recsports)
• Hidden until focus (http://ds.oregonstate.edu)
• Always visible (http://webaim.org)
Try it out, visit these pages and TAB so you can see the skip link in focus
Access 101
May 16, 2011
31
Links
Link Focus
Links should always be visible, regardless of how a user arrives on the link (by
mouse or keyboard). This is a coding thing, and if you use a template you’d
need to work with Web Comm or Central Web.
Let’s try it out. First use your mouse to see what links look like when you
hover over them, then, use the TAB key or SHIFT-TAB to go backwards:
Good link focus http://oregonstate.edu/accessibility/Itpolicy.
Okay link focus http://oregonstate.edu/financialaid/
Bad link focus http://oregonstate.edu/uhds/
Access 101
May 16, 2011
32
Fonts
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
Access 101
May 16, 2011
33
Forms
The biggest difficulty with forms is in making sure they are labeled properly,
usually with a <label> <id> tag.
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
Access 101
May 16, 2011
34
Tables
Tables have a bad rap in the accessibility field, sometimes for good reason,
but if implemented well tables can be fully accessible.
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
If using tables for layout make sure the tables linearize well.
Access 101
May 16, 2011
35
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….]
Access 101
May 16, 2011
36
Documents
All of the items we’ve talked about so far are the same (or very close) when
talking about document accessibility.
Additional Items to consider in documents:
• Do you have a tagged document (PDF)
• Use Styles built into the software
• Use Acrobat Pro to check Accessibility
• Convert with Accessibility Features
Access 101
May 16, 2011
37
Multimedia – Captioning & Transcribing
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
Access 101
May 16, 2011
38
Testing for Accessibility & Resources
Laws, Standards & Guidelines:
Articles & Other Resources:
• Section 508 (Draft Update)
• Web Content Accessibility
Guidelines (WCAG 2.0)
• OSU Accessibility website
• WebAIM out of Utah State
• Jim Thatcher Accessibility Course –
original screen reader creator
Testing Tools:
Multimedia Resources:
• WAVE by WebAIM
• U of Illinois Firefox Accessibility
Extension
• W3C complete list of tools
Access 101
May 16, 2011
39
• MAGpie (free captioning tool)
• YouTube captioning
• WebAIM - Captioning
Thank you for coming
Questions?
Access 101
May 16, 2011
40