ࡱ> E "#"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!""""""""" " " " " """""""""""""""""""c RbjbjZZ0P 8b\8b\%'&&&4ZZZB!.%ZDd'x/X///trLAAAAAAA$UG JAU&A//6KDRf l/&/AA.P-4,5/p|Ҽ9B1@ADTD1 J{UK55J|1K$&9Rft SRRRAARRRDUKRRRRRRRRRR T:  Developer Guide to Accessible Web Templates December 2017 Version  DOCPROPERTY Version \* MERGEFORMAT 1.2  COPYRIGHT NOTICE 2013 by the Government of the Hong Kong Special Administrative Region Unless otherwise indicated, the copyright in the works contained in this publication is owned by the Government of the Hong Kong Special Administrative Region. You may generally copy and distribute these materials in any format or medium provided the following conditions are met (a) the particular item has not been specifically indicated to be excluded and is therefore not to be copied or distributed; (b) the copying is not done for the purpose of creating copies for sale; (c) the materials must be reproduced accurately and must not be used in a misleading context; and (d) the copies shall be accompanied by the words copied/distributed with the permission of the Government of the Hong Kong Special Administrative Region. All rights reserved. If you wish to make copies for purposes other than that permitted above, you should seek permission by contacting the Office of the Government Chief Information Officer. Table of Contents  TOC \o "1-3" \h \z \u  HYPERLINK \l "_Toc353562623" 1 Preface  PAGEREF _Toc353562623 \h 4  HYPERLINK \l "_Toc353562624" 1.1 Purpose  PAGEREF _Toc353562624 \h 4  HYPERLINK \l "_Toc353562625" 2 How to Get the Web Templates?  PAGEREF _Toc353562625 \h 5  HYPERLINK \l "_Toc353562626" 3 Introduction to the Web Templates  PAGEREF _Toc353562626 \h 6  HYPERLINK \l "_Toc353562627" 4 Home Page  PAGEREF _Toc353562627 \h 7  HYPERLINK \l "_Toc353562628" 4.1 Home Page Header  PAGEREF _Toc353562628 \h 8  HYPERLINK \l "_Toc353562629" 4.1.1 Header Section with Source Code  PAGEREF _Toc353562629 \h 8  HYPERLINK \l "_Toc353562630" 4.2 Home Page Content Body  PAGEREF _Toc353562630 \h 11  HYPERLINK \l "_Toc353562631" 4.2.1 Banner Section with Source Code  PAGEREF _Toc353562631 \h 11  HYPERLINK \l "_Toc353562632" 4.2.2 Related Websites and Activities Section with Source Code  PAGEREF _Toc353562632 \h 12  HYPERLINK \l "_Toc353562633" 4.2.3 Whats News Section with Source Code  PAGEREF _Toc353562633 \h 13  HYPERLINK \l "_Toc353562634" 4.2.4 Video Embedded Section with Source Code  PAGEREF _Toc353562634 \h 15  HYPERLINK \l "_Toc353562635" 4.2.5 Hot Keyword Section with Source Code  PAGEREF _Toc353562635 \h 15  HYPERLINK \l "_Toc353562636" 4.3 Home page Footer  PAGEREF _Toc353562636 \h 16  HYPERLINK \l "_Toc353562637" 5 Secondary Layer with Text-based Content  PAGEREF _Toc353562637 \h 17  HYPERLINK \l "_Toc353562638" 5.1 Secondary Layer with Text-based Content Header  PAGEREF _Toc353562638 \h 17  HYPERLINK \l "_Toc353562639" 5.2 Secondary Layer with Text-based Content Content Body  PAGEREF _Toc353562639 \h 17  HYPERLINK \l "_Toc353562640" 5.3 Secondary Layer with Text-based Content Footer  PAGEREF _Toc353562640 \h 19  HYPERLINK \l "_Toc353562641" 6 Second Layer with Table Presentation  PAGEREF _Toc353562641 \h 20  HYPERLINK \l "_Toc353562642" 6.1 Second Layer with Table Presentation Header  PAGEREF _Toc353562642 \h 20  HYPERLINK \l "_Toc353562643" 6.2 Second Layer with Table Presentation Content body  PAGEREF _Toc353562643 \h 20  HYPERLINK \l "_Toc353562644" 6.3 Second Layer with Table Presentation Footer  PAGEREF _Toc353562644 \h 21  HYPERLINK \l "_Toc353562645" 7 Highlights of Web Accessibility Features  PAGEREF _Toc353562645 \h 22  HYPERLINK \l "_Toc353562646" 7.1 Provide Meaningful Text Alternatives for Images  PAGEREF _Toc353562646 \h 22  HYPERLINK \l "_Toc353562647" 7.2 Allow Text Resize  PAGEREF _Toc353562647 \h 23  HYPERLINK \l "_Toc353562648" 7.3 Provide Skip to Content Shortcut  PAGEREF _Toc353562648 \h 25  HYPERLINK \l "_Toc353562649" 7.4 Provide Three Level Menu with Keyboard Accessible  PAGEREF _Toc353562649 \h 26  HYPERLINK \l "_Toc353562650" 7.5 Provide User-initiated Background Sound  PAGEREF _Toc353562650 \h 28  HYPERLINK \l "_Toc353562651" 7.6 Provide Input Assistance  PAGEREF _Toc353562651 \h 29  HYPERLINK \l "_Toc353562652" 7.7 Provide Close link in Pop Up Windows  PAGEREF _Toc353562652 \h 34  HYPERLINK \l "_Toc353562653" 7.8 Provide an Accessibility Statement  PAGEREF _Toc353562653 \h 35  HYPERLINK \l "_Toc353562654" 8 Frequently Asked Questions (FAQ)  PAGEREF _Toc353562654 \h 36  HYPERLINK \l "_Toc353562655" 9 Enquiry  PAGEREF _Toc353562655 \h 39  Preface Purpose The purpose of this document is to provide a set of comprehensive information for web developers to download and customise the web templates with accessibility features provided by the Government for free use. Web developers and designers can take full advantage of the features provided in the web templates for making their own accessible webpages. The accessible web templates are developed with an aim at providing Free templates with basic web accessible features for adoption by non-government organisations (NGOs) or web developers/designers; Sample codes for web developers/designers to tailor-make their website easily; and A reference for web developers/designers for developing barrier-free websites. How to Get the Web Templates? You can download the web templates available at the following link  HYPERLINK "www.ogcio.gov.hk/en/community/web_mobileapp_accessibility/promulgating_resources/web_template/" www.ogcio.gov.hk/en/community/web_mobileapp_accessibility/promulgating_resources/web_template/ Download the Web Templates  Click Webpage Templates Download to download the web templates. Unzip the File Unzip the downloaded file to get the source files as below.  Introduction to the Web Templates The web templates provide three layers, including Home page Second layer with text-based content Second layer with table presentation 15 web accessibility features are incorporated in the templates for the website development, including Provision of meaningful text alternatives for images; Text resize function; Skip to Content shortcut; Three level menu with keyboard accessible; User-initiated background sound; Pop up window with Close link; Provision of an accessibility statement; Accessible animated content; Sufficient colour contrast; User-initiated content updating; Provision of input assistance for online form; Provision of descriptive information for links; Provision of accurate and appropriate headings for contents; Provision of meaningful titles and descriptions for table headers; and Correct syntax of webpages which are compatible with assistive technologies. The following sections detail the design and how to code the webpages. You may modify the HTML codes as needed and replace those underlined codes with your required information or other files which are suitable for your website. Home Page The home page of the accessible web templates includes a header, content body and footer.  Home Page Header The header of the home page consists of the following items Organisations logo; Background sound settings; Colour settings; Sitemap link; Text resize links; and Navigation menu.  4.1.1 Header Section with Source Code Provide an organisations logo and the settings in the HTML markup.