Information Accessibility-Transformation Guide _ Information accessibility

1 Introduction 1.1 Document Purpose

For the relevant contractors to transform a provincial network of information-free information construction to provide a guide to improve efficiency, so that its transformation in line with WCAG2.0 A, AA-level standards, special preparation of this program. 1.2 Reader objects

A provincial information center, a provincial network office building and other related stakeholders. 1.3 Reference documentation

Web Content Accessibility Guide (WCAG) 2.0

"yd/t 1822-2012 website design barrier-Free rating test method"

"Yd/t 1890-2009 information accessibility technology requirements and evaluation methods," 1.4 Terminology and abbreviation interpretation

Wcag2.0:web content Barrier-free Guide 2.0.

Main Hall: The main hall platform of a provincial network office, including the unified Front Service Portal and backstage support system, in this document refers to the service portal.

Time-based Media: Audio and video. 2 Overview

In order to embody the government's fairness in providing public services, the requirement of justice and equalization, to guarantee the right of the disadvantaged groups to obtain the public service of the government, our government has been committed to promoting the application of information barrier-free technology in various fields, and has formulated the regulations on barrier-free environment construction, the barrier-free technical requirements of website design, Website design Barrier-free rating test methods and other relevant regulations and industry standards. Under the environment of building a service-oriented government, information barrier-free service becomes a new bright spot for the government office to improve the public service level and expand the scope of public service.

As an important bridge connecting the government and the public, the Internet Office Hall of a province can visit a provincial network office hall from a certain provincial government information barrier-free public service platform. However, a provincial network office site itself can not meet the WCAG (Web content Barrier-free guide) 2.0 of the definition of AA level requirements, have a direct impact on the accessibility of government information and services to people with disabilities and the elderly; the elderly and people with disabilities have direct access to an online office in a province without accessibility aids provided by an accessible public service platform for a province Help. 3 General Requirements 3.1 overview

The Web content Barrier-free guide (WCAG) 2.0, developed by the Internet consortium, and the relevant standards for Web site design barrier-free technical requirements issued by the Ministry of Information Industry of the People's Republic of China for technical basis, reference to the international general information Barrier-free design code, the establishment of online Office hall information Barrier-

Requirements from the aspects of perception, operability, understanding and compatibility, including the identification of Web site accessibility, accessibility aids, and other requirements, the main Office portal, provincial window and the city of the Department of the implementation of information barrier-free construction provides technical reference. 3.2 Application of a province online Office hall information Barrier-free transformation of WCAG2.0 A,AA level entries

Serial number

Standard Original

Grade

Reference questions

Principle 1: Accessibility-Information and user interface components must be presented to users in a perceptible manner.

Guideline 1.1 Alternative Text: Provide alternative text for all non-text content so that it can be translated into other forms that people need, such as large font printing, Braille, voice, symbol, or simpler language.

1

1.1.1 Content: For all non-text content presented to the user, alternate text is provided for the same purpose, with the following exceptions:
• Control, enter: If the text content is a control or accept user input, there should be a description of its purpose name. (See guideline 4.1.2 For additional requirements for controls and acceptance of user input)
• Time Base media: If the text content is a time-based medium, the alternative text should at least provide a descriptive identification of the non-text content. (See guideline 1.2 for additional media requirements)
• Test: If the text content is a test or exercise that will fail with text rendering, the alternative text should at least provide a descriptive identity for the text content.
• Senses: If the primary purpose of the non-text content is to create a special sensory experience, the alternative text should at least provide a descriptive identity for the non-textual content.
• Verification code: If the purpose of the non-text content is to confirm that the content is being accessed by a person, instead of computer access, you provide alternative text that identifies and describes the purpose of the non-text content, and provides a validation code substitution for the output model for different types of sensory perception to accommodate different people with disabilities.
• Decorative, format, invisible: If the non-text content is purely decorative, or is intended for visual formatting only, or is not presented to the user, it should be implemented in a way that assistive technology can ignore.

A-level

Users who rely on screen readers need to rely on alternative text of text content to get the information that is passed by the non-text content.

Guideline 1.2 Time Base media: Last base media provides alternative.

Note: The main hall has no multimedia related functions

Guideline 1.3 Adaptability: Create content that can be rendered differently (such as a simple layout) without losing information or structure.

