Web checklist

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

The purpose of this checkpoint is to ensure that information displayed visually is available programmatically so it is accessible to everyone. For example, headings on a web page in a bold text are not accessible to someone using a screen reader or using a different style sheet unless proper HTML markup is used to define the heading.

The techniques address many different types of structures which are perceived visually, but need HTML markup for the information and relationships to be available to someone with a disability. For example, a sighted user can distinguish paragraphs on the page because they are separated by blank line. Screen readers can read a page by paragraph only if they are marked using the element. You can visually scan a table to understand the purpose of the table, but that isn't possible using a screen reader. Adding a summary and caption will enable a blind user to get the same information available visually.

Back to top

Compliance with this checkpoint requires all of the following techniques be met. These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 1.3.1. (link resides outside of ibm.com)

1. Semantic elements: Use semantic elements, such as standard HTML, and standard text formatting conventions to mark up structure.

Examples for General developers

1. Semantic elements: Use semantic elements, such as standard HTML, and standard text formatting conventions to mark up structure.

To comply with this technique, all of the following examples must be implemented.

Example 1

Use semantic elements to mark up structure and use semantic markup to mark emphasized or special text.

The blockquote element is used to identify the following quotation from Ed Brill, IBM Business Unit Executive, Worldwide Lotus Notes/Domino Sales, following Lotusphere 2006.

<blockquote>
We'll always have a mix of technical, customer and executive attendees, but Lotusphere has been ramping up to make the conference one of the primary training venues of the year for technical staff.
</blockquote>

For additional information, refer to WCAG 2.0 examples for using semantic elements to mark up structure (link resides outside of ibm.com).

Example 2

Use the <strong> element to provide visual emphasis.

Text that is bold provides visual emphasis, but that information is not available to assistive technology. Rather than using bold, use the strong element as shown in the next example so the importance of the warning is available to all users. Hurricane Katrina has strengthened to a category 4 hurricane, making this a very dangerous storm.

<p>Hurricane Katrina has strengthened to a <strong>category 4</strong> hurricane, making this a very dangerous storm.</p>

Example 3

Use semantic markup whenever color cues are used.

Text that is written in a different color can give emphasis for a sighted user that can distinguish color. However, blind or color blind users may not be able to see the color difference. Using the <strong> element provides another way for a color blind user to see the emphasized text. Some assistive technologies recognize the <strong> element as well, making it a good option for blind users. The following example uses the <strong> element as well as color to indicate that the IBM quarterly conference call is open to all:

Attention investors: IBM conducts a quarterly investor conference call. For more information go to ibm.com. This call is open to anyone interested in hearing about IBM’s business.

Back to top

Examples for HTML developers

1. Semantic elements: Use semantic elements, such as standard HTML, and standard text formatting conventions to mark up structure.

To comply with this technique, all of the following examples must be implemented.

The examples for caption, summary and scope reference the following example table.

Example 4

Use caption elements to associate data table captions with data tables.

The caption element is used to associate a table description with the table itself. The caption is spoken when you navigate to the table using a screen reader. If the description is coded using a paragraph element, there is no association between the text and the table. The caption is displayed visually on the page and spoken by screen readers.

The HTML markup for the caption used in the example table is listed below.

<table border="1" > <caption>Boys and Girls in Elementary School Classes</caption>

For additional information, refer to WCAG 2.0 examples for using caption elements to associate data table captions with data tables (link resides outside of ibm.com).

Example 5

Use table markup to present tabular information.

A simple data table contains one row of column headings and/or one row of row headings. This is the most basic type of data table. Use the th element to identify table heading cells of rows and/or columns in a simple data table.

The table below shows the number of boys and the number of girls in each class of an elementary school. Without proper HTML markup to identify row and column headers, someone using a screen reader might have trouble understanding, for example, that there are 12 girls in the 2nd grade class. They would navigate to row 2, column 3 and hear "12". With proper markup of headings using the th element, you hear "Second grade. # of Girls. 12".

The code for the above example is:

<table border="1" summary="A example simple data table showing the number of boys and girls in each grade of an elementary school">
<caption>Boys and Girls in Elementary School Classes</caption>
<tr>
<th scope="col">Class</th>
<th scope="col"># of Boys</th>
<th scope="col"># of Girls</th>
</tr>
<tr>
<th scope="row">1st Grade</th>
<td>11</td>
<td>10</td>
</tr>
<tr>
<th scope="row">2nd Grade</th>
<td>7</td>
<td>12</td>
</tr>
...
</table>

Example 6

Use id and headers attributes to associate data cells with header cells in data tables.

