version 1.3 august 2018 - ogcio : home...4.1 html coding requirements wcag 2.0 level and criterion...

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


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.


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.


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)


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


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


Page 6

3.3 Button


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


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


Page 7

3.5 Hyperlink


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


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


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


Page 8

3.8 Video/audio


Level and

Criterion

Section in

Handbook

Use large volume bar or keyboard

shortcut to adjust volume.

N/A 6.8

3.9 e-Form


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


Level and

Criterion

Section in

Handbook

Provide audio as alternative for reading

the code.

N/A N/A


Page 9

3.11 Accessibility Statement


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


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


Page 10

4.2 Input support


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


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


Page 11

4.4 Navigation control


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.


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


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


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


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.

http://www.w3.org/TR/WCAG-TECHS/pdf.html


Page 14

5.3 Photo /graphic


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.


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)

http://www.w3.org/TR/WCAG20/

http://www.webforall.gov.hk/en/handbook/

https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibility/promulgating_resources/handbook/live_example/

https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibility/promulgating_resources/handbook/live_example/

https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibility/faq/

https://www.ogcio.gov.hk/en/our_work/community/web_mobileapp_accessibility/faq/

https://www.w3.org/TR/WCAG-TECHS/pdf.html

http://www.iso.org/iso/catalogue_detail.htm?csnumber=64599


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] [請提供電郵地址]

mailto:[email protected]


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.


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


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


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


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.

version 1.3 august 2018 - ogcio : home...4.1 html coding requirements wcag 2.0 level and criterion...

Documents