HKU News Mobile App - OGCIO · HKU News Mobile App 1. 2. HKU News An extension of HKU Website The...

Experience Sharing on Developing an Accessible App

Presented by: Alvis Ko

http://www.linkedin.com/in/alvisko

HKU News Mobile App

1

2

HKU News An extension of HKU Website

The hub of HKU News, Press Releases and Invitations

Already in the market before the Web AccessibilityRecognition SchemeBegan

3

One Single Sourcefor Multiple Media

Website EmailMobile App

4

Our Target: Gold Award

HKU Website already received the Gold Award last year.

5

The Challenge is:Being the first mover

What’s app accessibility exactly?

Who has the skill and experience?

6

__________

__________ __________

The essential elements

SupportiveManagement

Have the awareness & support the

initiative

Collaborative Team

App Owner +

Content Owner +

Developer

OGCIO’s Help

Assessment and consultation

7

Implementation Initial

Assessment

Development & Test

OGCIO Assessment

Refine

OGCIO Re-assessment

Done!

2 months 2 months

8

Major Changes

9

Major Changes

Color Contrast Text Size Switcher

Control / Content Sequence Meaningful Alt Text

Buttons Accessibility Contact Page

Correct tags

10

Color Contrast

17.9:1

7.2:1

13.9:1

5.4:1

10.2:1

9.3:1

6.7:1

12.2:1

Contrast ratio between

text and its background is at least 4.5:1

11

Control / Content Sequence

From Left to Right

From Top to Down

12

Buttons

Buttons should indicated as button

Read in meaningfuldescription

“Enlarge fonts Size”

“Go to Next

Article”

“Back to News Listing"

13

Correct Tag

Add Language tag toindicate the text is in Chinese.

14

Text Size Switcher

15

Meaningful Alt Text

Alt Text: “The four Residential Colleges (from left to right): Shun Hing College, Chi Sun College, Lap-Chee College, New

College”

16

Accessibility Contact Page

17

How to Test?

Color Check

Code Check

Human Test with iOS’s Voice Over Features

18

A Few Advices

19

Develop Native App

Sometimes hybrid/html5 app cannot read correctly during voice over when there is dynamic content

1

20

2 Firstly, open your eyesFinally, close your eyes

Understand how VIP see the world Perform testing like a VIP

21

Google is your friend

Youtube too! Watch video for demo the gesture for voice over

3

22

You may need to update historical content

Beware the schedule

4

23

Reserve extra buffer time for testing & issue fixing

Unless you 100% know what to do

5

24

Thank You! Enjoy!

25