Web accessibility refers to designing web applications in a way that it can be used with ease by people with visual disabilities. Some of these users rely on screen readers to read out the content in the web pages. The screen readers interpret the code present on the page and read out its content to the user.

is a widely used HTML element to display data in a structured fashion in webpages. Its design ranges from simple ones to complex ones, complete with row headers, merged headers etc.

If a table is not designed with accessibility in mind, it will be difficult for the screen readers to translate the data in complex tables meaningfully for the users. Hence, to make complex HTML tables more easily understandable, for accessibility, we must ensure that the headers, column groups, row groups, etc. are clearly defined. We’ll see below how this is achieved in markup.

The Scope Attribute

Even for a simple table with

markup with scope="col" helps the assistive technology identify that the cells that follow in the same column are names of students.

Similarly, cells like

containing scope="colgroup" helps users identify that the data in the cells that follow in the column group it spans over are associated with that particular subject.

Then there is the

markup with scope="row" that defines that the cells following it in the same row, containing the “grade” information regarding that particular student name.

Row Groups

Now let us move onto another example, this example will have almost the same table as the one above except we’ll swap row and column headers, so we’ll be able to work with row groups.

	
tag that clearly defines the headers, you can improve its accessibility with the scope attribute and not give way to any confusion that may arise from similar types of data in the cells.

Table 1Table 1
Employee Name Employee Code Project Code Employee Designation
John Doe 32456 456789 Director
Miriam Luther 78902 456789 Deputy Director

What does scope attribute do? According to W3C:

In other words it helps us associate the data cells with their corresponding header cells.

Please note that in the above example you can switch

for

. As long as its scope has the value col, it will be interpreted as the corresponding column’s header.

The scope attribute can have any one of these four values; col, row, rowgroup, colgroup to refer to a column’s header, a row’s header, a group of columns’ header and a group of rows’ header respectively.

Complex Tables

Now let us move on to a more complex table.

Table 2Table 2

Above is a table that lists students in a class and their grades in practical and theory for three subjects.

Here is the HTML code for it. The table has used rowspan and colspan to create merged headers for the data cells.

Student Name Biology Chemistry Physics
Practical Theory Practical Theory Practical Theory
John Doe A A+ B A A A-
Miriam Luther A A C C+ A A-

In the above table, each data cell, that is each of the table cells displaying the grade, is associated with three pieces of information:

  • Which student does this grade belong to?
  • Which subject does this grade belong to?
  • Is this grade for the Practical or Theory section?

Those three information are defined in three different types of header cells structurally and visually:

  • Student name
  • Subject name
  • Practical or theory

Let’s define the same for accessibility.

Student Name Biology Chemistry Physics
Practical Theory Practical Theory Practical Theory
John Doe A A+ B A A A-
Miriam Luther A A C C+ A A-

In the above markup we have added scope to cells that contain heading information about the data cells.

Column Group

Table 3Table 3

Biology, Chemistry and Physics cells are to be associated with a group of two columns each (Theory & Practical). Just adding colspan="2" does not create the column groups, it only indicates that the particular cell is to occupy two cells’ worth of space.

To create columns group you must use colgroup and then add the span attribute to it indicating how many columns that column group includes.

The

Student Name Biology John Doe
Subject John Doe Miriam Luther
Biology Practical A A
Theory A+ A
Chemistry Practical B C
Theory A C+
Physics Practical A A
Theory A- A-

Now that we have our sample to work with let us start by creating row groups like we did for the column groups in the previous example.

However, row groups can not be created using a tag like colgroup because there is no rowgroup element.

HTML rows are generally grouped using

,

and elements. A single HTML

element can have one

, one

and multiple

. We’ll use multiple tbody in our table to create the row groups, and add the respective scope to header cells.

Table 4Table 4
Subject John Doe Miriam Luther
Biology Practical A A
Theory A+ A
Chemistry Practical B C
Theory A C+
Physics Practical A A
Theory A- A-

We have added the rows “Practical” and “Theory” in each tbody creating row groups with two rows in each. We also have added the scope="rowgroup" to the cells containing the heading information about those two rows (which is the subject name the grades belong to in this case).

The post How to Improve HTML Table Accessibility with Markup appeared first on Hongkiat.