Truwex manages website compliance with web accessibility, online privacy, and quality standards. Truwex is a web governance and testing solution, all in one product.

Web compliance managers can use Truwex to:

  • Define a uniform website standard.
  • Monitor compliance status and automatically generate reports for upper management.
  • Set action items for website owners and web developers.

Web developers can use Truwex to:

  • Automatically test new web pages against a required web standard.
  • Detect issues on a website and use detailed Truwex diagnostics to fix them.

Supported web standards and validations: US ADA Section 508, WCAG 1 for UK DDA and German BITV, web analytics validation, COPPA and PII, website visibility in search engines, any custom web standard including crawling AJAX web sites.

Web site accessibility check

Accessibility
Expand



Privacy issues
Expand
Web site quality issues
Expand
Interactive behavior issues
Expand

Essential steps for designing an accessible web site

This guide outlines some simple steps that will help make your website accessible to disabled users. Website accessibility is not rocket science. Most methods for designing an accessible website are already familiar to most developers. This guide is meant only as a brief outline. It is interesting to note that many accessibility techniques are very similar to search engine optimization methods. In recognition of this, Truwex links together web site accessibility and SEO where it works.

There is a fundamental difference between the way that blind users and sighted users browse the internet. A sighted user can look at any place on a page and move a mouse pointer there almost instantly. In contrast, a blind user must wait for his screen reader to reach the desired place in a website which takes much more time. The task of a web designer is to help disabled users to identify and to read any desired content on a web page within a reasonable amount of time. To see how easily your website can be accessed by a blind user, start by checking your web page with the Truwex Online Validator.

Truwex can check your entire website

User testimonials

Basic Web Site Accessibility Principles:

Alternative Comments to all Images

Always insert alternative comments with all images and objects (this should be requirement number one for all developers looking to follow web accessibility standards). To comply with this, simply explain your image content in an ALT attribute. And if an image is clickable, explain the purpose of the target page in addition to the image content. If an image does not convey any valuable information and is used solely for design purposes, you can leave the ALT attribute empty, but keep it on the page! Missing ALT attributes is not an accessible practice.

Remember: search engines index ALT attributes. They pay great attention to clickable images where ALT serves as hyperlink text. Providing precise, but well explained alternative comments will help disabled people to understand your web page and increase its visibility to search engines.

Examples:

Empty ALT attribute for design image:

<img src="spacer.gif" width="1" height="20" border="0" alt="" />

ALT attribute for logo image:

<img src="logo.gif" width="110" height="70" border="0" alt="Erigami company logo" />

ATL attribute to image with a hyperlink:

<a href="/projects.html"><img 
	src="promo.gif" width="200" height="70" border="0" 
	alt="Erigami projects description" /></a>

Accessible Hyperlink Names

Provide clear names for all links in your website (hyperlink text should describe the web page you reference). Remember: "Click here" is always a bad choice for a hyperlink name. Disabled users can review a list of all links on a web page, clear text helps them to navigate to a desired link without having to crawl over the entire web page. Clear link text also raises your visibility to search engines. If your link titles correspond with the topics of your referenced page, it will positively affect your page's position with search engines.

Accessibility Testing Using the Tab Key

The simplest method to test accessibility is to use the tab key on a PC keyboard. Every time you press Tab, a browser selects an HTML object on a web page. Both IE and FireFox highlight it using a dotted line. Try to make sure that all important content on your web page can be reached using only the tab key. When doing a "Tab key test," consider two things:

  1. Is it possible to reach the main part of your web page? If not, your web page is not accessible.

    Example: Custom controls and expanding content

    <img onclick="javascript:return MyExpand();" style="cursor:hand" 
    src="images/plus.gif" id="adetails" alt="expand button" />
    <div style="display:none" id="ddetails">
    	[Large fragment of text with important details here]
    </div>

    The content in DIV tag is hidden initially. A web page visitor can see it only after pressing "Expand" button. However this hidden content is not accessible to keyboard users in IE. The accessibility problem occurs because the button uses device-dependent (mouse dependent in this case) event handler OnClick, and more over it is not even a tab stop, i.e. it is not possible to set an input focus on this button using a keyboard. One possible solution consists in fixing the clickable image:

    <a href="javascript:return MyExpand();" style="cursor:hand" 
    title="This link will expand or collapse details description"><img 
    	src="images/plus.gif" id="adetails" alt="Expand button" /></a>
    <div style="display:none" id="ddetails">
    	[Large fragment of text with important details here]
    </div>
  2. How many clicks are necessary to reach the main content? If your hand is tired from pressing Tab, you should consider adding a skip link to your web page.

Skip Link

