inclusion goes digital: how to build an accessible website for your organization november 10, 2011...
TRANSCRIPT
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
• Web Services Manager, ICI
• @coburnicus
• tweet this at #nsipweb
Building with a11y
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 Apphttp://www.w3.org/WAI/intro/aria
WCAG 2.0
• WCAG is Web Content Accessibility Guidelineshttp://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 responsivehttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
• 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
archivehttp://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 non-embedded 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