Easy Guide to Building No Barrier Web Sites

Transcription

1 Easy Guide to Building No Barrier Web Sites

2 Content 1) Introduction 2) What is Web Accessibility 3) Current Situation 4) Benefits of Accessible Sites 5) Different Disabilities that can affect Web Accessibility 6) Suggested Solutions 7) Useful Links

3 Introduction In today s knowledge-based economy anyone, regardless of background or upbringing, who can master knowledge and be innovative in gathering information have a chance to succeed. Information is power and the Internet is a media that delivers information in an unprecedented manner, thus enabling people at all levels of society. However, when it comes to the poor and disabled there is a widening digital divide in web information access. iproa is most concerned with the negative impact of the growing digital divide amongst poor and disabled people. It is our view that government and business cannot ignore the issue of the digital divide. In Hong Kong, there are some 1.4 million poor and 430,000 disabled. On top of this group there are an ever growing number of less-educated, new immigrants. iproa believes that the digital divide cannot be bridged by solely improving the knowledge-base. We must ensure all individuals have the right to obtain information on a common basis, as this is an inalienable human right. In this context, the iproa Web Care Committee is focused on improving Internet accessibility. The Web Care Committee has organized a number of initiatives in this regard, such as producing this Easy Guide. From purely a technical point of view, iproa feels web accessibility can be improved in two manners. First, increase the number of websites with enhanced accessibility. Second, promote the Easy Guide to web designers in an effort to develop more accessible webpages. Web accessibility in Hong Kong remains low and one reason for this is that designers have limited knowledge and lack education about web accessibility, in particular when it comes to the poor and disabled. The Easy Guide lists the issues of the disabled when using the Internet and promotes public understanding of the difficulties faced by the disabled when using the Internet. iproa sees the development of simple and straightforward web accessibility as a win-win situation. When web site accessibility is high, more people will use the content. So, it is advantageous to design and maintain a simple user interface with easy to surf content. In Easy Guide we provide suggestions on how best to improve the accessibility of a web page.

4 What is Web Accessibility Web accessibility means that people with disabilities can use the Web. People with disabilities, including visual, auditory, physical, speech, cognitive, and neurological disabilities, can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits people without disabilities. For example, a key principle of Web accessibility is designing websites and software that are flexible to meet different user needs, preferences, and situations. This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with temporary disabilities such as a broken arm, and people with changing abilities due to aging. Web accessibility, therefore, is about designing and adapting web pages in such a way that disabled people can use the web using these technologies and adaptive strategies.

5 Current Situation According to the survey conducted by Harris Poll (www. harrispollonline.com), a disabled person spends twice the time of other people to source the information they need when using the Internet. On the other hand, the Harris Poll survey indicates that the Internet has nonetheless greatly improved the quality of life of the disabled. Based on a research conducted by iproa on the online usage behavior of the disabled, we discovered that the primary reasons for the disabled to go online are as follows: Information: Daily news, online radio, travel, leisure and job seeking Transactions: Payments, money transfer and online purchases Social: Text and voice messaging, and discussion group. It indicates that while web site accessibility was low amongst the disabled, they were pioneers of using online payment and online banking systems. Moreover, the research found that, not surprisingly, the disabled rely on the Internet to improve the quality of their social life more than the average individual.

6 Benefits of Accessible Sites Increase Website Traffic By removing identified obstacles as many as possible and focusing on simple design based on real user needs allow the website offer information more effectively. The more people are able to access the website, the more potential business and/or exposure can be gained. Increase Accessibility to More People Adapting an existing website or designing a new website with web standards and accessibility in mind opens up business/corporate information to more people. Using one site fits all approach to create website with the application of usability heuristics, web standards and accessibility guidelines allows media and different people to access easily. Higher Ranking by Search Engines Accessible websites have more potential to be ranked higher by search engines and web crawlers than nonaccessible sites because of a higher traffic. This offers more business opportunities and/or more exposure to the website. Increase User s Involvement Usability and accessibility are inter-related. Designing for diversity not only increases the website traffic but also increases the users involvement.

7 Different Disabilities that can affect Web Accessibility Visual disabilities Types of Disabilities Barriers Blindness I mages that do not have alternative text. Complex images (e.g.graphs or charts) that are not adequately described. Involves a substantial, uncorrectable loss of vision in eyes. Video that is not described in text or audio. Browsers and authoring tools that lack keyboard support for all commands. Non-standard document formats that may be difficult for their screen reader to interpret. Low Vision Involves poor acuity, tunnel vision, central field loss and clouded vision. Color blindness Includes individuals with lack of sensitivity to certain colors. Websites with absolute font sizes that cannot be easily changed. Web pages that, because of inconsistent layout, is difficult to navigate when enlarged, due to loss of surrounding context. Web pages, or images, that have poor contrast, and whose contrast cannot be easily changed through user override of author style sheets. Color that is used as a unique marker to emphasize text on a website. Text that inadequately contrasts with background color or patterns. Browsers that do not support user override of authors style sheets.