Complex data tables are defined as having two or more levels of row or column headings or headings that span multiple rows or columns. Complex data tables require additional markup to explicitly associate the heading with the data. In the data cells, the headers attribute is used on the td element to specify which heading cell, via the id attribute on the th element, is associated with a specific data cell.

The complex data table below shows the number of boys and girls in each class of an elementary school, and also shows the breakdown of students that are assigned to each teacher. This is considered a complex data table because there are multiple row headers (1st Grade includes both Mr. Henry and Mrs. Smith). In the example, column and row headers are identified with th elements and cells are associated with the column and row headers using the headers attribute. But in a complex row, such as the one beginning with 1st Grade, identifying only the row header is not enough to convey the relationships between the cells. In this example, it is important to understand that both Mr. Henry and Mrs. Smith are 1st grade teachers. Each has their own class of 1st grade boys and girls.

The code below shows the correct markup of the 1st Grade portion of the above table. Notice that the column and row headers are marked with the id attribute, and the corresponding data cells contain the headers attribute. In addition, you will notice that the cell containing Mr. Henry is a header cell as well as a data cell, and therefore it contains both the id and headers attributes.

...
<tr>
<th id="class">Class</th>
<th id="teacher">Teacher</th>
<th id="boys"># of Boys</th>
<th id="girls"># of Girls</th>
</tr>
<tr>
<th id="1stgrade" rowspan="2">1st Grade</th>
<th id="MrHenry" headers="1stgrade teacher">Mr. Henry</th>
<td headers="1stgrade MrHenry boys">5</td>
<td headers="1stgrade MrHenry girls">4</td>
</tr>
<tr>
<th id="MrsSmith" headers="1stgrade teacher">Mrs. Smith</th>
<td headers="1stgrade MrsSmith boys">7</td>
<td headers="1stgrade MrsSmith girls">9</td>
</tr>

Adding id attributes to the first cell in each row and to other row cells that could be perceived as headers for subsequent cells in the row makes it explicitly clear which column and row headers apply to a particular cell. For example, it is now clear that both 1st Grade and Mr. Henry are row headers for the cell containing 5. This markup does not change the visual look of the table, and a screen reader user will be able to better understand the relationships between the cells.

Example 7

Use the summary attribute of the table element to give an overview of data tables.

The summary attribute is used to provide additional information about the structure or purpose of a data table to someone using a screen reader. Unlike the caption element, the summary attribute is not visible, but it is spoken by screen readers.

<table border="1" summary="A simple data table showing the number of boys and girls in each grade of an elementary school">

For additional information, refer to WCAG 2.0 examples for the summary attribute of the table element to give an overview of data tables (link resides outside of ibm.com).

Example 8

Use the scope attribute to associate header cells and data cells in data tables.

The scope attribute is used to define the scope of any cell that is used as a header within a data table. This technique is used in simple data tables to identify a cell that is a header for a row, column, group of rows or group of columns. The scope attribute is used in addition to the th element; it is not used in place of the th element.

The value of row in the scope attribute will assign the cell as the header for all cells in that row. Similarly, the value of col in the scope attribute will assign the cell as the header for all cells in that column. Scope is generally quicker and easier to use than id and headers attributes for simple tables.

The HTML code below shows how the scope attribute was used to define row and column headers in the sample table.

<tr> <th scope="col">Class</th> <th scope="col"># of Boys</th> <th scope="col"># of Girls</th> </tr> <tr> <th scope="row">1st Grade</th> <td>11</td> <td>10</td> </tr> .....

For additional information, refer to WCAG 2.0 examples for the scope attribute to associate header cells and data cells in data tables (link resides outside of ibm.com).

Example 9

Provide a description for groups of form controls using fieldset and legend elements.

Group radio buttons and other controls using the fieldset element. Unlike adding text above the radio buttons, the fieldset element programmatically associates the radio buttons with the text provided with the legend element. When you tab to a set of controls grouped using fieldset, screen readers read the legend, the form element label and the control status so the user has the context of the form element.

For additional information, refer to WCAG 2.0 examples for providing a description for groups of form controls using fieldset and legend elements (link resides outside of ibm.com).

As an alternative to the HTML fieldset and legend elements, the WAI-ARIA group and radiogroup roles may be used to group radio buttons and other controls. The following example uses a WAI-ARIA radiogroup role to group the same radio buttons shown in the previous example.

<p id="flavor">
Choose your favorite ice cream flavor:
</p>
<div role="radiogroup" aria-labelledby="flavor">
<input type="radio" name="icecream" id="chocolate" value="chocolate" />
<label for="chocolate">
chocolate
</label>
<input type="radio" name="icecream" id="vanilla" value="vanilla" />
<label for="vanilla">
vanilla
</label>
<input type="radio" name="icecream" id="mint" value="mint" />
<label for="mint">
Chocolate Mint Chip
</label>
</div>

Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.

