The Gospel + Web Accessibility

www.godbit.com/article/gospelcon-2006-slides

Hi, I’m Nathan Smith.

• Accessibility is:Adding alt “tags” to images.

• Any questions?

What is web accessibility?

• Web accessibility is more thanjust adding the alt attributeto all of your images.

• It is a paradigm-shift in the waywe think about other people.

That’s not all, folks

• Accessible sites are boring and ugly.

• I must maintain two sites: regular, andone that exists only for accessibility.

• Accessibility is expensive to do!No, but retro-fitting sure can be.So, plan accessibility from the start.

Myth busters

• A dogmatic list of rules andregulations that we follow regardlessof how it affects the end-user.

• Why is there braille on ATM machines? How do users tell what is on-screen?

•Captchas or spam? (choose one)

What it shouldn’t be

Pharisaic attitude

Going on from that place, he went into their synagogue, and a man with a shriveled hand was there. Looking for a reason to accuse Jesus, they asked him, “Is it lawful to heal on the Sabbath?”

- Matthew 12:9-10

Jesus’ attitude

Then he said to the man, “Stretch out your hand.” So he stretched it out and it was completely restored, just as sound as the other. But the Pharisees went out and plotted how they might kill Jesus.

- Matthew 12:13-14

Remove barriers

“So many gathered that there was no room left, not even outside the door, and he preached the word to them. Some men came, bringing to him a paralytic, carried by four of them. Since they could not get him to Jesus because of the crowd, they made an opening in the roof above Jesus and, after digging through it, lowered the mat the paralyzed man was lying on.”

- Mark 2:2-4

Early Christian accessibilityCephas bar Jonahaka Apostle Peter

“Silver or gold I do nothave, but what I have I give you. In the name of Jesus Christ of Nazareth, walk.”

- Acts 3:6

Early Christian accessibilitySaul of Tarsusaka Apostle Paul

“... I have become all thingsto all men so that by all possible means I mightsave some. I do all this for the sake of the gospel, thatI may share in its blessings.”

- 1 Corinthians 9:22-23

Early Christian accessibilityMartin Luther

Wrote and nailed his95 theses to the doorof Castle Church inWittenberg, Germany

He put the Bible back into the hands of the massesby translating it into thecommon vernacular.

• Government sites - Yes!

• Car dealerships - Not really

Who should care?

• Section 508,Road to Accessibilitywww.section508.gov

• Chevroletwww.chevrolet.com

Quick compare

• Section 508:HTML 4.01 Transitional57 HTML errorstables + font tags

• Chevrolet:XHTML 1.0 StrictNo XHTML errorsCSS layout

Oh, the irony

Learning new tricks

Silly programmers,tables are for data!

Tetragrammaton

Hebrew for YHWH, “Yahweh”We substitute LORD.

• Then the LORD said to Moses,“Go to Pharaoh and say to him,‘This is what the LORD says...’”

- Exodus 8:1

• “Then the El-Oh-Are-Dee said...”

Don’t type in all-caps

CSS text-transform

Then the<span class="tetra">Lord</span>said to Moses...

.tetra { text-transform: uppercase;}

Semantics

<strong>, <em> -vs- <b>, <i>

<p>...</p> -vs- <br /><br />

Content-type

Deprecated:

<meta http-equiv="content-type"content="text/html; charset=iso-8859-1" />

New hotness:

<meta http-equiv="content-type"content="text/html; charset=utf-8" />

Quotes for 500, Alex

Blockquote is not indentation. It is for:

<blockquotecite="http://thinkexist.com/quotes/john_wesley/"> <p> Do all the good you can, By all the means you can, In all the ways you can, In all the places you can, At all the times you can, To all the people you can, As long as ever you can. </p></blockquote>

Form usability

Incorrect:

Email:<br /><input type="text" name="email" />

Correct:

<label for="email">Email:</label><input type="text" id="email" name="email" />

Rundle’s image roll-over<a href="/" id="home">Home</a>

#home { background: url(/img/home.gif) no-repeat; display: block; overflow: hidden; text-indent: -99999px; width: 150px; height: 25px;}

#home:hover { /* background = 300px wide */ background-position: right top;}

Table manners

Nesting is for the birds!

Gloves come off

“People still delivering nested table layout, spacer gifs, or ignoring accessibility can no longer call themselves web professionals.”

- Andy Clarke www.stuffandnonsense.co.uk

