Developer Guide for Accessible Mobile Application …...Developer Guide for Accessible Mobile Application Templates Scope 3-1 3. SCOPE This Document is a guideline for understanding

Office of the

Government Chief Information Officer

Developer Guide

for

Accessible Mobile Application Templates

Version: 1.0

December 2017

The Government of the Hong Kong Special Administrative Region

COPYRIGHT NOTICE

© 2017 by the Government of the Hong Kong Special Administrative Region

Unless otherwise indicated, the copyright in the works contained in this publication is

owned by the Government of the Hong Kong Special Administrative Region. You may

generally copy and distribute these materials in any format or medium provided the

following conditions are met –

(a) the particular item has not been specifically indicated to be excluded and is

therefore not to be copied or distributed;

(b) the copying is not done for the purpose of creating copies for sale;

(c) the materials must be reproduced accurately and must not be used in a misleading

context; and

(d) the copies shall be accompanied by the words “copied/distributed with the

permission of the Government of the Hong Kong Special Administrative Region.

All rights reserved.”

If you wish to make copies for purposes other than that permitted above, you should

seek permission by contacting the Office of the Government Chief Information Officer.

Developer Guide for Accessible Mobile Application Templates Distribution and Release

Distribution of Controlled Copy

Copy No. Holder

1 Internet (www.webforall.gov.hk)

Prepared By: Web and Mobile App Accessibility Support Team

Document Effective Date: 22 December 2017

www.webforall.gov.hk

Developer Guide for Accessible Mobile Application Templates Amendment History

Amendment History

Change

Number

Revision Description Pages

Affected

Revision

Number

Date

Developer Guide for Accessible Mobile Application Templates Table of Contents

TABLE OF CONTENTS

1. INTRODUCTION ................................................................................................................... 1-1

2. TERMS AND CONDITIONS................................................................................................. 2-1

3. SCOPE ...................................................................................................................................... 3-1

4. TARGET AUDIENCE ............................................................................................................ 4-1

5. DEVELOPMENT ENVIRONMENT .................................................................................... 5-1

5.1 PLATFORM AND DEVELOPMENT KIT ............................................................................ 5-1

5.2 COPYRIGHT OF THIRD PARTY / DEPENDENT LIBRARIES ..................................................... 5-1 5.3 SOURCE CODE ........................................................................................................................................................... 5-2

5.4 TESTING ENVIRONMENT ................................................................................................................................. 5-2

6. OVERVIEW OF THE TEMPLATE ..................................................................................... 6-1

6.1 INFORMATION ARCHITECTURE ................................................................................................................. 6-1 6.2 PERMISSION REQUIRED .................................................................................................................................... 6-3 6.3 ADOPTION OF ACCESSIBILITY DESIGN ............................................................................................... 6-3

7. USER INTERFACE OVERVIEW AND APP DESIGN...................................................... 7-1

7.1 USER INTERFACE DESIGN, APP FLOW AND CONTEXT ............................................................ 7-1 7.2 STANDARD SCREEN LAYOUT ...................................................................................................................... 7-3 7.3 ANDROID USER INTERFACE .......................................................................................................................... 7-4

7.3.1 Main Entrance ............................................................................................................... 7-5

7.3.2 Welcome Scene .............................................................................................................. 7-6

7.3.3 Information Scene .......................................................................................................... 7-7

7.3.4 Navigation Menu ......................................................................................................... 7-11

7.3.5 Bottom Menu ............................................................................................................... 7-12

7.3.6 Form Input ................................................................................................................... 7-14

7.3.7 Video and Audio Scenes .............................................................................................. 7-28

7.3.8 Settings ........................................................................................................................ 7-31

7.3.9 Contact Us Scene ......................................................................................................... 7-43

7.4 IOS USER INTERFACE ....................................................................................................................................... 7-45 7.4.1 Main Entrance ............................................................................................................. 7-46

7.4.2 Welcome Scene ............................................................................................................ 7-47

7.4.3 Information Scene ........................................................................................................ 7-48

7.4.4 Navigation Menu ......................................................................................................... 7-52

7.4.5 Bottom Menu ............................................................................................................... 7-53

7.4.6 Form Input ................................................................................................................... 7-55

7.4.7 Video and Audio Scenes .............................................................................................. 7-69

7.4.8 Settings ........................................................................................................................ 7-72

7.4.9 Contact Us Scene ......................................................................................................... 7-84

8. MAIN SCREEN ....................................................................................................................... 8-1

8.1 LANDING PAGE ........................................................................................................................................................ 8-1

8.1.1 Android Version ............................................................................................................ 8-1

8.1.2 iOS Version .................................................................................................................... 8-1

8.2 VERSION CHECKER .............................................................................................................................................. 8-2 8.2.1 Android Version ............................................................................................................ 8-2


8.2.2 iOS Version .................................................................................................................... 8-3

9. ONE-TIME SETUP WIZARD / WELCOME SCREEN ..................................................... 9-1

9.1 SLIDER TUTORIAL ................................................................................................................................................. 9-1 9.1.1 Android Version ............................................................................................................ 9-1

9.1.2 iOS Version .................................................................................................................... 9-1

9.2 ONE-TIME SETUP WIZARD .............................................................................................................................. 9-3 9.1.3 Android Version ............................................................................................................ 9-3

9.1.4 iOS Version .................................................................................................................... 9-3

10. INFORMATION LISTING .................................................................................................. 10-1

10.1 LISTING FRAMEWORK .................................................................................................................................... 10-1 10.1.1 Android Version .......................................................................................................... 10-1

10.1.2 iOS Version .................................................................................................................. 10-1

11. FORM INPUT........................................................................................................................ 11-1

11.1 SEMINAR LISTING - AUTO REFRESH ROLLING BANNER .................................................... 11-2 11.1.1 Android Version .......................................................................................................... 11-2

11.1.2 iOS Version .................................................................................................................. 11-3

11.2 FIND EVENT – DATE PICKER ...................................................................................................................... 11-5 11.2.1 Android Version .......................................................................................................... 11-5

11.2.2 iOS Version .................................................................................................................. 11-5

11.3 INPUT FORM - VALIDATION RULE AND ALERT MESSAGE ............................................... 11-6 11.3.1 Android Version .......................................................................................................... 11-6

11.3.2 iOS Version .................................................................................................................. 11-7

11.4 INPUT FORM ............................................................................................................................................................ 11-8

11.4.1 Android Version .......................................................................................................... 11-8

11.4.2 iOS Version .................................................................................................................. 11-9

11.5 INPUT FORM - TIMER ..................................................................................................................................... 11-10 11.5.1 Android Version ........................................................................................................ 11-10

11.5.2 iOS Version ................................................................................................................ 11-10

12. ONLINE MAP AND LOCATION LISTING ..................................................................... 12-1

12.1 ANDROID VERSION ............................................................................................................................................ 12-1 12.2 IOS VERSION ........................................................................................................................................................... 12-1

13. VIDEO AND AUDIO LISTING .......................................................................................... 13-1

13.1 VIDEO CONTROLLER ........................................................................................................................................ 13-1 13.1.1 Android Version .......................................................................................................... 13-1

13.1.2 iOS Version .................................................................................................................. 13-1

14. SETTINGS ................................................................................................................................. 14-1

14.1 LANGUAGE SETTING ........................................................................................................................................ 14-1 14.1.1 Android Version .......................................................................................................... 14-1

14.1.2 iOS Version .................................................................................................................. 14-1

14.2 FONTSIZE SETTING ............................................................................................................................................ 14-2 14.2.1 Android Version .......................................................................................................... 14-2

14.2.2 iOS Version .................................................................................................................. 14-2

14.3 BACKGROUND MUSIC ..................................................................................................................................... 14-3 14.3.1 Android Version .......................................................................................................... 14-3

14.3.2 iOS Version .................................................................................................................. 14-3


14.4 PUSH NOTIFICATION ........................................................................................................................................ 14-4 14.4.1 Android Version .......................................................................................................... 14-4

14.4.2 iOS Version .................................................................................................................. 14-4

14.5 AUTO UPDATE WIZARD ................................................................................................................................. 14-5 14.5.1 Android Version .......................................................................................................... 14-5

14.5.2 iOS Version .................................................................................................................. 14-5

15. CONTACT US ....................................................................................................................... 15-1

15.1 ANDROID VERSION ............................................................................................................................................ 15-1 15.2 IOS VERSION ........................................................................................................................................................... 15-2

16. MISCELLANEOUS .............................................................................................................. 16-1

16.1 ALTERNATIVE TEXT ......................................................................................................................................... 16-1

16.1.1 Android Version .......................................................................................................... 16-1

16.1.2 iOS Version .................................................................................................................. 16-2

16.2 READING SEQUENCE ........................................................................................................................................ 16-3 16.2.1 Android Version .......................................................................................................... 16-3

16.2.2 iOS Version .................................................................................................................. 16-3

17. REFERENCES ...................................................................................................................... 17-1

17.1 STANDARDS, GUIDELINES & PROCEDURES .............................................................. 17-1

Developer Guide for Accessible Mobile Application Templates Introduction

1-1

1. INTRODUCTION

The Internet has become an indispensable means of social and business transactions. For

persons with disabilities and special needs, the Internet enables them to take care of daily

chores, maintain social networks and lead a more independent life, thus engendering social

integration. Since 2011, OGCIO has been implementing a Web/Mobile App Accessibility

Campaign (the Campaign) to drive adoption through a multi-pronged strategy.

To facilitate organisations to implement web/mobile app accessibility, we built up a

thematic Webforall portal (www.webforall.gov.hk) to provide guidelines, technical

references, best practices, service provider list and other practical resources. In addition to

handbook on mobile application accessibility to describe the thirty-three mobile application

best practices, templates of accessible mobile applications have also been developed to

facilitate quick adoption of barrier-free design by non-governmental organisations as well as

small and medium enterprises with limited technical resources.

This Developer Guide introduces the thirty-three mobile application best practices and the

corresponding coding implemented by the Accessible Mobile Application Templates (the

Templates).

www.webforall.gov.hk

Developer Guide for Accessible Mobile Application Templates Terms and Conditions

2-1

2. TERMS AND CONDITIONS

Any party using the Accessible Mobile Application Templates and/or this Developer

Guide for mobile app development agree to be legally bounded by the following terms

and conditions.

1. The purpose of this Document is to provide a high level description of the Accessible

Mobile Application Templates in order to facilitate the planning and implementation

of mobile app(s) by the users of this Document.

2. OGCIO has the sole discretion to amend or vary the Accessible Mobile Application

Templates and this Document from time to time.

3. The Accessible Mobile Application Templates and the contents of this Document

remain the property of, and may not be reproduced in whole or in part without the

express permission of the Government of the HKSAR (HKSARG). Information

provided by this Document and all the associated intellectual property rights are

retained by HKSARG.

4. Organisations and their contractors (and sub-contractors, if applicable) may use the

Accessible Mobile Application Templates and this Document for the purpose of

designing, developing, testing, and running of their mobile apps. By using the

Accessible Mobile Application Templates and this Document, users agree not to sue

HKSARG and agree to indemnify, defend and hold harmless HKSARG, its officers

and employees from any and all third party claims, liability, damages and/or costs

(including but not limited to, legal fees) arising from the use of the Reference Model