2

1.3.1 Information and relationships: through the presentation of information, structure and relationships, can be programmed to determine or be obtained in the text.

A-level

There is information that is communicated using layout and structure.

3

1.3.2 has a meaningful order: when the rendered content has an order that affects its meaning, it is possible to programmatically determine its correct reading order.

A-level

The order of errors can severely affect the access of keyboard users.

4

1.3.3 Sensory Characteristics: Instructions for understanding content and operational content should not depend entirely on the sensory characteristics of the component, such as shape, size, visual position, direction, or sound.

A-level

A component that relies on a sense of the senses will cause information to be unavailable to users who use other senses to get information. Users who rely on auditory senses will not be able to access their information, such as graphics verification codes that rely on visual senses.

Guideline 1.4 is identifiable: makes it easier for users to see and hear content, including separating the background and foreground.

6

1.4.2 Audio Control: If the page audio is automatically played for more than 3 seconds, provide a mechanism to pause or stop the audio, or to control the audio volume independent of the Global system volume.

A-level

More than 3 seconds of audio, if the failure to provide a stop and related control mechanism, will make people rely on auditory access to information to create problems.

7

1.4.3 Contrast (minimum): Visual rendering of text and text pictures must be at least 4.5:1 contrast, except for the following sections:
Big text: Large text and large text pictures have at least 3:1 contrast;
Ancillary content: Text or text pictures are inactive parts of user interface components, or just a pure decoration, or not visible to anyone, or just a part of a picture that contains other important visual content, there is no comparison requirement for this text or text picture.
Trademarks: Text as part of the logo or brand name, there is no minimum comparison requirement.

AA Grade

This article is important for the text rendering class main Hall.

8

1.4.4 Adjust text: In addition to subtitles and text pictures, text size can be magnified to 200% without the need for assistive technology, without loss of content or functionality.

AA Grade

There is a situation where the page is enlarged and the content exceeds the screen. And there is no main content text font amplification mechanism.

9

1.4.5 text Picture: If the technology you are using can be visually effective, use text to convey information without text pictures, except for the following sections:
Customization: Text pictures can be customized according to user requirements;
Required: The special rendering of text is required for the information to be conveyed.
Note: trademarks (text as part of a logo or brand name) are considered necessary.

AA Grade

There is a picture of the use of text, text image amplification will be distorted, visually impaired users can not get text information on the picture;

Principle 2: operability-user interface components and navigation must be operational.

Guideline 2.1 keyboard Accessible: Enables all functions to be operated via the keyboard

10

2.1.1 Keyboard: All features of the content can be implemented through the keyboard interface and do not require a specific time limit for each keystroke unless the underlying functionality is dependent on the user's mobile path and is not an input method for the endpoint.

A-level

The main office of the Government should support full keyboard access;

11

2.1.2 No keyboard traps: If you can use the keyboard interface to move the focus to a Web page component, you can also move the focus away from the current component using just the keyboard interface, and if you need an unmodified arrow key or TAB key or other standard exit mode, tell the user how to leave the focus.

A-level

Keyboard traps are a serious barrier-free problem, and users cannot use the keyboard to move focus out of the current area, causing them to not be able to access other content on the page and should not exist in the main government hall.

Guideline 2.2 sufficient time: to provide users with enough time to read and use content.

12

2.2.1 Timing Adjustable: For each time limit set by the content, at least one of the following sections is true:
• Close: Allow the user to reach the time limit before closing time limits;
• Adjustment: Allows the user to adjust time limits before reaching the time limit. Adjust the range to be relaxed, at least 10 times times the default set length;
• Extension: Warn the user before timing out and give the user at least 20 seconds to allow the user to extend the time (such as "press SPACEBAR") with a simple action, allowing the user to extend the period at least 10 times;
• Real Time Exceptions: time constraints are an essential part of a real-time event (such as an auction) and may not have a time limit alternative;
• Necessary Exceptions: Time limits are required, and an extension will result in a failure of the Act;
• 20-hour exception: time limit is more than 20 hours.

A-level

Should give the user sufficient time to operate, and give the ability to extend the time, too short time may lead to the user can not complete the operation, the use of screen readers and users of neurological, cognitive impairment, need a certain amount of time to operate.

