Web Accessibility
Looking specifically at WordPress
Company
LOGO
Services
 Informal AT assessments
 Training – software and equipment
 Training and technical resources
 Accessible Media (i.e., captioning, audio
description)
 Accessible text
 Web accessibility testing and accessibility
workshops
Agenda
 Reasons why “Accessibility” is the new
topic of discussion
 Overall Web Accessibility and Design
Considerations
 Accessibility of WordPress Admin
 Accessibility of WordPress
 Resources
 Questions
Why “Accessibility” is the new
topic of discussion …..
 Cliché, but correct answer: Because it’s the law!!
 ADA/Section 508
 Helps Mason comply with Federal, State, and Local government
standards (i.e., Penn State, Arizona State, Google Apps for
Education)
 Penn State (settled a year ago) – library’s online database, Angel LMS,
departmental websites, “smart” podiums, ATMs
 Arizona State (settled Jan. 2010) – Kindle Reader pilot
 Google (initiated March 2011)
 Last year DOJ under ADA created a settlement agreement with Fairfax
County, VA to ensure accessibility of both physical and online material.
 Other reasons:
 Reaches a wider audience (i.e., captioning,
 Search engines optimization favors accessible websites
 non-traditional users, ESL)
 Mobile phone access
Rehabilitation Act
Law
Applies to
Mandates
Section 504
Federal, State and Local
government, Educational
agencies, Companies
(Corporate – Private), any
facility receiving Federal
funds
No otherwise qualified individual with a disability
shall, solely by reason of his/ her disability, be
excluded from the participation in, be denied the
benefits of, or be subjected to discrimination under
any program or activity of a public entity.
Section 508
Federal entities and
States that have adopted
similar regulations
Requires that any electronic and information
technology (EIT) procured, developed, used or
maintained by Federal agencies must be accessible
to employees and members of the public with
disabilities, unless an undue burden would be
imposed on the agency. Section 508 was enacted to:
1) eliminate barriers in information technology, 2)
make available new opportunities for people with
disabilities, and 3) encourage development of
technologies that will help achieve these goals.
ADA/VITA
Law
Applies to
Mandates
Americans with
Disabilities Act
(ADA)
Unlike section 504 of the
Rehabilitation Act of 1973,
which only covers programs
receiving Federal financial
assistance, title II extends to
all the activities of State and
local governments whether
or not they receive Federal
funds.
May not refuse to allow a person with a disability to
participate in a service, program, or activity simply because
the person has a disability. Must provide programs and
services in an integrated setting, unless separate or
different measures are necessary to ensure equal
opportunity.
Virginia
Information
Technology
Accessibility
Standard
(GOV 103-00)
All Commonwealth of
Virginia Executive Branch
agencies and institutions
of higher learning.
Outlines the minimum accessibility requirements
for procurement, development, or maintenance of
electronic and information technology systems. The
Standard also requires that Commonwealth of
Virginia (COV) employees with disabilities and
members of the public with disabilities have access
to and use of information and data comparable to
the access and use of Commonwealth employees
and the public who do not have disabilities.
What does IT Accessibility Mean to you?
 Mason has policy and an ATI Committee put in place:

ATI Office has worked with ITU Instructional Designers and are
available to provide support and consultation to faculty who needs
assistance with building accessible courses, administration who
needs assistance with designing accessible sites and content and
work closely with ODS who determines appropriate accommodations.
 Where does this apply?


Online courses
Face-to-Face Courses that use online resources
 For example: Blackboard and Piazza

Websites
 For example: CommonSpot, Word Press, 3rd Party Services

Website Content
 For example: Documents, Videos, etc.


Online and Desktop Applications
Library Databases
 What role can you play to help increase accessibility?
Web Accessibility
Universal Design –
Everyone Benefits






Accessible Web design contributes to better design for other
users:
Multi-modality (support for visual, auditory, tactile access) benefits
users of:

mobile phones with small display screens, Web-TV, kiosks.
Multi-modality increases usability of Web sites in different
situations:

low bandwidth (images are slow to download);

noisy environments (difficult to hear the audio);

screen-glare (difficult to see the screen);

driving (eyes and hands are "busy").
Redundant text/audio/video can support:

different learning styles; low literacy levels; second-language
access.
Style sheets can support:

more efficient page transmission and site maintenance.
Captioning of audio files supports:

better machine indexing of content; faster searching of
content.
Design Considerations
 Visual




Images should be optimized and include descriptive
“alt” tags
Description of the file you have uploaded
Text description provides access to understanding
what is being conveyed
Brief, clear, and contextual
 Learning/Mobility/Visual/Other


Alternative formats of materials for students who
require them (e.g. optional print packet of extensive
online reading materials, CD of audio clips)
ODS provides students an accommodation to receive
these materials in an accessible electronic format
 ATI works to cut, scan, and re-format!
 Hearing/ESL/Learning

Caption video or transcribed audio
Overall Usability
Considerations
 Text should be legible and re-sizeable


14 point font size is ideal
Using a clear sans serif font such as Helvetica or
Arial
 Document compatibility and accessibility

Is the document in a format that can be opened
on various machines, versions of software or
mobile? If the format isn’t accessible, is an
alternative available?
 Use of color should add interest and indicate
interface choices, but should not disadvantage
those with color blindness

White text on a black background is usually best
Web Accessibility Resources
•
SSBBartGroup – Accessibility Management Platform https://www.ssbbartgroup.com/amp/index.php **Contact our office to
have your pages tested for accessibility – ati@gmu.edu **
•
NetCentric – CommonLook Office –
http://www.commonlook.com/CommonLook-office
•
Free Single Page DeQue – WorldSpace, Ramp and UnDoc http://wsspg.dequecloud.com/worldspace/wsservice/eval/checkComplianc
e.jsp
•
Illinois Accessible Web Publishing Wizard for Microsoft Office http://www.virtual508.com/
•
Adobe Professional v. 9.0 or higher -http://www.adobe.com/accessibility/
•
CourseAvenue - http://www.courseavenue.com/default.aspx
Captioning Resources
• ATI Media – Free Captioning
http://ati.gmu.edu/media.cfm
•
•
•
•
•
•
•
•
•
•
•
•
MAGpie http://ncam.wgbh.org/webaccess/magpie/
Subtitle Workshop (free) http://www.urusoft.net
Captionate (for Flash): http://www.buraks.com/captionate
World Caption: http://kb.wisc.edu/helpdesk/page.php?id=7096 (Mac),
CapScribe: http://capscribe.snow.utoronto.ca/site/ (Mac)
MovCaptioner: http://www.synchrimedia.com/ (Mac)
dotSub: http://dotsub.com/
Subtitle Horse: http://www.subtitle-horse.com/
CaptionTube: http://captiontube.appspot.com/
Overstream: http://www.overstream.net/
vSync Bookmarklet: http://vsync.tunezee.com/bookmarklet.html
Easy YouTube Caption Creator: http://accessify.com/tools-andwizards/accessibility-tools/easy-youtube-caption-creator/
Audio Description
•Avoid the need for audio
description where possible, by
assuring that all important
information is communicated
visually and audibly.
•Adding more descriptive text into
your monologue helps to not
require audio description.
Document Accessibility
Number of electronic documents
posted on websites are not
accessible
 E.g., PDFs scanned with no tags
 E.g., Word documents designed
without styles
 E.g., forms are inaccessible
Microsoft Built-In Accessibility
Checker

When you go to file, you’ll see on the left side a “Check for
Issues” and when selecting that you’ll find “Check
Accessibility”
http://www.microsoft.com/enable/training/office2010/default.
aspx
Adobe Reader Accessibility
Features
 There are some helpful accessibility features in the free
Adobe PDF reader. For example, any PDF file open in Adobe
reader can be read aloud with the "Read Out Loud" option.
 Under the 'View' menu, select 'Read Out Loud', then 'Activate
Read Outloud‘.
 The Read Out Loud feature of Adobe Reader can be
accessed with Keyboard Commands, as listed below.






Activate Read Out Loud: Shift + Ctrl + Y
Read This Page Only: Shift + Ctrl + V
Read To End of Document: Shift + Ctrl + B
Pause/Resume: Shift + Ctrl + C
Stop: Shift + Ctrl + E
WordPress Admin
 Key Issues