Please refer to the WAI-ARIA Best Practices section: Providing Logical Layout Semantics using Structural Roles (link resides outside of ibm.com) for more information.

Example 10

Use ol, ul and dl for lists.

Create lists of related items using HTML markup so the relationship is known to screen reader users. Use ol for ordered lists and ul for unordered lists. Screen readers provide the ability to navigate a Web page by lists, so it is important to use correct markup. Lists that are created using visual elements, such as a dash or asterisk, without proper markup are not identified as lists by screen readers. The list of techniques on this Web page was created using the ol element.

<ol>
<li>Using table markup to present tabular information.</li>
<li>Using caption elements to associate data table captions with data tables</li>
<li>Using the summary attribute of the table element to give an overview of data tables.</li>
....
<ol>

The dl element is used to group terms with their definitions. The dt element is used to define the term. The dd element is used to define the definition. Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the dt element and is restricted to inline content. The description is given with a dd element that contains block-level content.

The following sample code shows how to use a definition list to build a glossary of terms.

<dl> <dt>assistive technology</dt> <dd> <p>Hardware or software that is used to increase, maintain, or assist the functional capabilities of people with disabilities.</p> </dd> ... </dl>

For additional information, refer to WCAG 2.0 examples for using ol, ul and dl for lists (link resides outside of ibm.com) .

Example 11

Use h1-h6 to identify headings.

Screen readers read content sequentially, so it is important to include markup that enables users to navigate web pages by headings. This provides an overall organization of the page and faster navigation to specific sections. Web pages that use bold or larger font to indicate headings are not accessible. Screen readers can identify heading hierarchy (h2 vs h3) to show organization, so it is important to use headings in sequence. The techniques pages in the IBM accessibility checklists use headings to identify key sections of the page.

<h1>All structures</h1> <h3>Rationale</h3> <p>This section talks about why the checkpoint is important</p> ... <h3>Techniques</h3> <p>This section defines specific techniques to meet the checkpoint.</p>

For additional information, refer to WCAG 2.0 examples for using h1-h6 to identify headings (link resides outside of ibm.com).

Example 12

Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.

Please refer to the WAI-ARIA Best Practices section: Providing Logical Layout Semantics using Structural Roles (link resides outside of ibm.com) for more information.

If navigation links are present, assign a WAI-ARIA navigation role to the element containing the links or to a heading that refers to the links. The following example uses a WAI-ARIA navigation landmark to allow screen reader users to navigate directly to the navigation area. The technique may be implemented by simply assigning a navigation role to the heading element.

<h2 role=" navigation">Navigation</h2>

Screen reader users navigate to landmarks using landmark navigation keys to advance sequentially through all landmarks on a page. A screen reader may also present a list of page landmarks to enable jumping to different areas on a page.

Example 13

Note that WAI-ARIA examples are not supported by all browsers. If your product needs to be accessible in multiple browsers one or more of the required HTML/CSS specific techniques must be implemented as well as a WAI-ARIA technique.

Please refer to WAI-ARIA Best Practices section: Providing Logical Layout Semantics using Structural Roles (link resides outside of ibm.com) for more information.

If a search field is present, assign a WAI-ARIA search role to the field. The following example uses a WAI-ARIA search landmark to allow screen reader users to navigate directly to the search field. The technique may be implemented by simply assigning a search role to the field.

<input type="text" id="search" name="search" role="search" />

Screen reader users navigate to landmarks using landmark navigation keys to advance sequentially through all landmarks on a page. A screen reader may also present a list of page landmarks to enable jumping to different areas on a page.

Back to top

Examples for Script developers

1. Semantic elements: Use semantic elements, such as standard HTML, and standard text formatting conventions to mark up structure.

To comply with this technique, all of the following examples must be implemented.

Example 14

Use functions of the Document Object Model (DOM) to add content to a page.

WCAG 2.0 contains helpful examples of DOM scripting. For additional information, refer to WCAG 2.0 examples for using functions of the Document Object Model (DOM) to add content to a page (link resides outside of ibm.com).

Back to top

Examples for Text developers

1. Semantic elements: Use semantic elements, such as standard HTML, and standard text formatting conventions to mark up structure.

To comply with this technique, all of the following examples must be implemented.

Plain text documents do not contain markup, but structures like paragraphs, lists and headings must still be recognized by someone using assistive technology. By using standard formatting conventions, like having numbers or labels to indicate a list item, the plain text document is accessible.

Example 15

Use standard text formatting conventions for paragraphs (TXT).