13

2.2.2 Pause, stop, hide: For motion, flashing, scrolling, or Automatic Updates, the following sections are all true:
• Motion, flashing, scrolling: any movement, flashing, or scrolling information (1) starts automatically, (2) lasts longer than 5 seconds, and (3) renders with other content. For this information, provide a mechanism for the user to pause, stop, or hide unless movement, flicker, or scrolling is a necessary part of an action;
• Automatic Updates: Any information that is automatically updated (1) is automatically started (2) and is rendered simultaneously with other content. For this information, provide a mechanism that allows the user to pause, stop, or hide, or control the frequency of updates, unless automatic updates are necessary for an action.

A-level

There are scrolling content, such as scrolling banner.

Guideline 2.3 Epilepsy: Do not design the content that causes epileptic seizures.

14

2.3.1 Flash three times or below threshold: Web page does not contain any flash over 3 times/sec content, or Flash below General flash and red flash threshold values.

A-level

Since any content that does not meet this success criteria can interfere with the user's ability to use the entire page, all content on the page (whether or not it meets other success criteria) must conform to this success criteria.

Guideline 2.4 Navigation: Provides a way to help users navigate, find content, and determine its location.

15

2.4.1 Bypasses modules: Provides a mechanism to skip content modules that recur across multiple web pages.

A-level

Bypassing the module mechanism can speed up keyboard user access, allowing users to quickly understand the layout of the page.

16

2.4.2 Page Title: A page that provides a title to describe a topic or purpose.

A-level

When the visually impaired user uses the keyboard to browse the Web page, the first focused page element is its title, and the visually impaired user can learn the content of the page through the page title.

17

2.4.3 Focus Order: If the Web page can be navigated sequentially and the navigation order affects meaning and operation, the focused component can receive focus in order to maintain its meaning and operability.

A-level

The wrong keyboard tab order can seriously affect keyboard users ' access, causing problems for keyboard users.

18

2.4.4 Link purpose (in context): The purpose of each link is determined by: A separate link text, or a link text linked to its programmatic-defined link context. Unless the purpose of the link will also confuse ordinary users.

A-level

Links should provide their purpose text so that users can have a clear understanding of their goal orientation.

19

2.4. More than 5 ways: use more than one method to locate a page in a page set, unless the page is a result of a process or a step in a process.

AA Grade

The navigation efficiency of users can be accelerated by various methods.

20

2.4.6 title and Label: Title and label description subject or purpose.

AA Grade

A clear heading level helps users understand the content of the page and locate what they want to know.

21st

2.4.7 focus is visible: Any keyboard-operable user interface should have a set of operating modes in which the keyboard focus indicator is visible.

AA Grade

For the Visual keyboard users who cannot use the mouse, the focus is visible, which is beneficial to user positioning.

Principle 3: Comprehensible-Information and user interface operations must be understandable.

Guideline 3.1 readability: Make text content readable and understandable.

22

3.1.1 Web language: The default human language for each Web page can be programmed to determine.

A-level

Some screen readers use the Web language to specify the language to use to read the content.

23

3.1.2 Local language: The human language of each paragraph or phrase in the content can be programmed to determine, in addition to the proper nouns, terminology, language of uncertainty, words or phrases that have been incorporated into the local language.

AA Grade

The user browses a webpage generally in the same language environment.

Guideline 3.2 predictability: Allow Web pages to be rendered and manipulated in a predictable manner.

24

3.2.1 Focus: When any user interface component receives focus, it does not cause context changes.

A-level

Focus can trigger behavior, visually impaired users do not perceive the current elements of the trigger operation, will cause trouble to users, not conducive to user understanding of the page content.

25

3.2.2 Input: Changing any user interface component settings does not automatically cause context changes unless the user has been told about the behavior before using components.

A-level

Components that cause context changes need to be informed in advance of the user's change, otherwise the user will be confused about the context change.

26

3.2.3 Consistent navigation: for navigation mechanisms that recur in multiple pages in a page set, the same relative order should be maintained each time it occurs, unless the user-generated order changes.

AA Grade

Consistent navigation helps users quickly navigate the layout of similar pages.

27

3.2.4 Consistency Identification: A component of the same functionality in a Web-Chichi can be identified by consistency.

