Download as PDF, PPTX
![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](https://image.slidesharecdn.com/diyaccessibility-130814185153-phpapp02/85/Diy-accessibility-22-320.jpg)
![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](https://image.slidesharecdn.com/diyaccessibility-130814185153-phpapp02/85/Diy-accessibility-24-320.jpg)
Uploaded byCaleb Tang
Diy accessibility
The document provides an agenda and overview for a workshop on DIY accessibility. It discusses defining accessibility and looking at various disabilities and the web. It then outlines the agenda for the workshop, which includes using the Web Accessibility Toolbar to manually check websites for accessibility issues related to images, typography, links, titles, and tables. Attendees will learn how to use the toolbar to evaluate websites and identify issues that may impact users with disabilities. The document provides guidance on what to look for in each area and steps to use the toolbar to evaluate them.
Diy accessibility
- 1. HCID2013 DIY Accessibility April2013 Caleb Tang User Experience | Accessibility Consultant
- 2. • Define Accessibility • Disability andthe Web • DIY tools • Let’s do it • Next steps Agenda 2 @calebtang
- 3. What is Accessibility? Accessibilitymeans 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. Today we aregoing to look at manual checks 4 @calebtang
- 5. The Ecology 5 @calebtang DefineAccessibility
- 6. • Define Accessibility • Disability andthe Web • DIY tools • Let’s do it • Next steps Agenda 6 @calebtang
- 7. Visual Impairment Types ofvisual impairment • Blindness • Low vision: macular degeneration, glaucoma, diabetic retinopathy, cataract • Colour-blindness: red, green, blue or no colour deficiencies More about visual impairment • http://webaim.org/articles/visual/ • http://www.inclusivedesigntoolkit.com/ betterdesign2/simsoftware/ simsoftware.html How do they use the computer? • http://www.bbc.co.uk/accessibility/guides/ vision_index.shtml • http://www.bbc.co.uk/accessibility/guides/ blind_index.shtml Disability and the Web 7 @calebtang
- 8. Hearing Impairment Types ofhearing impairment • Mild, medium, severe, profound • Conductive hearing loss, neural hearing loss, high tone hearing loss, low tone hearing loss More about hearing impairment • http://webaim.org/articles/auditory/ • http://www.inclusivedesigntoolkit.com/ betterdesign2/UChearing/hearing.html How do they use the computer? • http://www.bbc.co.uk/accessibility/guides/ hearing_index.shtml Disability and the Web 8 @calebtang
- 9. Cognitive Impairment Types ofcognitive impairment • Memory, problem solving, attention, reading, linguistic, verbal comprehension, maths comprehension, visual comprehension More about cognitive impairment • http://webaim.org/articles/cognitive/ How do they use the computer? • http://www.bbc.co.uk/accessibility/guides/ words_index.shtml Disability and the Web 9 @calebtang
- 10. Motor Impairment Types ofmotor 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 • http://webaim.org/articles/motor/ How do they use the computer? • http://www.bbc.co.uk/accessibility/guides/ movement_index.shtml Disability and the Web 10 @calebtang
- 11. • Define Accessibility • Disability andthe Web • DIY tools • Let’s do it • Next steps Agenda 11 @calebtang
- 12. Step 1: Weare 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 http://www.paciellogroup.com/ resources/wat/ie Step 3: Pick your website and start using the toolbar DIY tools
- 13. • Define Accessibility • Disability andthe Web • DIY tools • Let’s do it • Next steps Agenda 13 @calebtang
- 14. What do welook 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. Step 1: Loadthe 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. Practice: Is thisinformative 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. What do welook 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. Step 1: Onthe 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. Step 1: Onthe 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. Step 1: Onthe 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. What do welook 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. Step 1: Onthe 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. What do welook 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. Step 1: Onthe 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. What do welook 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. What do welook 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. What do welook 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. There are moreelements 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. • Define Accessibility • Disability andthe Web • DIY tools • Let’s do it • Next steps Agenda 29 @calebtang
- 30. These checks willnot make your site fully accessible, they just help you to avoid critical barriers 30 @calebtang
- 31. Involve domain expertsand test your websites with people with disabilities 31 @calebtang
- 32. More references For moreinformation on disability • AbilityNet’s factsheets (http://www.abilitynet.org.uk/factsheets) • WebAIM’s articles (http://webaim.org/articles/) If you are not sure, seek help from the community • Webaim mailing list (http://webaim.org/discussion/) Guidelines and standards • WCAG 2 (Full: http://www.w3.org/TR/WCAG/, Quick ref: http://3pha.com/ wcag2/) • BS8878 (http://shop.bsigroup.com/en/ProductDetail/? pid=000000000030180388) Next steps @calebtang32
- 33.