In a plain text document, the standard formatting convention for the beginning of a paragraph is either the beginning of the content or a single blank line before the paragraph text. To indicate the end of a paragraph, add one or more blank lines to the end of the paragraph text.

For additional information, refer to WCAG 2.0 examples for using standard text formatting conventions for paragraphs (link resides outside of ibm.com).

Example 16

Use standard text formatting conventions for lists (TXT).

In a plain text document, the standard formatting convention for ordered lists is either using numerals in numeric order, (1,2,3) or using alphabetic labels in order (A,B,C) for each item in the list. Unordered lists should use asterisks, dashes, or bullets.

For additional information, refer to WCAG 2.0 examples for using standard text formatting conventions for lists (link resides outside of ibm.com).

Example 17

Use standard text formatting conventions for headings.

In a plain text document, the standard formatting convention to indicate the beginning of a heading is to have 2 blank lines preceding the heading text. The end of the heading can be indicated by 1 blank line following the heading text.

For additional information, refer to WCAG 2.0 examples for using standard text formatting conventions for headings (link resides outside of ibm.com).

Example 18

Avoid the use of tables in text documents.

Rudimentary tables may be implemented in text documents using for example, the dash ( - ) and pipe ( | ) characters. However, these tables are not accessible and should not be implemented.

Back to top

Examples for Domino developers

1. Semantic elements: Use semantic elements, such as standard HTML, and standard text formatting conventions to mark up structure.

To comply with this technique, all of the following examples must be implemented.

Example 19

Use semantic elements in Domino to mark up structure.

Domino uses semantic elements to markup most structure in your forms, documents and views. There are some instances where the developer must add their own HTML markup such as using <strong> instead of simple bold text.

Example 20

Use the strong tag in Domino when emphasizing important text.

Rather than using bold, use the strong element so the importance of the information is available to all users. In Domino, you must use pass-thru HTML.

1. Type the beginning strong tag - <strong> for the emphasized text.
2. Type text that needs to emphasized.
3. Type the ending strong tag - </strong>.
4. Select the strong tags and the emphasized text.
5. Go to Text - Pass-Thru HTML. Once selected, the pass-thru HTML is highlighted in gray.

You can also identify any text as Pass-thru HTML by enclosing the text in square brackets. For example, [<strong>Warning</strong>].

Hurricane Katrina has strengthened to a [<strong>category 4</strong>] hurricane.

Example 21

Use the summary attribute of the table element to give an overview of data tables in Domino.

Domino Designer supports the summary attribute through the Table Properties box. Use the following steps to add a table summary to your data tables. Do not use the summary attribute for layout tables.

1. Create the data table.
2. Press Shift-F10 and select Table Properties.
3. Go to Table HTML tags - Other.
4. Enter the summary for the data table. For example, summary="Table with workout schedules for each athlete."

Example 22

Use the scope attribute to associate header cells and data cells in data tables in Domino.

Domino Designer supports the summary attribute through the Table Properties box. Use the following steps to add table a summary attribute to your data tables. Do not use the summary attribute for layout tables.

1. Create the data table.
2. Identify the row / column table headers.
3. Press Shift-F10 and select Table Properties.
4. Go to Cell HTML tags - Other.
5. Enter the scope for that heading. Enter scope="col" for column headings or scope="row" for row headings.

Example 23

Use ol, ul and dl for lists in Domino.

Use list formatting so screen reader users understand the structure and relationship of the information in the list. For example, JAWS reads the level of the list to convey relationship and structure. Use the following steps to define lists in Domino Designer.

1. From the Designer menu, go to Text - List. Select the list style you want to use, for example Bullet, Number or Checkmark.
2. Type the text for the list.

Example 24

Use h1-h6 to identify headings in Domino.

Headings allow blind users to quickly scan and navigate pages without listening to the entire page sequentially. Heading text is displayed in a larger bold font and identified as a heading to screen reader users. Use the following steps to define headings using pass-thru HTML.

1. Type the heading tag, for example <h3>.
2. Type text for the heading.
3. Type the closing heading tag, for example <h3>.
4. Select the heading text and the heading tags.
5. Go to Text - Pass-Thru HTML. Once selected, the pass-thru HTML is highlighted in gray. You can also identify any text as Pass-thru HTML by enclosing the text in square brackets. For example, [<h3>My Heading</h3>].

Back to top

Implementation of recommended techniques is not required to comply with this checkpoint, but these techniques should be reviewed since they can improve the accessibility and usability of the application. See WCAG Additional Techniques (Advisory) for 1.3.1 for a list of techniques and examples (link resides outside of ibm.com).

Back to top

The following test tools and techniques are required to test this checkpoint.

1. Test tools
2. Required accessibility verification test techniques

Back to top