WordPress 中文文档

Accessibility

From WordPress Chinese

Jump to: navigation, search

目录

Accessibility is for everyone, even WordPress users. But what is it?

Accessibility in web page design means creating a web page design where ANYONE can use it. And that means anyone. Not just the visually impaired, handicapped, or otherwise challenged. This includes people in Russia and South Africa who are using physically challenged computers hooked up to generators that only run two hours a day, trying to connect to the Internet with old browsers and dial up connections. It's about people from different countries who speak different languages and yet are trying to learn your language by reading your blog or site.

This also includes using cell phones and handheld computers to access your blog. Those people, including the approximately 25% of all Internet users who are physically impaired in some way, need access to web pages, and as a web page designer (or tweaker), you need to know about accessibility.

[编辑]

Describe Images and Links

In the most simplest of examples, web users who have visual or physical impairment and rely upon your help to "see" or "hear" your web page. When you include a graphic or photograph, describe it in the alt part of the tag. 

...and the ball bounced higher and higher 
as <img scr="ball.jpg" alt="graphic of a red and blue ball" /> 
the child bounced it....

For those who rely upon readers, they might hear, "and the ball bounced higher and higher as - image - graphic of a red and blue ball - the child bounced it" as part of the content. For those who want to know more about the picture, they can hold their mouse over the graphic and a small balloon would pop up and tell them "graphic of a red and blue ball".

Many people use these attributes to "describe" or "editorialize" about the image or link. That is not the purpose of them. It is actually to "replace" the image or link. The descriptive words must let those who cannot see the image know what is there on the screen. If the description is longer than a few words, you can also use the longdesc to link to a descriptive file (ball.html) that more fully explains the image. 

...and the ball bounced higher and higher as 
<img scr="ball.jpg" alt="graphic of a red and blue ball" 
longdesc="ball.html" /> 
the child bounced it....

Some readers use both or either of the alt and title attributes, so you might want to include both: 

...and the ball bounced higher and higher as 
<img scr="ball.jpg" alt="graphic of a red and blue ball" 
title="red and blue ball" /> 
the child bounced it....

There are times, though, when adding a description to an image only clutters things up. If the image isn't important to the topic, why give the person more information than they need. You can maintain accessibility standards by simply listing the alt and title in an image as blank. This way, the image is skipped over because it does not add to the content. 

<h2><?php the_title(); ?>
<img scr="flower.jpg" alt="" title="" /></h2>

You can use the same technique with the title in links: 

If you are 
<a href="http://example.com/talent-shopping/" 
title="Article about shopping for photographic models">
shopping for models</a> 
for your portrait photography....

These descriptive additions to your graphics and links not only help those who need the help, it can help you. Google, Yahoo, and other search engines can compare the words used within links and graphics with your keywords and titles and it can affect your page ranking....see, accessibility is a good thing.

[编辑]

WordPress and Accessibility

WordPress works right out of the box to help you keep your site accessible. Unfortunately, not all WordPress Theme authors take the time and patience to maintain those accessibility standards. Here is an example of using the title in a link in the index.php and the WordPress Loop: 

<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" 
   title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?>
</a>
</h2>

Let's look at this. Inside of the h2 tag for the title of the post is a link. Inside of the link is a call to the permalink, the address of the post. It is followed by a rel which attaches a relationship to the link as a bookmark. This is followed by the title. In this case, it says "Permanent Link to" and then the title of the post is automatically generated by the the_title() template tag. The title tag is then used again as the name of the link.

Using these template tags, WordPress automatically gets information from the database to fill in the link information, making the link more accessible.

You can change the title to something other than "Permanent Link to". Here's an example: 

<a href="<?php the_permalink() ?>" rel="bookmark" 
   title="Article about <?php the_title(); ?>">
<?php the_title(); ?>
</a>

This same technique for generating titles for links is used throughout your WordPress site, including lists found in your sidebar for the categories, Pages, and archives. The work is done for you. In some cases, you can even customize the way the title is generated, though not always. See Template_Tags for specifics on each tag.

[编辑]

Accessibility Considerations

In addition to helping users "hear" descriptions of links and images, there are a few more things you might want to take into consideration when designing your WordPress Theme for yourself or for public release.

[编辑]

Creating a Readable Page

Sometimes, the simplest thing a website designer can do is to create a more readable page. Crowded text, busy looks, a jumble of font styles, and too much information on a single page is not only cluttered but difficult to read.

While developing your WordPress Theme, take extra time to pay attention to the white space or "empty" space around the different elements on your web page. Make sure the fonts are large enough to be readable at most screen resolutions. Position navigation elements in logical places, so people will naturally look there to move around your site.

