Accessible Web Design Examples

Accessible Style Sheet Layout

HTML Code

<DIV ID="Left">
	<P>The right location of this information is being
	controlled by the style sheet. Visually, it will be
	read second and will also be read second by a screen
	reader because it comes second in the HTML. Not because
	the style sheet places it on the right.</P>
</DIV>
<DIV CLASS="right">
	<P>The right location of this information is being
	controlled by the style sheet. Visually, it will be
	read second and will also be read second by a screen
	reader because it comes second in the HTML. Not because
	the style sheet places it on the right.</P>
</DIV>

CSS Code

#Left {
	FLOAT: left;
	WIDTH: 40%;
	BORDER: 1px groove black;
	BACKGROUND-COLOR: #FFDDAA;
	PADDING: 5px; 
	}

.right {
	BORDER: 1px groove black;  
	BACKGROUND-COLOR: #D9C4AA;
	PADDING: 5px; 
	}

Result: A screen reader will read the left box first then the right because of the HTML code order.

Non-Accessible Style Sheet

HTML Code

<DIV ID="Right">
	<P>Previously on the left in the accessible style sheet 
	example, this information is now told to be on the
	right by the style sheet. Visually, it will be read
	second but with a screen reader or style sheets turned
	off, will be read out of order (first) because it comes
	first in the HTML.</P>
</DIV>
<DIV CLASS="left">
	<P>Previously on the right in the accessible style sheet
	example, this information is now told to be on the
	left by the style sheet. Visually, it will be read
	first but with a screen reader or style sheets turned
	off, will be read out of order (second) because it comes
	second in the HTML.</P>
</DIV>

CSS Code

#Right {
	FLOAT: right;
	WIDTH: 40%;
	BORDER: 1px groove black;
	BACKGROUND-COLOR: #FFDDAA;
	PADDING: 5px; 
	}

.left {
	BORDER: 1px groove black;  
	BACKGROUND-COLOR: #D9C4AA;
	PADDING: 5px; 
	}

Result:

Automatic vs Manual: When using an accessibility program, external style sheets are typically ignored. However, user input on proper style sheet use through a manual check will be required prior to passing or failing. W3C's css-validator does provide assistance with checking properly coded style sheets.

Accessible Server Side Site Map Example

SIUC Home - About SIUC - Search SIUC - SIUC Facts - Public Events Calender

<A HREF=" ../imagemaps/SIUCheader_maroon.map"> ALT="Site map with alternative links provided"< IMG SRC=" ../images/SIUCheader_maroon.jpg" WIDTH="483" HEIGHT="110" BORDER="0" ISMAP="ISMAP">
< /A>

Result: Screen readers can not read server side links and areas of the map are not readily accessible without a mouse.

Automatic vs Manual: When using an accessibility program, the program is unable to determine if the text links are redundant copies of the server-side links. User input is required to ensure consistency.

Accessible Client Side Site Map Example

<IMG SRC="Images/SIUCheader.bmp" ALIGN="TOP" ALT="Site map with regions alt tagged" < AREA SHAPE="RECT" COORDS="0,32,73,43" HREF="http://www.siuc.edu/aboutsiuc/" ALT="About SIUC" > BORDER="0" WIDTH="315" HEIGHT="70">:

Result: The site map has an alt text for identification, the areas have alt text for screen readers. Redundant links should be provided for text only browsing but are not required.

Automatic vs Manual: When using an accessibility program, detection of client-side image maps should be automatic. Ensure that the alt text used in the map is equivalet to the link information on the image.

• Use TD elements for data cells
• For simple tables use TH or THEAD elements to indicate headers
• Use SCOPE and HEADER attributes to indicate relationships between headers and data cells
• Define the CAPTION element to title the table
• Use the SUMMARY attribute of the TABLE element to provide additional information on the purpose of the table in the document
• Use AXIS attribute of TD and TH to indicate conceptual categories

Accessible Table using "Scope"