and this Document.

5. The HKSARG will not be liable for any direct, indirect, incidental, special or

consequential damages of any kind resulting from the use of or inability to use the

Accessible Mobile Application Templates and information provided by this

Document.

6. The software is provided “as is” without warranty of any kind. The entire risk as to

the quality and performance of the program is with the users.

7. The Accessible Mobile Application Templates are designed for handling

non-classified information only. For developing mobile app that involves the

handling of classified information, please observe the corresponding security

regulations, policies and guidelines.

Developer Guide for Accessible Mobile Application Templates Scope

3-1

3. SCOPE

This Document is a guideline for understanding code segments in the Templates which

illustrates all the thirty-three accessibility features as described in the Mobile Application

Accessibility Handbook. They will have the following major functions of a mobile

application in both Android and iOS platforms.

1. Main screen

The Templates demonstrate the key accessibility feature on the entrance scene of a

mobile application with OS version checking. More information can be referenced in

Section 8.

2. One-time Setup Wizard / Welcome screen(s)

The Templates demonstrate the key accessibility feature applicable on a welcome screen

with tutorial and a one-time setup wizard which support skipping the welcome screen

on next launch. More information can be referenced in Section 9.

3. Information listing

The Templates demonstrate the key accessibility feature applicable on a user friendly

interface for user to navigate to different information pages of the Campaign in the

mobile application. More information can be referenced in Section 10.

4. Form input

The Templates demonstrate the key accessibility feature applicable on an input form

which used to input information for enrolment of technical workshop / seminar provided

by the Campaign. Input fields including selection lists, date pickers, dropdown list and

text input fields are shown in the input form. More information can be referenced in

Section 11.

5. Online map and location listing

The Templates demonstrate the key accessibility feature applicable on an online map

with predefined location and address. More information can be referenced in Section

12.

6. Video and Audio listing

The Templates demonstrate the key accessibility feature applicable on a list of videos

which are stored locally in the mobile application with video controller. More

information can be referenced in Section 13.

7. Settings

The Templates demonstrate the key accessibility feature applicable on interface

language setting, font size setting, background music auto-playback setting, push

notification setting and auto update setting. More information can be referenced in

Section 14.

8. Contact Us

The Templates demonstrate the key accessibility feature applicable on “contact us” page with accessibility statement and contact information of Web and Mobile App

Accessibility Support Team. More information can be referenced in Section 15.

Developer Guide for Accessible Mobile Application Templates Scope

3-2

Support Operating Systems

1. iOS versions 8 and above; and

2. Android versions 4.4 and above.

Developer Guide for Accessible Mobile Application Templates Target Audience

4-1

4. TARGET AUDIENCE

This Document is written for developers or designers of mobile application who is interested

in the best practice and related skills of mobile application accessibility design. To

understand the Templates, the following knowledge and skill are recommended:

Platform Knowledge / Skill Mandatory

Android

- Android app development with Java

- Android Studio

