Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Website Accessibility 101
Similar to Website Accessibility 101 (20)
Recently uploaded
Recently uploaded (20)
Website Accessibility 101
- 1. PDXTECH4GOOD WEBSI TE ACCESSIBI L I TY 1 0 1
- 2. STRATEGIST , THINKSHOUT BRET T MEYER @BRET T _MEYER
- 3. WHY BOTHER WI TH ACCESSIBI L I TY?
- 4. WHY BOTHER WI TH ACCESSIBI L I TY?
- 5. EXCUSE 1: “People with disabilities don’t really use the web.” – LAURA KALBAG, 2 4 WAYS
- 7. “56.7 million people — 19 percent of the population — had a disability in 2010.” –U.S. CENSUS BUREAU
- 8. EXCUSE 2: “We don’t want to affect the experience for the majority of our users.” – LAURA KALBAG, 2 4 WAYS
- 9. EXCUSE 3: “We don’t have the budget for accessibility.” – LAURA KALBAG, 2 4 WAYS
- 10. EXCUSE 4: “Accessible websites are ugly.” – LAURA KALBAG, 2 4 WAYS
- 12. SO WHAT CAN WE DO?
- 13. THE BIG PICTURE CODE FOR ACCESSIBI L I TY
- 18. START SMAL L
- 19. 1 ) A V O I D “ C L I C K H E R E ” < A H R E F = ” B L O G . H T M ” > C L I C K H E R E ! < / A > < A H R E F = ” B L O G . H T M ” > R E A D O U R B L O G ! < / A >
- 20. 2 ) A D D “ A L T T E X T ” T O K E Y I M A G E S A N D N O N - TEXT ELEMENTS < I M G S R C = ” S P L A S H _ I M A G E . J P G ” A L T = ” ” > < I M G S R C = ” L O G O . J P G ” A L T = ” O R G N A M E : W E C A R E ” >
- 21. 3 ) MAKE THE < T I T LE> DESCRIPT IVE < T I T LE>CAREERS< / T I T LE> < T I T LE>CAREERS | THINKSHOUT , A DRUPAL DEVELOPMENT F IRM< / T I T LE>
- 22. 4 ) TEST VARIOUS FONT SI ZES AAA?
- 23. 5 ) LABEL YOUR FORM F IELDS < LABEL FOR= "NAME" >NAME: < / LABEL > < INPUT ID= "NAME" TYPE= " TEXT " NAME= " TEXT F IELD" > < INPUT TYPE= " TEXT " NAME= "USERNAME" ARIA - REQUIRED= " TRUE" >
- 24. 6 ) PROVIDE LANDMARKS <DIV ID= "MAINCONTENT " ROLE= "MAIN" > <DIV ID= "PRIMARYNAV" ROLE= "NAVIGAT ION" > < FORM ACT ION= "SEARCH.PHP" ROLE= "SEARCH" >
- 25. 7 ) A D D “ S K I P ” L I N K S <P ID= "SKIP - L INK" > <A HREF = " #NAVIGAT ION" CLASS= "ELEMENT - INVISIBLE ELEMENT - FOCUSABLE" > JUMP TO NAVIGAT ION< /A> <A HREF = " #MAIN-CONTENT " CLASS= "ELEMENT - INVISIBLE ELEMENT - FOCUSABLE" >SKIP TO MAIN CONTENT < /A> < /P>
- 26. 8 ) ADD CAPT IONS TO YOUR VIDEOS HT TPS: / /SUPPORT .GOOGLE.COM/YOUT UBE/ANSWER/ 2 7 3 4 7 9 6 ?HL =EN HT TP: / /VIMEO.COM/HELP/ FAQ/MANAGIN G-YOUR-VIDEOS/CAPT IONS -AND-SUBT I T LES
- 27. 9 ) EMPLOY GOOD VISUAL DESIGN • L INK SPACING WHI TE SPACE D O N ’ T T R Y T O C R A M EVERYTHING IN
- 28. 1 0 ) TEST YOUR WORK WI TH WAVE HT TP: / /WAVE.WEBAIM. ORG/
- 29. WEL L , THAT WAS FUN.
- 32. D O N ’ T C O N F L A T E ACCESSIBI L I TY WI TH DISABI L I TY
- 33. PEW RESEARCH, 2 0 1 2 6 3% OF U.S. ADUL TS USE THEIR PHONE TO GO ONL INE
- 34. PEW RESEARCH, 2 0 1 2 3 1% ONLY OR MOST LY USE THE INTERNET ON MOBI LE
- 36. PEW RESEARCH, 2 0 1 2 5 9% OF LOW- INCOME AMERICANS HAVE NO BROADBAND INTERNET ACCESS AT HOME
- 37. PEW RESEARCH, 2 0 1 2 4 3% OF LOW- INCOME AMERICANS ONLY OR MOST LY USE THE INTERNET ON MOBI LE
- 38. 2 to 3 billion people will come online globally through the mobile internet over the next decade. –MCKINSEY & COMPANY
- 39. “There will come a point at which no one will need to ask ‘Why would somebody want to do that on mobile?’” –KAREN MCGRANE THE MOBI LE CONTENT MANDATE
- 40. “The people who will make that happen are the people who are adopting mobile devices ... because they do not have access to a personal computer.” –KAREN MCGRANE THE MOBI LE CONTENT MANDATE
- 43. 1 1 ) USE MICROFORMATS <UL CLASS= "VCARD" > < L I CLASS= " FN" > JOE DOE< / L I > < L I CLASS= "ORG" > THE EXAMPLE COMPANY< / L I > < L I CLASS= " TEL " > 6 0 4 - 5 5 5 - 1 2 3 4 < / L I > < L I > <A CLASS= "URL " HREF = "HT TP: / /EXAMPLE.COM/ " >HT TP: / /EXAMPLE.CO M/ < /A> < / L I > < /UL >
- 44. “You don’t get to decide which device people use to go on the Internet. They do.” –KAREN MCGRANE THE MOBI LE CONTENT MANDATE
- 45. BUT NOT EVERYBODY GETS TO CHOOSE.
- 46. A FEW RESOURCES WEBAIM: HT TP: / /WEBAIM.ORG/ WAVE: HT TP: / /WAVE.WEBAIM.ORG/ CHECKMYCOLOURS : HT TP: / /WWW.CHECKMYCOLOURS.COM/ SOAP: HT TPS: / /SOAP.STANFORD.EDU/ WCAG: HT TP: / /WWW.W3 .ORG/ TR/WCAG2 0 /
- 47. THANK YOU!
- 48. QUEST IONS? BRET T MEYER @BRET T _MEYER BRET T .MEYER@THINKSHOUT .COM
Editor's Notes
- Because the Internet is all about access to information. For everyone. But let’s start by examining why people think they shouldn’t bother with it.
- This is the easiest one to dismiss. Source: http://24ways.org/2013/why-bother-with-accessibility/
- Just take color blindness. It effects 8% of the male population, or roughly 1 out of every 25 people who visit our websites. Running those numbers for the highest trafficked client I’m working with right now, that would translate to more than 170,000 people in the past year. And the overall numbers are much more significant than that. Image Source: http://upload.wikimedia.org/wikipedia/commons/e/e0/Ishihara_9.png Stats Source: http://www.slideshare.net/QuiffBoy/accessibility-101
- About half of them classified their disability as severe. The 4 categories: Visual Auditory Motor Cognitive From a business perspective, these are all prospective customers. From an ethical perspective, we can’t afford to prevent anybody from accessing the information we’re putting out into the world. Source: https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html
- Get over yourself, hypothetical hypocrite. Accessible design is good design. Laura Kalbag takes this back to the 4 broad categories: Visual – make it easy to read Auditory – make it easy to hear Motor – make it easy to interact Cognitive – make it easy to understand and focus Source: http://24ways.org/2013/why-bother-with-accessibility/
- Again, don’t ignore your potential customers. I probably can’t emphasize this enough, but let me know if you get tired of hearing it: accessible design is good web design. It shouldn’t cost much, if anything, to implement the standards – and it will be easier to maintain in the long run, because you’ll be stripping away a lot of the gewgaws that you don’t really need in the first place. Source: http://24ways.org/2013/why-bother-with-accessibility/
- Um, no. Source: http://24ways.org/2013/why-bother-with-accessibility/
- The defense rests.
- Did I just use a stock photo? Yes I did. But there are no secrets to web accessibility, just good, clean code. For example, there’s a reason HTML provides Heading tags: they indicate hierarchy, or the relative importance of information.
- Has anybody seen Jaws in action? It’s the most popular screen reader on the market (although it inexcusably costs nearly $1000): and it relies on well structured, semantic information. Here’s basically how it works. First, Jaws reads the <TITLE> tag. This gives an indication of the information on the page… or it should. Information source: http://www.slideshare.net/QuiffBoy/accessibility-101 Image: http://upload.wikimedia.org/wikipedia/commons/7/7f/Megalodon_jaw.jpg
- Then, often, people bring up a list of the links on the page, if they need to navigate more deeply to find the content they’re after. I think you can see the problem with the links in this screenshot. Keep this in mind the next time you want to insert link text that just says “click here”. Information source: http://www.slideshare.net/QuiffBoy/accessibility-101 Image: http://wac.osu.edu/tutorials/images/link-test-firefox.jpg
- To find the information they’re looking for on a page, Jaws users can bring up a list of Headings. If you’re not using Heading tags to indicate the relative importance of the content on the page, Jaws users will have to spend a lot of time waiting for the reader to get to something interesting. Don’t use DIV tags in place of HEADINGS; CSS can let you style it any way you want, anyway. Good structure = accessibility. Title. H1. H2. H3. Well written content. That’s all there is to it. Information source: http://www.slideshare.net/QuiffBoy/accessibility-101 Image: http://doccenter.freedomscientific.com/doccenter/doccenter/rs25c51746a0cc/2011-04-05_surfsuplessonone/JAWSListofHeadings.jpg
- Okay, it’s not that easy.
- Some things are easy. Don’t use Flash. Don’t use tables for anything other than tabular data. Learning appropriate color combinations, spacing, responsive design, structured content — that all takes times. But here are 10 things you can start doing (almost) right away.
- We’ve already covered this one. Anchor text needs to include descriptive text. Let the text explain why somebody should click through.
- Using Alt=“” tells a screen reader that the image is unimportant to the context of the content, so there’s no reason to read it. Images important to the content should have descriptions of what the image is of — especially if there are words in it. But in general, don’t use images when nicely formatted text will do.
- This may be a good time to mention that we’re looking for talent. Come see me afterwards if you’re interested. But essentially, we all know that for most sites, the initial landing page is not the home page. If you don’t include context in the title, you’re missing an opportunity to provide vital context.
- No code here. Modern browsers allow users to adjust font sizes — and you can make sure you’re using EMs, to make it more likely the display will remain good. It’s going to be tough to be perfect, and there will be a limit — but make sure nothing’s getting cut off, running behind images, and the like. And remember when we used to offer different size options? Know how a screen reader translates that? “Ay ay ay.” Aye yai yai.
- The first example adds a label, relating the text to the form field. The second indicates that the form field is required. Again, this is built in. It takes a bit more work to implement… but not much more. By the way “WAI-ARIA, the Accessible Rich Internet Applications Suite” is a proposed standard. And, as we’ll talk about in a couple minutes, it’s application has much broader uses.
- This also relates to the ARIA specification. “ARIA landmarks identify significant page areas, giving them meaning and making them more keyboard navigable. There are several available landmark types, but simply adding 3 of them – main, navigation, and search – can greatly enhance the accessibility of your page. Find the elements on your page that surround or contain the main body content, main navigation, and site search (this one will probably be a <form> element) and add the appropriate landmark role attribute (role="main", role="navigation", or role="search". If your site uses HTML5 <main> or <nav>, add the role to these elements.” Source: http://webaim.org/blog/10-easy-accessibility-tips/
- This relates to landmarks: let people skip information that doesn’t relate to them. Let’s take a look at what that looks like. [Show MIUSA.org] Don’t use TABINDEX, though. Just structure your navigation so it makes sense. Not sure? Simulate a screen reader by tabbing through your page.
- We’ve spent a lot of time addressing visual impairment, but hearing is an issue, too. Your video isn’t doing much to engage your audience if they aren’t provided with a text alternative.
- This is also key for good for mobile: if you have trouble clicking a link with your finger, then it’s probably not accessible. [SHOW MIUSA.org AGAIN]
- Congratulations, you’ve made it to the point where we get to make fun of, um, critique other people’s websites. Let’s starts with WWF.
- So, you might ask what’s my idea of a better content model for accessibility? Let’s take a look at what Medium’s doing. The focus is on the content. Remember the 4 broad categories? Visual: Easy to add good ALT text to the images. Auditory: No problem reading through it: no distracting links or the like. Motor: Just need to scroll down and occasionally click. Cognitive: The focus is on the content… until you get to the bottom. The content has fulfilled its purpose and hopefully met the user’s motivation. (I mean, “The Physics of the Death Star”? You’re welcome.) But at the bottom, there are layered calls to action. By eliminating the distractions, placing the focus on the content, you put the focus on the user herself. And that’s what this work we do is all about.
- Landing in Los Angeles story. If we architect our sites in a way that prevents anybody from accessing the information they need, then we’re doing it wrong. (Flickr Photo: https://www.flickr.com/photos/lockergnome/119444876 (Chris Pirillo))
- Yes, we’ve been talking extensively about how to make our sites more accessible for people with disabilities. As I said at the top, we need to make sure our websites are useful to everybody. So we need to consider accessibility in the broader context.
- Source: http://www.pewinternet.org/2012/06/26/main-findings-9/ Flickr: https://www.flickr.com/photos/htakashi/8591987743
- Source: http://www.pewinternet.org/2012/06/26/main-findings-9/ Flickr: https://www.flickr.com/photos/info_grrl/11191115075
- Flickr: http://www.flickr.com/photos/freepress/6641427911/
- Source: http://www.pewinternet.org/2012/06/26/main-findings-9/ Flickr: https://www.flickr.com/photos/declanjewell/2101598028
- Source: http://www.pewinternet.org/2012/06/26/main-findings-9/ Flickr: https://www.flickr.com/photos/janoma/4601320907
- Source: http://www.mckinsey.com/insights/business_technology/disruptive_technologies Flickr: https://www.flickr.com/photos/derekolson/2426200855
- Phones are so ubiquitous now, it’s easy to forget that nobody really saw the mobile revolution coming. And we don’t really know what’s coming next. But I’ll hazard a guess.
- But I suspect audio interfaces are going to play a big role. Source: http://s3.amazonaws.com/posttv-thumbnails/PIC_AppleCarPlay.jpg
- Amazon’s Echo speaker is going to let you ask it to gather information. The good news is that if you have accessible content, you’ll have gone a long way to future proofing it. Image: http://cdni.wired.co.uk/1240x826/d_f/echo-speaker.jpg
- Here’s a super bonus extra tip. Microformats are essentially an extension of the idea of the ALT tag: they provide information about information, to explain the meaning of individual pieces of content. By doing this, we’ll be letting machines do what they do even better — including accessibility devices. Source: http://en.wikipedia.org/wiki/Microformat#Examples
- To realize the promise of the Internet, we need to make sure everybody can access and interpret the information we’re putting out into the world.
- Most of the resources I mentioned today are linked to from the presenter notes in the slide deck, so feel free to download them.