Okay folks, I think we'll get started. Web Accessibility: Principles, Strategies & Tactics.
Sean Yo, BA & MA with a focus on digital media. Despite his youthful facade, he's been at the university twenty years.
Works at subunit of web solutions, for many departments on campus. Has presented many times on accessibility. I give you Mr. Sean Yo.
10:02 AM
Sean: I started my undergrad in 1994, I'll leave the arithmetic as an exercise for the audience. Thank you, welcome. Last year I presented "Real World Accessibility" where myself and Rob Geddes presented a case study on some sites we'd launched with our Web Solutions team. Was gratifying to receive the response, but also seemed that our expectations weren't quite as far behind as we thought. Had a lot of people asking us questions we thought we be assumed.
10:03 AM
We wanted to step back, practice what we preach, start off with fundamentals and not make so many assumptions.
I'm a web analyst with a group on campus called Web Solutions, part of Computing & Communications Services. I'm an accessibility advocate - I chose that word, because it's not "expert". I think it's a challenge to lay down the gauntlet to be an expert.
10:04 AM
Before we get into it, I want to go over some fundamentals. Anyone here seen this abbreviation: A11Y, people who have drank beer with me don't get to answer.
Randy...
Randy: I've seen it, yes.
Sean: That's awesome.
A11Y stands for accessibility. Anyone know why?
Number of characters. Me trying to use this abbreviation more. Good on Twitter.
10:05 AM
So to make sure we're on the same page, what is web accessibility? I like the Wikipedia definition, though it's a week and a half old. "the practice of making websites usable by people of all abilities and disabilities. All users can have equal access to information and functionality".
Very strong, lots to work with, clearly centered on people.
10:06 AM
When we talk about disabilities, four categories: visual, hearing, motor and cognitive. Visual: blindness or low vision, contrast, colourblindness. Hearing: low hearing or deafness. Motor: physical issues, limited or fine motor control. Cognitive: learning disabilities, distractability, focus.
Have to think about why are we doing this? I think our keynote speaker gave us some great information or ideas about why it's important.
10:07 AM
Following all coding best practices, XHTML/CSS, readable whitespace in your code. Pride in craft, but the purpose of a website is to communicate. Ignore accessibility and you're not communicating with a wide audience. Pay attention to website, better for everyone.
10:08 AM
Built environment: ramps are accessibility feature, but useful to anyone. Not going to spend a lot of time on the rationale, I'm going to assume most of us at an accessibility conference see the value. If you need more information, here are a couple of links and a high-level overview of the key points. Most important one is the first one, it's the right thing to do.
Other two: saving resources and Google will love you.
These slides will be up within minutes of the presentation, so don't worry about copious notes.
10:09 AM
So something before I get into the presentation, finish up with a small shift in my thinking lately. Last couple of years, if you read web design blogs and sites, you've noticed there's a new terms; UX for user experience. Usability, more people-centric, tied into specific experience. I like it, moves away from lab tests and checklists. Focus design on people.
I've stopped talking about accessibility, trying to talk more about accessibility experience. It helps remind us and keeps us anchored on people. If there's one thing you take away today, accessibility is all about people.
10:10 AM
People have experiences, checklists don't. Not to say they aren't useful, I use them in accessibility testing and in my life. But they can give you false positive re
6. Web accessibility refers to the 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
28. Most errors are introduced during requirements analysis and design. The later they are removed, the most expensive it is to take them out. Boehm et al (1975): “Some Experience with Automated Aids to the Design of Large-Scale Reliable Software.”
A11y is anabbr for accessibility – a numeronymLike i18n for internationalization We’ll come back to this later…
VisualBlindness low vision color-blindnessHearingDeafnessMotorInability to use a mouse slow response time limited fine motor controlCognitiveLearning disabilities distractibility inability to remember or focus on large amounts of information
Making a web site accessible is work – but so is following all types of coding best practices like keeping presentation code in CSS, using HTML semantically, and using readable white space in your code There is the simple motivation of pride in craft…but more important the purpose of a web site is to communicate If you ignore accessibility, your website will be less successful When you pay attention to accessibility, in my experience, the whole website is better for everyone Let’s look to the built environment – ramps, powered doors and extra railings are an accessibility features – but they can potentially help anyone in that building
Makingaccessibile websites can be challenging – and we’ll all make mistakesChecklists are not a bad thing – they can be a useful toolHowever, if you rely solely on checklists – you will generate false positive reports that a site is accessibleChecklists are about as smart as a spellchecker – try and keep that in mind
“considering accessibility as a separate item is the wrong approach. We really need to be considering the ideals of universal design, in which everything is designed for everyone. Let’s just for a minute forget about accessibility as a separate issue. We need to design and develop for people using AT just like we do for any other usability issue”
Perceivable - Information and interface must be presentable to users in ways they can perceive.This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)Operable - User interface components and navigation must be operable.This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)Understandable - Information and the operation of user interface must be understandable.This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
Providing an Accessible Experience requires contintuous and iterative design and testing
This model comes from a training session I took with Derek Featherstone that was hosted at the CNIB as part of the Registered Graphic Designers of Ontario Access Ability Conference.
Short description to provide context Less than 100 charactersNot always neededRedundant Images (Help + “?” Icon)Decorative Images (Rounded corners)Alt=“” tells a screen reader to skip – there is no SEO penalty here, since we’re resolving a repetitionRemember – People First…not checklists
Be careful when you use colour to indicate informationUsing colour isn’t evil – but just like an alt tag for an image, when you provide non-text visual information, you need to provide the same information by an alternative methodIf the only way you distinguish an advisory message that is a friendly warning or a critical error is making the warning yellow and the error red, then you need to think about providing that information by an alternative method. Include the word “Warning” and “Error” at the beginning of the advisory messageAlso keep in mind that some sighted people can’t distinguish colours due to colour blindness
Forms should be coded from the first element to the last in the order they are provided on the screenIt is possible to move things around in a form – forms are little HTML black boxes with a big red button on itMake sure the submit button is the LAST item in the form – this is a signal to screen reading users that the form is finishedDon’t force a form into a table for the visual design of a form – that code will be very confusing to a screen readerTab Index should only be needed if you’re breaking linear flow – if you’ve coded your form with linear flow, you don’t need tab indexCSS positioning that doesn’t break linear flowSeparating content from presentation