Diy accessibility

HCID2013 DIY Accessibility April 2013

Caleb Tang User Experience | Accessibility Consultant

• De!ne Accessibility

• Disability and the Web

• DIY tools

• Let’s do it

• Next steps

Agenda

2 @calebtang

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…

De!ne Accessibility

3 @calebtang

Today we are going to look at manual checks

4 @calebtang

The Ecology

5 @calebtang

De!ne Accessibility



• DIY tools

• Let’s do it

• Next steps

Agenda

6 @calebtang

Visual Impairment

Types of visual impairment •  Blindness •  Low vision: macular degeneration,

glaucoma, diabetic retinopathy, cataract

•  Colour-blindness: red, green, blue or no colour de!ciencies

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

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


hearing_index.shtml


8 @calebtang

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/


words_index.shtml


9 @calebtang

Motor Impairment

Types of motor impairment •  Injury: Spinal cord injury, loss or

damage of limbs •  Diseases: Cerebral palsy, muscular

dystrophy, multiple sclerosis, spina bi!da, ALS, arthritis, Parkinson’s disease, essential tremor

More about motor impairment •  http://webaim.org/articles/motor/


movement_index.shtml


10 @calebtang



• DIY tools

• Let’s do it

• Next steps

Agenda

11 @calebtang

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



• DIY tools

• Let’s do it

• Next steps

Agenda

13 @calebtang

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 !rst 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

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

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

What do we look for in typography? Typography helps de!ne 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

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 de!ne the structure. Well thought out and consistent structure will bene!t Accessibility, Responsive Design as well as SEO

Let’s do it

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

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

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

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

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 !rst

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

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

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 !ne 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

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

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

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



• DIY tools

• Let’s do it

• Next steps

Agenda

29 @calebtang

These checks will not make your site fully accessible, they just help you to avoid critical barriers

30 @calebtang

Involve domain experts and test your websites with people with disabilities

31 @calebtang

More references

For more information 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

@calebtang 32

Thank you.

33 @calebtang

Diy accessibility

Design

Transcript of Diy accessibility