HKU News Mobile App - OGCIO · HKU News Mobile App 1. 2. HKU News An extension of HKU Website The...
Transcript of 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