8 Hearing Impairments Types of Disabilities Deafness Involves a substantial uncorrectable impairment of hearing in ears. Barriers Lack of captions or transcripts of audio on the website, including webcasts. Lack of content-related images in pages full of text, which can slow comprehension for people whose first language may be a sign language instead of a written/spoken language. Lack of clear and simple language. Requirements for voice input on websites. Hard of hearing Involves mild to moderate hearing impairment. Lack of captions or transcripts for audio on the website including webcasts. Physical disabilities Motor disabilities Time-limited response options on Web pages. Includes weakness, limitations of muscular control, and limitations of sensation, joint problems, or missing limbs. Forms that cannot be tabbed through in a logical order. Browsers and authoring tools that do not support keyboard alternatives for mouse commands. Speech disabilities Speech disabilities Includes difficulty producing speech that is recognizable by some voice recognition software, either in terms of loudness or clarity. Websites that require voice-based interaction and have no alternative input mode.

9 Cognitive and neurological disabilities Types of Disabilities Barriers Visual and Auditory Perception Lack of alternative modalities for information on websites, e.g. lack of alternative text that can be converted to audio to supplement visuals, or the lack of captions for audio. Includes difficulty processing language or numbers, difficulty processing spoken language when heard and/or difficulty with spatial orientation. Attention deficit disorder Includes difficulty focusing on information. Intellectual disabilities Includes learning more slowly, or difficulty understanding complex concepts. Memory impairments Includes problems with shortterm memory, missing longterm memory, or some loss of ability to recall language. Mental health disabilities Includes difficulty focusing on information, or difficulty with blurred vision or hand tremors due to side effects from medications. Seizure disorders Includes some types of epilepsy (including photo-sensitive epilepsy) which are triggered by visual flickering or audio signals at a certain frequency. Distracting visual or audio elements that cannot easily be turned off. Lack of clear and consistent organization of websites. Use of unnecessarily complex language on websites Lack of graphics on websites. Lack of clear or consistent organization of websites. Lack of clear or consistent organization of websites. Distracting visual or audio elements that cannot easily be turned off. Web pages with absolute font sizes that cannot be enlarged easily. Use of visual or audio frequencies that can trigger seizures.

10 Silver Prize Suggested Solutions Problems and Suggested Solutions at a glance Speech disabilities Problem Solution Pop up windows: Provide text description of Top of the page and Close so that disabled users know this is a new window and have a way to exit. Trigger the users to read the latest appeared windows. Users have no idea this is a new window, and no instruction on how to jump to other pages. Image, banner (non text based) and hyperlink with URL or non descriptive explanation: User interprets all these image and hyperlink as equivalent subjects, which are meaningless for user. 10 Provide alternative text description, use ALT command.

11 Silver Prize Problem Solution Insufficient background and foreground color contrast: Test the colors used in web pages against a monochrome screen or a black and white printer. Ensure that a sharp contrast is displayed. The visually impaired are unable to distinguish the two colors. Auto-refresh feature: Trigger the user to refresh and re-read text from top line again. Users would get confused and lose the navigated position. Time limit: Re-fresh function upon user s request only or an option to disable the auto-refresh feature. Provide ways to adjust/turn off the time limit. Users are unable to complete tasks (read or use the content) in website within the time limit. Font size: People with visual impairment are unable to use Screen Magnifier to resize the characters. Do not set the font size attribute to a number of points or pixels but set it to a percentage for the default font size. 11

12 Gold Prize Problem Solution Complicated table: Break down the table into smaller sections. A complicated message that is hard to comprehend. Audio Content: Provide captions for all audio content. Hearing impaired could not access the auditory information. Chinese and English appears on same web page: Avoid putting two languages on the same page and allow users to switch between languages. An English user interprets the Chinese code as alien code and may make the computer system hang. Entry point flash and animation: Visually disabled do not know when will the flash and animation stopped. 12 Provide an alternative entry point that skips the flash section.

13 Gold Prize Problem Solution Keyboard Provide operation through a keyboard or keyboard interface. Web Pages with Predictable Operations Provide content in a predictable order in web pages and by making the behavior of functional and interactive components predictable Visually disabled could not use devices such as mouse that require eye-hand coordination, or have trouble finding or tracking a pointer indicator on screen. Users may become confused if components appear in different places on different pages. Input Assistance Users may have difficulties in creating error-free input. Compatibility Users are not able to programmatically determine or set the user interface components (e.g. elements, links and components generated by scripts), the name, role states, properties, and values; and notification of changes to these items is available to user agents, including assistive technologies. Provide error identification, description and suggestions if an input error is detected. Complete elements start and end tags, nest elements according to the specifications, avoid containing duplicate attributes, and any IDs are unique in content implemented using markup languages except where the specifications allow these features. 13

14 Excellence & Referral Award Excellence Award Fulfill Requirements of Sliver Prize and Gold Prize Pass Both Automatic Validators Recommended by the World Wide Web Consortium (W3C): HTML validator: CSS validator: Referral Award 1. A company/organization may refer other companies/organizations to participate in the program and the company/organization with the most referrals wins this Award Remarks: 14 A company being referred has to be new to this program and has never obtained any awards A company being referred will be counted as such once it submits a completed application The referred website must contain at least 10 web pages and us established for more than one month

15 Useful Links W3C How People with Disabilities Use the Web: W3C Web Accessibility Initiative Working Groups and Interest Groups: COI Usability Toolkit Beta: InfoUse Project of the National Institute on Disability & Rehabilitation Research Site: UCLA Disabilities and Computing Program: Boddy: 15