(https://developer.android.com/studio/index.html)

Yes

iOS - Objective C

- XcodeYes

Developer Guide for Accessible Mobile Application Templates Development Environment

5-1

5. DEVELOPMENT ENVIRONMENT

5.1 PLATFORM AND DEVELOPMENT KIT

Platform Software Development Kit (SDK) Version

Android Android Studio 2.3.3

iOS Xcode Version 9.0 (9A235)

5.2 COPYRIGHT OF THIRD PARTY / DEPENDENT LIBRARIES

Platform Library Licensed Under

Android

Espresso Core

Appcompat

Design

Constraint

Support

The Android Open Source Project. Licensed under

the Apache License, Version 2.0

Gson Apache License, Version 2.0

android-google-play-services-ma

ps

Creative Commons Attribution 3.0 License

Apache License, Version 2.0

iOS

SystemConfiguration.framework

QuartzCore.framework

OpenGLES.framework

ImageIO.framework

GLKit.framework

CoreText.framework

CoreTelephony.framework

Accelerate.framework

CoreData.framework

CoreGraphics.framework

AVFoundation.framework

AVKit.framework

Apple Inc. All rights reserved

GoogleMaps.framework

GoogleMapsBase Google Inc. All rights reserved.

IQKeyboardManager

M13Checkbox

RadioButton-ios

MIT License

https://github.com/hackiftekhar/IQKeyboardMana

ger

https://github.com/Marxon13/M13Checkbox

https://github.com/onegray/RadioButton-ios

UIColor+PXExtensions.h

Free License

https://gist.github.com/hlung/ab9c71c2e98d5da84

5aa

PickerView

Naveen Shan

https://github.com/naveenshan01/PickerView/blob

/master/ObjC/PickerView.h

https://github.com/naveenshan01/PickerView/blob /master/ObjC/PickerView.h

https://gist.github.com/hlung/ab9c71c2e98d5da845aa

https://github.com/hackiftekhar/IQKeyboardManager

https://github.com/Marxon13/M13Checkbox

https://github.com/onegray/RadioButton-ios

Developer Guide for Accessible Mobile Application Templates Development Environment

5-2

5.3 SOURCE CODE

Readers should refer to the source code of the corresponding platform, Android or iOS, for

the actual technical details of the concepts mentioned in this Document.

To obtain the source code of the Templates, please download from the following URL:

www.ogcio.gov.hk/en/community/web_mobileapp_accessibility/promulgating_resources/m

obileapp_template/

5.4 TESTING ENVIRONMENT

Platform Version Device Size

Android

5.0.2 Samsung Galaxy Tab S2 10.1 inches

5.1.1 LG V10 5.7inches

6.0.1 Song Xperia Z3 4.6 inches

7.0 Samsung Galaxy S6 5.1 inches

iOS

8.2 iPhone 6 Plus 5.5 inches

10.0.2 iPhone 5s 4 inches

11.0 iPad Air 2 9.7 inches

11.03 iPhone 7 4.7 inches

http://www.ogcio.gov.hk/en/community/web_mobileapp_accessibility/promulgating_resources/mobileapp_template/

http://www.ogcio.gov.hk/en/community/web_mobileapp_accessibility/promulgating_resources/mobileapp_template/

Developer Guide for Accessible Mobile Application Templates Overview of the Template

6-1

6. OVERVIEW OF THE TEMPLATE

Design of the Templates is aimed to demonstrate all thirty-three best practices for mobile

application accessibility.

6.1 INFORMATION ARCHITECTURE

The Templates contain eight major functions where no database and server is used in the

Templates.

Major Function Screen

1. Main screen Home

2. One-time Setup Wizard / Welcome

screen(s)Welcome

3. Information listingAbout Web/Mobile App Accessibility

Campaign

4. Form input Seminars and Technical Workshops

5. Online map and location listing Online Map

6. Video and Audio Webforall Video Channel

7. Settings Settings

8. Contact Us Contact Us


6-2

The information architecture of the Templates listed in the diagram below:

Diagram 6.1 Information Architecture


6-3

6.2 PERMISSION REQUIRED

Platform Permission Required

Android Full Internet access and View network status

iOS NIL

6.3 ADOPTION OF ACCESSIBILITY DESIGN

The below table shows how all thirty-three best practices for mobile application accessibility

are applied to the Templates.

ID Best Practices

Examples on How the Templates

adopted the Best Practices

Related

Section

1 Perceivable

Text related

1.1 Provide text alternatives for

non-text contents

Alternative text is added to all image

buttons.

16.1


6-4

ID Best Practices Examples on How the Templates


Related

Section

1.2 Avoid images of text Image texts are avoided in buttons and

content.

7.1

1.3 Provide text resize function

to scale up text size or zoom

support function without

loss of content

Text resize function (Small / Medium /

Large text) is provided in setting page.

14.2


6-5



Related

Section

1.4 Provide meaningful

sequence

Reading sequence of all pages are from

left to right, top to bottom.

16.2

Sensory

1.5 Do not solely rely on

sensory characteristics for

instructions

Buttons are labeled with text. 7.1


6-6



Related

Section

1.6 Avoid solely rely on colours

to convey information

Besides colours, used symbol – asterisk

(*) to indicate the mandatory fields.

11.4

1.7 Provide sufficient colour

contrast

Text and icons colour meet the contrast

of 4.5:1.

7.1


6-7



Related

Section

1.8 Provide alternative means

for notification

Provides more than one options,

“Ringtone” and “Vibration” settings, for

push notification messages.

14.4

Multi-media related

1.9 Provide description for

prerecorded video

Description is provided to all videos. 7.3.7.2

7.4.7.2

1.10 Provide captions for videos Caption is provided to all videos. 7.3.7.2

7.4.7.2


6-8



Related

Section

1.11 Provide sign language for

prerecorded videos

Sign language is provided to all videos. 7.3.7.2

7.4.7.2

1.12 Provide alternatives for

audio-only information

Alternative is provided to all audio. 7.3.7.2

7.4.7.2

1.13 Provide user-initiated audio

control

Background music on/off feature is

provided in the Templates.

14.3

2 Operable

Navigation related


6-9



Related

Section

2.1 Provide navigation controls Back button is provided in sections with

more than one page.

7.1

10.1

2.2 Provide multiple ways Navigation menu and bottom menu are

provided in the Templates as multiple

way of navigation.

7.1


6-10



Section

Related

2.3 Provide clear and simple

heading and content

Clear and simple headlines are used. 7.1


6-11



Related

Section

2.4 Provide clear and

informative link

Description labels and self-explanatory

links are used.

7.1

2.5 Provide focus visible Focus are visible in all input fields. 11.4

Control related

2.6 Provide a cancel/close

button for popovers

Provide close option for closing

popovers.

11.4


6-12



Related

Section

2.7 Minimise user input Selection list used in order to minimise

user input.

11.4

2.8 Make all clickable objects

large enough to be tapped

All buttons are large enough for tapping

and operating the function.

7.1


6-13



Related

Section

2.9 Provide simple gesture Simple tap will be used to control all

buttons to enable people operate the

Templates easily.

7.1

2.10 Provide adjustable time

control

Allow user to extend the time limit. 11.5

2.11 Lists with user-initiated

auto-updating

Provide function to turn off auto update

on the banner.

11.1

14.5


6-14



Related

Section

2.12 Provide three flashes or

below threshold

The banner will flash for not faster than 3

times per second.

11.1

3 Understandable

User interface related

3.1 Provide consistent and

simple user interface

structure

Consistent screen layout design in all

pages.

7.1


6-15



Related

Section

3.2 Avoid sudden change of

context

User need to confirm before any changes

implemented.

14


6-16



Related

Section

3.3 Provide consistent

identification

Consistent icons are used for listing

pages, bottom menu and navigation

buttons.

7.1

Input related

3.4 Provide error identification Specific error message will be given to

user.

11.4


6-17



Related

Section

3.5 Provide labels or

instructions when content

requires user input

Input hints are provided. 11.4

3.6 Provide error suggestion Explain the error with a suggestion to fix

the error.

11.4


6-18



Related

Section

3.7 Provide means for error

prevention (legal, financial,

data)

Confirm the form input before

submission.

7.3.6.6

7.4.6.6

11

4 Other Best Practice

4.1 Provide an accessibility

statement

Accessibility statement and contact

information is provided.

15

Developer Guide for Accessible Mobile Application Templates User Interface Overview and

App Design

7-1

7. USER INTERFACE OVERVIEW AND APP DESIGN

7.1 USER INTERFACE DESIGN, APP FLOW AND CONTEXT

Related Mobile Accessibility Best Practice:

Best Practice 1.2 – Avoid images of text

Best Practice 1.5 – Do not solely rely on sensory characteristics for instructions

Best Practice 1.7 – Provide sufficient colour contrast

Best Practice 2.1 – Provide navigation controls

Best Practice 2.2 – Provide multiple ways

Best Practice 2.3 – Provide clear and simple heading and content

Best Practice 2.4 – Provide clear and informative link

Best Practice 2.8 – Make all clickable objects large enough to be tapped

Best Practice 2.9 – Provide simple gesture

Best Practice 3.1 – Provide consistent and simple user interface structure

Best Practice 3.3 – Provide consistent identification

The user interface, context and flow of the Accessible Mobile Application Templates has

been designed to demonstrate the following eleven best practices for mobile application

accessibility:

Best Practice 1.2 – Avoid images of text

Images to display textual information is avoided. Text alternative is provided for the image

(e.g. the bottom menu) for accessibility tools like screen reader to speak out the image text.

For image alternative text feature, please refer to Section 16.1.

Best Practice 1.5 – Do not solely rely on sensory characteristics for instructions

Sound, shape, size or visual location is not used to provide user instructions. Buttons are

labelled or provided text alterative to ensure clear instructions are in place to tell which

button to use and how to use it.

Best Practice 1.7 – Provide sufficient colour contrast

The colour contrast ratio of all text and icons against the background is at least 4.5:1 to make

the text and icons easy to read. Tools like “Color Contrast Checker”

(https://webaim.org/resources/contrastchecker/) can be used to check the colour contrast

ratio.


User can go back to the previous page by using the back arrow button.

Best Practice 2.2 – Provide multiple ways

Navigation menu and bottom menu are provided to access a page of the Templates. For

navigation menu, please refer to Section 7.4.4; for bottom menu, please refer to Section

7.4.5.

Best Practice 2.3 – Provide clear and simple heading and content

Clear and simple heading and content are used for user’s easier understanding.


App Design

7-2

Best Practice 2.4 – Provide clear and informative link

Descriptive link text has been added to each link to make sure they are understood by the

text alone or by the link text and the context.

Best Practice 2.8 – Make all clickable objects large enough to be tapped

All clickable objects (e.g. buttons and links) are large enough to be tapped by persons with

upper limb and hand mobility problem.

Best Practice 2.9 – Provide simple gesture

Simple gestures like tap, double-tap and swipe are used for people to operate the Templates

easily.

Best Practice 3.1 – Provide consistent and simple user interface structure

Consistent and simple user interface are used.

Best Practice 3.3 – Provide consistent identification

For all items with the same functionality in the Templates, same labels are being used.

The remaining twenty-two best practices are related to code or function of the Templates

and will be explained in other sections of this Document.


App Design

7-3

7.2 STANDARD SCREEN LAYOUT

The standard screen layout of the Templates is divided into three portions basically:

i. Upper Portion

Contains back button, title of the Templates and navigation menu button.

ii. Middle Portion

It’s the main content area of the Templates. All listing, context and function buttons

will be displayed in this portion.

iii. Lower Portion

Display bottom menu of the Templates which contains buttons to navigate to all major

sections.

The figures below show a standard screen of Android and iOS version respectively.

Figure 7.2(a) Screen layout of Android version Figure 7.2(b) Screen layout of iOS version

i i

ii ii

iii iii


App Design

7-4

7.3 ANDROID USER INTERFACE

The user interface of the Android Template was built using the Graphical Layout tool of

Android Developer Tool (ADT). The tool automatically generates the corresponding XML

files according to the customised layout configured graphically.

Screen Android Activity

Home fragment_splash.xml

Welcome fragment_welcome.xml, fragment_tutorial.xml

About Web/Mobile App Accessibility fragment_introduction.xml,

Campaign fragement_category.xml, fragment_intro.xml

Seminars and Technical Workshops fragment_seminar_list.xml

Webforall Video Channel fragment_video_list.xml

Online Map fragment_map.xml

Settings fragment_setting.xml

Contact Us fragment_web_view.xml


App Design

7-5

7.3.1 Main Entrance

Interface:

Figure 7.3.1 Main Entrance scene of Android version

Screen Description:

i. Tap “Start” to access Welcome Scene (Section 7.3.2).

Program Details:

Description This is the entry point of the application and it is a splash screen.

Android Activity fragment_splash.xml

Program Code SplashFragment.java

There is a function to check the current version running in Android.

If it is less than 4.4 or greater than 8.0, an incompatible error alert

“This mobile application support Android 4.4 to 8.0. Your device

may not compatible with some functions of the application.” would

be shown.

Class / Function

Related Section Section 8

i


App Design

7-6

7.3.2 Welcome Scene

Interface:

Figure 7.3.2(a, b) Welcome scenes of Android version

Screen Description:

i. Content area, scroll down to show all content. Slide left or right to switch to previous

or next page.

ii. Page indicator to indicate the page user is accessing. Tap the indicator to switch to

another page.

iii. Ticked the check box if want to skip this page on next access.

iv. Tap “Skip and Start” to access “Information Scene” (Section 7.3.3).

Program Details:

Description Welcome text and a tutorial for first time.

Android Activity fragment_welcome.xml, fragment_tutorial.xml

Program Code WelcomeFragment.java

Class / Function

It supports page scrolling of 2 pages and skipping to show the tutorial

for next time. When the screen reader of Android, TalkBack, is

enabled, left and right arrow buttons representing previous page and

next page would be shown.


iv

ii

i

iii

i


App Design

7-7

7.3.3 Information Scene

7.3.3.1 Introduction - About Web/Mobile App Accessibility Campaign

Interface:

Figure 7.3.3.1 Introduction scene of Android version

Screen Description:

i. Tap

i

ii

iii

iv

button to access Navigation Menu. Detailed functions please refer to

Section 7.3.4.

ii. Content area, scroll down to show all content.

iii. Tap “More Information about the Campaign” button to access information listing

(Section 7.3.3.2).

iv. Bottom menu. Detailed functions please refer to Section 7.3.5.

Program Details:

Description Introduction of Web/Mobile App Accessibility Campaign.

Android Activity fragment_introduction.xml

Program Code IntroductionFragment.java

Class / Function Showing image banner and text description of the Campaign in a

scrollable text view.


App Design

7-8

7.3.3.2 Information Listing- More Information about the Campaign

Interface:

Figure 7.3.3.2 Information Listing of Android version

Screen Description:

i. Tap button to navigate to Introduction page (Section 7.3.3.1).

ii. Tap button to access Navigation Menu. Detailed functions please refer to

Section 7.3.4.

iii. Content List. Tap the list to navigate to related content Information Pages

(Section 7.3.3.3)


Program Details:

Description Display more information about the Campaign.

Android Activity fragement_category.xml

Program Code CategoryFragment.java

Class / Function List out information title in plain table view.


ii i

iii

iv


App Design

7-9

7.3.3.3 Information Pages

Interface:

Figure 7.3.3.3(a) Content scene, Government Leadership, of Android version

Figure 7.3.3.3(b, c, d) Content scene, Fostering Awareness (b), Promulgating Guidelines and Tips (c),

Nurturing Expertise (d) of Android version

ii i

iii

iv


App Design

7-10

Screen Description:

i. Tap button to back to Introduction page (Section 7.3.3.2).

ii. Tap


Section 7.3.4.

iii. Content area, scroll down to show all content.


Program Details:

Description Display the detailed information of the Campaign.

Android Activity fragment_intro.xml

Program Code IntroductionFragment.java

Class / Function Display the content in scrollable text view.


App Design

7-11

7.3.4 Navigation Menu

Interface:

Figure 7.3.4 Navigation Menu of Android version

Screen Description:

i. Tap button to close Navigation Menu.

ii. Tap to navigate to Main Entrance (Section 7.3.1).

iii. Tap to navigate to Introduction Scene (Section 7.3.3).

iv. Tap to navigate to Seminar List (Section 7.3.6.1).

v. Tap to navigate to Video and Audio Listing (Section 7.3.7.1).

vi. Tap to navigate to Settings List (Section 7.3.8.1).

vii. Tap to navigate to Contact Us Scene (Section 7.3.9).

Program Details:

Description Display navigation menu.

Android Activity activity_main.xml

Program Code MainActivity.java

Class / Function Trigger menu button and list out the navigation menu items.

i

ii

iii

iv

v

vi

vii


App Design

7-12

7.3.5 Bottom Menu

Interface:

Figure 7.3.5 Bottom Menu of Android version

Screen Description:

Tap icon to redirect to different section of the Templates.

Icon Section to Redirect

About Web/Mobile App Accessibility Campaign (Section 7.3.3.1)

Seminars and Technical Workshops (Section 7.3.6.1)

Webforall Video Channel (Section 7.3.7.1)

Settings (Section 7.3.8.1)

Contact Us (Section 7.3.9)


App Design

7-13

Program Details:

Description Display navigation toolbar.

Android Activity Activity_main.xml


Class / Function Set content description of the image items in navigation toolbar.


App Design

7-14

7.3.6 Form Input

7.3.6.1 Seminar List – Seminars and Technical Workshops

Interface:

Figure 7.3.6.1(a, b) Seminars and Technical Workshops list scene of Android version

Screen Description:

i. Tap button to access Navigation Menu. Detailed functions please refer to

Section 7.3.4.

ii. Tap “Auto Update” to show a popup alert:

Tap “OK” to run the rolling banner on (iii);

Tap “Cancel” to close the alert.

Figure 7.3.6.1(c) Alert message for turn on

auto update in Android version

Tap “OK” to stop the rolling banner on (iii);


Figure 7.3.6.1(d) Alert message for turn off

auto update in Android version

ii

iv

v

iii

v

i

vi


App Design

7-15

iii. Rolling banner. Auto-updating of rolling banner is stopped by default; run if “Auto

Update” on.

iv. Tap “Find Event” to navigate to Section 7.3.6.2 to find event by date.

v. Tap a seminar in the seminar list to show event details (Section 7.3.6.3).

vi. Bottom menu. Detailed functions please refer to Section 7.3.5.

Program Details:

Description Event information of seminars and technical workshops.

Android Activity fragment_seminar_list.xml

Program Code SeminarListFragment.java

Class / Function

- Start/stop the rolling banner by confirmation dialog.

- Rolling banner refreshes when auto update is enabled.

- Divide into 2 table sections “New” and “Past Event”.

- List all seminar and event titles in groped table view.

- Provide searching by “Find Event” button.

Related Section Section 11.1


App Design

7-16

7.3.6.2 Find Event

Interface:

Figure 7.3.6.2(a) Find event scene in Android version

Screen Description:

i. Tap button to back to Seminar List (Section 7.3.6.1).


Section 7.3.4.

ii

iii

v

i

iv


App Design

7-17

iii. Tap date to show a day picker to choose “Start Date” and “End Date”. Tap “Confirm”

on the date picker to confirm the date; tap “Cancel” to cancel the selection.

Figure 7.3.6.2(b) Date picker in Android version

iv. Tap “Next” to navigate to register page (Section 7.3.6.5).

v. Bottom menu. Detailed functions please refer to Section 7.3.5.

Program Details:

Description Search seminars and technical workshops by event date

Android Activity datepicker.xml

Program Code CustomDatePicker.java

Class / Function

- Check if the end date is later than the start date

- Default start date: Tomorrow

- Default end date: 7 days after tomorrow

- Valid date checker

- Set date in spin box style UI



App Design

7-18

7.3.6.3 Event Details – Seminar and Technical Workshop Details

Interface:

Figure 7.3.6.3(a, b) Event details scene in Android version

Screen Description:



Section 7.3.4.

iii. Event details area, scroll down to show all content.

iv. Tap “Go to Map” to navigate to Online Map and Address page (Section 7.3.6.4).

v. Tap “Register This Seminar Now” to register this seminar and navigate to Register page

(Section 7.3.6.5).


ii

iii

vi

v

iv

i

iii


App Design

7-19

Program Details:

Description Display the detailed information of a seminar.

Android Activity fragment_seminar.xml

Program Code SeminarFragment.java

Class / Function

- List out detailed information of seminars and technical

workshops such as date, time and venue.

- Provide geolocation online map.

- Provide registration.


App Design

7-20

7.3.6.4 Online Map and Address – Seminar and Technical Workshop Details

Interface:

Figure 7.3.6.4 Online map and address scene in Android version

Screen Description:

i. Tap button to back to Introduction page (Section 7.3.3.1).

ii. Tap

ii

iii

v

iv

i


Section 7.3.4.

iii. Online map area.

iv. Detailed address of the seminar.


Program Details:

Description Display address and location of the venue of the seminar and

technical workshop.

Android Activity fragment_map.xml

Program Code MapFragment.java

Class / Function

- Drop a pin into online map.

- Provide the full address of the venue of the seminar and

technical workshop.



App Design

7-21

7.3.6.5 Register

Interface:

Figure 7.3.6.5(a, b) Registration scene in Android version

Screen Description:

i. Tap

ii

iii

vii

i

iii

vi

v

iv

button to back to Event Details page (Section 7.3.6.3) or Find Event page

(Section 7.3.6.2).


Section 7.3.4.

iii. Register Form. User can input their personal information: First Name, Last Name,

Address, District, Phone. For detailed validation rule, please refer to Section 11.3.


App Design

7-22

iv. User can choose a district from the district list by tapping “Choose a District” and tap

district name to choose the district.

Figure 7.3.6.5(c) District list in Android version

v. Remaining time of the form (default time 5 minutes). The following error message

will popup when time is up. Tap “Extend Time Limit” to extent the time; select

“Reset” to reset the registration form.

Figure 7.3.6.5(d) Time’s up alert in Android version

vi. Tap “Register” to submit the form. The following error message(s) will popup if the

form is inputted incorrectly. Tap “Close” to close the error message(s) and the first

incorrect field will be on focus.

Figure 7.3.6.5(e) Incorrect input alert in Android version


App Design

7-23

vii. Bottom menu. Detailed functions please refer to Section 7.3.5.

Program Details:

Description Register seminar form validation and submission.

Android Activity fragment_register.xml

Program Code RegisterFragment.java

Class / Function

- Check if first name is empty when submitting the form.

- Check if last name is empty when submitting the form.

- Check if district is selected when submitting the form.

- Check if phone number format is valid when submitting the

form.

- Prompt errors when validation rule is not matched.

- Highlight the input field captions in red for missing/invalid data

in input fields.

- Time limit is set as 5 minutes.

- Showing 5-min expiration warning message (“Times up! Please

submit your form”) when time is about to expire.

- Allow the user to extend the time limit.

Related Section Section 11.3, 11.4, 11.5


App Design

7-24

7.3.6.6 Confirmation

Related Mobile Accessibility Best Practice

Best Practice 3.7 – Provide means for error prevention (legal, financial, data)

Interface:

Figure 7.3.6.6(a, b) Registration Confirmation scene in Android version

Screen Description:

i. Tap

i

ii

v

iv

iii


Section 7.3.4.

ii. Summary of the personal information user inputted at Section 7.3.6.5, scroll down to

show all information.

iii. Tap “Confirm” button to confirm and submit the information then navigate to register

success page (Section 7.3.6.7 or Section 7.3.6.8).

iv. Tap “Change Information” button to back to register page (Section 7.3.6.5) to change

inputted information.



App Design

7-25

Program Details:

Description Display user inputted data for confirmation.

Android Activity fragment_confirm.xml

Program Code ConfirmFragment.java

Class / Function

- Show the confirmation scene with inputted information.

- Confirm the information by tapping the “Confirm” button.

- Allow users to change information by tapping “Change

Information” button.


App Design

7-26

7.3.6.7 Register Success (Find Event)

Interface:

Figure 7.3.6.7 Registration Success scene for “Find Event” scenario in Android version

Screen Description:


Section 7.3.4.

ii. Content area which shows the event period user has chosen.

iii. Tap “Home” button to back to Introduction page (Section 7.3.3.1).


Program Details:

Description Acknowledgement of successful registration by “Find event”.

Android Activity fragment_acknowledgement.xml

Program Code AcknowledgementFragment.java

Class / Function Display acknowledgement message (“Thanks for your registration. We’ll

contact you directly if we have new seminar on the following date period.”).

i

ii

iv

iii


App Design

7-27

7.3.6.8 Register Success (Register Seminar)

Interface:

Figure 7.3.6.8 Registration Success scene for “Register Seminar” scenario in Android version

Screen Description:

i. Tap

i

ii

iv

iii


Section 7.3.4.

ii. Content area which shows details of the seminar user register. Scroll down to show all

content.



Program Details:

Description Acknowledgement of successful registration by “Register Seminar”.

Android Activity fragment_acknowledgement.xml

Program Code AcknowledgementFragment.java

Class / Function

Display acknowledgement message (“You have registered in the

following seminar”) and return to introduction scene by tapping

“Home” button.


App Design

7-28

7.3.7 Video and Audio Scenes

7.3.7.1 Video and Audio Listing – Webforall Video Channel

Interface:

Figure 7.3.7.1 Video and Audio Listing scene in Android version

Screen Description:

i. Tap

i

ii

iii


Section 7.3.4.

ii. Video content List. Tap the list to navigate to related Video Content page

(Section 7.3.7.2)

iii. Bottom menu. Detailed functions please refer to Section 7.3.5.

Program Details:

Description List of videos in Webforall Video Channel.

Android Activity fragment_video_list.xml

Program Code VideoListFragment.java

Class / Function Show a list of videos in “Webforall Video Channel” in a plain table

view.


App Design

7-29

7.3.7.2 Video Content – Webforall Video Channel


Best Practice 1.9 – Provide description for prerecorded video

Best Practice 1.10 – Provide captions for videos

Best Practice 1.11 – Provide sign language for prerecorded video

Best Practice 1.12 – Provide alternatives for audio-only information

Interface:

Figure 7.3.7.2 Video content scene in Android version

Screen Description:

i. Tap

button to back to Video and Audio Listing page (Section 7.3.7.1).

ii. Tap

ii i

iii

v

iv


Section 7.3.4.

iii. Video controller:

Button Function

Pause video


App Design

7-30

Button Function

Play video

Time indicator

Expand video to full screen

iv. Transcript or text description of the video or audio.


Program Details:

Description Play video in video player.

Android Activity fragment_video.xml

Program Code VideoFragment.java

Class / Function

- Play/Pause of the video player.

- Caption of the video in text view.

- Full screen display of video.



App Design

7-31

7.3.8 Settings

7.3.8.1 Settings List

Interface:

Figure 7.3.8.1 Settings List scene in Android version

Screen Description:

i. Tap

i

ii

vii

iii

iv

v

vi


Section 7.3.4.

ii. Tap button to navigate to Change Language page (Section 7.3.8.2).

iii. Tap button to navigate to Change Font Size page (Section 7.3.8.3).

iv. Tap button to navigate to Background Music page (Section 7.3.8.4).

v. Tap button to navigate to Push Notification page (Section 7.3.8.5).

vi. Tap button to navigate to Auto Update page (Section 7.3.8.6).



App Design

7-32

Program Details:

Description User settings.

Android Activity fragement_settings.xml

Program Code SettingFragment.java

Class / Function Show the settings such as language, font size, background music,

push notification, auto update in a plain table view.


App Design

7-33

7.3.8.2 Choose Language

Interface:

Figure 7.3.8.2 Choose Language scene in Android version

Screen Description:

i. Tap

button to back to Settings List page (Section 7.3.8.1).

ii. Tap

ii i

iii

v

iv


Section 7.3.4.

iii. Tap to choose language (English, 繁體中文 or 简体中文).

iv. Tap “Confirm Change” button to confirm the language setting in (iii).


Program Details:

Description Language setting.

Android Activity fragment_language.xml

Program Code LanguageFragment.java


App Design

7-34

Class / Function

- Show the language options (English, Traditional Chinese and

Simplified Chinese) in a plain table view.

- Change language after the language is selected and “Confirm

Change” button is tapped.

- Save the modified setting.



App Design

7-35

7.3.8.3 Choose Font Size

Interface:

Figure 7.3.8.3 Choose Font Size scene in Android version

Screen Description:

i. Tap

ii i

iii

v

iv



Section 7.3.4.

iii. Tap to choose font size (Small, Medium or Large).

iv. Tap “Confirm Change” button to confirm the font size setting in (iii).


Program Details:

Description Font size setting.

Android Activity fragment_font_size.xml

Program Code FontSizeFragment.java


App Design

7-36

Class / Function

- Show the font size options (Small, medium and large) in a plain

table view.

- Change the size of the font after the size is selected and

“Confirm Change” button is tapped.




App Design

7-37

7.3.8.4 Background Music

Interface:

Figure 7.3.8.4 Background Music setting scene in Android version

Screen Description:

i. Tap button to back to Settings List page (Section 7.3.8.1).


Section 7.3.4.

iii. Tap to choose “Turn on background music” or “Turn off background music”.

iv. Tap “Confirm Change” button to confirm the background music setting in (iii).


Program Details:

Description Background music setting.

Android Activity fragment_background_music.xml

Program Code BackgroundMusicFragment.java

ii i

iii

v

iv


App Design

7-38

Class / Function

- Show the options (on and off) in a plain table view.

- Change the background music setting after the option item is

selected and “Confirm Change” button is tapped.




App Design

7-39

7.3.8.5 Push Notification

Interface:

Figure 7.3.8.5 Push Notification setting scene in Android version

Screen Description:



Section 7.3.4.

iii. Tap

ii i

iii

vi

v

iv

to turn on or off ringtone.

iv. Tap to turn on or off vibration.

v. Tap “Confirm Change” button to confirm the push notification setting in (iii) and (iv).


Program Details:

Description Push notification setting.

Android Activity fragment_push_notification.xml

Program Code PushNotificationFragment.java


App Design

7-40

Class / Function

- Show the options (ringtone and vibration) in a plain table view.

- Enable/disable ringtone.

- Enable/disable vibration.




App Design

7-41

7.3.8.6 Auto Update

Interface:

Figure 7.3.8.6 Auto Update setting scene in Android version

Screen Description:

i. Tap


ii. Tap

ii i

iii

v

iv


Section 7.3.4.

iii. Tap to choose “Start auto update” or “Stop auto update” of the rolling banner at

Section 7.3.6.1(iii).

iv. Tap “Confirm Change” button to confirm the auto update setting in (iii).


Program Details:

Description Auto update setting.

Android Activity fragment_auto_update.xml

Program Code AutoUpdateFragment.java


App Design

7-42

Class / Function

- Show the options (start and stop) in a plain table view.

- Change auto update function after the option is selected and





App Design

7-43

7.3.9 Contact Us Scene

Interface:

Figure 7.3.9 Contact Us scene in Android version

Screen Description:


Section 7.3.4.



iv. Tap phone number to access the default “Phone” App of the device.

v. Tap email address to access the default “Email” App of the device.

Program Details:

Description Accessibility Statement.

Android Activity fragment_web_view.xml

Program Code WebViewFragment.java

i

ii

iii

iv

v


App Design

7-44

Class / Function

- Show the accessibility statement (“We have incorporated

appropriate accessibility features in this app, if you still

encounter difficulties in using this app, please contact us via

telephone (852)2582 4520 or email, [email protected]).

- Support call dialling function when telephone number is

selected.

- Support email sending function when email address is selected.



App Design

7-45

7.4 IOS USER INTERFACE

The user interface of the iOS Template was built using the visual interface editor,

Storyboard, of Xcode. The user interface element of each major section can be found in

below table:

Screen ontrolleriOS View C

Home MainScreenViewController

Welcome WelcomePageViewController,

WelcomeContentViewController

About Web/Mobile App Accessibility Campaign AboutViewController

Seminars and Technical Workshops SeminarViewController

Webforall Video Channel VideoViewController

Google Map MapViewController

Settings SettingViewController

Contact Us

ContactUsViewController


App Design

7-46

7.4.1 Main Entrance

Interface:

Figure 7.4.1 Main Entrance scene of iOS version

Screen Description:

i. Tap “Start” to access Welcome Scene (Section 7.4.2).

Program Details:

Description This is the entry point of the application and it is splash screen.

iOS View Controller MainScreenViewController

Program Code MainScreenViewController.m

Class / Function

There is a function to check the current running iOS version. If

it is less than 8.0 or greater than 11.0, an incompatible error alert

“This mobile application support iOS 8.0 to 11.0. Your device

may not compatible with some functions of the application.”

would be shown.


i


App Design

7-47

7.4.2 Welcome Scene

Interface:

Figure 7.4.2(a, b) Welcome scenes of iOS version

Screen Description:

i. Content area, scroll down to show all content. Slide left or right to switch to previous

or next page.

ii. Page indicator to indicate the page user is accessing. Tap the indicator to switch to

another page.

iii. Ticked the check box if want to skip this page on next access.

iv. Tap “Skip and Start” to access “Information Scene” (Section 7.4.3).

Program Details:

Description Welcome text and a tutorial session for first time.

iOS View Controller WelcomePageViewController, WelcomeContentViewController

Program Code WelcomePageViewController.m,

WelcomeContentViewController.m

Class / Function

- Support 2 page scrolling.

- Provide skip function not to show the tutorial for next time.

- Page indicator.


iv

ii

i

iii

i


App Design

7-48

7.4.3 Information Scene

7.4.3.1 Introduction – About Web/Mobile App Accessibility Campaign

Interface:

Figure 7.4.3.1 Introduction Scene of iOS version

Screen Description:


Section 7.4.4.


iii. Tap “More Information about the Campaign” button to access Information Listing

(Section 7.4.3.2).


Program Details:

Description Introduction of Web/Mobile App Accessibility Campaign.

iOS View Controller AboutViewController

Program Code AboutViewController.m

Class / Function

i

ii

iii

iv

Show image banner and text description of the Campaign in a

scrollable text view.


App Design

7-49

7.4.3.2 Information Listing – More Information about the Campaign

Interface:

Figure 7.4.3.2 Information Listing scene of iOS version

Screen Description:

i. Tap

button to navigate to Introduction page (Section 7.4.3.1).

ii. Tap

i

iii

ii

iv


Section 7.4.4.

iii. Content List. Tap the list to navigate to related content Information Pages

(Section 7.4.3.3).


Program Details:

Description Display more information about the Campaign.

iOS View Controller AboutChildViewController

Program Code AboutChildViewController.m

Class / Function List out information title in plain table view.



App Design

7-50

7.4.3.3 Information Pages

Interface:

Figure 7.4.3.3(a) Content scene, Government Leadership, of iOS version

Figure 7.4.3.3(b, c, d) Content scene, Fostering Awareness (b),

Promulgating Guidelines and Tips (c), Nurturing Expertise (d) of iOS version

iii

i ii

iv


App Design

7-51

Screen Description:

i. Tap

button to back to Introduction page (Section 7.4.3.2).


Section 7.4.4.

iii. Content area, scroll down to show all content.


Program Details:

Description Display the detailed information of the Campaign.

iOS View Controller AboutDetailViewController

Program Code AboutDetailViewController

Class / Function Display content in scrollable web view.


App Design

7-52

7.4.4 Navigation Menu

Interface:

Figure 7.4.4 Navigation Menu of iOS version

Screen Description:

i. Tap

ii

i

iii

iv

v

vi

vii

button to close Navigation Menu.

ii. Tap to navigate to Main Entrance (Section 7.4.1).

iii. Tap to navigate to Introduction Scene (Section 7.4.3).

iv. Tap to navigate to Seminar List (Section 7.4.6.1).

v. Tap to navigate to Video and Audio List (Section 7.4.7.1).

vi. Tap to navigate to Settings List (Section 7.4.8.1).

vii. Tap to navigate to Contact Us Scene (Section 7.4.9).

Program Details:

Description Display navigation menu.

iOS View Controller MenuViewController

Program Code MenuViewController.m

Class / Function Trigger menu button and list out the navigation menu items.


App Design

7-53

7.4.5 Bottom Menu

Interface:

Figure 7.4.5 Bottom Menu of iOS version

Screen Description:

Tap icon to redirect to different section of the Templates.

Icon Section to Redirect

About Web/Mobile App Accessibility Campaign (Section 7.4.3.1)

Seminars and Technical Workshops (Section 7.4.6.1)

Webforall Video Channel (Section 7.4.7.1)

Settings (Section 7.4.8.1)

Contact Us (Section 7.4.9)


App Design

7-54

Program Details:

Description Display navigation tab bar.

iOS View Controller CusTabBarController

Program Code CusTabBarController.m

Class / Function

- Set accessibility labels of the image items in navigation tab

bar.

- Set image for selected-highlighted state when tab bar item is

tapped.


App Design

7-55

7.4.6 Form Input

7.4.6.1 Seminar List – Seminars and Technical Workshops

Interface:

Figure 7.4.6.1(a, b) Seminars and Technical Workshops list scene of iOS version

Screen Description:


Section 7.4.4.

ii

iv

v

iii

v

i

vi


App Design

7-56

ii. Tap “Auto Update” to show a popup alert:

Tap “OK” to run the rolling banner on (iii);


Figure 7.4.6.1(c) Alert message for turn on

auto update in iOS version

Tap “OK” to stop the rolling banner on (iii);


Figure 7.4.6.1(d) Alert message for turn off

auto update in iOS version

iii. Rolling banner. Auto-updating of rolling banner is stopped by default; run if “Auto

Update” on.

iv. Tap “Find Event” to navigate to Section 7.4.6.2 for find event by date.

v. Tap a seminar in the seminar list to show event details (Section 7.4.6.3).


Program Details:

Description Event information of seminars and technical workshops.

iOS View Controller SeminarViewController

Program Code SeminarViewController.m

Class / Function

- Start/stop the rolling banner by confirmation dialog.

- Rolling banner refreshes when auto update is enabled.

- Divide into 2 table sections “New” and “Past Event”.

- List all seminar event title in groped table view.

- Provide searching by “Find Event” button.



App Design

7-57

7.4.6.2 Find Event

Interface:

Figure 7.4.6.2(a) Find event scene in iOS version

Screen Description:


ii. Tap

iii

iv

i ii

v


Section 7.4.4.


App Design

7-58

iii. Tap date to show a day picker to choose “Start Date” and “End Date”. Scroll to edit

the date. Tap “Confirm” on the date picker to confirm the date; tap “Cancel” to cancel

the selection.

Figure 7.4.6.2(b) Date picker in iOS version

iv. Tap “Next” to navigate to Register page (Section 7.4.6.5).


Program Details:

Description Search seminars and technical workshops by event date.

iOS View Controller RegisterNowViewController, PickerAlertController

Program Code RegisterNowViewController.m, PickerView.m

Class / Function

- Check if the end date is later than the start date.



- Valid date checker.

- Set date in spin box style UI.



App Design

7-59

7.4.6.3 Event Details – Seminar and Technical Workshop Details

Interface:

Figure 7.4.6.3 Event details scene in iOS version

Screen Description:


ii. Tap

iii

v

iv

i ii

vi


Section 7.4.4.

iii. Event details area, scroll down to show all content.

iv. Tap “Go to Map” to navigate to Online Map and Address page (Section 7.4.6.4).

v. Tap “Register This Seminar Now” to register this seminar and navigate to Register page

(Section 7.4.6.5).


Program Details:

Display the detailed information of the seminar and technical

workshop. Description

iOS View Controller SeminarDetailViewController

Program Code SeminarDetailViewController.m

Class / Function

- List out detailed information of the seminar and technical

workshop such as date, time and venue.

- Provide geolocation online map.


App Design

7-60

- Provide registration.


App Design

7-61

7.4.6.4 Online Map and Address – Seminar and Technical Workshop Details

Interface:

Figure 7.4.6.4 Online Map and Address scene in iOS version

Screen Description:

i. Tap

iii

iv

i ii

v

button to back to Introduction page (Section 7.4.3.1).

ii. Tap button to access Navigation Menu. Detailed functions please refer to Section 7.4.4.

iii. Online Map area.

iv. Detailed address of the seminar.


Program Details:

Display address and location of the venue of the seminar and

technical workshop. Description

iOS View Controller MapViewController

Program Code MapViewController.m

Class / Function

- Drop a pin into online map.

- Provide the full address of the venue of the seminar and

technical workshop.



App Design

7-62

7.4.6.5 Register

Interface:

Figure 7.4.6.5(a, b) Registration scene in iOS version

Screen Description:

i. Tap button to back to Event Details page (Section 7.4.6.3) or Find Event page

(Section 7.4.6.2).


Section 7.4.4.

iii. Register Form. User can input their personal information: First Name, Last Name,

Address, District, Phone. For detailed validation rule, please refer to Section 11.3.

iii

vi

v

ii

iv

i

vii

iii


App Design

7-63

iv. User can choose a district from the district list by tapping “Choose a District”, click

district name and then tap “Confirm” to choose the district.

Figure 7.4.6.5(c) District list in iOS version

v. Remaining time of the form (default time 5 minutes). The following error message

will popup when time is up. Tap “Extend time limit” to extent the time; select “Reset”

to reset the registration form.

Figure 7.4.6.5(d) Time’s up alert in iOS version

vi. Tap “Register” to submit the form. The following error message(s) will popup if the

form is inputted incorrectly. Tap “Cancel” to close the error message(s) and the first

incorrect field will be on focus.

Figure 7.4.6.5(e) Incorrect input alert in iOS version



App Design

7-64

Program Details:

Description Register seminar form validation and submission.

iOS View Controller RegisterInfoViewController

Program Code RegisterInfoViewController.m

Class / Function





form.

- Prompt errors when validation rule is not matched.

- Highlight the input field captions in red when

missing/invalid data in input fields.


- Showing 5-min expiration message (“Times up! Please


- Allow the user to extend time limit.

Related Section Section 11.3, 11.4, 11.5


App Design

7-65

7.4.6.6 Confirmation


Best Practice 3.7 – Provide means for error prevention (legal, financial, data)

Interface:

Figure 7.4.6.6(a, b) Registration Confirmation scene in iOS version

Screen Description:


Section 7.4.4.

ii. Summary of the personal information user inputted at Section 7.4.6.5, scroll down to

show all information.

iii. Tap “Confirm” button to confirm and submit the information then navigate to register

success page (Section 7.4.6.7 or Section 7.4.7.8).

iv. Tap “Change Information” button to back to register page (Section 7.4.6.5) to change

inputted information.


ii

iv iii

i

v


App Design

7-66

Program Details:

Description Display user inputted data for confirmation.

iOS View Controller ConfirmationViewController

Program Code ConfirmationViewController.m

Class / Function

- Show the confirmation scene with the user inputted data.

- Confirm the information by tapping the “Confirm” button.

- Allow users to change information by tapping “Change

Information” button.


App Design

7-67

7.4.6.7 Register Success (Find Event)

Interface:

Figure 7.4.6.7 Registration Success scene for “Find Event” scenario in iOS version

Screen Description:


Section 7.4.4.

ii. Content area which shows the event period user has chosen.



Program Details:

Description Acknowledgement of successful registration by “Find Event”.

iOS View Controller RegisterSuccessBySearchViewController

Program Code RegisterSuccessBySearchViewController.m

Class / Function

ii

iii

i

iv

Display acknowledgement message (“Thanks for your

registration. We’ll contact you directly if we have new seminar

on the following date period.”).


App Design

7-68

7.4.6.8 Register Success (Register Seminar)

Interface:

Figure 7.4.6.8 Registration Success scene for “Register Seminar” scenario in iOS version

Screen Description:

i. Tap

ii

iii

i

iv


Section 7.4.4.

ii. Content area which shows details of the seminar user register. Scroll down to show all

content.



Program Details:

Acknowledgement of successful registration by “Register

Seminar”. Description

iOS View Controller RegisterSuccessViewController

Program Code RegisterSuccessViewController.m

Class / Function

Display acknowledgement message (“You have registered in the

following seminar”) and return to introduction scene by tapping

“Home” button.


App Design

7-69

7.4.7 Video and Audio Scenes

7.4.7.1 Video and Audio Listing – Webforall Video Channel

Interface:

Figure 7.4.7.1 Video and Audio Listing scene in iOS version

Screen Description:


Section 7.4.4.

ii. Video content List. Tap the list to navigate to related Video Content page

(Section 7.4.7.2).


Program Details:

Description List of videos in “Webforall Video Channel”.

iOS View Controller VideoViewController

Program Code VideoViewController.m

Class / Function

ii

i

iii

Show a list of videos in “Webforall Video Channel” in a plain

table view.


App Design

7-70

7.4.7.2 Video Content – Webforall Video Channel


Best Practice 1.9 – Provide description for prerecorded video

Best Practice 1.10 – Provide captions for videos

Best Practice 1.11 – Provide sign language for prerecorded video

Best Practice 1.12 – Provide alternatives for audio-only information

Interface:

Figure 7.4.7.2 Video content scene in iOS version

Screen Description:

i. Tap button to back to Video and Audio Listing page (Section 7.4.7.1).

ii. Tap

iii

i ii

v

iv


Section 7.4.4.


App Design

7-71

iii. Video controller:

Button Function

Pause video

Play video

Forward video

Backward video

Time indicator

Expand video to full screen

iv. Transcript or text description of the video or audio.


Program Details:

Description Play video in video player.

iOS View Controller VideoDetailViewController

Program Code VideoDetailViewController.m

Class / Function

- Play/Pause the video.

- Caption of video in text view.

- Full screen display of video.



App Design

7-72

7.4.8 Settings

7.4.8.1 Settings List

Interface:

Figure 7.4.8.1 Settings List scene in iOS version

Screen Description:


Section 7.4.4.

ii. Tap button to navigate to Change Language page (Section 7.4.8.2).

iii. Tap button to navigate to Change Font Size page (Section 7.4.8.3).

iv. Tap button to navigate to Change Background Music page (Section 7.4.8.4).

v. Tap button to navigate to Push Notification page (Section 7.4.8.5).

vi. Tap button to navigate to Auto Update page (Section 7.4.8.6).


ii

i

vii

iii

iv

v

vi


App Design

7-73

Program Details:

Description User settings.

iOS View Controller SettingViewController

Program Code SettingViewController.m

Class / Function

Show the settings such as language, font size, background music,

push notification, auto update in a plain table view.


App Design

7-74

7.4.8.2 Choose Language

Interface:

Figure 7.4.8.2 Choose Language scene in iOS version

Screen Description:

i. Tap


ii. Tap

iii

iv

i ii

v


Section 7.4.4.

iii. Tap to choose language (English, 繁體中文 or 简体中文).

iv. Tap “Confirm Change” button to confirm the language setting in (iii).



App Design

7-75

Program Details:

Description Language setting.

iOS View Controller SettingDetailViewController

Program Code SettingDetailViewController.m

Class / Function

- Show the language options (English, Traditional Chinese

and Simplified Chinese) in a plain table view.

- Change language after the language is selected and

“Confirm change” button is tapped.




App Design

7-76

7.4.8.3 Choose Font Size

Interface:

Figure 7.4.8.3 Choose Font Size scene in iOS version

Screen Description:



Section 7.4.4.

iii. Tap to choose font size (Small, Medium or Large).

iv. Tap “Confirm Change” button to confirm the font size setting in (iii).


iii

iv

i ii

v


App Design

7-77

Program Details:

Description Font size setting.



Class / Function

- Show the font size options (Small, medium and large) in a

plain table view.






App Design

7-78

7.4.8.4 Background Music

Interface:

Figure 7.4.8.4 Background Music setting scene in iOS version

Screen Description:



Section 7.4.4.

iii. Tap to choose “Turn on background music” or “Turn off background music”.

iv. Tap “Confirm Change” button to confirm the background music setting in (iii).


iii

iv

i ii

v


App Design

7-79

Program Details:

Description Background music setting.



Class / Function


- Change the background music setting after the option item

is selected and “Confirm Change” button is tapped.




App Design

7-80

7.4.8.5 Push Notification

Interface:

Figure 7.4.8.5 Push Notification setting scene in iOS version

Screen Description:

i. Tap

iii

v

i ii

vi

iv



Section 7.4.4.

iii. Tap to turn on or off ringtone.

iv. Tap to turn on or off vibration.

v. Tap “Confirm Change” button to confirm the push notification setting in (iii) and (iv).



App Design

7-81

Program Details:

Description Push notification setting.



Class / Function

- Show the options (ringtone and vibration) in a plain table

view.






App Design

7-82

7.4.8.6 Auto Update

Interface:

Figure 7.4.8.6 Auto update setting scene in iOS version

Screen Description:



Section 7.4.4.

iii. Tap to choose “Start auto update” or “Stop auto update” of the rolling banner at

Section 7.4.6.1(iii).

iv. Tap “Confirm Change” button to confirm the auto update setting in (iii).


iii

iv

i ii

v


App Design

7-83

Program Details:

Description Auto update setting.



Class / Function







App Design

7-84

7.4.9 Contact Us Scene

Interface:

Figure 7.4.9 Contact Us scene in iOS version

Screen Description:


Section 7.4.4.



iv. Tap phone number to access the default “Phone” App of the device.

v. Tap email address to access the default “Email” App of the device.

ii

iv

v

i

iii


App Design

7-85

Program Details:

Description Accessibility statement.

iOS View Controller ContactUsViewController

Program Code ContactUsViewController.m

Class / Function




telephone (852)2582 4520 or email,

[email protected]).


selected.

- Support email sending function when email address is

selected.


Developer Guide for Accessible Mobile Application Templates Main Screen

8-1

8. MAIN SCREEN

8.1 LANDING PAGE

The Main Screen section provides an example of an image landing page screen in mobile

application. The landing page image should always fit to the device screen without image

distortion. It should allow user to start up the mobile application by a tap rather than

leaving the landing page without push notification.

8.1.1 Android Version

The main screen in Android version was created through:

Program Details:

Description Splash screen with the landing image and button.

Android Activity fragement_splash.xml


Class / Function

- Get the language from SharedPreference.

- Loading the landing image with different resolution and

corresponding language into the image view.

- Set content description of the button in layout.

- Create a “Home” button.

8.1.2 iOS Version

The main screen in iOS version was created through:

Program Details:

Description Splash screen with the landing image and button.

iOS View

Controller MainScreenViewController


Class / Function

- Get language from NSUserDefault.

- Loading the landing image with different resolution and

corresponding language into the image view.

- Set Accessibility Label of the image view and button.

- Create a “Home” button.


8-2

8.2 VERSION CHECKER

OS version checking feature is added to the Templates to check the device OS version and

alert user if the device OS version is different from the supported version in order to make

sure user’s device is compatible with the mobile application:

- The Android version Template support Android 4.4 to 8.0.

- The iOS version Template support iOS 8 to iOS 11.


The version checker in Android version was created through:

Program Details:

Description Compatibility version checking.

Android Activity fragment_splash.xml


Class / Function

- Check if Android version by BUILD.VERSION.SDK_INT is

between 19 to 26

- If yes, prompt message in AlertDialog (“This mobile application

support Android 4.4 to 8.0. Your device may not compatible

with some functions of the application”)

if (Build.VERSION.SDK_INT > 26 || Build.VERSION.SDK_INT < 19) {

new AlertDialog.Builder(activity, R.style.alertDialogStyle)

.setMessage(R.string.text_version_alert)

.setCancelable(false)

.setPositiveButton(android.R.string.ok, null)

.setNegativeButton(R.string.button_leave_app, new

DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface, int i) {

System.exit(0);

}

})

.show();

}


