TABLE OF CONTENTS. Guide to Preparation of Procurement Specifications for Accessible Websites

Transcription

1

2 Guide to Preparation of Procurement Specifications for ccessible Websites TBLE OF CONTENTS 1. Introduction bout this Guide Basis of the Guide Using the Guide Structure of the Guide Requirements on Website Design Layout Text Button Colour Hyperlink Moving Content Pop-up window Video/audio e-form Captcha ccessibility Statement Requirements for Implementation and Maintenance HTML coding Input support Language Navigation control Test Requirements for Content Update Text Document in Portable Document Format (PDF) Photo /graphic Video / audio Selection of Contractor Reference Materials on Web ccessibility nnex Sample ccessibility Statement nnex B Checklist for ccessibility Testing on Website nnex C Sample Corporate Profile of the contractor Page 1

3 Guide to Preparation of Procurement Specifications for ccessible Websites 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 dministrative Region (HKSR), on 31 ugust 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 2

4 Guide to Preparation of Procurement Specifications for ccessible Websites 2. bout this Guide This document Guide to Preparation of Procurement Specifications for ccessible 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 ccessibility Guidelines (WCG) 2.0 Level standard published by the World Wide Web Consortium (W3C). WCG 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 (minimum conformance) to the medium level and up to the highest level. It is recommended that new websites or websites that have undergone substantive changes should at least comply with WCG 2.0 Level (i.e. fulfill all the criteria for Level and Level ). 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 WCG 2.0 success criteria and guidelines in the Web ccessibility (the ) published by OGCIO. Reader may refer to the corresponding sections of the to know how the requirements can be successfully implemented. Page 3

5 Guide to Preparation of Procurement Specifications for ccessible Websites 2.3 Structure of the Guide Design (Section 3) Implementation and Maintenance (Section 4) Content Update (Section 5) Layout (Section 3.1) HTML coding (Section 4.1) Text (Section 5.1) Text (Section 3.2) Button (Section 3.3) Colour (Section 3.4) Input support (Section 4.2) Language (Section 4.3) Navigation control (Section 4.4) Document in PDF (Section 5.2) Photo / graphic (Section 5.3) Video / audio (Section 5.4) Hyperlink (Section 3.5) Test (Section 4.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) ccessibility Statement (Section 3.11) Page 4

6 Guide to Preparation of Procurement Specifications for ccessible Websites 3. Requirements on Website Design The Contractor shall meet all the requirements in this section when designing the website. 3.1 Layout Requirements WCG 2.0 (a) Define headings for the content, links and table columns to illustrate the structure and relationships of contents on webpage. (b) Give webpages a title that accurately describes what the content is about. (c) Headings and labels must be accurate descriptions of the accompanying content. (d) Provide multiple ways to access a webpage (e.g. search function, site map). (e) Where navigations or links are on multiple webpages, ensure they are presented consistently across all pages. (f) For all items that have the same functionality, ensure they use the same label Text Requirements WCG 2.0 (a) Provide function to enlarge text up to 200% without the loss of content or functionality. (b) Use machine-readable text instead of image to convey important information Page 5