Lack of design for accessibility in many key
areas.
Many tasks appear not to be achievable
without use of a mouse
Those areas where accessibility features are
included can lack clear instructions –
discoverability is so important
And remember – it’s not just about the blind…
Key Area Problems





Adding and Editing Posts and Pages
Custom Menus
Widgets
Theme Customization
Logging Off
Solutions
 Expanded Admin Menus –
http://wordpress.org/extend/plugins/expan
ded-admin-menus/
 Ozh Admin Drop Down Menu –
http://wordpress.org/extend/plugins/oshadmin-drop-down-menu/
Is WordPress Accessible?
 It can be – but is it? Well – that depends
upon the developer or content manager.
 WordPress, with a high quality theme,
should work right out of the box. However,
it is up to you to choose an accessible
Theme and maintain accessibility when
creating your content.
Things to do to make your
site more accessible:
 Accessibility options in browsers




Mainly Internet Explorer + Firefox
Specify colours, font styles and sizes
Adjust text size without zooming – there is
a difference
Attach your own custom stylesheet (IE
only)
 Google Chrome is slowly starting to add
more accessibility features
WordPress Issues



Most WordPress themes contain some elements that compromise
accessibility:
 Keyboard operability, visible focus
 Poor colour contrast
 Page structures
 Headings
 Etc
Some WordPress plugins introduce markup and functionality that is not
accessible:
 Contact form plugins
 Lightbox, gallery and carousel plugins
 Social bookmarking plugins – eg Addthis
 Etc
The WordPress admin screens have some inaccessible features
What does a non
Accessible website like?
• JAWS on text box with no
label
• JAWS on radio button with no label
• JAWS on text box with label
• JAWS on radio button with label
• JAWS on radio button with label and
fieldset/legend
WordPress Solutions
 Images – correct use of alternate text
(alt attribute)

Describe what image shows or what it
represents
 Links

Ensure that destination is clear from the link:
My blog post: Read more
rather than
My blog post: Read more

If link opens new tab or window inform the
user
WordPress Solutions
 Use headings properly
 Semantic elements
 Break up content into more manageable chunks
 Try to nest correctly
 Often used as navigation mechanism by screen
reader users
 Signpost content
 Keyboard focus and operation
 Focus should be easily visible
 Tab order should make sense
 Ensure all functionality accessible by keystrokes
WordPress Solutions
 Text



Good colour contrast
Should allow itself to be resized without
breaking layout (initially)
Use of colour alone to convey meaning
 Mark up forms correctly




Use labels for input fields
Fieldset for grouping controls
Clear display of errors and use text
Don’t use CAPTCHAs
WordPress Plug-Ins
 When we talk about WordPress Plug-Ins
you probably think of the common ones
such as:



Contact Form
NexGen Gallery
Smart YouTube Pro
 However, have you thought about how
accessible those plug-ins may be?
Accessibility Plug-Ins
 Yes, there are accessibility plug-ins!
 No, this doesn’t tell you what plug-ins are
accessible ……
 So why am I telling you this and what can
it provide?
 http://Wordpress.org/extend/plugins/tags/a
ccessibility
Accessible WordPress Site
Examples
 www.AccessSites.org
 www.accessforall.eu
Word Press Resources
 http://codex.wordpress.org/accessibility/
 http://En.support.wordpress.com/accessibi
lity
 http://make.wordpress.org/accessibility/
 http://blog.rrwd.nl/2012/03/23/howaccessible-is-the-wordpress-cms-for-ablind-content-manager/
Web Testing Resources
• Web Accessibility Toolbar:
http://www.visionaustralia.org.au/ais/toolbar/
• WAVE: http://wave.webaim.org/ (This also comes as a Firefox
Extension)
• Funcational Accessibility Evaluator (FAE): http://fae.cita.uiuc.edu/
• HiSoftware Cynthia Says: http://www.cynthiasays.com/
• Total Validator: http://www.totalvalidator.com/
• Paciello Group WAT:
http://www.paciellogroup.com/resources/index.html
• Web Accessibility Inspector:
http://www.fujitsu.com/global/accessibility/assistance/wi/
Questions?
 Please feel free to contact our office:
Assistive Technology Initiative
Aquia Building, Rm 238
ati@gmu.edu
703-993-4329
http://ati.gmu.edu
Updated information coming soon on
http://webaccessibility.gmu.edu