8-3

8.2.2 iOS Version

The version checker in iOS version was created through:

Program Details:

Description Compatibility version check.

iOS View

Controller MainScreenViewController


Class / Function

- Check if iOS version by [[[UIDevice currentDevice]

systemVersion] floatValue] is less than 8.0 and greater than

11.0.

- If yes, prompt message in UIAlertView (“This mobile

application support iOS 8.0 to 11.0. Your device may not

compatible with some functions of the application.”).

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0 &&

[[[UIDevice currentDevice] systemVersion] floatValue] <= 11.0)

{

// Load resources for iOS 7 or later

}

else

{

// Load resources for iOS 6.1 or later

UIAlertView *alert = [[UIAlertView alloc]

initWithTitle:AMLocalizedString(@"versionAlert", nil) message:nil

delegate:self cancelButtonTitle:AMLocalizedString(@"va1", nil)

otherButtonTitles:nil];

[alert show];

}

Developer Guide for Accessible Mobile Application Templates One-Time Setup Wizard /

Welcome Screen

9-1

9. ONE-TIME SETUP WIZARD / WELCOME SCREEN

The Templates provide the following 3 sample features in the One-time setup wizard /

Welcome screen:

1. Slider tutorial with page indicator.

2. A “Not show the tutorial for next time” check box to allow user to skip this tutorial page

