Friend Network accessibility Optimization Practice

In order to create barrier-free information space, to facilitate visually impaired http://www.aliyun.com/zixun/aggregation/6579.html "> users to use our services, with the help of Friends Network (pengyou.com) revision time, We implemented some practices to improve page accessibility.
The Web Content Accessibility Guide (WCAG) 2.0 defines how Web content can be made more accessible to people with disabilities. It defines web content barrier-free four that can be perceived, operable, understandable, and robust, and in order to achieve these basic goals, guidelines should be followed under each principle to provide testable success criteria for each guideline. Around these four principles, our goal of this optimization is:

enhances the semantics of page blocks and modules. Improve the access efficiency of screen reader users. Optimize the keyboard operation problem and information understanding problem of the homepage.

1. Set the "Skip navigation" link to the user's primary destination.

The important feature of social networking is news feeds, which dynamically provide users with all kinds of information about their friends. Typically, the primary purpose of a user logging on to a site is to view "Buddy Dynamics," The Visually Impaired user tab can reach the area more than once, and the Skip navigation link allows screen reader users to skip large chunks of content and links, and when users visit new pages, they do not have to browse banner and navigation every time, which saves the time of visually impaired users.

2. Divide the page block, enhance the block semantics, and improve the speed of jump between blocks.

Friends of the Web page structure is a standard three-column structure, can be summed up as the top logo, page navigation and search area, the bottom is the copyright information, the middle left three columns are: The application of navigation, News feeds and referral information. Each block of information is more, especially news feed area, visually impaired users in various areas of the switch is very cumbersome.

One way to resolve this problem is to set up a regional anchor, which is to add a anchor link that is visible only to screen readers and set accesskey for the links.

The Taiwan Administration Institute will write this method into the barrier-free web site specification, the location point is also known as the Guide brick, the original use of three colon (::) to express, mainly to help users quickly locate and search, the code is as follows:

::: ::: ::: ::: :::

Official commentary Title property value is used to facilitate the speech synthesizer to inform the user of the page area in which they reside. But the author uses Nvda in IE9 and Firefox6 test the above code, NVDA will not read the title value, even if set the read out ToolTip.

Keyboard accessibility This article analyzes the disadvantage of using accesskey, because screen readers rely on browser capabilities, different brands and operating systems on the browser in the implementation of accesskey, such as the activation of the AccessKey shortcut key combinations are different, Unlike duplicate accesskey, the user agent's keyboard shortcuts and web content shortcuts do not behave the same way. Another headache is how to let the user know that we set the shortcut key? In addition to the nuances of the browsers mentioned above, the accesskey utilization is very low, so we didn't use this method in the end.

Our goal is the user learning cost is low, the network shortcut key is consistent (not only in the station), will use the screen reader to be able to use our website efficiently.

As long as the ARIA landmark role attribute is used, it can be solved. Landmark role helps screen readers understand the use of page blocks, so that they quickly position themselves where they want to be. Easy to use, as long as simply add role attributes within the element, you can use the value of banner, complementary, ContentInfo, form, main, navigation, search. Visually impaired users as long as the use of screen reader shortcut keys, such as Nvda press the shortcut key D to navigate between the page landmarks, so as to ensure the network access to the consistency of shortcut keys, so that shortcut access is more feasible.

3. To strengthen the existing general module of the writing method, the use of screen reader title navigation characteristics, improve the speed of the users of visually impaired jump between modules.

We divide the page into chunks, and now we look at the smaller unit of the page-the module. A block is composed of several modules, which can be considered as a function of a Web page or a collection of certain kinds of information, such as "You may Know", "recent visitors". The writing way of general module we borrowed from Yui use standard module format, this kind of div and class of common format can easily move module from a Web page, block, even a website to elsewhere, Web page has changed from document format to module collection.

Module Header Module contentmodule footer

Screen readers generally provide the function of title navigation, that is, visually impaired users press a shortcut key (Nvda as H key) can jump between the headings at all levels. With this feature, we can easily jump between modules. In practice, the structure of each feed is also written in this way, users can first read the feed title, if not interested can quickly jump to the next feed, reduce the visual impaired user's keyboard operation.

4. Reduce information noise and reduce interference.

Remove the duplicate information and the information provided for the bright-eyed user from the screen reader access sequence.

Take the feed as an example, the role of Avatar Link:

users quickly identify friends, this visually impaired users do not make sense; link to the Friends home page, and the role of the name link is consistent, the role of duplication;

To reduce interference, we can use tabindex= "-1" to remove the avatar link from the screen Reader access sequence.

These are some of the main points of our initial optimization, there are still many places to optimize, such as pop-up focus control, dynamic information notification, component accessibility, etc., we will continue to follow up.

Resources：

1. Web Content Accessibility Guidelines (WCAG) 2.0[eb/ol]. http://www.w3.org/TR/WCAG20/, 2011.9.21
2. Keyboard accessibility [Eb/ol]. http://www.topcss.org/?p=237, 2011.9.21
3. Accessible Rich Internet Applications (ARIA) 1.0[eb/ol]. Http://www.w3.org/TR/wai-aria/roles#landmark_roles, 2011.9.21
4. The locating point of the Barrier-free web page (guide brick) [Eb/ol]. Http://bootleq.blogspot.com/2008/07/blog-post.html, 2011.9.21
5. YUI Library examples:container family:the Module control [Eb/ol].http://developer.yahoo.com/yui/examples/container /module.html, 2011.9.21

Source Address: http://isux.tencent.com/p......practice.html