|
Web Design  This website demonstrates using wikis as teaching and learning tool. The course instructor is happy to share the teaching materials here with those who find it readable. |
Lecture /
Web AccessibilityA Web Design Lecture by Steven Choy Overview: Introduction to Web accessibility - How to make a more accessible website - top accessibility tips - Web accessibility standards - readings and resources for Web accessibility
Introduction
Web Accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. (Wikipedia, access on 8 December 2011).
"With a growing number of ways that users access the web, creating highly-accessible and universal designs that can be viewed in as many ways as possible is critical to the success of a website."
Why use accessible code?
Steps to a more accessible websiteReference: Dive Into Accessibility, Chinese Version: 該如何讓我的網站更具親和力？
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Reference: HTML Validation: Choosing a DOCTYPE
"According to HTML standards, each HTML document requires a document type declaration. The "DOCTYPE" begins the HTML document and tells a validator which version of HTML to use in checking the document's syntax."
You know what language you're writing in, so tell your readers... and their software.
Example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta name="language" content="en, zh" />
Every page of your web site should have a unique and meaningful page title.
Example:
<title>A Unique and Meaningful Page Title</title>
You may be familiar with the <link> tag in relation to external stylesheets. But did you know you can also use a similar syntax to point to your home page, and to previous and next pages in a series?
<link rel="home" title="Home" href="http://url/of/home/page" />
<link rel="prev" title="Title of previous page" href="http://url/of/previous/page" />
<link rel="next" title="Title of next page" href="http://url/of/next/page" />
Your main content should be put in the early part of HTML code.
Tool: Colour Contrast Check
The scourge of web design is the "javascript:" link, a pseudo-link that executes a piece of Javascript code when you click on it. The most common place this problem occurs in weblogs is in the link to display comments in a separate window. Why is it a problem? Because 11% of Internet users don't use Javascript for one reason or another, including many disabled users whose browsers simply don't support it. These pseudo-links won't work for them; use real links instead.
Use the second instead of first
<a href="javascript:OpenComments(13)">Comments (6)</a>
<a href="/blog/mt-comments.cgi?entry_id=13"
onclick="OpenComments(13); return false">Comments (6)</a>
All hyperlinks can have a title, specified by the title attribute of the <a> tag. This is in addition to whatever link text you specify. The title of a link generally shows up as a tooltip in visual browsers, but it can be presented in non-visual browsers as well.
Example:
<a title="referrers and other visitor statistics" href="/stats/">Statistics</a>
Not all links should have titles. If the link text is the name of an article, don't add a title; the link text itself is descriptive enough.
But if you read the link text by itself, out of context, and can't figure out what it points to, add a title.
On each link where the link text itself might not be sufficient for the reader to decide whether to click the link, add a title attribute
One of the least known features of HTML is the accesskey attribute for links and forms, which allows the web designer to define keyboard shortcuts for frequently-used links or form fields.
Example:
<a href="/" accesskey="1">Dive Into Accessibility</a>
How to use: in Windows + Firefox, press Shift + Alt + key
Why? (for class discussion)
"In all browsers, using the <a target="_blank"> tag to force a link to open in a new window breaks the Back button. The new window does not retain the browser history of the previous window, so the "Back" button is disabled."
The first time you use an acronym, mark it up with an <acronym> tag, like this:
<acronym title="cascading style sheets">CSS</acronym> You can change the look of all your acronyms using cascading style sheets.
acronym {border-bottom: 1px dotted black;}
Example code:
<table summary="Black plums and bosca pears ...">
<caption>Prices for black plums and ...</caption>
<tr>
<td></td>
<th>Lemons</th>
<th>Pears</th>
</tr>
<tr>
<th>Wholesale</th>
<td>$1.00</td>
<td>$1.50</td>
</tr>
<tr>
<th>Retail</th>
<td>$2.00</td>
<td>$2.50</td>
</tr>
</table>
Example:
<table summary="Monthly calendar with links to each day's posts">
References: Accessible Data Tables
Many designers use transparent spacer images to control the layout of their web site in visual browsers. You may use as many as you like, but you need to explicitly specify an empty alt attribute on each spacer image so that non-visual browsers know to ignore them.
Change the first to the second
<img src="spacer.gif" width="1" height="10">
<img src="spacer.gif" alt="" width="1" height="10">
Do not use the first one, use the second one instead
Example
<img src="xxx" alt="yyy" />
If you have an image map like this:
Add alt text to both the main image, and to each linked area within the image map, like this:
Do not use the following as the horizontal rule
Use the CSS to define the look of your horizontal rule
Example:
<label for="q">xyz</label>
<input type="text" id="q" name="q" value="" />
Every web site needs a site search.
If you've implemented any of the tips in this series, create an accessibility statement that lists the accessibility features of your site.
Brief Summary 1: Top 7 Accessibility Tips(1) Write meaningful ALT text
(2) Use a spell checker
(3) Avoid abbreviations if you can
(4) Use high contrast colors, especially for text
(5) Make text scalable
(6) Use CSS to set colors
(7) Ensure links make sense out of context
Brief Summary 2: 10 Simple Web Accessibility Tips You Can Do Today(1) Use meaningful title attributes
(2) Place important elements higher up the web page
(3) Don’t begin title attributes with the same text
(4) Use headings correctly
(5) Use distinct and meaningful page titles
(6) Use skip navigation
(7) Label your form elements
(8) Test your web pages with CSS and JavaScript disabled
(9) "See" what it’s like to use assistive technologies
(10) Web accessibility is not about degrading the overall user experience
Web Accessibility Related Standards
Three levels: Level A, Level AA, Level AAA
ReferencesThis book answers two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.
WAVE is a free web accessibility evaluation tool provided by WebAIM. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.
Most web accessibility guidelines already go hand-in-hand with website development practices. In this article, we’ll explore 10 quick and easy ways to improve your site’s accessibility.
The W3C Web Accessibility Initiative group has an introductory level document for those who want to learn about web accessibility, but don’t know where to start.
WebAIM (Web Accessibility In Mind) promotes universal design on the web and has plenty of articles on web accessibility; just studying the site’s design and HTML/CSS source code can give you an idea of what a web accessible site is.
Thanks for ReadingIf you would rather like to have this lecture note in printed format, please click the print action link in the top right corner. If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk. |