<table cellspacing="0" class="data"> <caption>Early Christians</caption> <colgroup> <col class="name" /> <col class="age" /> </colgroup> <thead> <tr> <th scope="col">Name</th> <th scope="col">Age</th> </tr> </thead> <tfoot> <tr> <td colspan="2"> Paul mentored Timothy. </td> </tr> </tfoot> <tbody> <tr> <td>Paul</td> <td>50</td> </tr> <tr> <td>Timothy</td> <td>25</td> </tr> </tbody></table>

Accessible data table example ››

It contains proper elements: caption, colgroup, thead, tbody and tfoot.

It also includes scope, whereit is applicable.

Old-school

• But they teach tables in college!

• “You must unlearn what youhave learned.” - Yoda, Jedi Master

• “For what I do is not the good I wantto do; no, the evil I do not want to do:this I keep on doing.” - Romans 17:19

Worst enemy = Me

Audible DOM

•Linear document object model

•Source code arrangement

•Skip links / anchor jumps

•Floats + positioning -vs- tables

DHTML mistakes

• Browser sniffing

• Phantom drop-down menus

•<a href="#" onclick="...">...</a>

•<noscript> Your browser stinks!</noscript>

DOM Scripting

• Progressive enhancement

• Graceful degradation

•<a href="..." class="info">...</a>

•<noscript> Relevant alternate content...</noscript>

Some examples

• Inaccessible:www.billygraham.orgwww.umc.org

• Accessible:www.gospelcon.orgwww.johncarroll.org

www.billygraham.org - JavaScript on

www.billygraham.org - JavaScript off

www.umc.org - JavaScript on

www.umc.org - JavaScript off

www.gospelcon.org - JavaScript on

www.gospelcon.org - JavaScript off

www.johncarroll.org - JavaScript on/off

Colorblindness

Affects 10% of all males, but less than 1%of all females. Protanope and deutranope arethe most common. Tritanope is very rare.

Blue underlines exist for a reason.

Myth busters

• “Do not tell people, or tell yourself, or even think that there’s something inherently wrong with pixel-based fonts. What there’s something inherently wrong with is Internet Explorer for Windows.”

- Joe Clark www.joeclark.org

Rutter’s em sizing

Browser defaults are typically 16px.Therefore: 16 x 0.625 = 10.

body { font-size: 62.5%}

#content { /* = 12px */ font-size: 1.2em;}

Em zoom layouts

• Em image sizing:host.sonspring.com/em-image

• Em Flash sizing:host.sonspring.com/em-flash

Accessible Flash

Closed captioning in Flash 8

Legal precedent

• Bruce Maguire (won)-vs-Sydney Organizing Committeefor the Olympic games

• National Federation of the Blind-vs-Target.com (case in progress)

Assistive technology

• Halwww.yourdolphin.com

• IBM Home Page Readerwww-306.ibm.com/able/solution_offerings/hpr.html

• JAWSwww.freedomscientific.com

• Window-Eyeswww.gwmicro.com

• ZoomTextwww.aisquared.com

Recommended reading

• Web Accessibility: Web Standardsand Regulatory ComplianceISBN: 1590596382

• Beginning JavaScript withDOM Scripting and AjaxISBN: 1590596803

• Bulletproof Web DesignISBN: 0321346939

• CSS MasteryISBN: 1590596145

Accessibility sites

• www.456bereastreet.com

• www.accessify.com

• www.clagnut.com

• www.diveintoaccessibility.org

• www.joeclark.org

• www.juicystudio.com

Authoritative sites

• www.afb.org

• www.direct.gov.uk/DisabledPeople/fs/en

• egov.vic.gov.au

• www.nfb.org

• www.section508.gov

• www.w3.org/WAI

Validation tools

• www.contentquality.com

• jigsaw.w3.org/css-validator

• validator.w3.org

• www.snook.ca/technical/colour_contrast/colour.html

• www.vischeck.com

• wave.webaim.org

• webxact.watchfire.com

Firefox extensions

• ColorZilla:addons.mozilla.org/firefox/271

• Fangs, Screen-reader simulator:www.standards-schmandards.com/fangs

• Firebug - JavaScript / DOM debugger:addons.mozilla.org/firefox/1843

Firefox extensions (2)

• Tidy HTML Validator:users.skynet.be/mgueury/mozilla

• View Source Chart:addons.mozilla.org/firefox/655

• Web Developer Toolbar:addons.mozilla.org/firefox/60

Summary

• The revolution will not be televised.

• CSS is the way to go. Script responsibly.

• Iterative improvement will save the day.

• Get the right tools for development.

• Have in you the mind of Christ.

Demonstrations,Questions + Answerswww.godbit.com/article/gospelcon-2006-slides