Diy accessibility


Published on

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Diy accessibility

  1. 1. HCID2013 DIY Accessibility April 2013 Caleb Tang User Experience | Accessibility Consultant
  2. 2. • Define Accessibility • Disability and the Web • DIY tools • Let’s do it • Next steps Agenda 2 @calebtang
  3. 3. What is Accessibility? Accessibility means having equal access to web-based information and services regardless of physical or developmental abilities or impairments Accessibility toolkit •  Web Content Accessibility Guidelines •  Automated checks •  Manual checks •  Expert reviews using assistive technologies •  User testing with disabled people •  Co-design, focus groups, personas… Define Accessibility 3 @calebtang
  4. 4. Today we are going to look at manual checks 4 @calebtang
  5. 5. The Ecology 5 @calebtang Define Accessibility
  6. 6. • Define Accessibility • Disability and the Web • DIY tools • Let’s do it • Next steps Agenda 6 @calebtang
  7. 7. Visual Impairment Types of visual impairment •  Blindness •  Low vision: macular degeneration, glaucoma, diabetic retinopathy, cataract •  Colour-blindness: red, green, blue or no colour deficiencies More about visual impairment • • betterdesign2/simsoftware/ simsoftware.html How do they use the computer? • vision_index.shtml • blind_index.shtml Disability and the Web 7 @calebtang
  8. 8. Hearing Impairment Types of hearing impairment •  Mild, medium, severe, profound •  Conductive hearing loss, neural hearing loss, high tone hearing loss, low tone hearing loss More about hearing impairment • • betterdesign2/UChearing/hearing.html How do they use the computer? • hearing_index.shtml Disability and the Web 8 @calebtang
  9. 9. Cognitive Impairment Types of cognitive impairment •  Memory, problem solving, attention, reading, linguistic, verbal comprehension, maths comprehension, visual comprehension More about cognitive impairment • How do they use the computer? • words_index.shtml Disability and the Web 9 @calebtang
  10. 10. Motor Impairment Types of motor impairment •  Injury: Spinal cord injury, loss or damage of limbs •  Diseases: Cerebral palsy, muscular dystrophy, multiple sclerosis, spina bifida, ALS, arthritis, Parkinson’s disease, essential tremor More about motor impairment • How do they use the computer? • movement_index.shtml Disability and the Web 10 @calebtang
  11. 11. • Define Accessibility • Disability and the Web • DIY tools • Let’s do it • Next steps Agenda 11 @calebtang
  12. 12. Step 1: We are going to use Internet Explorer for this exercise. Alternative toolbars are available for other browsers Web Accessibility Toolbar (WAT) by Paciello Group 12 @calebtang Step 2: Download and install WAT Toolbar from resources/wat/ie Step 3: Pick your website and start using the toolbar DIY tools
  13. 13. • Define Accessibility • Disability and the Web • DIY tools • Let’s do it • Next steps Agenda 13 @calebtang
  14. 14. What do we look for in images? Images may not be easily perceived by people with visual impairment or sometimes cognitive impairment. To make them accessible, alternative texts are added to the HTML code as a way to describe the image. There are many types of images and alternative texts can be treated differently depending on their context. •  Informative: Alt text should describe the message of the image •  Decorative or supplementary: They should just have an empty alt text •  Groups of images: Normally found in maps. The first image should have descriptive alt text and the following should have alt text •  Image of texts: Alt text should be equivalent to the texts in the image •  Image link: Provide title to the link and leave the image alt text empty 14 @calebtang Images Let’s do it
  15. 15. Step 1: Load the webpage you wish to check. On the toolbar, click’Show images’under the ‘Images’tab Images 15 @calebtang Step 2: you will see‘alt text’ displayed for each image. If you don’t see one, they are implemented as background images, which won’t be read out by screen readers. Step 3: Consider if those images are informative or decorative. If you feel that the image provide additional information to the texts, then its informative, otherwise its decorative Let’s do it
  16. 16. Practice: Is this informative or decorative? Images (cont.) 16 @calebtang Practice: What about this? This is a link image. The‘alt text’ provides alternative to the text images and the link title says ‘Sign in to Rightmoveplus’. What if the alternative text is empty (alt=“”)? Is it still acceptable? Practice: The top hero image does not have an‘alt text’ detected, what could it be? It’s a background image. Is it acceptable? The second hero image has an alt text of‘My dream home’, while the image texts on the image says‘If you have a dream, we have the home. Watch the advert’ Let’s do it
  17. 17. What do we look for in typography? Typography helps define the structure of the page. Headings, paragraphs, list items, quotes etc. are ways to help chunk content so that they are meaningful, easier to scan and read. •  All typographic elements should semantically coded. For example, a heading should be coded using <h1> to <h6>, list items should be <li> or quotes should be <blockquote>. •  Headings: Ideally, they are hierarchical, <h1> followed by <h2>, <h3> etc. •  Resize: Text shouldn’t be coded using‘px’because they are not resizable. Consider using other measurement unit such as %, em, pt 17 @calebtang Typography Let’s do it
  18. 18. Step 1: On the toolbar, click ‘Heading Structure’under the ‘Structure’tab Typography: Headings 18 @calebtang Step 2: A heading structure report is presented. There are headings, so it’s a good thing. They are presented in hierarchy, but not ideal. <h3> could be <h2> Step 3: Check if those headings represent the structure of the page visually. Note: There is no one way to define the structure. Well thought out and consistent structure will benefit Accessibility, Responsive Design as well as SEO Let’s do it
  19. 19. Step 1: On the toolbar, click ‘List items’under the‘Structure’ tab Typography: Lists 19 @calebtang Step 2: You will see all the lists that has been coded as list items highlighted. Scan the page to see if any of the lists on the page are not highlighted. If so, then you need to inform the developer Step 3: Navigation is considered a list of links although they don’t look like a list visually. Ensure primary nav, secondary, menu, footer etc. are also coded as lists Note: Screen reader and voice recognition software allow users to highlight just list items through a command. It will help them use the website better if they are predictable Let’s do it
  20. 20. Step 1: On the browser‘Page’ tab, click‘Text Size’ and select ‘Largest’ Typography: Resize 20 @calebtang Step 2: See if all the texts on page has been enlarged. In this case, they are still the same. So the developer will need to work on this. Note: Not all people with visual impairment use screen readers. Depending on their severity, they may just need to see larger texts. This is particularly relevant to older people and also people using small screens. Let’s do it
  21. 21. What do we look for in links? A link is designed to take user from one page to another. It can also trigger a scripting event such as a lightbox popup, content refresh, tabs etc. Links are, in another word, a call-to-action. They may look like a link or a button through CSS. It is important to make sure they are descriptive. •  A link to another page: text should describe the destination page •  A link to trigger a scripting event: text should describe the purpose of the event •  A link for an image: image ‘alt text’ can be empty (alt=“”) and the link title should describe the destination or purpose depending on the call to action 21 @calebtang Links Let’s do it
  22. 22. Step 1: On the toolbar, click’ List links [new window]’under the‘Doc Info’tab Links 22 @calebtang Step 2: You will see a new window listing all the links, image‘alt text’, url, title and target in a form of table. Read the lists on the table and see if they make sense to you. Practice: You may see multiple ‘more info’links in some pages. Ideally the link says‘more info about renting’, but it is acceptable to have the‘…about renting’as title Let’s do it
  23. 23. What do we look for in titles? There are two types of title: •  Page title: this can be found under <title> tag on the HTML code. It is the first thing a screen reader reads out, it is displayed on search engine results pages, and it is presented on the frame of the browser. For these reasons, they have to be unique and descriptive •  Title attribute: this can be found supplementing all HTML tag (<a title=“title here”>). You may not see them as visible on the page, but they are visible to all assistive technologies. You occasionally see them as a tooltip in some browsers. They can provide supplementary information but beware of over doing it as it can be annoying when a screen reader talks too much 23 @calebtang Titles Let’s do it
  24. 24. Step 1: On the toolbar, click’ Page Information [new window]’ under the‘under the Doc Info’ tab. Alternatively you can just read the title bar on top of the browser Titles 24 @calebtang Step 2: On the toolbar, click’ Show Titles’under the‘under the Doc Info’tab. Step 3: Similar to image‘alt text’you will see the titles presented. Check if they are supplementing or actually just repeating Let’s do it
  25. 25. What do we look for in tables? There are two types of tables •  Layout tables: Developers sometimes use tables to control the layout of the page. As long as they are coded as layout table (ie. No <th> and just <td>), and they make sense when linearised, they are fine to use. But, hey its 2013, web technologies have progressed to table-less layout •  Data tables: Used to display content in tabular way, similar to Excel. Sometimes they can be very complex and additional coding is needed to help provide equivalent semantics (i.e. id, scope, colspan, rowspan attributes) 25 @calebtang Tables Let’s do it
  26. 26. What do we look for in colour? Almost one in four men and one in three women are colour blind. Colour should not be the only way to convey information. Colour can be supplemented by other cues such as text, shape, icons etc. To ensure that your content can be read by users with colour blindness, the colour contrast between the texts and background should be sufficient and legible 26 @calebtang Colour Let’s do it
  27. 27. What do we look for in consistency? Good design should be consistent. People with disabilities may learn to form a mental model as they use your website, therefore consistency is key to help them use your site more easily. Reusable assets on your websites such as navigation, patterns, naming convention, behaviour, metaphors etc. should all be consistent as possible. 27 @calebtang Consistency Let’s do it
  28. 28. There are more elements to check… •  Forms •  AJAX and custom controls •  Language •  HTML code validation •  Keyboard usability •  Audio and video 28 @calebtang Other aspects to check Let’s do it…next time
  29. 29. • Define Accessibility • Disability and the Web • DIY tools • Let’s do it • Next steps Agenda 29 @calebtang
  30. 30. These checks will not make your site fully accessible, they just help you to avoid critical barriers 30 @calebtang
  31. 31. Involve domain experts and test your websites with people with disabilities 31 @calebtang
  32. 32. More references For more information on disability •  AbilityNet’s factsheets ( •  WebAIM’s articles ( If you are not sure, seek help from the community •  Webaim mailing list ( Guidelines and standards •  WCAG 2 (Full:, Quick ref: wcag2/) •  BS8878 ( pid=000000000030180388) Next steps @calebtang32
  33. 33. Thank you. 33 @calebtang