The purpose of a skip link is to provide a quick access to web page content. As we discussed above, a user of assistive technologies reaches web page content step by step. From the Tab test it is clear that this process might take a long time. A major obstacle is the website menu, which repeats on every page of a website with only minor variations. Imagine if every time a visitor opened a web page she had to make 20 steps to start reading. The solution to this problem is a skip link. Skip links provide a way to bypass repetitive navigation menus and jump instantly to the main content.

<a href="#jumptocontent"><img 
	src="spacer.gif" width="1" height="1" alt="Jump to content"></a>
...
<a name="jumptocontent"><img 
	src="spacer.gif" width="1" height="1" alt="Content starts here"></a>

Read advanced guide to skip links: by Jim Thatcher

Header Tags

Header tags play an important role in web page navigation. Use level one tags <h1> to highlight a web page head. Enclose section headers in second tier header tags <h2>. Use the lower level headers only when absolutely necessary. A user of assistive technologies can review these headers before reading a web page and jump to any of them. This is especially useful in cases of very long text. Search engines are also interested in header tags (1st and 2nd levels). When search engines evaluate your site, header text has more weight than normal text. Therefore good headers help increase visibility and relevance in search engine queries.

Option Lists

Option lists with many items cause huge problems for users of assistive tools. Remember that disabled users have to access each option consecutively. Therefore, to reach the last item on the list of options, a disabled user must wade through all the preceding items first. Suppose there are 200 countries in the registration form your website uses and the "United States" is somewhere towards the end. How would you like to wait for every option to be read to you before you could make the proper selection?

Solution: use an Optgroup element to split options in Select list into manageable groups.

<select name="countrySelect" >
<optgroup label="Countries from A through C">   
	<option>Afghanistan</option>
	<option>Albania</option>
	<option>Algeria</option>
	...
</optgroup>
<optgroup label="Countries from D through F">
	...
</optgroup>
	...
</select>

Accessible Forms

Creating an accessible form means a web designer should explain the purpose of every input. Such a problem does not exist for normal users, they simply see text near the input. However this text might be placed far away from the input in the HTML code, confusing assistive reader technology. The best way to solve this problem is to include text descriptions for input using a <label> tag.

For example:

<label for="email">Enter e-mail address:</label>
<input type="text" name="textbox" id="email"/>

There is an easy way to check if a label is used on a web form: click on text description for input. If the cursor jumps to this input, the <label> tag exists. Use of this tag makes your site more convenient for all users.

An alternative way to provide accessibility to forms is by using a TITLE attribute.

<input type="text" name="query" title="Enter your search criteria" />

Do not forget to use alt text for image buttons:

<input type="image" name="Submit" src="arrow.gif" alt="Begin your search" />

Layout and Content Tables

There are two main purposes of tables in a web site's design: (1) a table arranges serial data in rows and columns; and (2) a table defines a web page layout. To provide maximum convenience for disabled users, these two types of tables should be treated in different ways.

  1. Table for serial data

    Specify column and row header cells in data tables by using a TH element with scope="col"/"row" attribute. Let's take for example a table with personal computer specifications:

    <table>
    <tr>
    	<th scope="col">Processor</th>
    	<th scope="col">Operation system</th>
    	<th scope="col">Memory</th>
    </tr>
    <tr>
    	<td>PC model data</td>
    	<td>PC model data </td>
    </tr>
    ...
    </table>
  2. Do not use TH element or other data table markup (such as "summary" or "title" attribute, or Caption element) for layout tables.

Frames

We do not recommend using frames for websites. If a web page contains frames, it consists of several individual documents, which are displayed in one browser window. In general, several documents are more difficult to understand for the assistive technologies used by disabled users.

Frames are difficult to understand for search engines as well. The content of a web page with frames contains little information to index, just links to other documents. Having no content, a web page's ranking will then be decreased. The frame documents will be indexed separately, which will decrease their relevance and value as well.

Web Page Language

Indicate a page language for every web page. It is pretty simple, but helpful.

<html lang="ru">

Text Color Contrast

Using text with sufficient contrast is always good practice. For most people black text on a white background is the easiest to read. If you use other colors, use Truwex to check that your web page makes use of sufficient contrast and color combinations for maximum visibility.

Fixed Fonts

Just because you can read everything on your web page doesn't mean that others can too. Many of your users need larger font to view text. The ability to enlarge fonts will help senior visitors to read text without special assistive tools.

To follow this accessibility requirement a web developer must use relative fonts rather than absolute ones. A web developer should also define all styles in the CSS and do not use inline styles. A user of assistive tools can redefine the styles defined in CSS to read a web page without limitations.

  1. Inaccessible example:
    <span style="font-size: 8px">small text</span>
  2. Accessible example:
    <span class="small">small text</span>

    where CSS declaration contains:

    .small {font-size: 80%;}
Vladimir Popov