when access this tutorial page next time.

3. A “Skip and Start” button for leaving the tutorial screen and access the Introduction

scene.


Best Practice 1.1 – Provide text alternatives for non-text content

9.1 SLIDER TUTORIAL

For a slider tutorial, it is needed to make sure that all pages can be accessible by screen

reader and users are able to locate the current page by screen reader.


The slider tutorial in Android version was created through:

Program Details:

Description Support screen page sliding.

Android Activity Fragment_welcome.xml

Program Code WelcomeFragement.java

Class / Function Use ViewPager for screen slides and ViewPageAdapter to

populate pages inside of a ViewPager.

9.1.2 iOS Version

The slider tutorial in iOS version was created through:

Program Details:

Description Support screen page sliding.

iOS View

Controller WelcomePageViewController

Program Code WelcomePageViewController.m

Class / Function

Use Page Control for Screen slides and UIViewController with

UIPageViewControllerDataSource to handle the selection of the

page.

Developer Guide for Accessible Mobile Application Templates One-Time Setup Wizard /

Welcome Screen

9-2

9.2 ONE-TIME SETUP WIZARD

Check box of the one-time setup wizard should be compatible with the screen reader such

that the screen reader is able to speak out the check box status (selected or not selected).


The one-time setup wizard in Android version was created through:

Program Details:

Description Status of the checkbox.

Android Activity fragment_welcome.xml

Program Code WelcomeFragment.java

Class / Function

- Use ScaleCheckbox widget to check the status of the

checkbox by the function checkbox.isChecked.

- The value is stored in SharedPrefernce.

- If the checkbox is checked, the one-time setup wizard would

not show in next time.

9.2.2 iOS Version

The one-time setup wizard in iOS version was created through:

Program Details:

Description Status of the checkbox.

iOS View

Controller WelcomeContentViewController

Program Code WelcomeContentViewController.m

Class / Function

- Use M13Checkbox class to check the status of the checkbox

by the function

checkbox.checkState == M13CheckboxStateUnchecked or

self.checkbox.checkState == M13CheckboxStateChecked

- The value is stored in NSUserDefault.

- If the checkbox is checked, the one-time setup wizard would

not show in next time.

Developer Guide for Accessible Mobile Application Templates Information Listing

10-1

10. INFORMATION LISTING

10.1 LISTING FRAMEWORK

The information listing section in the Templates provide a sample listing framework for

accessing various content pages of the mobile application. Back arrow button is provided

for all content pages to go back to the listing page.




The listing framework in Android version was created through:

Program Details:

Description Support Back function.



Class / Function

- Call function backToPreviousFragment when back image

