Designing for Accessibility Just as important as taking advantage of the HTML features provided specifically for accessibility is taking care to design your pages in a manner that’s as a
Trang 1Designing for Accessibility
Just as important as taking advantage of the HTML features provided specifically for
accessibility is taking care to design your pages in a manner that’s as accommodating as
possible for users who are in need of assistance Most of these techniques are relevant to
all users, not just those using alternative browsers or assistive technologies
Use Color
A common pitfall designers fall into is using color to confer meaning to users For
exam-ple, they print an error on the page and change the font color to red to indicate that
something went wrong Unfortunately, visually impaired users can’t distinguish your
error message from the rest of the text on the page without reading it Needless to say,
putting two elements on the page that are the same except for color (such as using colors
to indicate the status of something) is not accessible You can add borders to elements
that need to stand out, or you can label them with text For example, you might display
an error message this way:
<p class=“error”>ERROR: You must enter your full name.</p>
Fonts
When you specify fonts on your pages, you can cause accessibility problems if you’re
not careful In some cases, font specification doesn’t matter at all because the user
accesses your site with a screen reader or alternative browser that completely ignores
your font settings However, users who simply see poorly can have an unpleasant
experi-ence if you set your fonts to an absolute size—particularly if you choose a small size If
a user has set his browser’s default font to be larger than normal, and your pages are hard
coded to use 9-point text, that user will probably dump your site altogether
In many cases, it makes sense to leave the default font specification alone for most of the
text on your site That way, users can set their fonts as they choose, and you won’t
inter-fere with their personal preinter-ferences If you do modify the fonts on the page, make sure
that the fonts scale with the user’s settings so that the user can see the text at a
comfort-able size
586 LESSON 19: Designing for the Real World
Be sure to test your pages with a variety of text size settings when you do browser testing Many users change increase the size of fonts in the browser to make them easier to read, and you should make sure that if users have done so, your pages still work for them.
CAUTION
Trang 2Take Advantage of All HTML Tags
It’s easy to fall into the trap of using <i>or<b>rather than more specific tags when you
need to add emphasis to something For example, suppose you’re citing a passage from a
book When you enter the book title, you could indicate to your users that it’s a proper
title by putting it inside the <i>tag, or you could use the <cite>tag There are plenty of
other underutilized tags, as well, all of which provide some semantic meaning in addition
to the text formatting they’re associated with
Even in cases in which you really just want to emphasize text, it’s preferable to use <em>
and<strong>over <i>and<b> These tags provide a lot more meaning than the basic
text formatting tags that are often used Not all alternative browsers will take advantage
of any or all these tags, but conveying as much meaning as possible through your choice
of tags won’t hurt accessibility for sure and will help some now and could help more in
the future There’s no downside to taking this approach, either
Frames and Linked Windows
Frames are, to put it bluntly, a barrier to accessibility There are some workarounds
avail-able, but the bottom line is that if you’re concerned about accessibility, you should
prob-ably avoid frames Using linked windows and pop-up windows can also be a huge hassle
from an accessibility perspective
If you opt to use frames, you should include titles for all your frames, not just the
docu-ment containing the frameset Using regular browsers, the titles of these docudocu-ments are
suppressed That’s not necessarily the case with alternative browsers Some will provide
links to the individual frames when you pull up the frameset, and having titles makes it
easier for users to distinguish between them
Forms
Forms present another thorny accessibility issue Nearly all web applications are based
on forms, and failure to make them accessible can cost you users For example, large
online stores have a serious financial interest in focusing on form accessibility How
many sales would Amazon or eBay lose if their sites weren’t accessible? Some work on
making sure the forms that enable you to purchase items are accessible can pay off
One key thing to remember is that disabled users often navigate using only the keyboard
As I mentioned when talking about links, assigning sensible tabindexvalues to your
form fields can really increase both the usability and accessibility of your forms The
other advanced form tags, such as fieldset,optgroup, and label, can be beneficial in
terms of usability, too
19
Trang 3Validating Your Sites for Accessibility
There’s no reason to rely on luck when it comes to determining whether your site
mea-sures up when it comes to accessibility Just as you can use the W3C validator to verify
that your HTML files are standards-compliant, you can use a number of validators to
check your site for accessibility problems Cynthia Says is one such validator, and
you can find it at http://www.contentquality.com/ It can validate a site against the
Section 508 guidelines mentioned earlier or against the Web Content Accessibility
Guidelines developed by the W3C
Its operation is nearly identical to that of the HTML validator provided by the W3C If
you submit your page to the validator, it generates a report that indicates which areas of
your page need improvement, and it provides general tips that can be applied to any
page Figure 19.2 shows a Cynthia Says report for Wikipedia
588 LESSON 19: Designing for the Real World
FIGURE 19.2
An accessibility
report generated
by Cynthia Says.
Cynthia Says also links to the relevant standards in the validation results In Figure 19.3,
you can see the destination of one of the links, which points to a passage in the Web
Content Accessibility Guidelines
Trang 4FIGURE 19.3
The Web Content
Accessibility
Guidelines.
19
Cynthia Says is provided by HiSoftware, which produces software that helps manage
compliance issues for web content They support Section 508 compliance among other
standards and regulations
Further Reading
This lesson is the tip of the iceberg when it comes to handling accessibility on
web-sites If you’re going to make a commitment to creating an accessible site, you’ll
probably want to research the issue further Your first stop should be online
accessi-bility resources The W3C provides a huge body of information on accessiaccessi-bility as
part of its Web Accessibility Initiative The home page is http://www.w3.org/WAI/.
If you maintain a personal site, you might also find Mark Pilgrim’s online book, Dive
into Accessibility (http://diveintoaccessibility.org/), to be a useful resource Plenty of
other sites discuss accessibility, too Just enter the word accessibility into your
favorite search engine to get a list
There have also been several books written on web accessibility Joe Clark’s Building
Accessible Websites is well regarded You can find out more about the book at the
book’s website: http://joeclark.org/book/
Trang 5Summary
The Web is in a period of transition, from the almost universal adoption of XHTML 1.0
toward the new HTML standard: HTML5 In this lesson, I discussed how you can take a
progressive approach, moving toward HTML5 without leaving people using current
browsers behind
I hope you now realize that the needs of your visitors should affect the approach you use
in your website design The key is to anticipate those needs and try to address them as
broadly as possible Not every site has to be filled with multimedia that implements the
latest and greatest web technologies On the other hand, certain topics almost demand
higher levels of page design Listen to the needs of your visitors when you design your
pages, and you’ll keep them coming back
Even though accessibility issues ostensibly affect only a small percentage of web users,
they should not be ignored Many accessibility-related improvements actually improve
the web experience for most users Leaving out disabled users by not accounting for
them in your designs is inconsiderate and can often be a poor business decision, too
Adding accessibility features to an existing site can be challenging, but when you build
new sites from scratch, making them accessible can often be done with little additional
effort If I’ve convinced you of the importance of accessibility in this lesson, you’ll
prob-ably want to dig into the resources listed previously for more information
Workshop
As if you haven’t had enough already, here’s a refresher course As always, there are
questions, quizzes, and exercises that will help you remember some of the most
impor-tant points in this lesson
Q&A
Q Feedback from visitors to my site varies a lot Some want my pages to use less
multimedia, whereas others want more Is there an easy way to satisfy both of
them?
A You’ve already learned that you can provide links to external multimedia files This
is the best approach for visitors who want less multimedia because they won’t see
it unless they click the link
You can also simply ask them which version of your site they want to see I
gener-ally recommend building a site that works well for users regardless of their
connec-tion speed or browser capabilities, but in some cases it makes sense to create
alternative versions of your site You can start out with an entry page that allows
590 LESSON 19: Designing for the Real World
Trang 6your users to choose between the different versions of the site, or you can start out
with the fancier page and provide a link to the text version that shows up regardless
of their browser’s capabilities
Q I use a lot of external files on my website, and they can be downloaded from
several different pages Wouldn’t it be more efficient to include a link to the
correct readers or viewers on the pages where the external files appear?
A Although it’s much easier for the visitor to download an external file and the
appropriate reader or helper application from the same page, it might be more
diffi-cult for you to maintain your pages when the URLs for the helper applications
change A good compromise is to include a Download page on your website with
links to all the helper applications that the visitor will need After the visitor
down-loads the external file, she can then navigate to your Download page to get the
helper application she needs to view that file
Q If I don’t make my site accessible, what percentage of my audience will I lose?
A Even if you weren’t wondering about this, there’s a good chance your boss
proba-bly wants to know Unfortunately, there’s no hard-and-fast number I’ve seen it
reported that 10% of the population has disabilities, but not all those disabilities
affect one’s ability to access the Web
Q Can I run into legal trouble if I don’t bother with making my site accessible?
A If you’re in the United States, the answer to this question is no, unless you’re
working on a site for the federal government and are bound by Section 508
Quiz
1 How do real-world user needs vary?
2 What are some important things to include on your site to help those who are new
to computers or the Internet?
3 What are two things you can do right now to start migrating to HTML5?
4 True or false: It’s better to have a lot of frames in a frameset because you can keep
more information in the browser window at the same time
5 True or false: To make a site truly accessible, no images can be used for navigation
or links
6 How should navigation be placed on a page to make it most accessible?
7 Name three attributes of tags aimed specifically at accessibility
19
Trang 7Quiz Answers
1 Different users will have different levels of experience Browser preferences will
vary Some want to see a lot of multimedia, whereas others prefer none at all
Some prefer images and multimedia that are interactive, whereas others prefer
sim-pler pictures that demonstrate a process or technique on how to do something
Other preferences are more specific to the interests of the visitors
2 Include pages on your site that help tvisitors find the information they’re looking
for Also include pages that help them find their way around the site
3 Two things you can do to start migrating to HTML5 are to start using the HTML5
DOCTYPE and to stop using the tags and attributes that were removed from
HTML5 in your pages
4 False Too many frames can be confusing for new users, and they might be too
small to be useful when they’re viewed at lower resolutions
5 False; however, you must use the images in an accessible manner
6 Navigation should be placed after the main content on a page to make it accessible
with users who must navigate the page in a linear fashion
7 Some attributes designed to improve accessibility are the titleattribute of the <a>
tag, the longdescandaltattributes of the <img>tag, and the summaryattribute of
the<table>tag Remember, though, that longdescandsummaryhave been
removed from HTML5 It is recommended that their content be incorporated into
the page in another way
Exercises
1 Design a simple navigation system for a website and describe it in a manner that
makes sense to you Then ask others to review it and verify that your explanations
are clear to them
2 Make a list of the topics that you want to discuss on your website Go through the
list a second time and see whether you can anticipate the types of people who will
be interested in those topics Finally, review the list a third time and list the special
needs that you might need to consider for each user group
3 Visit Cynthia Says, the accessibility validator, and see how your site rates against
the accessibility guidelines
4 Make sure that all the <img>tags on your site have altattributes It’s a good first
step toward accessibility
592 LESSON 19: Designing for the Real World
Trang 8Putting Your Site
Online
Just uploading your site to a web server somewhere doesn’t mean that
you’ll attract many visitors With millions of sites online already, you’ll
need to promote your site if you want to build an audience
So, how do you entice people to come to your site? This lesson shows
you some of the ways, including the following:
n What a web server does and why you need one
n How to find web hosting
n How to deploy your website
n How to find out your URL
n How to test and troubleshoot your web pages
n Advertising your site
n Submitting your site to search engines
n Using business cards, letterheads, and brochures
n Promoting your site on social networks
n Using analytics to find out who’s viewing your pages
Trang 9What Does a Web Server Do?
To publish web pages, you need a web server The server listens for requests from web
browsers and returns the resources specified in the URL in those requests Web servers
and web browsers communicate using the Hypertext Transfer Protocol (HTTP), a
proto-col created specifically for the request and transfer of hypertext documents over the Web
Because of this use, web servers often are called HTTP servers.
Other Things Web Servers Do
Although the web server’s primary purpose is to answer requests from browsers, it’s
responsible for several other tasks You’ll learn about some of them in the following
sec-tions
File and Media Type Determination
In Lesson 12, “Integrating Multimedia: Sound, Video, and More,” you learned about
con-tent types and how browsers and servers use file extensions to determine file types
Servers are responsible for telling the browsers what kinds of content the files contain
Web servers are configured so that they know which media types to assign to files that
are requested so that the browser can tell audio files from HTML pages from style
sheets
File Management
The web server also is responsible for rudimentary file management—mostly in
deter-mining how to translate URLs into the locations of files on the server If a browser
requests a file that doesn’t exist, the web server returns the HTTP error code 404 and
sends an error page to the browser You can configure the web server to redirect from
one URL to another, automatically pointing the browser to a new location if resources
move or if you want to retire them Servers can also be set up to return a particular file if
a URL refers to a directory on a server without specifying a filename
Finally, servers keep log files for information on how many times each URL on the site
has been accessed, including the address of the computer that accessed it, the date and,
optionally, which browser they used, and the URL of the page that referred them to your
page Web servers also keep a log of any errors that occur when browsers submit
requests so that you can track them down and fix them
Server-Side Scripts and Forms Processing
In addition to serving up static documents such as HTML files and images, most web
servers offer the option of running scripts or programs that generate documents
on-the-fly These scripts can be used to create catalogs and shopping carts, discussion boards,
594 LESSON 20: Putting Your Site Online
Trang 10Any website that you find that does more than just publish plain old documents is
run-ning some kind of script or program on the server A number of popular scripting
plat-forms are available for writing web applications Which one is available for your use
depends in part on which web server you’re using PHP is probably the most popular
choice It’s easy to get started with and runs on most servers Other popular choices
include Microsoft NET, which runs on Windows, or Java Server Pages (JSP), which can
run on most servers Newer choices include Ruby on Rails and Django, both of which
are frameworks that can be used to build web applications
Server-Side File Processing
Some servers can process files before they send them along to the browsers On a simple
level, there are server-side includes, which can insert a date or a chunk of boilerplate text
into each page, or run a program Also, you can use server-side processing in much more
sophisticated ways to modify files on-the-fly for different browsers or to execute small
bits of code embedded in your pages
Authentication and Security
Password protection is provided out-of-the-box by most web servers Using
authentica-tion, you can create users and assign passwords to them, and you can restrict access to
certain files and directories You can also restrict access to files or to an entire site based
on site names or IP addresses For example, you can prevent anyone outside your
com-pany from viewing files that are intended for employees It’s common for people to build
custom authentication systems using server-side scripts, too
For security, some servers also provide a mechanism for encrypted connections and
transactions using the Secure Sockets Layer (SSL) protocol SSL allows the browser to
authenticate the server, proving that the server is who it says it is, and an encrypted
con-nection between the browser and the server so that sensitive information between the two
cannot be understood if it is intercepted
How to Find Web Hosting
Before you can put your site on the Web, you must find a web server How easy this is
depends on how you get your access to the Internet
Using a Web Server Provided by Your School or Work
If you get your Internet connection through school or work, that organization might
allow you to publish web pages on its own web server Given that these organizations
usually have fast connections to the Internet and people to administer the site for you,
this situation is ideal
20