Last fall I was introduced to a local non-profit organization called Knowbility.
Each fall they host a one-day competition to build an accessible website, called the AIR Rally, and then in the spring a one-month competition, the AIR Interactive competition, in conjunction with SxSW Interactive.
These competitions (which I will address in a separate post) have taught me way more than I could have ever expected about accessible web design. I always sensed that websites weren’t always accessible, but I had no idea how bad the situation was. Screen readers choke at the content of major local and national sites, making the news utterly useless to blind viewers. Mouseovers and dropdown menus, particularly those several levels deep, are enormously frustrating to someone with any mobility impairments or those who have to use keyboard commands to navigate the browser. And who would have ever thought that color could cause problems? Maybe the 7% of men in the US alone who are color blind and can’t figure out where the links are on a page, or the millions who can’t distinguish light grey words on a dark grey background.
It’s a huge problem, and Knowbility seeks to address it through their competitions and associated trainings. Truly accessible pages take more time and thought to create, but open up your content to so many people. And like someone pointed out in training: search engines are blind too. If your content is accessible, it also boosts SEO results tremendously.
Just to give you a real-life taste of what it’s like to be blind, below is a text version of what a blind person using a screen reader like JAWS would encounter upon visiting the CNN home page. Yes, it’s a wall of text, but I pasted it here to make a point. If you were blind, this is what you would get JUST up to the login button… literally, just the tip of the iceberg.
By the way, I used a Firefox extension called FANGS to get this text. If you’re interested, install the extension and try running a few sites through it to see what comes up!
Page has thirteen frames, twenty-six headings and three hundred thirty-five linksCNN.com dash Breaking News, U.S., World, Weather, Entertainment and Video News dash Internet ExplorerHeading level one CNNLinkGraphicCNNList of two itemsbullet EDITION colon U.S.bulletLink INTERNATIONALList endList of two itemsbulletLink Sign upbulletLink Log inList endEdit List of sixteen itemsbulletLink HomebulletLink VideobulletLink NewsPulseGraphic slash nav dash beta.gifbulletLink U.S.bulletLink WorldbulletLink PoliticsbulletLink JusticebulletLink EntertainmentbulletLink TechbulletLink HealthbulletLink LivingbulletLink TravelbulletLink OpinionbulletLink iReportbulletLink MoneyGraphic slash nav dash arrow.gifbulletLink SportsGraphic slash nav dash arrow.gifList end updated two colon twenty-eight p.m.EST, Tue February twenty-three two thousand ten LinkGraphicToyota chief says safety suffered in name of growthLink Toyota chief says safety suffered in name of growth Toyota’s president is acknowledging that efforts to expand resulted in lax safety standards and pledged to improve quality control, CNNMoney.com reports. Link FULL STORYList of three itemsbullet LIVE colon Link U.S. Toyota exec testifiesLinkGraphicLive VideobulletLink ‘I lost all control,’ driver testifiesLinkGraphicVideobullet CNNMoneyLink ‘I was labeled … lying idiot’List endHeading level four Latest newsList of twelve itemsbulletLink Cheney had mild heart attackbulletLink seven hundred two banks at risk of failing CNNMoneybulletLink Holloway case confession ‘not true’bulletLink More than three hundred sick on Caribbean cruisebulletLink Apple bans most, not all, sexy appsbulletLink Student sues over Web cam spyingLinkGraphicVideobulletLink Ex dash NBA star gets five years in shootingbulletLink Police colon Many tips in missing actor casebulletLink U.S. renews travel alert to MexicobulletLink Ticker colon Famous ex dash con runs for officebullet LIVE colon Link White House briefingLinkGraphicVideobulletLink ‘Bachelor’ host dishes dirt on showLinkGraphicVideoList endHeading level four Winter GamesList of four itemsbulletLink What to watch today SIbulletLink Sibling rivalry fueled gold medalistLinkGraphicVideobulletLink Canadians win ice dancing goldbulletLink Full Coverage vertical bar Link Weather vertical bar Link Medal TrackerList endLinkGraphic slash one px.gifLinkGraphicHone None no longer ‘unknown, evil, dark’Link Hone None no longer ‘unknown, evil, dark’ A year ago, there was panic over the Hone None flu. Now, vaccination clinics report low turnout. One doctor says the initial response was emotional because many felt the world was quote being overtaken quote by the flu virus. Link FULL STORYHeading level three DON’T MISSLinkGraphicDalai Lama colon China denies Tibet problemLinkGraphic slash one px.gifLink Dalai Lama colon China denies Tibet problem three colon thirty LinkGraphicFacebook games draw fans, backlashLink Facebook games draw fans, backlashLinkGraphicWhite colon ‘Snowboarding chose me’LinkGraphic slash one px.gifLink White colon ‘Snowboarding chose me’ four colon four LinkGraphicOpinion colon Too much law stifling AmericaLink Opinion colon Too much law stifling AmericaLinkGraphicHaggards colon Tiger can salvage marriageLinkGraphic slash one px.gifLink Haggards colon Tiger can salvage marriage three colon fifty-seven LinkGraphicWhich fed program would you cut?Link Which fed program would you cut? iReportLinkGraphicAmazingly tiny officesLink Amazingly tiny officesLinkGraphicTallest dog sleeps on queen bedLinkGraphic slash one px.gifLink Tallest dog sleeps on queen bed one colon forty-three LinkGraphicCNN Exclusive colon Elton, Jeff Bridges jamLink CNN Exclusive colon Elton, Jeff Bridges jam less script language equals quote JavaScript quote type equals quote text slash javascript quote greater document.write left paren ‘ less a href equals quote http colon slash slash ads.cnn.com slash event.ng slash Type equals click and FlightID equals two hundred eighty-five thousand eight hundred sixty-three and AdID equals three hundred eighty-nine thousand one hundred ninety-three and TargetID equals seventy-two thousand six hundred forty-five and Segments equals seven undefined three hundred two undefined two hundred forty-seven undefined two hundred seventy-four undefined three hundred twenty-eight undefined two hundred thirty-seven undefined fifty-six undefined one hundred eighty-four undefined eight hundred sixteen undefined two hundred eighty-eight undefined six hundred undefined eight hundred seventy-two undefined four hundred seventy-two undefined four hundred eight undefined one hundred four undefined eight hundred sixty-four undefined seven hundred twenty undefined seven hundred sixty undefined one hundred forty-four undefined eight hundred eighty undefined eight hundred eighty undefined eight hundred eight undefined two hundred sixteen undefined nine hundred eighty-four undefined three hundred seventy-six undefined eight hundred twenty-four undefined six hundred forty undefined three hundred twelve undefined four hundred ninety-six undefined nine hundred thirty-six undefined seven hundred twenty undefined five hundred seventy-six undefined two hundred seventy-two undefined three hundred twenty-eight undefined one hundred twenty undefined nine hundred twelve undefined seven hundred eighty-four undefined three hundred ninety-two undefined eight hundred eighty-eight undefined five hundred seventy-six undefined two hundred ninety-six undefined three hundred sixty undefined eight hundred forty undefined seven hundred thirty-six undefined six hundred eight undefined twenty-four undefined nine hundred twelve undefined five hundred twenty undefined eight hundred eight undefined four hundred eight undefined six hundred forty undefined one hundred fifty-two undefined two hundred undefined eight hundred seventy-two undefined one hundred seventy-six undefined four hundred thirty-two undefined four hundred eighty-eight undefined sixty-four undefined nine hundred twenty undefined eighty undefined eight hundred thirty-two undefined five hundred sixty undefined four hundred eighty-eight undefined eight hundred eight undefined fifty-six undefined two hundred undefined ninety-six undefined two hundred forty-eight undefined nine hundred thirty-six undefined nine hundred forty-four undefined six hundred ninety-six undefined four hundred forty-eight undefined three hundred thirty-six undefined two hundred thirty-two undefined seven hundred seventy-six undefined one hundred sixty undefined five hundred sixty undefined four hundred twenty-four undefined eight undefined six hundred fifty-six undefined six hundred fifty-six undefined eight hundred eight undefined one hundred ninety-two undefined four hundred seventy-two undefined three hundred twenty-eight undefined two hundred forty-eight undefined four hundred ninety-six undefined one hundred twenty undefined five hundred sixty undefined seven hundred thirty-six undefined nine hundred sixty-eight undefined seven hundred twenty undefined nine hundred twenty-eight Exa six hundred sixty-four Peta sixty-four Tera seven hundred twenty billion seven hundred eighty-four million eight hundred eighty-eight thousand five hundred twenty and Values equals one thousand five hundred eighty-eight and Redirect equals http colon slash slash clk.atdmt.com slash LDR slash go slash one hundred ninety-nine million seven hundred seventy-three thousand nine hundred twenty-three slash direct;wi point three zero zero;hi point two five zero slash one slash bKIlctl,bfyilvecupsmy quote target equals quote underline blank quote greater less img src equals quote http colon slash slash view.atdmt.com slash LDR slash view slash one hundred ninety-nine million seven hundred seventy-three thousand nine hundred twenty-three slash direct;wi point three zero zero;hi point two five zero slash one slash bKIlctl,bfyilvecupsmy quote slash greater less slash a greater ‘ right paren ; less slash script greater Hi! This page link Log in
Whew! Now imagine hearing the computer READING all of that text and you’ll get just a taste of what an inaccessible website is like to a blind person.
