Digital Policy Office
Developer Guide
for
Accessible Mobile Application Templates
Ver
sion: 1.11
July 2024
The
Government of the Hong Kong Special Administrative Region
COPYRIGHT NOTICE
© 2017 by t
he Government of the Hong Kong Special Administrative Region
Unle
ss 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 Digital Policy Office.
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: Digital Accessibility Support Team
Document Effective Date: 22 December 2017
Developer Guide for Accessible Mobile Application Templates Amendment History
Amendment History
Change
Number
Revision Description
Pages Affected
Revision
Number
Date
1
Replace the name “Office of the
Government Chief Information
Officer” to “Digital Policy Office”
Cover,
Copyright
Notice
1.1
25 July 2024
2
Update URL for “Government IT
Security Policy and Guidelines”
Rename team name to “Digital
Accessibility Support Team”
17-1
Distribution of
Controlled
Copy , 3-1
1.11
26 July 2024
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-68
7.4.8 Settings ........................................................................................................................ 7-71
7.4.9 Contact Us Scene ......................................................................................................... 7-83
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
Developer Guide for Accessible Mobile Application Templates Table of Contents
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-2
9.1.3 Android Version ............................................................................................................ 9-2
9.1.4 iOS Version .................................................................................................................... 9-2
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
Developer Guide for Accessible Mobile Application Templates Table of Contents
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 (Then DPO) 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).
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. DPO 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 Digital 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 Studio
Yes
iOS
Yes
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-
maps
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
http
s://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
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:
https://www.digitalpolicy.gov.hk/en/our_work/digital_government/digital_inclusion/accessi
bility/promulgating_resources/mobileapp_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 Sony 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
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 listing
About 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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-2
The information architecture of the Templates listed in the diagram below:
Diagram 6.1 Information Architecture
Developer Guide for Accessible Mobile Application Templates Overview of the Template
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-4
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-5
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-6
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-7
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-8
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-9
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-10
ID Best Practices
Examples on How the Templates
adopted the Best Practices
Related
Section
2.3
Provide clear and simple
heading and content
Clear and simple headlines are used.
7.1
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-11
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-12
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-13
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-14
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-15
ID Best Practices
Examples on How the Templates
adopted the Best Practices
Related
Section
3.2
Avoid sudden change of
context
User need to confirm before any changes
implemented.
14
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-16
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-17
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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
Developer Guide for Accessible Mobile Application Templates Overview of the Template
6-18
ID Best Practices
Examples on How the Templates
adopted the Best Practices
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.
Best Practice 2.1 – Provide navigation controls
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.
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-2
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Campaign
fragment_introduction.xml,
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Class / Function
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.
Related Section Section 8
i
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Related Section Section 9
iv
ii
i
iii
i
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 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.
i
ii
iii
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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)
iv. Bottom menu. Detailed functions please refer to Section 7.3.5.
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.
Related Section Section 10
ii
i
iii
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-10
Screen Description:
i. Tap button to back to Introduction page (Section 7.3.3.2).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.3.4.
iii. Content area, scroll down to show all content.
iv. Bottom menu. Detailed functions please refer to Section 7.3.5.
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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)
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-13
Program Details:
Description
Display navigation toolbar.
Android Activity
Activity_main.xml
Program Code
MainActivity.java
Class / Function
Set content description of the image items in navigation toolbar.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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);
Tap “Cancel” to close the alert.
Figure 7.3.6.1(d) Alert message for turn off
auto update in Android version
ii
iv
v
iii
v
i
vi
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.3.4.
ii
iii
v
i
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Related Section Section 11.2
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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:
i. Tap button to back to Seminar List (Section 7.3.6.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
vi. Bottom menu. Detailed functions please refer to Section 7.3.5.
ii
iii
vi
v
iv
i
iii
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to access Navigation Menu. Detailed functions please refer to
Section 7.3.4.
iii. Online map area.
iv. Detailed address of the seminar.
v. Bottom menu. Detailed functions please refer to Section 7.3.5.
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.
Related Section Section 12
ii
iii
v
iv
i
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to back to Event Details page (Section 7.3.6.3) or Find Event page
(Section 7.3.6.2).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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.
ii
iii
vii
i
iii
vi
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to access Navigation Menu. Detailed functions please refer to
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.
v. Bottom menu. Detailed functions please refer to Section 7.3.5.
i
ii
v
iv
iii
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 tapp
ing “Change
Information” button.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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:
i. Tap button to access Navigation Menu. Detailed functions please refer to
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).
iv. Bottom menu. Detailed functions please refer to Section 7.3.5.
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to access Navigation Menu. Detailed functions please refer to
Section 7.3.4.
ii. Content area which shows details of the seminar user register. Scroll down to show all
content.
iii. Tap “Home” button to back to Introduction page (Section 7.3.3.1).
iv. Bottom menu. Detailed functions please refer to Section 7.3.5.
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.
i
ii
iv
iii
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to access Navigation Menu. Detailed functions please refer to
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.
i
ii
iii
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-29
7.3.7.2 Video Content – Webforall Video Channel
Related Mobile Accessibility Best Practice
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 button to access Navigation Menu. Detailed functions please refer to
Section 7.3.4.
iii. Video controller:
Button Function
Pause video
ii
i
iii
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
v. Bottom menu. Detailed functions please refer to Section 7.3.5.
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.
Related Section Section 13
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to access Navigation Menu. Detailed functions please refer to 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).
vii. Bottom menu. Detailed functions please refer to Section 7.3.5.
i
ii
vii
iii
iv
v
vi
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to access Navigation Menu. Detailed functions please refer to
Section 7.3.4.
iii. Tap to choose language (English, 繁體中文 or 简体中文).
iv. Tap “Confirm Change” button to confirm the language setting in (iii).
v. Bottom menu. Detailed functions please refer to Section 7.3.5.
Program Details:
Description
Language setting.
Android Activity
fragment_language.xml
Program Code
LanguageFragment.java
ii
i
iii
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Related Section Section 14.1
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to back to Settings List page (Section 7.3.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
v. Bottom menu. Detailed functions please refer to Section 7.3.5.
Program Details:
Description
Font size setting.
Android Activity
fragment_font_size.xml
Program Code
FontSizeFragment.java
ii
i
iii
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
- Save the modified setting.
Related Section Section 14.2
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
v. Bottom menu. Detailed functions please refer to Section 7.3.5.
Program Details:
Description
Background music setting.
Android Activity
fragment_background_music.xml
Program Code
BackgroundMusicFragment.java
ii
i
iii
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
- Save the modified setting.
Related Section Section 14.3
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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:
i. Tap button to back to Settings List page (Section 7.3.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.3.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).
vi. Bottom menu. Detailed functions please refer to Section 7.3.5.
Program Details:
Description
Push notification setting.
Android Activity
fragment_push_notification.xml
Program Code
PushNotificationFragment.java
ii
i
iii
vi
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-40
Class / Function
- Show the options (ringtone and vibration) in a plain table view.
- Enable/disable ringtone.
- Enable/disable vibration.
- Save the modified setting.
Related Section Section 14.4
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to back to Settings List page (Section 7.3.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
v. Bottom menu. Detailed functions please refer to Section 7.3.5.
Program Details:
Description
Auto update setting.
Android Activity
fragment_auto_update.xml
Program Code
AutoUpdateFragment.java
ii
i
iii
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
“Confirm Change” button is tapped.
- Save the modified setting.
Related Section Section 14.5
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-43
7.3.9 Contact Us Scene
Interface:
Figure 7.3.9 Contact Us scene in Android version
Screen Description:
i. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.3.4.
ii. Content area, scroll down to show all content.
iii. Bottom menu. Detailed functions please refer to Section 7.3.5.
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Related Section Section 15
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 iOS View Controller
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Related Section Section 8
i
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Related Section Section 9
iv
ii
i
iii
i
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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:
i. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
ii. Content area, scroll down to show all content.
iii. Tap “More Information about the Campaign” button to access Information Listing
(Section 7.4.3.2).
iv. Bottom menu. Detailed functions please refer to Section 7.4.5.
Program Details:
Description
Introduction of Web/Mobile App Accessibility Campaign.
iOS View Controller
AboutViewController
Program Code
AboutViewController.m
Class / Function
Show image banner and text description of the Campaign in a
scrollable text view.
i
ii
iii
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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 button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
iii. Content List. Tap the list to navigate to related content Information Pages
(Section 7.4.3.3).
iv. Bottom menu. Detailed functions please refer to Section 7.4.5.
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.
Related Section Section 10
i
iii
ii
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-51
Screen Description:
i. Tap button to back to Introduction page (Section 7.4.3.2).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
iii. Content area, scroll down to show all content.
iv. Bottom menu. Detailed functions please refer to Section 7.4.5.
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-52
7.4.4 Navigation Menu
Interface:
Figure 7.4.4 Navigation Menu of iOS version
Screen Description:
i. Tap 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.
ii
i
iii
iv
v
vi
vii
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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)
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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:
i. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
ii
iv
v
iii
v
i
vi
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-56
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.4.6.1(c) Alert message for turn on
auto update in iOS version
Tap “OK” to stop the rolling banner on (iii);
Tap “Cancel” to close the alert.
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).
vi. Bottom menu. Detailed functions please refer to Section 7.4.5.
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.
Related Section Section 11.1
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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:
i. Tap button to back to Seminar List (Section 7.4.6.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
iii
iv
i
ii
v
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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).
v. Bottom menu. Detailed functions please refer to Section 7.4.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.
- Default start date: Tomorrow
- Default end date: 7 days after tomorrow
- Valid date checker.
- Set date in spin box style UI.
Related Section Section 11.2
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
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:
i. Tap button to back to Seminar List (Section 7.4.6.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to 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).
vi. Bottom menu. Detailed functions please refer to Section 7.4.5.
Program Details:
Description
Display the detailed information of the seminar and technical
workshop.
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.
- Provide registration.
iii
v
iv
i
ii
vi
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-60
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 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.
v. Bottom menu. Detailed functions please refer to Section 7.4.5.
Program Details:
Description
Display address and location of the venue of the seminar and
technical workshop.
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.
Related Section Section 12
iii
iv
i
ii
v
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-61
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).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-62
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
vii. Bottom menu. Detailed functions please refer to Section 7.4.5.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-63
Program Details:
Description
Register seminar form validation and submission.
iOS View Controller
RegisterInfoViewController
Program Code
RegisterInfoViewController.m
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 when
missing/invalid data in input fields.
- Time limit is set as 5 minutes.
- Showing 5-min expiration message (“Times up! Please
submit your form”) when time is about to expire.
- Allow the user to extend time limit.
Related Section Section 11.3, 11.4, 11.5
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-64
7.4.6.6 Confirmation
Related Mobile Accessibility Best Practice
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:
i. Tap button to access Navigation Menu. Detailed functions please refer to
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.
v. Bottom menu. Detailed functions please refer to Section 7.4.5.
ii
iv
iii
i
v
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-65
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-66
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:
i. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
ii. Content area which shows the event period user has chosen.
iii. Tap “Home” button to back to Introduction page (Section 7.4.3.1).
iv. Bottom menu. Detailed functions please refer to Section 7.4.5.
Program Details:
Description
Acknowledgement of successful registration by “Find Event”.
iOS View Controller
RegisterSuccessBySearchViewController
Program Code
RegisterSuccessBySearchViewController.m
Class / Function
Display acknowledgement message (“Thanks for your
registration. We’ll contact you directly if we have new seminar on
the following date period.”).
ii
iii
i
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-67
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 button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
ii. Content area which shows details of the seminar user register. Scroll down to show all
content.
iii. Tap “Home” button to back to Introduction page (Section 7.4.3.1).
iv. Bottom menu. Detailed functions please refer to Section 7.4.5.
Program Details:
Description
Acknowledgement of successful registration by “Register
Seminar”.
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.
ii
iii
i
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-68
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:
i. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
ii. Video content List. Tap the list to navigate to related Video Content page
(Section 7.4.7.2).
iii. Bottom menu. Detailed functions please refer to Section 7.4.5.
Program Details:
Description
List of videos in “Webforall Video Channel”.
iOS View Controller
VideoViewController
Program Code
VideoViewController.m
Class / Function
Show a list of videos in “Webforall Video Channel” in a plain
table view.
ii
i
iii
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-69
7.4.7.2 Video Content – Webforall Video Channel
Related Mobile Accessibility Best Practice
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 button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
iii
i
ii
v
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-70
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.
v. Bottom menu. Detailed functions please refer to Section 7.4.5.
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.
Related Section Section 13
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-71
7.4.8 Settings
7.4.8.1 Settings List
Interface:
Figure 7.4.8.1 Settings List scene in iOS version
Screen Description:
i. Tap button to access Navigation Menu. Detailed functions please refer to
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).
vii. Bottom menu. Detailed functions please refer to Section 7.4.5.
ii
i
vii
iii
iv
v
vi
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-72
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.
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-73
7.4.8.2 Choose Language
Interface:
Figure 7.4.8.2 Choose Language scene in iOS version
Screen Description:
i. Tap button to back to Settings List page (Section 7.4.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
iii. Tap to choose language (English, 繁體中文 or 简体中文).
iv. Tap “Confirm Change” button to confirm the language setting in (iii).
v. Bottom menu. Detailed functions please refer to Section 7.4.5.
iii
iv
i
ii
v
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-74
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.
- Save the modified setting.
Related Section Section 14.1
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-75
7.4.8.3 Choose Font Size
Interface:
Figure 7.4.8.3 Choose Font Size scene in iOS version
Screen Description:
i. Tap button to back to Settings List page (Section 7.4.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
v. Bottom menu. Detailed functions please refer to Section 7.4.5.
iii
iv
i
ii
v
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-76
Program Details:
Description
Font size setting.
iOS View Controller
SettingDetailViewController
Program Code
SettingDetailViewController.m
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.
- Save the modified setting.
Related Section
Section 14.2
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-77
7.4.8.4 Background Music
Interface:
Figure 7.4.8.4 Background Music setting scene in iOS version
Screen Description:
i. Tap button to back to Settings List page (Section 7.4.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
v. Bottom menu. Detailed functions please refer to Section 7.4.5.
iii
iv
i
ii
v
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-78
Program Details:
Description
Background music setting.
iOS View Controller
SettingDetailViewController
Program Code
SettingDetailViewController.m
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.
- Save the modified setting.
Related Section Section 14.3
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-79
7.4.8.5 Push Notification
Interface:
Figure 7.4.8.5 Push Notification setting scene in iOS version
Screen Description:
i. Tap button to back to Settings List page (Section 7.4.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
vi. Bottom menu. Detailed functions please refer to Section 7.4.5.
iii
v
i
ii
vi
iv
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-80
Program Details:
Description
Push notification setting.
iOS View Controller
SettingDetailViewController
Program Code
SettingDetailViewController.m
Class / Function
- Show the options (ringtone and vibration) in a plain table
view.
- Enable/disable ringtone.
- Enable/disable vibration.
- Save the modified setting.
Related Section Section 14.4
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-81
7.4.8.6 Auto Update
Interface:
Figure 7.4.8.6 Auto update setting scene in iOS version
Screen Description:
i. Tap button to back to Settings List page (Section 7.4.8.1).
ii. Tap button to access Navigation Menu. Detailed functions please refer to
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).
v. Bottom menu. Detailed functions please refer to Section 7.4.5.
iii
iv
i
ii
v
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-82
Program Details:
Description
Auto update setting.
iOS View Controller
SettingDetailViewController
Program Code
SettingDetailViewController.m
Class / Function
- Show the options (start and stop) in a plain table view.
- Change auto update function after the option is selected and
“Confirm Change” button is tapped.
- Save the modified setting.
Related Section Section 14.5
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-83
7.4.9 Contact Us Scene
Interface:
Figure 7.4.9 Contact Us scene in iOS version
Screen Description:
i. Tap button to access Navigation Menu. Detailed functions please refer to
Section 7.4.4.
ii. Content area, scroll down to show all content.
iii. Bottom menu. Detailed functions please refer to Section 7.4.5.
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
Developer Guide for Accessible Mobile Application Templates User Interface Overview and
App Design
7-84
Program Details:
Description
Accessibility statement.
iOS View Controller
ContactUsViewController
Program Code
ContactUsViewController.m
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.
Related Section Section 15
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
Program Code
SplashFragment.java
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
Program Code
MainScreenViewController.m
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.
Developer Guide for Accessible Mobile Application Templates Main Screen
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.
8.2.1 Android Version
The version checker in Android version was created through:
Program Details:
Description
Compatibility version checking.
Android Activity
fragment_splash.xml
Program Code
SplashFragment.java
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();
}
Developer Guide for Accessible Mobile Application Templates Main Screen
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
Program Code
MainScreenViewController.m
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.
Related Mobile Accessibility Best Practice
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.
9.1.1 Android Version
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).
9.1.3 Android Version
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.1.4 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.
Related Mobile Accessibility Best Practice
Best Practice 2.1 – Provide navigation controls
10.1.1 Android Version
The listing framework in Android version was created through:
Program Details:
Description
Support Back function.
Android Activity
activity_main.xml
Program Code
MainActivity.java
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
Program Code
SettingDetailViewController.m
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)
Developer Guide for Accessible Mobile Application Templates Form Input
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.
Related Mobile Accessibility Best Practice
Best Practice 2.11 – Lists with user-initiated auto-updating
Best Practice 2.12 – Provide three flashes or below threshold
11.1.1 Android Version
The auto refresh rolling banner in Android version was created through:
Program Details:
Description
Start/stop rolling banner.
Android Activity
fragment_seminar_list.xml
Program Code
SeminarListFragment.java
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
Program Code
SeminarListFragment.java
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.
Developer Guide for Accessible Mobile Application Templates Form Input
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]);
}
if (TextUtils.equals(language,
String.valueOf(Locale.SIMPLIFIED_CHINESE))) {
imageView.setImageResource(imagesSc[order % 3]);
}
if (TextUtils.equals(language,
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.
iOS View Controller
SeminarViewController
Program Code
SeminarViewController.m
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.
Developer Guide for Accessible Mobile Application Templates Form Input
11-4
The image refresh time of the rolling banner in iOS version was created through:
Program Details:
Description
Refresh rolling banner.
iOS View Controller
SeminarViewController
Program Code
SeminarViewController.m
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;
}
Developer Guide for Accessible Mobile Application Templates Form Input
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.
11.2.1 Android Version
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
- Default start date: Tomorrow
- Default end date: 7 days after tomorrow
- 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.
Developer Guide for Accessible Mobile Application Templates Form Input
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.
11.3.1 Android Version
The validation rule in Android version was created through:
Program Details:
Description
Input data validation
Android Activity
fragment_register.xml
Program Code
RegisterFragment.java
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
Developer Guide for Accessible Mobile Application Templates Form Input
11-7
11.3.2 iOS Version
The validation rule in iOS version was created through:
Program Details:
Description
Input data validation.
iOS View Controller
RegisterInfoViewController
Program Code
RegisterInfoViewController.m
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
Developer Guide for Accessible Mobile Application Templates Form Input
11-8
11.4 INPUT FORM
Related Mobile Accessibility Best Practice
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
11.4.1 Android Version
The input form in Android version was created through:
Program Details:
Description
Input form validation, error identification, error suggestion and input
assistance.
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 matched in AlertDialog.
- 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.
Developer Guide for Accessible Mobile Application Templates Form Input
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.
iOS View Controller
RegisterInfoViewController
Program Code
RegisterInfoViewController.m
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 matched in
UIAlertContoller.
- Highlight the input field captions in red with 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.
Developer Guide for Accessible Mobile Application Templates Form Input
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.
Related Mobile Accessibility Best Practice
Best Practice 2.10 – Provide adjustable timing control
11.5.1 Android Version
The timer in Android version was created through:
Program Details:
Description
Extend time limit of the timer.
Android Activity
RegisterFragment.java
Program Code
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.
iOS View Controller
RegisterInfoViewController
Program Code
RegisterInfoViewController.m
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
13.1.1 Android Version
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.
Related Mobile Accessibility Best Practice
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
14.1.1 Android Version
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.
iOS View Controller
SettingDetailViewController
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.
Developer Guide for Accessible Mobile Application Templates Settings
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.
Related Mobile Accessibility Best Practice
Best Practice 1.3 – Provide text resize function without loss of content or functionality
14.2.1 Android Version
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.
- Change the size of the font after the size is selected and “Confirm
Change” button is tapped.
- Save the modified setting.
14.2.2 iOS Version
The font size setting in iOS version was created through:
Program Details:
Description
Switch font size.
iOS View Controller
SettingDetailViewController
Program Code
SettingDetailViewController.m
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.
- Save the modified setting.
Developer Guide for Accessible Mobile Application Templates Settings
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.
Related Mobile Accessibility Best Practice
Best Practice 1.13 – Provide user-initiated audio control
14.3.1 Android Version
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
- 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.
- Save the modified setting in SharedPreference.
14.3.2 iOS Version
The background music and setting in iOS version was created through:
Program Details:
Description
Turn on/off background music.
iOS View Controller
SettingDetailViewController
Program Code
SettingDetailViewController.m
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.
- Save the modified setting in NSUserDefaults.
Developer Guide for Accessible Mobile Application Templates Settings
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.
Related Mobile Accessibility Best Practice
Best Practice 1.8 – Provide alternative means for notification
14.4.1 Android Version
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
- Show the options (ringtone and vibration) in a plain table
view.
- Enable/disable ringtone.
- Enable/disable vibration.
- Save the modified setting in SharedPreference.
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.
iOS View Controller
SettingDetailViewController
Program Code
SettingDetailViewController.m
Class / Function
- Show the options (ringtone and vibration) in a plain table
view.
- Enable/disable ringtone.
- Enable/disable vibration.
- Save the modified setting in NSUserDefaults.
Developer Guide for Accessible Mobile Application Templates Settings
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.
Related Mobile Accessibility Best Practice
Best Practice 2.11 – Lists with user-initiated auto-updating
14.5.1 Android Version
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
- Show the options (start and stop) in a plain table view.
- Change auto update function after the option is selected and
“Confirm Change” button is tapped.
- Save the modified setting in SharedPreference.
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
Program Code
SettingDetailViewController.m
Class / Function
- Show the options (start and stop) in a plain table view.
- Change auto update function after the option is selected and
“Confirm Change” button is tapped.
- Save the modified setting in NSUserDefaults.
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.
Related Mobile Accessibility Best Practice
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.
-
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.
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.
-
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:
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.
Related Mobile Accessibility Best Practice
Best Practice 1.1 – Provide text alternatives for non-text content
16.1.1 Android Version
The alternative text in Android version was controlled through:
Program Details:
Description
Alternative text of the image.
Android Activity
activity_main.xml
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" />
Developer Guide for Accessible Mobile Application Templates Miscellaneous
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);
Developer Guide for Accessible Mobile Application Templates Miscellaneous
16-3
16.2 READING SEQUENCE
Related Mobile Accessibility Best Practice
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:
16.2.1 Android Version
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.digitalpolicy.gov.hk/en/our_work/digital_infrastructure/information_cyber_
security/government/
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