hku news mobile app - ogcio · hku news mobile app 1. 2. hku news an extension of hku website the...
TRANSCRIPT
![Page 1: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/1.jpg)
Experience Sharing on Developing an Accessible App
Presented by: Alvis Ko
http://www.linkedin.com/in/alvisko
HKU News Mobile App
1
![Page 2: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/2.jpg)
2
![Page 3: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/3.jpg)
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
![Page 4: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/4.jpg)
One Single Sourcefor Multiple Media
Website EmailMobile App
4
![Page 5: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/5.jpg)
Our Target: Gold Award
HKU Website already received the Gold Award last year.
5
![Page 6: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/6.jpg)
The Challenge is:Being the first mover
What’s app accessibility exactly?
Who has the skill and experience?
6
![Page 7: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/7.jpg)
__________
__________ __________
The essential elements
SupportiveManagement
Have the awareness & support the
initiative
Collaborative Team
App Owner +
Content Owner +
Developer
OGCIO’s Help
Assessment and consultation
7
![Page 8: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/8.jpg)
Implementation Initial
Assessment
Development & Test
OGCIO Assessment
Refine
OGCIO Re-assessment
Done!
2 months 2 months
8
![Page 9: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/9.jpg)
Major Changes
9
![Page 10: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/10.jpg)
Major Changes
Color Contrast Text Size Switcher
Control / Content Sequence Meaningful Alt Text
Buttons Accessibility Contact Page
Correct tags
10
![Page 11: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/11.jpg)
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
![Page 12: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/12.jpg)
Control / Content Sequence
From Left to Right
From Top to Down
12
![Page 13: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/13.jpg)
Buttons
Buttons should indicated as button
Read in meaningfuldescription
“Enlarge fonts Size”
“Go to Next
Article”
“Back to News Listing"
13
![Page 14: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/14.jpg)
Correct Tag
Add Language tag toindicate the text is in Chinese.
14
![Page 15: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/15.jpg)
Text Size Switcher
15
![Page 16: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/16.jpg)
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
![Page 17: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/17.jpg)
Accessibility Contact Page
17
![Page 18: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/18.jpg)
How to Test?
Color Check
Code Check
Human Test with iOS’s Voice Over Features
18
![Page 19: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/19.jpg)
A Few Advices
19
![Page 20: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/20.jpg)
Develop Native App
Sometimes hybrid/html5 app cannot read correctly during voice over when there is dynamic content
1
20
![Page 21: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/21.jpg)
2 Firstly, open your eyesFinally, close your eyes
Understand how VIP see the world Perform testing like a VIP
21
![Page 22: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/22.jpg)
Google is your friend
Youtube too! Watch video for demo the gesture for voice over
3
22
![Page 23: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/23.jpg)
You may need to update historical content
Beware the schedule
4
23
![Page 24: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/24.jpg)
Reserve extra buffer time for testing & issue fixing
Unless you 100% know what to do
5
24
![Page 25: HKU News Mobile App - OGCIO · 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](https://reader036.vdocuments.site/reader036/viewer/2022062403/6053418afcb1b809a322640e/html5/thumbnails/25.jpg)
Thank You! Enjoy!
25