7 Guide to Preparation of Procurement Specifications for ccessible Websites 3.3 Button Requirements WCG 2.0 (a) Provide button of larger size and easy control for all pages of the website. (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. (c) dopt 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. N/ N/ Colour Requirements WCG 2.0 (a) Design text and images so that they have a contrast ratio of at least 4.5:1 between the background and the foreground. (b) Do not rely solely on distinguishing colour to understand the content Page 6

8 Guide to Preparation of Procurement Specifications for ccessible Websites 3.5 Hyperlink Requirements WCG 2.0 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 Moving Content Requirements WCG 2.0 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 Pop-up window Requirements WCG 2.0 (a) Ensure the keyboard can be used to control or dismiss dialogue boxes, lightbox effect, popups or other windows. (b) nnounce opening of pop-up window by screen reader when close button is not provided N/ 8.11 N/ Page 7

9 Guide to Preparation of Procurement Specifications for ccessible Websites 3.8 Video/audio Requirements WCG 2.0 Use large volume bar or keyboard shortcut to adjust volume. N/ e-form Requirements WCG 2.0 (a) Provide simple instructions and cues for entering information into forms. For example, use labels, instructions and examples. (b) llow user to check and confirm his/her information before submitting, or reverse the transaction after submitting. (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. (d) Show meaningful message and suggestion for error fixing upon input error on the website / and and Captcha Requirements WCG 2.0 Provide audio as alternative for reading the code. N/ N/ Page 8

10 Guide to Preparation of Procurement Specifications for ccessible Websites 3.11 ccessibility Statement Requirements WCG 2.0 Provide an accessibility statement with contact point for users to contact the website owners when they encounter accessibility problems. N/ N/ sample accessibility statement is provided in nnex. 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 WCG 2.0 (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. (b) ssign Name, Value and Role for each object on a webpage. (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. (d) Define and use Cascading Style Sheet (CSS) for ease of subsequent maintenance and update of the website N/ N/ Page 9

11 Guide to Preparation of Procurement Specifications for ccessible Websites 4.2 Input support Requirements WCG 2.0 (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. (b) Ensure all content and functions can be accessed via a keyboard such as Tab key or Enter key. (c) Ensure the keyboard can be used to control or dismiss dialogue boxes, lightbox effect, popups or other windows Language Requirements WCG 2.0 (a) Define the primary language of a webpage within the HTML code for screen readers to read the words in the webpage correctly. (b) For webpage with contents in multiple languages, define the change in language so that screen readers can read the contents correctly Page 10

12 Guide to Preparation of Procurement Specifications for ccessible Websites 4.4 Navigation control Requirements WCG 2.0 (a) Define meaningful reading sequence for content on webpage. (b) Use simple and orderly tab sequence, without unpredictable change in context, interruption or looping. (c) llow 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 and and Test The Contractor shall perform the following tests to verify accessibility conformance after implementation or maintenance of website. sample checklist for these tests is given in nnex B for reference. Requirements WCG 2.0 (a) Conduct code scanning by tools such as Checker and WVE. (b) Conduct visual review of the webpages and test colour contrast with tools such as Vischeck, Web Developer (Firefox plugin) and Colour Contrast Check. (c) Manual testing with Screen Readers such as Jaws, VoiceOver, Windows Light and NVD. (d) Testing with other assistive technology tools such screen magnifiers and voice controls. N/ 10.1 N/ 10.2 N/ 10.3 N/ 10.4 Page 11

13 Guide to Preparation of Procurement Specifications for ccessible Websites Note: part 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. s 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 5.1 Text The Contractor shall meet the following requirements in this section when updating the contents on the website. Requirements WCG 2.0 (a) Keep contents of text version as N/ update as the primary version. (b) ll content on a website should be able to be represented in text so that it can be read by screen readers N/ 8.1 Page 12

14 Guide to Preparation of Procurement Specifications for ccessible Websites 5.2 Document in Portable Document Format (PDF) Requirements (Note 1) WCG 2.0 (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 Note 1: s 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 :2014 (ISO standard for accessible PDF) and PDF techniques published by W3C in WCG 2.0. Page 13

15 Guide to Preparation of Procurement Specifications for ccessible Websites 5.3 Photo /graphic Requirements WCG 2.0 (a) Define meaningful alt-text or caption for photos and graphics. (b) Ensure that all flashing items are dimmed, and cover only a small area of the screen Video / audio Requirements (Note) WCG 2.0 (a) Provide transcript 1, captions 2 or sign language in pre-recorded audio or video. (b) Provide captions for live audio content. (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. (d) Disable automatic play of video and background audio and provide function to turn-on/off by user Note: s 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 14

16 Guide to Preparation of Procurement Specifications for ccessible Websites 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) sample Corporate Profile of the Contractor is shown in nnex C. 7. Reference Materials on Web ccessibility (a) W3C Web Content ccessibility Guidelines (WCG) 2.0 ( (b) Web ccessibility ( (c) Illustration on Web ccessibility Success Criteria ( mple/) (d) Frequently sked Questions on Web ccessibility ( (e) PDF Techniques for WCG 2.0 ( (f) ISO :2014 Document management applications - Electronic document file format enhancement for accessibility - Part 1: Use of ISO (PDF/U-1) ( Page 15

17 Guide to Preparation of Procurement Specifications for ccessible Websites nnex Sample ccessibility Statement ccessibility Statement This website (or Some webpages of this website) adopts web accessibility design and meets the [name of the ccessibility Standard]. Should you have any enquiries or comments on its accessibility, please contact us by phone or . Telephone number: xxxx xxxx [please provide the telephone number] address : xxx@xxx.xxx [please provide the address] 無 障 礙 聲 明 本 網 站 ( 或 本 網 站 部 分 網 頁 ) 採 用 無 障 礙 網 頁 設 計, 並 符 合 [ 無 障 礙 標 準 的 名 稱 ] 準 則 如 對 本 網 站 在 使 用 上 有 任 何 查 詢 或 意 見, 請 致 電 或 發 送 電 郵 與 我 們 聯 絡 電 話 號 碼 : xxxx xxxx [ 請 提 供 電 話 號 碼 ] 電 郵 地 址 :xxx@xxx.xxx [ 請 提 供 電 郵 地 址 ] Page 16

18 Guide to Preparation of Procurement Specifications for ccessible Websites nnex B Checklist for ccessibility Testing on Website How to Use This Checklist Begin by following the steps below for Level compliance, then repeat the steps for Level and if necessary repeat again for Level. 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 PPLY to the website, using the N/ column. For example, if a website does not have any audio or video content, then criteria can be marked N/ and the Visual Review and ssistive Technology (T) 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 ssistive Technology (T) tools such as screen readers, screen magnifiers and voice controls. Page 17

19 Guide to Preparation of Procurement Specifications for ccessible Websites Level Checklist Level Success Criteria N/ Code Scan Non-text Content udio-only and Video-only (Prerecorded) Skip Captions (Prerecorded) Skip udio Description or Media lternative (Prerecorded) Info and Relationships Skip Meaningful Sequence Skip Sensory Characteristics Skip Visual Review T Tests Use of Colour Skip Skip udio Control Skip Keyboard No Keyboard Trap Skip Timing djustable Skip Pause, Stop, Hide Skip Three Flashes or Below Threshold Skip Skip Bypass Blocks Skip Page Titled Focus Order Skip Link Purpose (In Context) Skip Language of Page Skip Skip On Focus Skip On Input Skip Error Identification Skip Labels or Instructions Skip Parsing Skip Skip Name, Role, Value Skip Skip Page 18

20 Guide to Preparation of Procurement Specifications for ccessible Websites Level Checklist Level Success Criteria N/ Code Scan Captions (Live) Skip udio Description (Prerecorded) Skip Visual Review T Tests Contrast (Minimum) Skip Skip Resize text Skip Skip Images of Text Skip Skip Multiple Ways Skip Skip Headings and Labels Skip Skip Focus Visible Skip Skip Language of Parts Skip Skip Consistent Navigation Skip Consistent Identification Skip Error Suggestion Skip Error Prevention Skip Page 19

21 Guide to Preparation of Procurement Specifications for ccessible Websites Level Checklist Level Success Criteria N/ Code Scan Visual Review T Tests Sign Language (Prerecorded) Skip Skip Extended udio Description (Prerecorded) Skip Media lternative (Prerecorded) Skip udio-only (Live) Skip Contrast (Enhanced) Skip Skip Low or No Background udio Skip Visual Presentation Skip Skip Images of Text (No Exception) Skip Skip Keyboard (No Exception) Skip Skip No Timing Skip Skip Interruptions Skip Skip Re-authenticating Skip Skip Three Flashes Skip Skip Location Skip Link Purpose (Link Only) Skip Section Headings Unusual Words Skip bbreviations Skip Skip Reading Level Skip Pronunciation Skip Change on Request Skip Help Skip Error Prevention (ll) Skip Page 20

22 Guide to Preparation of Procurement Specifications for ccessible Websites nnex C Sample Corporate Profile of the contractor 1. Corporate Profile (a) Name of the contractor; (b) (c) (d) Background of the contractor company profile, year of establishment, key personnel and size of staff, etc.; Contact information of the responsible officer(s) name, post title, correspondence and address, etc.; and 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 ccessibility Guidelines (WCG) 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 ccessibility Guidelines (WCG) 2.0 (at least two) Project Duration* e.g 6 th Oct th Oct th Oct th Oct 2012 No. of months 12 months 12 months (dd row when necessary) Project Title Design and Developme nt of Homepage (URL of the project showcase) Revamp of Homepage (URL of the project showcase) Website development Level of accessibility standard (Level / /) Web accessi bility related Client or Project Owner Yes No Company Yes Yes Departme nt of HKSR Governme nt *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. ny other information considered by the contractor to be relevant to the evaluation of the proposal. Page 21