diy accessibility

Download Diy accessibility

Post on 27-Jan-2015

110 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. HCID2013 DIY Accessibility April 2013 Caleb Tang User Experience | Accessibility Consultant

2. Define Accessibility Disability and the Web DIY tools Lets do it Next steps Agenda 2 @calebtang 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. Today we are going to look at manual checks 4 @calebtang 5. The Ecology 5 @calebtang Define Accessibility 6. Define Accessibility Disability and the Web DIY tools Lets do it Next steps Agenda 6 @calebtang 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 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 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 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 of cognitive 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 of motor impairment Injury: Spinal cord injury, loss or damage of limbs Diseases: Cerebral palsy, muscular dystrophy, multiple sclerosis, spina bifida, ALS, arthritis, Parkinsons 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 and the Web DIY tools Lets do it Next steps Agenda 11 @calebtang 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 http://www.paciellogroup.com/ resources/wat/ie Step 3: Pick your website and start using the toolbar DIY tools 13. Define Accessibility Disability and the Web DIY tools Lets do it Next steps Agenda 13 @calebtang 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 dierently 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 Lets do it 15. Step 1: Load the webpage you wish to check. On the toolbar, clickShow imagesunder the Imagestab Images 15 @calebtang Step 2: you will seealt text displayed for each image. If you dont see one, they are implemented as background images, which wont 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 Lets do it 16. Practice: Is this informative or decorative? Images (cont.) 16 @calebtang Practice: What about this? This is a link image. Thealt 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 analt text detected, what could it be? Its a background image. Is it acceptable? The second hero image has an alt text ofMy dream home, while the image texts on the image saysIf you have a dream, we have the home. Watch the advert Lets do it 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 to , list items should be or quotes should be . Headings: Ideally, they are hierarchical, followed by , etc. Resize: Text shouldnt be coded usingpxbecause they are not resizable. Consider using other measurement unit such as %, em, pt 17 @calebtang Typography Lets do it 18. Step 1: On the toolbar, click Heading Structureunder the Structuretab Typography: Headings 18 @calebtang Step 2: A heading structure report is presented. There are headings, so its a good thing. They are presented in hierarchy, but not ideal. could be 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 Lets do it 19. Step 1: On the toolbar, click List itemsunder theStructure 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 dont 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 Lets do it 20. Step 1: On the browserPage tab, clickText 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. Lets do it 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 Lets do it 22. Step 1: On the toolbar, click List links [new window]under theDoc Infotab Links 22 @calebtang Step 2: You will see a new window listing all the links, imagealt 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 infolinks in some pages. Ideally the link saysmore info about renting, but it is acceptable to have theabout rentingas title Lets do it 23. What do we look for in titles? There are two types of title: Page title: this can be found under 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 (). 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 Lets do it 24. Step 1: On the toolbar, click Page Information [new window] under theunder 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 Titlesunder theunder the Doc Infotab. Step 3: Similar to imagealt textyou will see the titles presented. Check if they are supplementing or actually just repeating Lets do it 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 and just ), 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 c