"Scope" must have one of the following values: "row", "col", "rowgroup", or "colgroup." Scope specifies the set of data cells to be associated with the current header cell. This method is particularly useful for simple tables. It should be noted that the spoken rendering of this table would be identical to that of the previous example. A choice between the "headers" and "scope" attributes is dependent on the complexity of the table. It does not affect the output so long as the relationships between header and data cells are made clear in the markup.

Student GPA Data

Year	4.0	3.9 - 3.0	2.9 - 2.0	1.9 - 1.0	0.9 - 0.0
Freshmen	26%	23%	31%	12%	8%
Sophmore	30%	25%	35%	7%	3%
Junior	33%	28%	34%	3%	2%
Senion	32%	33%	32%	2%	1%

<TABLE border="2"
  summary="This table charts student GPA data.">
  < CAPTION>Student GPA Data</CAPTION>
  < TR>
     <TH SCOPE="col">Year</TH>
     <TH SCOPE="col"> 4.0 </TH>
     <TH SCOPE="col"> 3.9 - 3.0 </TH>
     <TH SCOPE="col"> 2.9 - 2.0 </TH>
     <TH SCOPE="col"> 1.9 - 1.0 </TH>
     <TH SCOPE="col"> 0.9 - 0.0</TH>
  < /TR>
  < TR>
     <TH SCOPE="row">Freshmen>
    < TD>26%</TD>
    < TD>23%</TD>
    < TD>31%</TD>
    < TD>12%</TD>
    < TD>8%</TD>
  < /TR>....
< /TABLE>

Result: A speech synthesizer might render it by speaking the following:

Caption - Student GPA Data

Summary - This table charts student GPA data.

Year: Freshmen, 4.0: 26%, 3.9 - 3.0: 23%, 2.9 - 2.0: 31%, 1.9 - 1.0: 12%, 0.9 - 0.0: 8%

Year: Sophmore, 4.0: 30%, 3.9 - 3.0: 25%, 2.9 - 2.0: 35%, 1.9 - 1.0: 7%, 0.9 - 0.0: 3%

Year: Junior, 4.0: 33%, 3.9 - 3.0: 28%, 2.9 - 2.0: 34%, 1.9 - 1.0: 3%, 0.9 - 0.0: 2%

Year: Senior, 4.0: 32%, 3.9 - 3.0: 33%, 2.9 - 2.0: 32%, 1.9 - 1.0: 2%, 0.9 - 0.0: 1%

Accessible Table using "Headers"

The next example associates the same header (TH) and data (TD) cells as before, but this time uses the "headers" attribute rather than "scope". This example shows how to associate data cells (created with TD) with their corresponding headers by means of the "headers" attribute. The "headers" attribute specifies a list of header cells (row and column labels) associated with the current data cell. This requires each header cell to have an "id" attribute.

Student Data

Last Name	GPA	Major	Full Time
Baggins	3.5	Chemistry	No
Friday	2.5	Aviation	Yes
Stocking	4.0	Undecided	Yes

<TABLE border="2"
  summary="This table charts student data.">
  < CAPTION>Student Data</CAPTION>
  < TR>
     <TH ID="Last_Name"> Last Name </TH>
     <TH ID="GPA"> GPA </TH>
     <TH ID="Major"> Major </TH>
     <TH ID="Full_Time"> Full Time </TH>
  < /TR>
  < TR>
    < TD HEADERS="Last_Name">B. Baggins</TD>
    < TD HEADERS="GPA">3.5</TD>
    < TD HEADERS="Major">Chemistry</TD>
    < TD HEADERS="Full_Time">No</TD>
  < /TR>....
< /TABLE>

Result: A speech synthesizer might render it by speaking the following:

Caption - Student Data

Summary - This table charts student data.

Name - Baggins, GPA 3.5, Major Chemistry, Full time No

Name - Friday, GPA 2.5, Major Aviation, Full time Yes

Name - Stocking, GPA 4.0, Major Undecided, Full time Yes

Non-Accessible Table

Student Data

Last Name	GPA	Major	Full Time
Baggins	3.5	Chemistry	No
Friday	2.5	Aviation	Yes
Stocking	4.0	Undecided	Yes

