Version 1.3 August 2018
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 1
TABLE OF CONTENTS
1. Introduction ................................................................................................................................................. 2
2. About this Guide ......................................................................................................................................... 3
2.1 Basis of the Guide ........................................................................................................................................ 3
2.2 Using the Guide ........................................................................................................................................... 3
2.3 Structure of the Guide ................................................................................................................................ 4
3. Requirements on Website Design .............................................................................................................. 5
3.1 Layout ......................................................................................................................................................... 5
3.2 Text ......................................................................................................................................................... 5
3.3 Button ......................................................................................................................................................... 6
3.4 Colour ......................................................................................................................................................... 6
3.5 Hyperlink ..................................................................................................................................................... 7
3.6 Moving Content ........................................................................................................................................... 7
3.7 Pop-up window ............................................................................................................................................ 7
3.8 Video/audio .................................................................................................................................................. 8
3.9 e-Form ......................................................................................................................................................... 8
3.10 Captcha ........................................................................................................................................................ 8
3.11 Accessibility Statement ............................................................................................................................... 9
4. Requirements for Implementation and Maintenance .............................................................................. 9
4.1 HTML coding .............................................................................................................................................. 9
4.2 Input support ............................................................................................................................................. 10
4.3 Language .................................................................................................................................................... 10
4.4 Navigation control ..................................................................................................................................... 11
4.5 Test ....................................................................................................................................................... 11
5. Requirements for Content Update ........................................................................................................... 12
5.1 Text ....................................................................................................................................................... 12
5.2 Document in Portable Document Format (PDF) .................................................................................... 13
5.3 Photo /graphic ........................................................................................................................................... 14
5.4 Video / audio .............................................................................................................................................. 14
6. Selection of Contractor ............................................................................................................................. 15
7. Reference Materials on Web Accessibility .............................................................................................. 15
Annex A – Sample Accessibility Statement ...................................................................................................... 16
Annex B – Checklist for Accessibility Testing on Website .............................................................................. 17
Annex C – Sample Corporate Profile of the contractor .................................................................................. 21
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 2
1. Introduction
With the rapid growth of the Internet, ensuring that websites are accessible
to persons with disabilities is now an essential consideration to enable their
full integration into society.
This is also in line with the spirit of the United Nations’ Convention on the
Rights of Persons with Disabilities, which came into force for the People’s
Republic of China, including the Hong Kong Special Administrative
Region (HKSAR), on 31 August 2008.
By adopting relevant guidelines when designing websites to cater for the
needs of persons with disabilities, you are making your website more user-
friendly, maximising your customer base and showing that you are an
organisation that cares.
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 3
2. About this Guide
This document “Guide to Preparation of Procurement Specifications for
Accessible Websites” (the Guide) provides sample specifications for
websites that are accessible by all people including the persons with
disabilities.
This Guide generally addresses the requirements in various development
life cycles of websites, including design, develop, maintain and on-going
content update.
This Guide is a living document, which will be continually reviewed and
updated to reflect new development of industry best practices for web
accessibility. This Guide will be reviewed every 12 months.
2.1 Basis of the Guide
This Guide mainly follows the international standards and best practices in
web accessibility such as Web Content Accessibility Guidelines (WCAG)
2.0 Level AA standard published by the World Wide Web Consortium
(W3C). WCAG 2.0 describes a total of 61 success criteria which must be
met to make content accessible. The success criteria are grouped in three
conformance levels, ranging from A (minimum conformance) to the
medium level AA and up to the highest level AAA.
It is recommended that new websites or websites that have undergone
substantive changes should at least comply with WCAG 2.0 Level AA (i.e.
fulfill all the criteria for Level A and Level AA). The requirements given
in this Guide cover all these criteria.
2.2 Using the Guide
Readers can make reference to the requirement specifications proposed in
Section 3 - 6 of this Guide. The requirement specifications proposed in
this Guide are however not intended to be definitive nor exhaustive.
Readers may make necessary adaptation to meet their specific business
needs.
In Section 3 - 5, the requirements are specified with references to the
corresponding WCAG 2.0 success criteria and guidelines in the Web
Accessibility Handbook (the Handbook) published by OGCIO. Reader
may refer to the corresponding sections of the Handbook to know how the
requirements can be successfully implemented.
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 4
2.3 Structure of the Guide
Design
(Section 3)
Layout (Section 3.1)
Text
(Section 3.2)
Button (Section 3.3)
Colour (Section 3.4)
Hyperlink (Section 3.5)
Moving Content
(Section 3.6)
Pop-up window
(Section 3.7)
Video/audio (Section 3.8)
e-Form (Section 3.9)
Captcha (Section 3.10)
Accessibility Statement
(Section 3.11)
Implementation and Maintenance
(Section 4)
HTML coding (Section 4.1)
Input support
(Section 4.2)
Language (Section 4.3)
Navigation control
(Section 4.4)
Test
(Section 4.5)
Content Update (Section 5)
Text
(Section 5.1)
Document in PDF (Section
5.2)
Photo / graphic
(Section 5.3)
Video / audio (Section 5.4)
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 5
3. Requirements on Website Design
The Contractor shall meet all the requirements in this section when
designing the website.
3.1 Layout
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Define headings for the content, links
and table columns to illustrate the
structure and relationships of
contents on webpage.
A
1.3.1
8.5
(b) Give webpages a title that accurately
describes what the content is about.
A
2.4.2
8.16
(c) Headings and labels must be accurate
descriptions of the accompanying
content.
AA
2.4.6
9.7
(d) Provide multiple ways to access a
webpage (e.g. search function, site
map).
AA
2.4.5
9.6
(e) Where navigations or links are on
multiple webpages, ensure they are
presented consistently across all
pages.
AA
3.2.3
9.10
(f) For all items that have the same
functionality, ensure they use the
same label.
AA
3.2.4
9.11
3.2 Text
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Provide function to enlarge text up to
200% without the loss of content or
functionality.
AA
1.4.4
9.4
(b) Use machine-readable text instead of
image to convey important
information.
AA
1.4.5
9.5
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 6
3.3 Button
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Provide button of larger size and easy
control for all pages of the website.
N/A N/A
(b) Label the button and ensure clear
instructions are in place to show
which button to use and how to use it.
Do not rely solely on sound, shape,
size or visual location to provide
instructions for understanding
content.
A
1.3.3
8.7
(c) Adopt consistent label of buttons for
all pages of the website. For all
items that have the same
functionality, ensure they use the
same label. For example, a "Buy
Now" button on one webpage should
be identically labelled as a "Buy
Now" button on another webpage so
that the user knows these buttons
would perform the same function.
AA
3.2.4
9.11
3.4 Colour
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Design text and images so that they
have a contrast ratio of at least 4.5:1
between the background and the
foreground.
AA
1.4.3
9.3
(b) Do not rely solely on distinguishing
colour to understand the content.
A
1.4.1
8.8
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 7
3.5 Hyperlink
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
Write descriptive link text to ensure the
purpose of each link can be understood by
the text alone, or by the link text and the
context.
A
2.4.4
8.18
3.6 Moving Content
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
Provide ways to stop or restart the
webpage content from moving, scrolling
and blinking for content that moves
automatically for more than five seconds
or is updated automatically.
A
2.2.2
8.13
3.7 Pop-up window
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Ensure the keyboard can be used to
control or dismiss dialogue boxes,
lightbox effect, popups or other
windows.
A
2.1.2
8.11
(b) Announce opening of pop-up
window by screen reader when close
button is not provided.
N/A N/A
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 8
3.8 Video/audio
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
Use large volume bar or keyboard
shortcut to adjust volume.
N/A 6.8
3.9 e-Form
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Provide simple instructions and cues
for entering information into forms.
For example, use labels, instructions
and examples.
A
3.3.2
8.23
(b) Allow user to check and confirm
his/her information before
submitting, or reverse the transaction
after submitting.
AA
3.3.4
9.13
(c) Ensure that processes on a website
are not time dependent. Otherwise,
means to extend or stop the time limit
to complete the form shall be
provided.
A
2.2.1
8.12
(d) Show meaningful message and
suggestion for error fixing upon input
error on the website.
A / AA
3.3.1 and
3.3.3
8.22 and 9.12
3.10 Captcha
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
Provide audio as alternative for reading
the code.
N/A N/A
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 9
3.11 Accessibility Statement
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
Provide an accessibility statement with
contact point for users to contact the
website owners when they encounter
accessibility problems.
N/A N/A
A sample accessibility statement is provided in Annex A.
4. Requirements for Implementation and Maintenance
The Contractor shall meet all the following requirements in this section
during implementation and maintenance of the website.
4.1 HTML coding
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Ensure the webpage is written/coded
correctly for the screen reader
accurately reads the webpage. Mark
each start tag with the corresponding
closing tag.
A
4.1.1
8.24
(b) Assign “Name”, “Value” and “Role”
for each object on a webpage.
A
4.1.2
8.25
(c) When writing the HTML code for a
webpage, make sure the content is
coded in a logical order. It will then
be communicated in a logical manner
when read by screen readers.
A
2.4.3
8.17
(d) Define and use Cascading Style Sheet
(CSS) for ease of subsequent
maintenance and update of the
website.
N/A N/A
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 10
4.2 Input support
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) When a “text field” is selected, the
Contractor shall ensure it is clear that
the focus has been moved into the
“text field”. For example, ensure
the cursor is easily visible within the
field.
AA
2.4.7
9.8
(b) Ensure all content and functions can
be accessed via a keyboard such as
“Tab” key or “Enter” key.
A
2.1.1
8.10
(c) Ensure the keyboard can be used to
control or dismiss dialogue boxes,
lightbox effect, popups or other
windows.
A
2.1.2
8.11
4.3 Language
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Define the primary language of a
webpage within the HTML code for
screen readers to read the words in
the webpage correctly.
A
3.1.1
8.19
(b) For webpage with contents in
multiple languages, define the change
in language so that screen readers can
read the contents correctly.
AA
3.1.2
9.9
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 11
4.4 Navigation control
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Define meaningful reading sequence
for content on webpage.
A
1.3.2
8.6
(b) Use simple and orderly tab sequence,
without unpredictable change in
context, interruption or looping.
A
3.2.1 and
3.2.2
8.20 and 8.21
(c) Allow user to skip past repetitive
blocks of content, and add a link that
goes directly to the main content at
the top of each webpage.
A
2.4.1
8.15
4.5 Test
The Contractor shall perform the following tests to verify accessibility
conformance after implementation or maintenance of website. A
sample checklist for these tests is given in Annex B for reference.
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Conduct code scanning by tools such
as AChecker, WAVE or Total
Validator.
N/A 10.1
(b) Conduct visual review of the
webpages and test colour contrast
with tools such as Colour Contrast
Analyser and Web Developer
(Firefox plugin).
N/A 10.2
(c) Manual testing with Screen Readers
such as JAWS, NVDA, VoiceOver
and Windows Light.
N/A 10.3
(d) Testing with other assistive
technology tools such screen
magnifiers and voice controls.
N/A 10.4
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 12
Note: Apart from the testing techniques mentioned above, website owners may
also consider using third party testing by persons with disabilities. The
most thorough approach to ensure web accessibility is to test a website with
persons with various disabilities to learn what areas are difficult for them
to access. As this testing method requires more time and resources, it is
best to first undertake the testing methods mentioned above to rectify as
many web accessibility issues as possible, and then use third party testing
by persons with disabilities at later stages of a project to uncover more
subtle issues.
5. Requirements for Content Update
The Contractor shall meet the following requirements in this section when
updating the contents on the website.
5.1 Text
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Keep contents of text version as
update as the primary version.
N/A N/A
(b) All content on a website should be
able to be represented in text so that
it can be read by screen readers.
A
1.1.1
8.1
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 13
5.2 Document in Portable Document Format (PDF)
Requirements (Note 1) WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) PDF documents in the webpage
should be produced in actual text that
is readable by assistive technologies
such as screen readers.
(b) The content of the documents should
be organised in logical reading
structure.
(c) Meaningful text alternatives for
images and document title should be
provided.
(d) Use table elements for table markup.
(e) Set the default language in the
document catalog.
See Note 2 6.10
Note 1: As the conversion of PDF files to accessible format may require
considerable efforts, the procurement specification should
clearly state the estimated number of PDF files that require
conversion and the format of the source PDF files (i.e. text
based or image based) as far as possible.
Note 2: Standards and techniques of producing accessible PDF are
defined in ISO 14289-1:2014 (ISO standard for accessible PDF)
and PDF techniques published by W3C in WCAG 2.0.
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 14
5.3 Photo /graphic
Requirements WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Define meaningful alt-text or caption
for photos and graphics.
A
1.1.1
8.1
(b) Ensure that all flashing items are
dimmed, and cover only a small area
of the screen.
A
2.3.1
8.14
5.4 Video / audio
Requirements (Note) WCAG 2.0
Level and
Criterion
Section in
Handbook
(a) Provide transcript1, captions2 or sign
language in pre-recorded audio or
video.
A
1.2.1 - 1.2.3
8.2 - 8.4
(b) Provide captions for live audio
content.
AA
1.2.4
9.1
(c) Provide a descriptive audio track in
addition to the prerecorded video so
that visually impaired persons can
still use the webpage without the
video.
AA
1.2.5
9.2
(d) Disable automatic play of video and
background audio and provide
function to turn-on/off by user.
A
1.4.2
8.9
Note: As the conversion of video to accessible format may require
considerable efforts, the procurement specification should clearly
state the estimated number of video files that require conversion
and the level of accessibility required (e.g. transcript, captions or
sign language) as far as possible.
1 Transcript refers to description of the video or audio appeared on the webpage. 2 Captions (or subtitles) are embedded in the video or audio to show the audio information in
text.
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 15
6. Selection of Contractor
6.1 The Contractor shall demonstrate its ability and experience in
developing/maintaining accessible websites and shall provide at least the
following information:
(a) Experience of staff in developing accessible websites (number of
years of relevant experience for staff to be deployed to the project
under this contract)
(a) Track record of Contractor in developing accessible websites (number
of completed projects for development of accessible websites)
A sample Corporate Profile of the Contractor is shown in Annex C.
7. Reference Materials on Web Accessibility
(a) W3C Web Content Accessibility Guidelines (WCAG) 2.0
(http://www.w3.org/TR/WCAG20/)
(b) Web Accessibility Handbook
(http://www.webforall.gov.hk/en/handbook/)
(c) Illustration on Web Accessibility Success Criteria
(https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibili
ty/promulgating_resources/handbook/live_example/)
(d) Frequently Asked Questions on Web Accessibility
(https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibil
ity/faq/)
(e) PDF Techniques for WCAG 2.0
(https://www.w3.org/TR/WCAG-TECHS/pdf.html)
(f) ISO 14289-1:2014
Document management applications - Electronic document file format
enhancement for accessibility - Part 1: Use of ISO 32000-1 (PDF/UA-1)
(http://www.iso.org/iso/catalogue_detail.htm?csnumber=64599)
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 16
Annex A – Sample Accessibility Statement
Accessibility Statement
This website (or Some webpages of this website) adopts web accessibility design and meets
the [name of the Accessibility Standard]. Should you have any enquiries or comments on its
accessibility, please contact us by phone or email.
Telephone number : xxxx xxxx [please provide the telephone number]
Email address : [email protected] [please provide the email address]
無障礙聲明
本網站(或本網站部分網頁) 採用無障礙網頁設計,並符合[無障礙標準的名稱]準則。 如
對本網站在使用上有任何查詢或意見,請致電或發送電郵與我們聯絡。
電話號碼 : xxxx xxxx [請提供電話號碼]
電郵地址:[email protected] [請提供電郵地址]
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 17
Annex B – Checklist for Accessibility Testing on Website
How to Use This Checklist
Begin by following the steps below for Level A compliance, then repeat the steps for Level
AA – and if necessary repeat again for Level AAA. Following this checklist will enable
websites to be tested in the most efficient way.
1. Review each of the criteria and “check off” all the success criteria that DO NOT APPLY
to the website, using the N/A column.
For example, if a website does not have any audio or video content, then criteria
1.2.1 can be marked N/A and the Visual Review and Assistive Technology (AT)
Test can be skipped.
Other items marked as skipped can be ignored for that test as it is not possible to
determine compliance with that test.
2. Scan website with a code scanning tool focusing on each of the items in the Code Scan
column.
Note that code scan tools often report items that may not require fixing. Web
developers should investigate each item found to determine if it is in fact a real issue.
3. Perform Visual Review by checking all items listed in the visual review column.
4. Test using various Assistive Technology (AT) tools such as screen readers, screen
magnifiers and voice controls.
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 18
Level A Checklist
Level A Success Criteria N/A Code Scan Visual
Review AT Tests
1.1.1 Non-text Content
1.2.1 Audio-only and Video-only
(Prerecorded) Skip
1.2.2 Captions (Prerecorded) Skip
1.2.3 Audio Description or Media
Alternative (Prerecorded) Skip
1.3.1 Info and Relationships
1.3.2 Meaningful Sequence Skip
1.3.3 Sensory Characteristics Skip
1.4.1 Use of Colour Skip Skip
1.4.2 Audio Control Skip
2.1.1 Keyboard
2.1.2 No Keyboard Trap Skip
2.2.1 Timing Adjustable Skip
2.2.2 Pause, Stop, Hide Skip
2.3.1 Three Flashes or Below Threshold Skip Skip
2.4.1 Bypass Blocks Skip
2.4.2 Page Titled
2.4.3 Focus Order Skip
2.4.4 Link Purpose (In Context) Skip
3.1.1 Language of Page Skip Skip
3.2.1 On Focus Skip
3.2.2 On Input Skip
3.3.1 Error Identification Skip
3.3.2 Labels or Instructions Skip
4.1.1 Parsing Skip Skip
4.1.2 Name, Role, Value Skip Skip
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 19
Level AA Checklist
Level AA Success Criteria N/A Code
Scan
Visual
Review AT Tests
1.2.4 Captions (Live) Skip
1.2.5 Audio Description (Prerecorded) Skip
1.4.3 Contrast (Minimum) Skip Skip
1.4.4 Resize text Skip Skip
1.4.5 Images of Text Skip Skip
2.4.5 Multiple Ways Skip Skip
2.4.6 Headings and Labels Skip Skip
2.4.7 Focus Visible Skip Skip
3.1.2 Language of Parts Skip Skip
3.2.3 Consistent Navigation Skip
3.2.4 Consistent Identification Skip
3.3.3 Error Suggestion Skip
3.3.4 Error Prevention Skip
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 20
Level AAA Checklist
Level AAA Success Criteria N/A Code
Scan
Visual
Review
AT
Tests
1.2.6 Sign Language (Prerecorded) Skip Skip
1.2.7 Extended Audio Description
(Prerecorded) Skip
1.2.8 Media Alternative (Prerecorded) Skip
1.2.9 Audio-only (Live) Skip
1.4.6 Contrast (Enhanced) Skip Skip
1.4.7 Low or No Background Audio Skip
1.4.8 Visual Presentation Skip Skip
1.4.9 Images of Text (No Exception) Skip Skip
2.1.3 Keyboard (No Exception) Skip Skip
2.2.3 No Timing Skip Skip
2.2.4 Interruptions Skip Skip
2.2.5 Re-authenticating Skip Skip
2.3.2 Three Flashes Skip Skip
2.4.8 Location Skip
2.4.9 Link Purpose (Link Only) Skip
2.4.10 Section Headings
3.1.3 Unusual Words Skip
3.1.4 Abbreviations Skip Skip
3.1.5 Reading Level Skip
3.1.6 Pronunciation Skip
3.2.5 Change on Request Skip
3.3.5 Help Skip
3.3.6 Error Prevention (All) Skip
Guide to Preparation of Procurement Specifications for Accessible Websites
Page 21
Annex C – Sample Corporate Profile of the contractor
1. Corporate Profile
(a) Name of the contractor;
(b) Background of the contractor – company profile, year of establishment, key
personnel and size of staff, etc.;
(c) Contact information of the responsible officer(s) – name, post title,
correspondence and email address, etc.; and
(d) Use the table below to list out track record(s) and relevant experience of the
contractor in recent five years in undertaking projects in the areas of website
development/maintenance and web accessibility related projects with
conformance to Web Content Accessibility Guidelines (WCAG) 2.0. This
includes the date and duration of the projects, nature, clients and project owners.
Track Records:
Completed projects on website development/maintenance (at least five), Web accessibility
related projects with conformance to Web Content Accessibility Guidelines (WCAG) 2.0 (at
least two)
Project
Duration*
No. of
months
Project
Title
Website
development
Level of
accessibility
standard
(Level A/AA
/AAA)
Web
accessi
bility
related
Client or
Project
Owner
e.g
6th Oct 2010
-
5th Oct 2011
12
months
Design and
Developme
nt of AAA
Homepage
(URL of the
project
showcase)
Yes No AAA
Company
6th Oct 2011
-
5th Oct 2012
12
months
Revamp of
AAA
Homepage
(URL of the
project
showcase)
Yes Yes AAA
Departme
nt of
HKSAR
Governme
nt
(Add row when necessary)
*Projects have to be completed within recent five years counting from the bidding closing date.
Experience gained from free of charge non-client initiated project in web related services shall
not be provided in the proposal and such kind of experience will not be included for evaluation
purpose.
2. Any other information considered by the contractor to be relevant to the evaluation of
the proposal.