민간부문의 장애인 웹 접근성 제고 세미나 대한상공회의소 국제회의실

Web in Extreme Environment: Beyond Cross-Browsing

Greg Shin LG Electronics / Corporate Learning Center LG전자 러닝센터 신승식 http://gregshin.pe.kr/ November 3, 2008 Increasing diversity in web access

Imagine that you are facing web in/with:

2/19 Digital divide and

• Growth rate of Africa's mobile phone industry is double the global rate. (according to ITU)

• Libya's growth: 3780% in 2008 (according to )

• Mobile phones penetration > PC penetration in many countries (http://en.wikipedia.org/wiki/Mobile_phone_penetration_rate )

• Mobile Web for Social Development Interest Group in MWI, W3C

(Photo source: The Economist) (Source: http://www.opera.com/mobile_report/2008/09/ )

3/19 Characteristics of mobile Web

Limitations Advantages

• Small viewport • Personal • Low memory capacity • Personalizable • Low bandwidth • Portable • Stripped-down • Connected • Cost • Location-awareness • User goals • One-hand operation • Advertising • Always on • Different User Experience • Universal alerting device

(Excerpted from http://www.w3.org/TR/mobile-bp/ )

4/19 W3C Mobile Web Initiative

Bad user experience when accessing Web on phone • Mobile Web Best Practices for Web Developers • MobileOK for Web sites following Best Practices • Education and Training High Costs when developing mobile Web content • Improve Device Description Repository technology • Test suites to improve browser interoperability (Image source: http://www.w3.org/Mobile/About ) Digital divide in developing countries • Bridge the digital divide and provide minimal service through mobile device

5/19 Delivery Context

• One Web • Adaptation – Server Side: , DeepFish – In-Network: Google M, PhoneFavs, Skweezer – Client Side: , , Android, , , Iris Browser, for S60, Nokia S40 Series Browser, Infraware • Establishing Context – CC/PP (Composite Capability/Preference Profiles), UAProf, CSS Media Queries • Choice of User Experience – Desktop focused – Mobile focused • Default Delivery Context

Source: http://www.w3.org/TR/mobile-bp/ and more.

6/19 Web Content Accessibility and Mobile Web

Web sites can more efficiently meet design goals when developers understand the significant overlap between making a Web site accessible for a mobile device and for people with disabilities.

Common Barriers

Color, page size, scrolling, visual 1. Content must be perceivable. presentation, text alternatives, text input, table layout, CSS

2. Interface components in the content must be operable. Mouse, page title, serial access, link purpose

3. Content and controls must be Complexity, popup window, understandable. flashing/moving/auto-refreshing

4. Content should be robust enough to work with current Valid markup, scripting, plugin and future user agents.

7/19 Color

Do not rely on colors only. Make sure enough color contrast.

Color Display Black & White Outdoors

8/19 Layout

Make your text readable enough in any environments.

Opera Mini: Naver Opera Mini: Naver, Zoom Google M: ZDNet Korea

9/19 Magnification Scheme 1 • 3 • Opera 9.6 • Enlarge image size • Maintain page layout • Enlarge text (vector)

10/19 Magnification Scheme 2 • Safari 3 • Chrome 0.2 • Firefox 3 - Zoom Text Only • Maintain image size • 7 – View – Text Size • Maintain page layout • POLARIS Browser 7 - Adjust Font Size • Enlarge text (vector)

11/19 Magnification Scheme 3 • Internet Explorer 7 • POLARIS Browser 7 • Enlarge image size • Break page layout • Enlarge text (vector)

12/19 Magnification Scheme 4 • Opera Mini • Enlarge image size • Maintain (lousy) page layout • Enlarge text (bitmap)

13/19 Magnification Scheme 5 • • Maintain image size • POLARIS Browser 7 - Adjust Font Size • Break the page layout (keeping page layout) • Enlarge only relative fonts

Skweezer Google M (fixed font size) PhoneFavs

* Above photos are not taken from the real mobile phone but composed using the screenshots at PC browser.

14/19 Magnification Scheme 6 • PC based general magnification software(s) • Real magnifier • Enlarge image size • Enlarge page (layout) itself • Enlarge text (bitmap) • Narrow the visual field

15/19 Suggestions for the "better" magnification

• Content developers should: – Avoid horizontal scroll as much as possible even in the worst condition – Use / elastic layout (instead of fixed pixel-precision design) – Use relative font size – Apply max-width, max-height CSS properties for a large image – Make the page simple as possible (eg. Two-column layout is better than three- column layout) • User agent developers should: – Provide magnifying options – Provide handy ways to magnify • Mobile phone developers should: – Provide handy ways to magnify – Provide handy ways to scroll

16/19 Second Window

• More desktop users block pop-up windows. • Pop-up windows are distracting for the blind, people with low vision, people with cognitive disabilities, people with motor disability and me! • Almost all mobile browsers do not support unexpected pop-ups. • Most of mobile browsers do not support new window link target.

17/19 User input

• Make user input as simple as possible. • Browsing/selecting is generally easier than searching.

Requires typing long text Can search and browse

Image source: http://www.webcredible.co.uk/user-friendly- resources/web-usability/mobile-guidelines.shtml

18/19 Conclusion

• Web sites can more efficiently meet both goals when developers understand the significant overlap between making a Web site accessible for a mobile device and for people with disabilities. • Users of mobile devices and people with disabilities experience similar barriers when interacting with Web content. • Following two guidelines (Web Content Accessibility Guidelines and Mobile Web Best Practices) makes your Web content more accessible to everyone regardless of situation, environment, or device. Source: http://www.w3.org/WAI/mobile/

• Try to be inclusive of extreme environment and users when developing a Website to assure accessibility from people with disability and people with a brand new mobile device.

19/19