AA Grade

Consistency identification helps users understand the user interface faster and find what they want based on experience.

Guideline 3.3 Auxiliary Input: Help users avoid and correct errors.

28

3.3.1 Error Identification: If an input error can be automatically discovered, the error type should be identifiable and described to the user in text.

A-level

When this article is used to fill out a form, an input error cannot only identify an error, but also tell the user that the error occurred. Help the user to complete the form independently, correct the input.

29

3.3.2 Label or description: Give a label or description when you want the user to enter the content.

A-level

It is very necessary to give a description and format for the user to enter the content, which can help the user to complete the form quickly.

30

3.3.3 Error Recommendation: If an input error can be automatically discovered and the modification recommendation is known, provide recommendations to the user unless it endangers security or affects the content purpose.

AA Grade

When the user enters the error, gives the appropriate suggestion, can speed up the user to fill in the speed, for example, when registers, the user enters the user name is incorrect, derives the correct user name according to the user name which has entered.

31

3.3.4 Error Prevention (law, Finance, data: For users to operate a legal commitment or financial transactions of the Web page, modify or delete the user-controlled data in the data storage system of the Web page, the user test response to the Web page, and so on, for these pages, the following parts of at least one is true: check: The data entered by the user is checked for input errors and provides the user with an opportunity to correct the error.
Confirmation: Provides a mechanism for reviewing, confirming, and correcting information prior to final submission.

AA Grade

When the user submits the information about the legal finance, it needs to request the user's confirmation, prevent the user input error, and cause irreversible consequences.

Principle 4: Robustness-content must be robust to credibly interpreted by a wide variety of user agents, including assistive technologies.

Guideline 4.1 compatibility: Maximizes compatibility with current and future user agents (including assistive technology).

32

4.1.1 Parsing: Content implemented using markup language, elements should have full start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique unless the specification allows these attributes.

A-level

Code writing specification that helps assist in the parsing of page content by assistive technology. Irregular code may have an impact on the ability of the assistive technology to parse the content, or even resolve it.

33

4.1.2 Name, role, value: For all user interface components (including but not limited to: form elements, links, and script-generated components), names and roles can be programmed to determine; States, properties, and values that can be set by the user can be programmed, and these changes are valid for user agents, including assistive technology.

A-level

For a component, you should explicitly provide information such as its name, role, status, value, and so on, which is important for users who use screen readers to determine how they interact with the component, and the lack of that information can cause users to be bothered.

4 The main hall information barrier-free Transformation Guide 4.1 transformation Guide rules

WCAG2.0

Description

Grade

Note

1.1.1. Non-textual content

Image 1: The image must have alternate text;

A

Reference Transformation Sample 4.2.2

Image 2: Alternative text should convey the correct picture content and purpose;

Image 3: Alternate text should not contain a file name;

Image 4: Alternative text should be no more than 100 English characters;

Image 5: Decorative pictures should be able to be neglected by assistive technology;

Image 6: Complex images need to have a corresponding long text to be described in detail;

Image 7: Use MathML (mathematical Markup Language) to represent mathematical formulas.

1.3.1. Information and relationships

Heading 5: The title must have reasonable nesting;

A

Transformation Reference case: official website of China Federation of Disabled Persons

Heading 6: The title must have a visual text content;

Heading 7: The first title of content information (contentinfo), supplemental content (complementary), form (form), navigation (navigation), or search field signpost block should be H2 element;

Heading 8: The headings in the block of road signs must be properly nested;

Landmark 2: All content blocks must be marked by signposts;

Landmark 8: Banner (banner) must be the highest level of road signs;

Landmark 9: Banner (banner) Signpost blocks can only include navigation (navigation) signposts, regional (region) signposts and search-field signposts;

Landmark 10: Navigation (navigation) Signpost block can only contain the area (region) or search bar (searching) road signs;

Landmark 11: Main content (main) must be the highest level of signposts;

Landmark 12: Content Information (contentinfo) road signs must be the highest level of signposts;

Landmark 13: Supplementary content (complementary) must be the highest level of signposts;

Landmark 14: The search field Signpost block can only contain regional (region) road signs;

Landmark 15: Form (form) Signpost block can only contain regional (region) road signs;

Landmark 16: The area (region) Signpost must have an accessible name;

Landmark 17: Road Signs must have a unique logo;

Landmark 18: The road sign must correctly mark the content area;

List 1: The lists must use corresponding semantic tags;

Role 1: Only in special cases can you overwrite the default roles of the main content (main) element in the main content (main) signpost;

Role 2: The subject (body) element can only define the value of the roles as documents (document) (default) or application (application);

Role 4: The article (article) element can only define a range (region), article (article) (default), main content (main), Documents (document), or application (application).

Role 5: Chapter (section) elements can only define roles values as warnings (Alert), warning dialog boxes (alertdialog), Application (application), content information (contentinfo), dialog Boxes (dialog), Document, log, main content (main), racing lights (marquee), display information (presentation), area (region), search bar (status);

Role 6: Only under special circumstances can you override the default roles for navigation (NAV);

Role 7: Sidebar (aside) elements can only define roles values as supplemental (complementary) (default), annotations (note), area (region), search bar (searches), or display information (presentation);

Role 8: Only in exceptional circumstances can you overwrite the default roles of header (header) elements in the banner (banner) roadmap;

Role 9: Only under special circumstances can overwrite the default roles of the footer (footer) element in the content information (contentinfo) roadmap;

Role 10: Only under special circumstances can the default roles (H1-H6) elements of headings (heading) be overwritten;

Table 1: Cells in a datasheet must have a corresponding header;

Table 3: The data table must have content description;

Table 4: A data table in a page must have a unique name;

Table 5: The table should be identified as a datasheet or layout table;

Table 6: The head must use the th element;

Table 7: Cells in a complex table, you must use the header (headers) property to mark the headers associated with them;

Table 8: The name of the datasheet must be different from the description of the data table.

1.3.2. The order of meaning

Layout 1: The layout table must have a meaningful order;

A

Reference Transformation Sample 4.2.3

Layout 2: The layout table cannot be nested with each other;

Order 1: Determines the position of elements through CSS, so that the rendered content has a meaningful reading sequence.

1.3.3. Sensory characteristics

Sensory 1: Content used for understanding and manipulation should not depend entirely on shape, size, visual position, direction, or sound.

A

　

1.4.1. Color use

Color 2: Colors cannot be the only way to convey information.

A

Reference Transformation Sample 4.2.3

1.4.2. Audio control

Audio 4: When the page is loaded, the audio automatically plays for more than 3 seconds, providing a mechanism to pause or stop the audio

A

Transformation does not involve

1.4.3. Contrast (min)

Color 1: Any size text content must have a minimum of 4.5:1 contrast, if large text or bold words, then at least 3:1 of the contrast.

Aa

Transformation Reference case: Futian Government online

1.4.4. Adjust text

Resize 1: When the page size is resized, the text content needs to be adaptive to the page size and make sure everything is visible.

Aa

Transformation Reference case: Government affairs of a provincial people's government open

1.4.5. Text image

No

Aa

　

2.1.1. keyboard

Keyboard 1: Component elements must respond to keyboard events.

A

Transformation Reference case: HHS official website

Keyboard 2: All interactive elements must be implemented through the keyboard interface;

2.1.2. No keyboard traps

Keyboard 3: Objects (object) and applet (applet) elements cannot restrict keyboard focus from leaving.

A

Transformation Reference case: Beijing Online Government service Hall

2.2.1 Timing Adjustable

Timing 1: Interactive or browsable content with time constraints provides a way for the user to turn off, adjust, or extend the time limit.

A

Transformation Reference case: Futian Government online

2.2.2. Pause, stop, hide

Timing 2: For moving, flashing, scrolling, or automatically updating content that starts automatically and lasts more than five seconds, provide a mechanism to pause, stop, or hide.

A

Transformation does not involve

2.3.1. Flash three times or below threshold

HTML 2: Replace the Marquee (marquee) element;

A

Transformation does not involve

Timing 3: The Web page does not contain any flash over 3 times/sec content unless the Flash is below the general flash and the Red Flash threshold value.

2.4.1. Bypass Module

Bypass 1: Provides a mechanism to skip content modules;

A

Transformation Reference case: China Disability Federation News Detail Page

Frame 1: The frame element needs to have an accessible name;

Frame 2: The inner frame (iframe) element needs to have an accessible name;

Heading 1: The page must have at least one H1 element;

Landmark 1: The page must have at least one main content (main) signpost.

Landmark 3: The page must have at least one navigation (navigation) signpost;

Landmark 4: The brand content of the website needs to be marked with banner (banner) Signpost;

Landmark 5: Each page can only have one banner (banner) Signpost;

Landmark 6: The management information of the website needs the content information (ContentInfo) signpost to mark;

Landmark 7: Each page can have at most one content information (ContentInfo) roadmap.

2.4.2. Page title

Title 1: The topic element needs to identify the site and the content of the page.

A

Transformation Reference case: official website of China Federation of Disabled Persons

2.4.3. Focus Order

Focus 1: Focused order must be meaningful.

A

Reference Transformation Sample 4.2.7

2.4.4. Link purpose (in context)

Link 1: Linked text must describe the purpose of the link;

A

Reference Transformation Sample 4.2.5

Link 2: Different links need to have their unique link text.

2.4.5. Various methods

Navigation 1: Provides at least two ways to locate a Web page.

Aa

Transformation Reference case: official website of China Federation of Disabled Persons

2.4.6. Title and label

Control 10: The label must be unique;

Aa

Reference Transformation Sample 4.2.4

Control 11: Each submit and reset (reset) button needs a unique label;

Heading 2:H1 elements must be in the main content (main) or banner (banner) Signpost;

Heading 3: The header element of the same sibling needs to have a unique accessible name;

List 2: Provide a label at the appropriate time to describe the content or purpose of the list;

Table 2: A data table must have an accessible name that identifies the purpose of the table;

Widget 12: Component role element tags need to fully describe their purpose;

2.4.7. Focus Visible

Focus 2: Keyboard focuses are visible.

Aa

Transformation Reference case: official website of a provincial people's government

3.1.1. Web language

Language 1: The Web page must use a valid IANA language code.

A

Transformation Reference Case 4.2.1

3.1.2. local language

Language 2: Text content that differs from the main language of the page needs to be marked with a valid language (lang) attribute.

Aa

Transformation Reference case: official website of China Federation of Disabled Persons

3.2.1. Focus

Focus 3: Target focused on the current content window;

A

Focus 4: Select elements do not automatically cause context changes.

3.2.2. Input

Focus 5: Use input or other form action buttons to submit the form.

A

Reference Transformation Sample 4.2.4

3.2.3. Consistent navigation

Navigation 2: All pages of the website have a consistent signpost order;

Aa

Transformation Reference case: official website of China Federation of Disabled Persons

Navigation 3: The H1 and H2 elements in all pages of a site that are used to mark recurring page chapters usually have a consistent order.

3.2.4. Consistency identification

Navigation 4: Signs on all pages of the website are consistent;

Aa

Transformation Reference case: official website of China Federation of Disabled Persons

Navigation 5: H1 and H2 elements in all pages of a site that identify recurring page chapters often have a consistent, accessible name.

3.3.1. Error identification

Error 1: Invalid form control must supply its invalid value information to assistive technology.

A

　

3.3.2. Label or description

Control 1: The form controls must have a label;

A

Transformation Reference case: HHS official website

Control 2: The image button must have a non-empty alt or title attribute;

Control 3: A group of radio buttons must have a category label;

Control 4: Button element must have text content;

Control 6: Each label element that uses the For property should refer to the corresponding form controls;

Control 7: Each label (label) and Legend (legend) element must contain textual content;

Control 8: Each domain set (fieldset) element has and has only one legend (legend) element;

Control 9: Determines whether the Title property is the appropriate form controls label.

3.3.3. Wrong advice

Error 2: Use the Require or Aria-required property to mark required form controls;

Aa

Transformation Reference case: Ping Guo official website registration page

Error 3: Use the Aria-required property to mark required components;

Error 4: When the output error can be automatically found and the proposed modification is known, the user should be provided with the proposed modification (some exceptions);

3.3.4. Error prevention (legal, financial, data)

Error 5: When the input includes legal commitments or financial transactions, the user must be provided with a mechanism to back up, check, and confirm the data before the final submission.

Aa

Transformation Reference case: Ping Guo official website registration page

4.1.1. Parsing