Gain marketing insights, consumer behaviour trends and creative inspiration from team BTI

MAY

Know Your Web: Making the Web an Accessible Place

Posted by Marlon Tiongson on May 17, 2012
Know Your Web: Making the Web an Accessible Place

A dispatch from BTI’s Web Development Gurus.

Last week held the kick-off of the first annual Global Accessibility Awareness Day (or GAAD for short). On Wednesday, May 9th, conferences were held around the world to promote proper standards and practices for basic accessibility throughout the web.

GAAD is a community-driven organization and the brainchild of Joe Devon, a web developer based in Los Angeles, and Jennison Asuncion, a Toronto-based accessibility expert. The whole idea was set in motion this past November after Jennison caught wind of a blog post from Joe via Twitter. The Toronto event was held in the Inclusive Design Research Centre (IDRC) office at the Ontario College of Art and Design. Developers and researchers from the IDRC, municipal and provincial governments, national banks, andBTI’s own Interactive team were also in attendance for the presentation.

As a legally blind individual since the age of one, Jennison was able to provide extremely valuable insight and illustration into the vital need for accessibility-minded web development. After explaining his complex history with computers and navigation tools for the vision-impaired (from all manner of braille displays, toscreen readers, to even having family members describe Commodore graphics as he played early video games), Jennison plugged his laptop into a set of speakers and a video projector and proceeded to run a live demonstration of screen reader navigation for the room.

Braille display passed around during GAAD

For anyone who accesses the web on a daily basis (read: pretty much everyone), there are certain visual elements that are typically accepted as more-or-less conventional. Navigation menus, for instance, are typically at or near the top or left side of the page and tend to be arranged in a logical order. There is a good reason behind these long-adopted consistencies. The Internet is generally a more familiar and friendly place when you, as a user, know what to expect.

For anyone, like Jennison, who regularly relies on alternate methods of consuming web content (in this case, specifically NVDA, a free screen reading program), the Internet is a malevolent and baffling place. Within seconds of loading up familiar restaurant sites (Jennison was careful to remind attendees not to publically mention specific company names), the visually simple navigation was transformed into a tangled mess of unidentified links, unspecified languages, and unlabeled images. Could this be a fluke of horrible web development? Surely this sort of unorganized treatment was only a rare exception.

Before moving any further, it may be handy to explain exactly how a screen reader works and why it can lead to a confusing web browsing experience. Web pages depend on two core things to present you, the user, with information. The content (what you’re consuming) is written in the form of code – for example,HTML (HyperText Markup Language) – and lays a framework of the information to be contained within a given page. The styling (how the page is presented) is taken care of by separate methods that handle the look and design of the content. So, content from the HTML may be organized totally differently from the way you see it presented within the browser. Menu items, links, or images that are lined up in a clean left-to-right line on the page you see might actually be scattered all around the HTML code.

Like the separate code for handling the look of a web page, a screen reader only reads the HTML. While the styling code interprets that HTML into a visual experience, a screen reader shapes the same content into an audio version. This becomes an issue when a developer spends all of their effort on the visual design of a site, and not enough time is put into writing clean and well-structured HTML code to support it.

Back to Jennison’s presentation and the alarming things that followed. His next step was to visit a couple of airline companies’ websites and attempt to book a flight. To anyone who has booked a flight online, this is usually a pretty straight-forward process – provide your origin point, the destination, departure and (if applicable) return dates, number of passengers, and maybe a few other minor details – before moving on to select your flight(s). As you begin to type in most of the forms, drop-down menus appear with suggestions. Instead of manually typing out a date, you usually have the option to select the day from a pop-up calendar. If you make an error somewhere along the way, there is some sort of red text and notification that lets you know after clicking the ‘Submit’ button.

This was not the case during Jennison’s demonstration. Pop-ups and drop-down menus were not announced via screen reader, error messages flooded the page with no alert or notification, and form navigation jumped all around the page with no sense of organization. Just for fun, try navigating through the web using only the ‘Tab’ key and you will notice the issue pretty quickly. Jennison surfed through numerous sites with the same glaring issues and many more to boot. For the developers in the room, it was a nightmare to see how horrible and inconvenient the web still is for some users.

In a time where everyone cares more about the web being available on every possible device and the average individual is more and more dependent on the Internet by the day, it is genuinely scary that basic accessibility can be so overlooked. The next time you’re involved in a web project, make Jennison Asuncion’s web experience a little easier to navigate by requesting that time be put into up-to-date programming practices and awareness of accessibility issues. BTI is currently in development of an update of our own website, with it and all future web projects being written with wide accessibility fully in mind.

You can find more Global Accessibility Awareness Day news and information on Twitter, Facebook or on GAAD’s website.

Comments

Thanks for your input. Your comment was sent successfully.

Leave a comment