Transcript Document

Inclusion Goes Digital: How to Build an
Accessible Website for your Organization
November 10, 2011
National Service Inclusion Project
www.serviceandinclusion.org
Toll-free hotline: 888-491-0326 (voice/TTY)
National Partnerships
Building with a11y
Building with a11y
• [email protected]
• Web Services Manager, ICI
• @coburnicus
• tweet this at #nsipweb
What is a11y?
• Accessibility is often abbreviated to the
numeronym a11y, where the number 11
refers to the number of letters omitted.
• Guys, we have buzz word!
• Seriously, a11y.
Quick Poll Question:
How many people knew
numeronym was a word?
Today’s 3 Points
• The state of the web (accessibility)
• The state of the web (general)
• Lets build something with a11y
Accessibility
“Web accessibility refers to the inclusive practice of making websites
usable by people of all abilities and disabilities. When sites are
correctly designed, developed and edited, all users can have equal
access to information and functionality.”
-http://en.wikipedia.org/wiki/Web_accessibility
The State of Web Accessibility
• Is good.
• We have our buzz word, which makes it
more sexy for marketing folks to talk
about.
• We have 3 Strong standards bodies.
WAI, ARIA,WCAG
• WAI is Web Accessibility Initiative
http://www.w3.org/WAI/
• WAI-ARIA is Accessible Rich Internet
App
http://www.w3.org/WAI/intro/aria
WCAG 2.0
• WCAG is Web Content Accessibility
Guidelines
http://www.w3.org/TR/WCAG20/
• Since we are building content, this is the spec
the applies to us.
• Perceivable, Operable, Understandable,
Robust
Our A11y Strategy
• The best strategy is probably not to learn
to build accessible websites...
• ...It’s probably better to learn how to pick
stuff built by people who do know how to
build accessible websites
The State of the Web
• Is good.
• Like really good.
• We now have HTML5 and Progressive
Enhancement/Responsive Design.
• Adobe Flash is dying.
The Promise of HTML5
• HTML5 next revision of HTML, adding
audio, video, animation, local storage,
location awareness etc.
• It’s pretty awesome.
• but its really new, and not supported by all
browsers, yet.
• HINT: Update your browsers.
Fact:
Every time you don’t update your browser:
• George Lucas thinks about making
another Star Wars movie.
• A puppy becomes very sad.
Responsive Design
• Coined by Ethan Marcotte
• One codebase that “responds” to the
screensize and capabilities of a device.
• It’s important because less and less of
browsing is on traditional computers.
• www.bostonglobe.com
This Isn’t That New
• The first webpage ever was responsive
http://www.w3.org/History/19921103hypertext/hypertext/WWW/TheProject.ht
ml
• Will your site work in 20 years?
Degrading Gracefully
“I like an escalator because an escalator can
never break, it can only become stairs.”
- Mitch Hedberg
Let’s Build Something
•
•
•
•
With what?
A web browser.
That’s it. Just a browser.
AN UPDATED BROWSER, we’re not
monsters.
• Not Internet Explorer, pretty please.
Another Quick Poll Question:
Who feels their website is too outdated to do
cool social media stuff?
Let’s Use a Content Management
System (CMS)
•
•
•
•
Heavy lifting is done for you
Stay in the browser (no new tools)
Social goodies build-in
Accessible, if you choose wisely
CMS Requirements
•
•
•
•
•
Accessible/Responsive
Hosted/Managed
Customizable
Robust and Social*
Base mode is free
Platform Options
•
•
•
•
SquareSpace
Drupal (via Drupal Garden)
Blogger
Wordpress
Platform Eliminations
•
•
•
•
SquareSpace (not free)
Drupal (immature, not responsive)
Blogger (Not robust enough)
Wordpress (You’re the one for us)
Pick a Theme
• Create an account (or download your own version
of Word Press)
• Find a responsive theme (using filter)
• Test theme against WCAG 2.0
http://achecker.ca/checker/
• See our accessible documents and presentations
archive
http://serviceandinclusion.org/index.php?page=conf
_archive#access
Make a page
“the front page”
• We don’t want this to be a blog, so we will
stay within the Pages section
• When making a page, we will use proper
markup to make it accessible.
• Under Settings -> Reading pick the page you
want to be the front page.
Add Social Content
•
•
•
•
Word Press is a social platform
You can embed content form other social tools
http://en.support.wordpress.com/shortcodes/
Let’s do this
Let’s Add Accessible Video
• Find or upload a captioned video to YouTube.
• Simply copy the URL into your page and it
will embed.
• Go the extra mile and provide a link to a
transcript if you can.
Let’s Collect Some Info
• We can use wufoo.com which is a11y
friendly.
• Wufoo uses Word Press short-codes as well
for easy embed.
• For the extra mile, put a link to a nonembedded version of the form (just in case).
Fin.
Questions?
Email: [email protected]
Archived materials will be available at:
http://serviceandinclusion.org/index.php?page
=conf_archive