button is tapped.

- Set content description of the back image button.

10.1.2 iOS Version

The listing framework in iOS version was created through:

Program Details:

Description Support back function.

iOS View

Controller All detail view controller


Class / Function

- Call function (IBAction) btnBackPressed:(id)sender when

back image button is tapped.

- Set Accessibility Label of the back image button.

Developer Guide for Accessible Mobile Application Templates Form Input

11-1

11. FORM INPUT

The Templates provide an example of auto refresh rolling banner and a registration form.

The screen flow of the registration form is shown in the diagram below:

Diagram 11.0 Screen Flow of input form (Seminar registration form)


11-2

Related to Mobile Accessibility Best Practice:

Best Practice 3.7 - Provide means for error prevention (legal, financial, data)

11.1 SEMINAR LISTING - AUTO REFRESH ROLLING BANNER

Any auto refresh item should be stop by default and provide a function for user to turn on

the auto-update function. Same function is also provided in Settings page in Section 14.5.

The Templates provide an example of auto refresh rolling banner for this feature on the

Seminar List Page.


Best Practice 2.11 – Lists with user-initiated auto-updating

Best Practice 2.12 – Provide three flashes or below threshold


The auto refresh rolling banner in Android version was created through:

Program Details:

Description Start/stop rolling banner.

Android Activity fragment_seminar_list.xml


Class / Function

- Show the current setting of auto-updating function.

- Provide the function to turn off auto-updating.

- Prompt users to start/stop the rolling banner in AlertDialog.

The image refresh time of the rolling banner in Android version was created through:

Program Details:

Description Refresh rolling banner image

Android Activity Fragment_seminar_list.xml


Class / Function

- Display the banner image one by one in sequence 1, 2, 3.

- Timer set as 1 second to refresh image.

- When displayed banner is at index 3, it would go back to the

banner at index 1.


11-3

private Runnable = new Runnable() {

@Override

public void run() {

order++;

if (TextUtils.equals(language,

String.valueOf(Locale.TRADITIONAL_CHINESE))) {

imageView.setImageResource(imagesTc[order % 3]);

}


String.valueOf(Locale.SIMPLIFIED_CHINESE))) {

imageView.setImageResource(imagesSc[order % 3]);

}


String.valueOf(Locale.ENGLISH))) {

imageView.setImageResource(imagesEn[order % 3]);

}

handler.postDelayed(runnable, 1000);

if (order == Integer.MAX_VALUE) {

order = 0;

}

}

};

11.1.2 iOS Version

The auto refresh rolling banner in iOS version was created through:

Program Details:

Description Start/stop rolling banner.



Class / Function

- Show the current setting of auto-updating function.

- Provide the function to turn off auto-updating.

- Prompt users to start/stop the rolling banner by

UIAlertController.


11-4

The image refresh time of the rolling banner in iOS version was created through:

Program Details:

Description Refresh rolling banner.



Class / Function

- Display the banner image one by one in sequence 0, 1, 2.

- Timer set as 1 second to refresh image.

- When displayed banner is at index 2, it would go back to the

banner at index 0.

(void)rollingImage

{

if (aniTime > [self.bannerImgArray count]-1)

aniTime = 0;

self.imageView.alpha = 0.0;

[self.imageView setImage:[UIImage

imageNamed:[self.bannerImgArray objectAtIndex:aniTime]]];

aniTime += 1;

self.imageView.alpha = 1.0;

}


11-5

11.2 FIND EVENT – DATE PICKER

The date picker should provide a logical flow that users are not allowed to choose the invalid

dates. For example, user is not allowed to input an “End Date” earlier than “Start Date” in

order to minimise user’s error input.


The date picker in Android version was created through:

Program Details:

Description Date picker.

Android Activity datepicker.xml

Program Code PeriodFragment.java, CustomDatePicker.java

Class / Function



- Check if the date is valid.

- Check if end date is later than start date.

- Block users selecting invalid date.

11.2.2 iOS Version

The date picker in iOS version was created through:

Program Details:

Description Date picker.

iOS View Controller PickerViewController

Program Code UIPickerView.m

Class / Function

- Check if the date is valid.

- Check if end date is later than start date.

- Block users selecting invalid date.


11-6

11.3 INPUT FORM - VALIDATION RULE AND ALERT MESSAGE

Both Android and iOS Templates share the same validation rule and error message in the

input form:

Field

Max No. of

Characters

Mandatory?

(Y / N) Validation Rule Error Message

First Name 40 Y Is Not Null Please input your first

name.

Last Name 40 Y Is Not Null Please input your last name.

District -- Y -- Please choose the district

you live.

Address 100 N -- --

Phone 8 Y 1. Is Not Null Please input 8 digits phone

number.

2. Accept digits

(0 - 9) only

Please input 8 digits phone

number.

3. Should be in 8

digits

Phone number should be

numeric.


The validation rule in Android version was created through:

Program Details:

Description Input data validation



Class RegisterFragment

Input Field Function Validation

First Name

TextUtils.isEmpty(hashMap.get("first_name"))Is Not Null

Last Name TextUtils.isEmpty(hashMap.get("last_name"))

Is Not Null

Phone

(TextUtils.isEmpty(hashMap.get("phone")) ||

hashMap.get("phone").length() != 8)

1. Is Not Null

2. Accept digits (0 - 9)

only

3. Should be in 8 digits


11-7

11.3.2 iOS Version

The validation rule in iOS version was created through:

Program Details:

Description Input data validation.



Class RegisterInfoViewController

Input Field Function Validation

First Name if(self.firstName == nil || ([self.firstName isEqualToString:@""]))

self.isFirstNameEmpty = YES; Is Not Null

Last Name

if(self.lastName == nil || ([self.lastName isEqualToString:@""]))

self.isLastNameEmpty = YES; Is Not Null

Phone

NSCharacterSet *areDigits = [NSCharacterSet

decimalDigitCharacterSet];

if ([self.phone rangeOfCharacterFromSet:areDigits].location !=

NSNotFound)

{

// newString consists only of the digits 0 through 9

self.isNumericPhone = YES;

if([self.phone length] == 8)

self.is8DigitPhone = YES;

}

else

self.isNumericPhone = NO;

1. Is Not

Null

2. Accept

digits

(0 - 9)

only

3. Should

be in 8

digits


11-8

11.4 INPUT FORM


Input Form

Best Practice 1.6 – Avoid solely rely on colours to convey information

Best Practice 2.5 – Provide focus visible

Best Practice 2.7 – Minimise user input

Best Practice 3.4 – Provide error identification

Best Practice 3.5 – Provide labels or instructions when content requires user input

Best Practice 3.6 – Provide error suggestion

Alert

Best Practice 2.6 – Provide a cancel/close button for popovers


The input form in Android version was created through:

Program Details:

Input form validation, error identification, error suggestion and input

assistance. Description



Class / Function





form.

- Prompt errors when validation rule is matched in AlertDialog.

- Highlight the input field captions in red for missing/invalid data

in input fields.


