WordCamp UK - Accessibility and HTML 5
•Download as PPT, PDF•
2 likes•1,384 views
Talk on getting started with accessibility (in a pragmatic way) and pointers on HTML 5 readiness. Full post at: <a>http://www.slideshare.net/benjaminellis/wordcamp-uk-accessibility-and-html-5</a> And you'll find notes on the slides as you go through...
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to WordCamp UK - Accessibility and HTML 5
Similar to WordCamp UK - Accessibility and HTML 5 (20)
Recently uploaded
Recently uploaded (20)
WordCamp UK - Accessibility and HTML 5
- 1. WordCampUK 2010 Building for Accessibility and Getting Ready for HTML 5 Benjamin Ellis @benjaminellis | http://benjaminellis.org http://redcatco.com | http://socialoptic.com http://milestoneplanner.com/
- 2. Accessibility WHY? Be a good web citizen. Legal compliance. Bigger Audience. Better design. SEO benefit.
- 3. You Really Should Disability Discrimination Act 1995
- 4. NOTE: I'm Being Pragmatic 90/10 beats 100/0 every time > do something that makes a difference <
- 5. Not Just, But Also... Sight Hearing Cognitive & Learning Motor & Mobility And degrees of severity ...there is no one answer
- 6. Even More Complexity A Huge Range of Assistive Technologies: Screen Readers Magnification Input Devices - Speech / Switch OS Built in and 3 rd party
- 7. <em> don't Err > the world isn't one size fits all < make your design flexible > the world
- 8. Black on Black was cool in Hitch Hiker's Guide to the Galaxy. Not on your web site (ps search spiders hate it too) This isn't clever either...
- 9. (um... no...) Do place decorative images in the stylesheet But for many of us the visual cues are important I'VE GOT TEXT ONLY I'M GOOD TO GO, RIGHT?
- 10. Flash is evil right? Only if you are Steve Jobs Abode have some great features and guidelines, but it does take time and effort!
- 11. Running the Race Twice Or run it once. Well.
- 12. Guidelines Web Content Accessibility Guidelines WCAG 1.0 http://www.w3.org/TR/WCAG20/ but start with: http://www.w3.org/TR/UNDERSTANDING-WCAG20/ Or maybe try: http://www.w3.org/WAI/WCAG20/quickref/ Disability Rights Commission (DRC): Pas 78 Don't lose the will to live!
- 13. when the cat comes out the play LWOAM
- 14. when the cat comes out the play LWOAM (life without a mouse) Tab index Hovers Access keys
- 15. Vague Heuristics look at: your lowest screen resolution black and white without CSS At the source Do you lose the will to live?
- 16. Web 2.0 AJAX and all that stuff...
- 17. Web 2.0 AJAX and all that stuff... invisible /confusing to screen readers Practice graceful degradation (Progressive enhancement)
- 18. Web 2.0 HTML 5 http://slides.html5rocks.com/
- 19. HTML You're doing it already (mostly) Video/Audio (WebM) Page Structure Lots of CSS shiny shiny
- 20. WordCampUK 2010 Building for Accessibility and Getting Ready for HTML 5 Benjamin Ellis @benjaminellis | http://benjaminellis.org http://redcatco.com | http://socialoptic.com http://milestoneplanner.com/
Editor's Notes
- Do I need to 'do' accessibility? The short answer is yes, you do, and for a number of reasons. Firstly, it's a basic part of being a good web citizen. You wouldn't ignore someone who came up to you in the street because they were blind or missing their arms, so why build a web site on the net that they can't get access to? Accessibility leads to better design The process of thinking through accessibility requirements leads to better design. When most people talk about website design, they tend to talk about visual design - the static appearance of the site. However, websites aren't a static visual. We interact with them, resize them, view them on different browsers and discover them via search engines that view them as raw text. A basic accessibility check list deals with all of these things, and that means better design (in a broader sense, including interaction design) and also inherently includes search engine optimisation.
- The reality for most businesses (including in the UK), is that basic web site accessibility is a legal requirement. That said, the UK law is a bit muddy, although new legislation that comes into force in October does make things clearer. By building your website to make it accessible on a broader range of devices, and via a broader range of tools and presentations, you give yourself a bigger audience. That's just plain good business sense.
- 90/10 Beats 100/0 – Every time There is a danger that in striving for 100% perfection, we end up doing nothing. When it comes to accessibility, I'd rather see people do something, and get it 90% or 80% (or even 10%!) right, that do nothing. That may mean some of what I say here offends the purists, but here's the thing: When I first started looking at accessibility, those purists were the ones that put me off. The dogmatic demand for 100% perfection can result in people deciding that dealing with accessibility is too hard, or too expensive, and that is tragic. Basic accessibility is quick, easy and very rewarding.
- Many Dimensions - No One Answer Disabilities take many many different forms. From vision impairment encountered in old age, to motor issues from birth. Each has their own unique requirements. Sight, hearing, learning, cognitive, motor and mobility impairments occur with a range of severities, and in different combinations. My own experience is through dyslexia. There are many websites that I simply can't &quot;get a fix on&quot; - the layout and design makes it challenging for me to read them and hard to understand how I am meant to interact with them.
- There are many different assistive tools to help, from screen readers and text magnification tools, to input devices. As well as third party tools, most operating systems include universal access technologies. If you've never tested them out, fire up systems preferences or control panel and give them a spin. You'll find screen magnification, black and white / text inversion settings, contrast controls, speech technologies and keyboard for mouse controls.
- Em don't Err When websites are built, there are a number of different ways of specifying the sizes of fonts and devisions on the page. For many years web designers used pixels, but pixels are fickle things. They vary in size from machine to machine, and while it makes it easy to align text to graphics (which are sized in pixels), it means that you loose the ability to let the user's view make smart choices about how to display your page. Enter 'em's, which are more flexible and the preferred alternative these days. Building a page with ratios, rather than absolute sizes, enables users to use large fonts without breaking your site. Open up your favourite site and use the browser's view settings to display it in a larger font. Does it still look ok? Then all's good and well, but if the text goes off screen, or starts to over lap with graphics on the page, all is not well.
- Colour blindness affects a huge portion of the population. Poorly contrasting, over opposing primary colour foreground/background combinations don't only look poor, they are poor. Choose a sensible palette of colours that are discernible, even in black and white. Then stick to them.
- The short answer is: No. While a text-only page can help, it is far from a full solution. In some cases, removing the images can make this worse. Well designed images can make navigation more intuitive, and provide important cues for people with reading difficulties. Good web-design separates decorative and functional images and places them in the style sheets or page HTML as appropriate.
- Apple’s Steve Jobs might like you to think so, but while the whizzy Adobe Flash animations slapped onto the front page of many sites have been an accessibility (and usability) nightmare, there is no reason for this to be the case. Adobe provide an excellent set of guidelines and tools to make Flash applications that are very accessible. It’s simply a matter of using them. Please make sure that you, or whoever you hire, does. Apple’s HTML 5 fuelled crusade against Flash is going to do little to improve accessibility – you are still embedding video, and still need to provide accessible controls and alternative content.
- There is a camp that argues for building a completely separate instance of your site to deal with accessibility issues. Personally I think that is a dangerous road. Firstly, it instantly doubles the amount of work involved in keeping your site up to date. Your site is completely up to date, right? Secondly, the result almost inevitably ends up with web pages that are trying to cater to Dave, with a reading age of 8, who is passionate about your products, and Sue who has a double first from Oxford and is partially sighted. It’s a result that is inevitably downright insulting to everyone involved.
- The initial Web Content Accessibility Guidelines WCAG 1.0 received a mixed welcome. The 2.0 contribution is a heavy read: http://www.w3.org/TR/WCAG20/ , you could start with: http://www.w3.org/TR/UNDERSTANDING-WCAG20/ , although I read the “understanding WCAG20″ document, and didn’t understand that either the first time! You could also try: http://www.w3.org/WAI/WCAG20/quickref/ . The documents are a challenging read and feel quite onerous. In the UK we have the Disability Rights Commission (DRC): Pas 78 . It used to be a paid for document, but now you can download it for free via that link. Don’t lose the will to live when you read these things! I’ll come back to some easy first steps that you can take, the guidelines are for when you get serious about accessibility – which I strongly urge you to do!
- “ Life without a mouse” – from mobile phones to office workers with RSI, it isn’t just cats that are chasing the mice away. Understanding what it feels like to interact with your site without a mouse is a solid way to improve your site’s layout and navigation structure. Make sure you have access keys set ( Twitter does!), that web forms have tab indexes , and that your site isn’t over reliant on hovers.
- As a very basic, minimal set of checks, here is what you can do in less than five minutes for your site or sites that you build: View it at your lowest screen resolution View it in black and white View it without stylesheets turned on View the page source If viewing in any of those modes leaves you perplexed, then you probably need to fix it. Make sure your images have ALT text, and that the fonts on the web page scale sensibly and you’ll be making the web experience. There are some on-line testing tools (for example T.A.W. ), although none of them are perfect or instant magic..
- Javascript is invisible to many accessibilty tools. Play nice!
- Many advocate graceful degredation. I prefer the progressive enhancement model. Build a simple site that works well, then add on the shiny chrome and AJAX wizardly. That way everyone gets a good experience, rather than lots of people getting a poor undesigned one.
- Get set of slides – check these out and run through the new CSS HTML and Javasciprt features.
- Most wordPress using are already HTML 5 ready, as it were. For the rest, it is relatively simple changes to the theme. WordPress sites tend to follow the right semantic structures. Thankfully!