Accessibility Basics for the Web OSU Professional Development
Class Gabriel Merrell Office of Equity & Inclusion and
Disability Access Services
Slide 3
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 1 Access 101 May 16, 2011
Slide 4
Vision for the Course For you to see that web accessibility: is
important is easy is a challenge cant 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 May 16, 2011 2 Access
101
Slide 5
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 May 16, 2011
3 Access 101
Slide 6
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 May 16, 2011 4 Access 101
Slide 7
Why Web Accessibility Should be a Focus Legal Sense Its 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 non-
disabled persons Many instances of legal cases and complaints that
apply to us May 16, 2011 5 Access 101
Slide 8
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 May
16, 2011 6 Access 101
Slide 9
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 (Provosts Council, Cabinet, General
Counsel, VP for Information Services, COSID, ITCC, Web Comm &
Central Web) June 15, 2011 7 The Importance of Accessibility &
IT
Slide 10
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 IT Access Policy -
Requirements June 15, 2011 8 The Importance of Accessibility &
IT
Slide 11
The IT Access Policy - Conditions June 15, 2011 9 The
Importance of Accessibility & IT 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.)
Slide 12
Visual disabilities Screen Readers Magnifiers Speech
Recognition Increased contrast Hearing disabilities
Captions/Transcripts Website Accessibility - The User Perspective
April 27, 2011 10 Making IT Communications Accessible Mobility
disabilities Speech Recognition Keyboards Headsticks Mouthwands
Cognitive/mental disabilities Speech Recognition E-text/e-books
Content most impt
Slide 13
Website Accessibility - The User Perspective May 16, 2011 11
Access 101
Slide 14
Laws, Standards & Guidelines: Section 508 (Draft
Update)Draft Update Web Content Accessibility Guidelines (WCAG 2.0)
Web Content Accessibility Guidelines (WCAG 2.0) OSU Accessibility
website OSU Accessibility Testing Tools: WAVE by WebAIM WAVE U of
Illinois Firefox Accessibility Extension U of Illinois Firefox
Accessibility Extension W3C complete list of tools Articles &
Other Resources: WebAIM out of Utah State WebAIM Jim Thatcher
Accessibility Course original screen reader creator Jim Thatcher
Accessibility Course Multimedia Resources: MAGpie (free captioning
tool) YouTube captioning WebAIM - Captioning Testing for
Accessibility & Resources May 16, 2011 12 Access 101
Slide 15
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 13 Access 101 May 16, 2011
Slide 16
Headings When thinking of structure, think outline. Its 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. 14 Access 101 May 16, 2011
Slide 17
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 H3 Second
Section H3 Third Section H2 Second Main Content Section 15 Access
101 May 16, 2011
Slide 18
Headings Lets try it out.
http://ds.oregonstate.edu/prospective/services.php 16 Access 101
May 16, 2011
Slide 19
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)DAS Navigation should be
consistent from page to page within a site. 17 Access 101 May 16,
2011
Slide 20
Navigation A note about Drop Down Menus. 18 Access 101 May 16,
2011
Slide 21
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 Lets try it out
http://oregonstate.edu/accessibility/class/tabindexhttp://oregonstate.edu/accessibility/class/tabindex
WAVE has a great tool to help visualize tab order 19 Access 101 May
16, 2011
Slide 22
Color Combinations or: Is this hard to read? Dont rely on color
alone to convey meaning. 1 in 12 men in the US has some form of
colorblindness 20 Access 101 May 16, 2011
Slide 23
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.3WCAG 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 PacielloWeb
Accessibility Toolbar from Paciello For Mac Users: Paciello
Contrast Analyzer for MacPaciello Contrast Analyzer for Mac Others:
Snook.ca, WebAIM, Juice Studio (Firefox add-on)Snook.caWebAIMJuice
Studio Learn more about color, and simulate colorblindness, at
Vischeck.Vischeck 21 Access 101 May 16, 2011
Slide 24
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 22 Access 101 May 16, 2011
Slide 25
Alternative Text Simple/Standard Images Be as simple and
concise as possible. Just describe the image in context. 23 Access
101 May 16, 2011
Slide 26
Alternative Text Images with Text Just use the text in the
image as the alt text. 24 Access 101 May 16, 2011
Slide 27
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 25 Access 101 May 16,
2011
Slide 28
Alternative Text Decorative Images Many images are just used
for visual interest for decoration only. In this case it is best to
use 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 its
complicated). In this case, be as concise and simple as possible.
26 Access 101 May 16, 2011
Slide 29
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, 27 Access 101 May 16, 2011
Slide 30
Alternative Text & a Note about CAPTCHAs 28 Access 101 May
16, 2011
Slide 31
Alternative Text Lets try it out.
http://oregonstate.edu/accessibility/class/alt-text May 16, 2011 29
Access 101
Slide 32
Descriptive Links Use descriptive link text, dont use ambiguous
text like click here. Use this: Visit the Disability Access
Services website.Disability Access Services Instead of: To visit
the Disability Access Services website click here.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. Links May 16, 2011 30 Access 101
Slide 33
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)http://oregonstate.edu/recsports
Hidden until focus
(http://ds.oregonstate.edu)http://ds.oregonstate.edu Always visible
(http://webaim.org)http://webaim.org Try it out, visit these pages
and TAB so you can see the skip link in focus Links May 16, 2011 31
Access 101
Slide 34
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 youd need to work with Web Comm or
Central Web. Lets 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.http://oregonstate.edu/accessibility/Itpolicy
Okay link focus
http://oregonstate.edu/financialaid/http://oregonstate.edu/financialaid/
Bad link focus
http://oregonstate.edu/uhds/http://oregonstate.edu/uhds/ Links May
16, 2011 32 Access 101
Slide 35
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 33 Access 101
May 16, 2011
Slide 36
Forms The biggest difficulty with forms is in making sure they
are labeled properly, usually with a 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 34 Access 101 May 16, 2011
Slide 37
Tables Tables have a bad rap in the accessibility field,
sometimes for good reason, but if implemented well tables can be
fully accessible. 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. 35 Access 101 May 16,
2011 Seed CostMonsantoPioneerDekalb Corn$100/acre$90/acre$80/acre
Soybean$60/acre$65/acre$70/acre
Slide 38
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.] 36 Access 101 May 16, 2011
Slide 39
Documents All of the items weve 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 37
Access 101 May 16, 2011
Slide 40
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 38 Access 101 May 16, 2011
Slide 41
Laws, Standards & Guidelines: Section 508 (Draft
Update)Draft Update Web Content Accessibility Guidelines (WCAG 2.0)
Web Content Accessibility Guidelines (WCAG 2.0) OSU Accessibility
website OSU Accessibility Testing Tools: WAVE by WebAIM WAVE U of
Illinois Firefox Accessibility Extension U of Illinois Firefox
Accessibility Extension W3C complete list of tools Articles &
Other Resources: WebAIM out of Utah State WebAIM Jim Thatcher
Accessibility Course original screen reader creator Jim Thatcher
Accessibility Course Multimedia Resources: MAGpie (free captioning
tool) YouTube captioning WebAIM - Captioning Testing for
Accessibility & Resources May 16, 2011 39 Access 101
Slide 42
May 16, 2011 40 Access 101 Thank you for coming Questions?