If you really want to have a good test of the readability of your website's Theme, consider having someone over the age of 60 look at it. This is a great test. ;-)

[编辑]

Color and Accessibility

Color choices also affect people's ability to "see" a page. Approximately 10% of all Internet users have problems seeing colors, like those with color blindness. There are lots of sites which can help you test your color choices to see how they would be "seen" and recognized. You don't have to design your site around these issues, but being better informed makes for better designers.

[编辑]

Access Keys

For the visually or physically challenged, one of the ways of navigating a site is through the use of Access Keys. These are standardized keys that when pressed in combination will move the cursor around to the different areas on your page. For example, if you have a link to a search page for advanced searches, the user would press alt+s in Windows and ctrl+s in Mac and the cursor would jump to the search link. The code to set the accesskey in a link to a search page would be: 

<a href="search.php" accesskey="s">Search</a>

Here is an example of the use of access keys within a sidebar using the Pages template tag: 

<ul id="pageslist">
<li>
   <a href="index.php" title="Home Page" accesskey="1">Home</a>
</li>
<li>
   <a href="index.php?cat=7" title="Blog">Blog</a>
</li>
   <?php wp_list_pages('depth=1&sort_column=menu_order&title_li='); ?>
<li>
   <a title="Site Map" href="sitemap.php" accesskey="3">Site Map</a>
</li>
</ul>

The template tag for listing pages currently doesn't support access keys, but hopefully it will in future versions.

The United Kingdom's government set a national standard for the use of access keys on official sites, and many website administrators have adopted these same standards internationally. Unfortunately, the Mozilla Firefox Internet browser uses alt+1, or whatever number, to control movement between tab windows, which breaks this usage. Hopefully, all browsers and website's will feature a standard for access keys soon.

In the meantime, you can study the different options and choose your own, but we recommend that you create an Accessibilty Policy Page on your site, linked from your sidebar or footer, that will help some users find out what access keys you are using on your site.

[编辑]

Accessibility with Browsers

It's nice when you design your website to work in Internet Explorer, but when viewed with Firefox or Safari, things are not only different, they might be scrambled. Or vice versa. Not all browsers display all websites the same. If you are concerned about accessibility, access via different browsers becomes critical.

  1. Validate: Check your website's code through validation tests. Check the XHTML and CSS thoroughly to make sure there are no errors.
  2. Test Drive Browsers: Test drive your site through different browsers and make what adjustments you can so your site is viewable across browsers.
  3. Test Drive Operating Systems: Different browsers in different operating systems "see" web pages differently. If you don't have a multitude of computers around you, ask friends and family, or head down to your local library and/or Internet café and see if they have different operating systems you might be able to use to view your site.

Testing your site for accessibility isn't limited to browsers. It is also affected by different screen resolutions and color quality. You can use the Desktop Properties Settings to change your own screen's resolution and color quality, or the Web Developer Tools that come with Firefox, or some of the other resources listed below.

[编辑]

Validation Resources

[编辑]

Screen Resolution Testing

[编辑]

Browser Testing

[编辑]

Cell Phones and Hand Held Computers

Viewing a web page from your desk or laptop is no longer standard viewing. Many people are accessing the Internet via cell phones and hand held computers. How does your site do when pruned down to a tiny screen?

Some small screen browsers simply strip a site's style sheet, leaving the content behind, such as seen when printing a page on your WordPress site. Others show the whole screen, though compressed. You can also control how your site looks on the small screens by adding the hand held media styles to your style sheet.

To included a separate hand-held style sheet (named in the example "handheldstyles.css"), which targets PocketIE, NetFront, and Opera browsers; add the line below to the header.php in your theme, after the screen stylesheet. The syntax must be exactly as shown for all three PocketPC browsers to see it.

<style type="text/css">@import url(<?php bloginfo('stylesheet_directory'); ?>/handheldstyles.css) handheld;</style>

The following articles have more information.

[编辑]

Creating an Accessibility Policy

It is also a growing trend for websites to have their own Accessibility Policy, a page that informs users of the standards you are using to make your page accessible to everyone. In Britain, there have been lawsuits and complaints filed against government and corporate websites under the Disability Discrimination Act for NOT being accessible, and the trend is happening here in the United States. It is not hard to be compliant with accessibility standards, it just takes a few extra keystrokes to help everyone get the most from your site.

[编辑]

Testing Your Site for Accessibility

There are a variety of online services that will test your site for Accessibility standards. Here are a few:

[编辑]

Resources

If you are really serious about creating and designing accessible web pages, there are some folks who would really love to have your help, or just to have you hang around a bit:

To find out more about accessibility and designing your site with accessibility in mind:

取自"http://codex.wordpress.org.cn/Accessibility"
用户