- Showing 5-min expiration warning message (“Times up! Please




11-9

11.4.2 iOS Version

The input form in iOS version was created through:

Program Details:

Description Input form validation, error identification, error suggestion and

input assistance.



Class / Function





form.

- Prompt errors when validation rule is matched in

UIAlertContoller.

- Highlight the input field captions in red with

missing/invalid data in input fields.


- Showing 5-min expiration warning message (“Times up!

Please submit your form”) when time is about to expire.



11-10

11.5 INPUT FORM - TIMER

The Templates provide example of a time limit input form where “Extend Time” function is

provided to user to make sure user has enough time to complete the task.


Best Practice 2.10 – Provide adjustable timing control


The timer in Android version was created through:

Program Details:

Description Extend time limit of the timer.

Android Activity RegisterFragment.java


Class / Function

When CountDownTimer is set and finish the count of 5 minutes,

the AlertDialog would prompt users either to extend time limit or

reset the form

11.5.2 iOS Version

The timer in iOS version was created through:

Program Details:

Description Extend time limit of the timer.



Class / Function

When UITimer is set and finish the count of 5 minutes, the

UIAlertView would prompt users either to extend time limit or

reset the form

Developer Guide for Accessible Mobile Application Templates Online Map and

Location Listing

12-1

12. ONLINE MAP AND LOCATION LISTING

An example of online map is provided in the Templates where detailed address is also

shown on the page to make sure the screen reader can read the location clearly.

12.1 ANDROID VERSION

The online map and location listing in Android version were created through:

Program Details:

Description Online Map geolocation.

Android Activity fragment_map.xml

Program Code MapFragement.java

Class / Function

- Disable all gestures and map toolbar in Google Map:

googleMap.addMarker(new

MarkerOptions().position(latLng).title(seminar.getVenue(activity)))

.showInfoWindow();

googleMap.moveCamera(CameraUpdateFactory.newCameraPositi

on(new

CameraPosition.Builder().target(latLng).zoom(17).build()));

googleMap.getUiSettings().setAllGesturesEnabled(false);

googleMap.getUiSettings().setMapToolbarEnabled(false);

- Create text view to contain full address.

12.2 IOS VERSION

The online map and location listing in iOS version were created through:

Program Details:

Description Online Map geolocation.

iOS View Controller MapViewController

Program Code MapViewController.m

Class / Function

- Disable map view accessibility:

self.mapView.myLocationEnabled = YES;

self.mapView.accessibilityElementsHidden = YES;

- Create text view to contain full address.

Developer Guide for Accessible Mobile Application Templates Video and Audio Listing

13-1

13. VIDEO AND AUDIO LISTING

Example of video controller is provided in the Templates with play, pause and full screen

functions. Video should be stop by default and allow users to play the video manually.

13.1 VIDEO CONTROLLER


The video controller in Android version was created through:

Program Details:

Description Video Player.

Android Activity fragment_video.xml

Program Code VideoFragment.java

Class / Function Use Android MediaPlayer to play and pause the video.

13.1.2 iOS Version

The video controller in iOS version was created through:

Program Details:

Description Video Player.

iOS View Controller VideoDetailNativeViewController

Program Code VideoDetailNativeViewController.m

Class / Function - Use AAPLPlayerView class.

- Use AVPlayer to play and pause the video.

Developer Guide for Accessible Mobile Application Templates Settings

14-1

14. SETTINGS

To avoid sudden change in context, users are required to confirm the change of settings by

taping “Confirm Change” before the changes are effective.


Best Practice 3.2 – Avoid sudden change of context

14.1 LANGUAGE SETTING

Three languages are provided in the Templates:

- English

- Traditional Chinese

- Simplified Chinese


The language setting in Android version was created through:

Program Details:

Description Switch language.

Android Activity fragment_language.xml

Program Code LanguageFragment.java

Class / Function

- Show the language options (English, Traditional Chinese and

Simplified Chinese) in a plain table view.

- Change language after the language is selected and “Confirm

change” button is tapped.

- Save the modified setting in SharedPreference.

14.1.2 iOS Version

The language setting in iOS version was created through:

Program Details:

Description Switch language.


Program Code SettingDetailViewController

Class / Function

- Show the language options (English, Traditional Chinese

and Simplified Chinese) in a plain table view.

- Change language after the language is selected and

“Confirm change” button is tapped.

- Save the modified setting in NSUserDefault.


14-2

14.2 FONTSIZE SETTING

The Templates provide function to change the font size (Small, Medium, Large) of text in

the Templates. Developer should make sure users are able to read all text in the Templates

in different font sizes and supported devices’ screen size.


Best Practice 1.3 – Provide text resize function without loss of content or functionality


The font size setting in Android version was created through:

Program Details:

Description Switch font size.

Android Activity fragment_font_size.xml

Program Code FontSizeFragment.java

Class / Function

- Show the font size options (Small, medium and large) in a plain

table view.




14.2.2 iOS Version

The font size setting in iOS version was created through:

Program Details:

Description Switch font size.



Class / Function

- Show the font size options (Small, medium and large) in a

plain table view





14-3

14.3 BACKGROUND MUSIC

If there is background music in the mobile application, developer should make sure the

music is not played by default and users are able to turn on and off the background music

manually.


Best Practice 1.13 – Provide user-initiated audio control


The background music and setting in Android version was created through:

Program Details:

Description Turn on/off background music.

Android Activity fragment_background_music.xml

Program Code BackgroundMusicFragement.java

Class / Function


- Change the background music setting after the option item is

selected and “Confirm Change” button is tapped.


14.3.2 iOS Version

The background music and setting in iOS version was created through:

Program Details:

Description Turn on/off background music.



Class / Function


- Change the background music setting after the option item

is selected and “Confirm Change” button is tapped.

- Save the modified setting in NSUserDefaults.


14-4

14.4 PUSH NOTIFICATION

The Templates provide a push notification setting interface for users to select “Ringtone”

and/or “Vibration” for the alert message.


Best Practice 1.8 – Provide alternative means for notification


The push notification setting interface in Android version was created through:

Program Details:

Description Turn on/off ringtone or vibration.

Android Activity fragment_push_notification.xml

Program Code PushNotificationFragment.java

Class / Function


view.




14.4.2 iOS Version

The push notification setting interface in iOS version was created through:

Program Details:

Description Turn on/off ringtone or vibration.



Class / Function


view.





14-5

14.5 AUTO UPDATE WIZARD

The auto update wizard of the Templates is used to turn on/off the auto refresh behaviour of

the rolling banner in Section 11.1.


Best Practice 2.11 – Lists with user-initiated auto-updating


The auto update wizard in Android version was created through:

Program Details:

Description Turn on/off auto-updating.

Android Activity fragment_auto_update.xml

Program Code AutoUpdateFragment.java

Class / Function





14.5.2 iOS Version

The auto update wizard in iOS version was created through:

Program Details:

Description Turn on/off auto-updating.

iOS View

Controller SettingDetailViewController


Class / Function





Developer Guide for Accessible Mobile Application Templates Contact Us

15-1

15. CONTACT US

Accessibility statement and contact information is provided in the Templates. Tap contact

phone number and email address will access the default “Phone App” and “Email App” of

the device.


Best Practice 4.1 – Provide an accessibility statement

15.1 ANDROID VERSION

The contact us page in Android version was created through:

Program Details:

Description Accessibility statement.

Android Activity fragment_web_view

Program Code WebViewFragment.java

Class / Function

- Load the content in web format.

- Load the web in web view.




telephone (852)2582 4520 or email, [email protected]).


selected.

- Support email sending function when email address is selected.

Developer Guide for Accessible Mobile Application Templates Contact Us

15-2

15.2 IOS VERSION

The contact us page in iOS version was created through:

Program Details:

Description Accessibility Statement.

iOS View Controller ContactUsViewController

Program Code ContactUsViewController.m

Class / Function

- Load the content in web format.

- Load the web in web view.




telephone (852)2582 4520 or email,

[email protected]).


selected:

if ([url.scheme isEqualToString:@"tel"])

{

if ([app canOpenURL:url])

{

//[app openURL:url];

[UIApplication.sharedApplication

openURL:navigationAction.request.URL];

decisionHandler(WKNavigationActionPolicyCancel);

return;

}

}

- Support email sending function when email address is

selected:

if ([url.scheme isEqualToString:@"mailto"])

{

if ([app canOpenURL:url])

{

//[app openURL:url];

[UIApplication.sharedApplication

openURL:navigationAction.request.URL];

decisionHandler(WKNavigationActionPolicyCancel);

return;

}

}

Developer Guide for Accessible Mobile Application Templates Miscellaneous

16-1

16. MISCELLANEOUS

16.1 ALTERNATIVE TEXT

Meaningful alternative texts are needed for all buttons, pictures, icons, photos and images.

Developer should make sure all the content and buttons in the mobile application are able to

be accessed by gesture when screen reader is on.


Best Practice 1.1 – Provide text alternatives for non-text content


The alternative text in Android version was controlled through:

Program Details:

Description Alternative text of the image.


Sample Program Code MainActivity.java

Sample Class /

Function

Set Content Description to the image component:

e.g. imageButtonBack.setContentDescription(getString(R.string.button_b

ack));

<ImageButton

android:id="@+id/imageButtonMenu"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:adjustViewBounds="true"

android:background="@null"

android:layout_marginEnd="8dp"

android:contentDescription="@string/button_menu"

android:layout_alignParentEnd="true"

app:srcCompat="@drawable/btn_menu" />


16-2

16.1.2 iOS Version

The alternative text in iOS version was controlled through:

Program Details:

Description Alternative text of the image.

iOS View Controller MainScreenViewController

Sample Program Code MainScreenViewController.m

Sample Class /

Function

- Set isAccessibilityElement to YES and accessibility label

to the image component

e.g.

self.bgImage.isAccessibilityElement = YES;

self.bgImage.accessibilityLabel = AMLocalizedString(@"Web

or Mobile App Accessibility Campaign", nil);


16-3

16.2 READING SEQUENCE


Best Practice 1.4 – Provide meaningful sequence

The reading order depends on the “logical” reading order, from left to right and top to

bottom, and the xml order (order of elements declaration) by default. However, in some

cases, it may be needed to override the logical order to make the tap order of screen reader

meaningful. Although the Templates does not provide solid example on this case, you can

find some example as below:


Description

The reading order can be modified by setting the following two

attributes:

1. AccessibilityTraversalAfter: sets the id of a view after which this one

is visited in accessibility traversal. A screen-reader must visit the

content of the other view before the content of this one.

2. AccessibilityTraversalBefore: sets the id of a view before which this

one is visited in accessibility traversal. A screen-reader must visit

the content of this view before the content of the one it precedes.

Sample Code

volupButton.setAccessibilityTraversalAfter(myView.findViewById(R.id.remote

0).getId());

OR

voldownButton.setAccessibilityTraversalAfter(myView.findViewById(R.id.volu

p).getId());

16.2.2 iOS Version

Description

The reading order can be modified by the setting sequence of the

elements in accessibilityElements.

Sample Code

self.view.accessibilityElements = @[self.view2, self.view1, self.view3,

self.view4];

Developer Guide for Accessible Mobile Application Templates References

17-1

17. REFERENCES

17.1 STANDARDS, GUIDELINES & PROCEDURES

1. Government IT Security Policy and Guidelines

https://www.ogcio.gov.hk/en/information_security/policy_and_guidelines/

2. Mobile Application Accessibility Handbook

https://www.webforall.gov.hk/en/maahandbook

3. Android - Designing for Accessibility

http://developer.android.com/guide/topics/ui/accessibility/index.html

4. Android - Accessibility Design Patterns

http://developer.android.com/design/patterns/accessibility.html

5. iOS - Accessibility Programming Guide for iOS

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPho

neAccessibility/Introduction/Introduction.html

6. iOS - Verification on Accessibility

https://developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps/Testi

ngtheAccessibilityofiOSApps/TestingtheAccessibilityofiOSApps.html

7. iOS - Human Interface Guidelines

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/Mob

ileHIG/index.html

https://www.ogcio.gov.hk/en/information_security/policy_and_guidelines/

https://www.webforall.gov.hk/en/maahandbook

http://developer.android.com/guide/topics/ui/accessibility/index.html

http://developer.android.com/design/patterns/accessibility.html

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html

https://developer.apple.com/library/ios/technotes/TestingAccessibilityOfiOSApps/TestingtheAccessibilityofiOSApps/TestingtheAccessibilityofiOSApps.html

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html

Documents

Developer Guide for Accessible Mobile Application …...Developer Guide for Accessible Mobile Application Templates Scope 3-1 3. SCOPE This Document is a guideline for understanding