<TABLE border="2"
  summary="This table charts student data.">
  < CAPTION>Student Data</CAPTION>
  < TR>
     <TD> Name </TD>
     <TD> GPA </TD>
     <TD> Major </TD>
     <TD> Full Time </TD>
  < /TR>
  < TR>
    < TD>B. Baggins</TD>
    < TD>3.5</TD>
    < TD>Chemistry</TD>
    < TD>No</TD>
  < /TR>....
< /TABLE>

Other resources: W3C Accessible Table Techniques

Automatic vs Manual: When using an accessibility program, associations between information will require a suer check becuase software is unable to determine if cells are truly header information or if relationships are correct.

This is important to the computer's ability to speak the contents of a table using a speech synthesizer. Browsers and assistive technologies rely on structural markup such as headers to customize presentation to meet a user's needs. If there is more than one row or column of headers, a more extensive description of the relationship between cells helps the user understand the structure better (http://bobby.watchfire.com/bobby/html/en/gls/g250.html).

Accessible Complex Table Using "axis" Attribute

Funds Raised

	Sales	Charity	Total
Fall	-	-	-
Freshman	31.25	87.00	118.25
Sophmore	22.43	52.00	74.43
Spring	-	-	-
Freshman	21.25	32.00	53.25
Sophmore	35.70	64.00	99.70
Totals	110.63	235.00	345.63

Result: A speech synthesizer might render it by speaking the following:

Funds Raised

Fall

Freshman - Sales: 31.25, Charity: 87.00, Total: 118.25

Sophmore - Sales: 22.43, Charity: 52.00, Total: 74.43

Alternatively, the user may be interested only in a particular column, and with the appropriate markup can instruct the speech synthesizer to read it as follows:

Charity - Fall - Freshman: 87.00 - Sophmore: 52.00

Charity - Spring - Freshman: 32.00 - Sophmore: 64.00

Complex Table HTML Code

<TABLE border="2" summary="complex table example">
  <CAPTION> Travel Expense Report </CAPTION>
  <TR>
    < TH></TH>
    <TH id="a2" axis="funds">Sales</TH>
    <TH id="a3" axis="funds">Charity</TH>
    <TH id="a4" axis="funds">Total</TH>
  </TR>
  <TR>
    < TH id="a6" axis="semester">Fall</TH>
    <TH></TH>
    <TH></TH>
    < TH></TH>
  </TR>
  < TR>
    < TD id="a7" axis="class">Freshman</TD>
    < TD headers="a6 a7 a2">31.25</TD>
    < TD headers="a6 a7 a3">87.00</TD>
    <TD headers="a6 a7 a4">118.25</TD>
  </TR>
  < TR>
    < TD id="a8" axis="class">Sophmore;/TD>
    <TD headers="a6 a8 a2">22.43</TD>
    <TD headers="a6 a8 a3">52.00</TD>
    < TD headers="a6 a8 a4">74.43</TD>
  < /TR>
  <TR>
    < TH id="a10" axis="semester">Spring</TH>
    < TH></TH>
    <TH></TH>
    <TH></TH>
  < /TR>
  <TR>
    <TD id="a11" axis="class">Freshman;/TD>
    <TD headers="a10 a11 a2">21.25</TD>
    < TD headers="a10 a11 a3">32.00</TD>
    <TD headers="a10 a11 a4">53.25</TD>
  </TR>
  <TR>
    <TD id="a12" axis="class">Sophmore</TD>
    <TD headers="a10 a12 a2">35.70</TD>
    <TD headers="a10 a12 a3">64.00</TD>
    <TD headers="a10 a12 a4">99.70</TD>
  </TR>
  <TR>
    <TH>Totals</TH>
    <TD>110.63</TD>
    <TD>235.00</TD>
    <TD>345.63</TD>
  </TR>
</TABLE>

Other resources: W3C Accessible Table Techniques

Automatic vs Manual: When using an accessibility program, associations between information will require a suer check becuase software is unable to determine if cells are truly header information or if relationships are correct.

Non-Accessible Frame