Friday , August 17 2018
Home / Events / Hands On Web Accessibility, A Fantastic Eye Opener

Hands On Web Accessibility, A Fantastic Eye Opener

The London chapters of both Ladies That Ux, and Front-End Developer Meetup, held their first ever mash-up event on Thursday evening at the lovely downtown offices of technology stalwart HRDownloads. Together, they put on Hands On Web Accessibility for Global Accessibility Awareness Day (GAAD), with featured keynote speaker Scott Blinch from Race Roster. The packed house in attendance was treated to an evening of knowledge, and eye-opening revelations about the principles, practices, and pratfalls of making the internet a more accessible space.

Blinch loosened up the crowd with a bit of well placed humour, and then started the presentation with what may have seemed like a comical interlude, but that was a powerful image. He played a video of someone pressing a handicap button, and then waiting for the door to open. The door opens to reveal a staircase. Which is obviously of no use to this person in the wheelchair. It was an excellent metaphor for how good accessibility begins with a plan and strategy, not with stop gaps.

In Blinch’s prefatory comments, he also talked about Web Content Accessibility Guidelines (WCAG), and how there are three levels of testable success criteria: A, AA, and AAA. WCAG 2.0 was published as a W3C Recommendation Web Standard on December 11th, 2008, and has 12 guidelines that are organized under four principles: perceivable, operable, understandable, and robust.

Perceivable principles include things like text alternatives for non-text content, captions and other alternatives for multimedia, presenting content in different ways without losing meaning, and making it easier for users to see and hear content. Operable guidelines consist of items like making functionality available from a keyboard, giving users enough time to read and use content, helping users navigate and find content, and not using flashing content that can cause seizures. Understandable guidelines centre around things like making text readable and understandable, making content appear and operate in predictable ways, and helping users avoid and correct mistakes if and when they occur. Robust guidelines refer simply to maximizing compatibility on current and future user tools.

Blinch said that although he’s done accessibility improvement work on countless projects, he is constantly surprised with how difficult it is to estimate how long tasks will take.

“Accessibility can sometimes be a low-effort high-reward task. But then on the other side of the coin, it can often be a rabbit hole that one keeps digging and digging as they begin their work, then remembering certain considerations that they had forgotten, which then branches out into further considerations, and down and down we go. Accessibility is hard, and yet I keep relearning that lesson time and time again.”

Blinch said the first step in assessing a site for accessibility is simply to try and navigate that site without traditional peripherals: “If you can navigate your site without a mouse, you will already be well on your way,” Blinch said, “So start hitting that tab key.”

In that spirit, Blinch moved his talk from the practices and principles, to breaking down a couple of websites. He stripped the code out of the sample sites, and set them up locally so that the guests could immediately see the effect of the changes, and why it was important to accessibility. He tabbed through the site and showed everyone where it “broke” – which is unfortunately, often first in the top navigation links of many websites.

Keynote Speaker Scott Blinch from Race Roster

Like the hackathons that Joe Devon first suggested when he started GAAD, Blinch tightened up some markup and CSS, and explained the benefits of offering a ‘Skip links’ option to the user (with a poll request). He also jacked up the contrasting colours of the site and explained that a contrast ratio of 4.5 to 1 is essential to a AA WCAG rating, and that a ratio of 7:1 is necessary for a AAA rating. He pointed out that there are plenty of online contrast checkers to help you ensure that you achieve the necessary ratio.

Blinch also broke down a form and explained that effective labels need to be observed, or a screen reader won’t have a clue what the empty boxes are individually for. He explained the issues of focus, and how not being aware of such markup, can create a very redundant experience for the user. He also explained that Capthcha codes can break, and javascript excerpts from things like Facebook and Twitter can also cause issues when someone is “tabbing” through a site as opposed to using a mouse.

In all, Blinch spent about an hour “breaking” and breaking down two different sites, and then adding the code necessary to drastically improve the user’s experience. It was clear that the process had taken him considerably more time personally, in preparation for the event.

It’s that time and energy that Blinch says is arguably the biggest challenge in “convincing stakeholders, and clients that accessibility is important to a project”, and often leads them to not taking action until they absolutely have to – even in Ontario where the Accessibility for Ontarians with Disabilities Act, has created a free tool for scanning up to 50 website pages for free.

“Implementing accessibility into a project takes time and money, neither of which businesses often have much to spare, so I understand when there’s push back,” Blinch offered. “If the budget isn’t there, the budget isn’t there. It’s especially difficult as the benefits gained by improving accessibility are often invisible to those without disabilities, so what are they even paying for?”

Blinch said that it is a much easier and less costly prospect to start thinking about accessibility at the beginning of a project, rather than “trying to shoehorn it into an already long-completed project.” The earlier you start thinking about it and acting on it, the better.

“There is a way of thinking and working that, when the entire team is knowledgeable and dedicated to keeping accessibility at the fore front, it can end up not costing all that much more. Of course, a lot more thought will need to be put into the design process, but that could prove fruitful in the improvements gained by further iterating on designs and prototypes.”

Blinch closed his keynote speech by summing up a few simple practices, and imploring people to just follow a few simple guidelines: keep consistent menus, offer alternative navigation, make sure contrast ratios are adequate, include a sitemap, and use good breadcrumbs. While these items alone may not get someone a AA rating, shifting some focus to it, and spending some time re-doing things in a little more organized manner, can go a long way in making your site more accessible. When that’s done, remember to do some cross browser and cross device compatibility tests too.

The event drew to a close, and as the dust settled and the people began to filter out, it was clear that Blinch had not only given the full house plenty to think about, but the inspiration and impetus to go and make changes themselves.

“The Hands On Accessibility event was a great success, it’s important to open up the conversation about how accessibility and user experience go hand in hand,” said Becky Domenico, Creative Director at Moreira Devlopment, and LTUX committee member. “Scott did a great job of informing the group about modern accessibility practices and I’m confident that everyone in the room learned something new.”

“It was amazing to see two local (web) design and development groups come together to talk about accessibility requirements that desperately need to be met,” said Sarah Rath, User Experience Designer at 3M, and LTUX committee member. “My hope for the future is that we get to a point that we don’t even think about having to make our sites accessible. It just becomes second nature.”

Congratulations are deserved all around. From Ladies That Ux and Front-End Development Meetup for organizing the event – to HRDownloads for graciously hosting – to Scott Blinch for providing such an educational and informative workshop. In fact, every person that was in attendance deserves to be commended.

After all, Global Accessibility Awareness Day is about awareness first and foremost.

Something that everyone in attendance, observed, and did their part in shining some kind of light on.

The Hands On Web Accessibility Crew
The Hands On Web Accessibility Crew from left to right: Donna from Ladies That UX, Jen from HRDownloads, Scott and Emily from Race Roster, and Meagan from HRDownloads.
Ladies That Ux Committee members
Ladies That Ux Committee members Meaghan from Digital Echidna, and Becky from Moreira Development

More Information:

Scott Blinch is a front end web developer at Race Roster, a registration platform for endurance events in North America based in London, Ontario, Canada.

WCAG 2.0 Guidelines

Global Accessibility Awareness Day website

Ladies That UX

London Front-end Development Meetup

HRDownloads

About Mark Solway

Storyteller. Community builder, content creator, sports journalist, and a proud Londoner for 40 years.

Check Also

Pride parade cover

Photos: Parade Wraps Up Ten Days Of Pride Celebrations

Thousands of people braved the rainy elements, and lined London streets from the Western Fairgrounds …

Leave a Reply

Your email address will not be published. Required fields are marked *