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

• Jeff.Coburn@umb.edu

• 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: jeff.coburn@umb.edu

Archived materials will be available at:

http://serviceandinclusion.org/index.php?page=conf_archive