seats on the plane
Photo by Alexander Schimmeck on Unsplash

Creating an accessible seat map for public transport using data grid

The web continues to advance to make our daily tasks easier, what was once going in person to a terminal to buy a bus or plane ticket for vacation, can now be easily done from anywhere. Many websites offer almost immediate availability, compare prices and make the purchase.

But unfortunately this is not the case for everyone…

A visually impaired person told me once that while he managed with inaccessible pages, his biggest problem in the different countries he has lived in is being able to access transport ticket purchases as screen readers did not read him the seats. I was struck by this, so I began to analyze bus and airline pages in Chile, finding that 8 out of 10 reviewed company websites have their seat maps built with vector maps in SVG or just CSS, therefore, they are only visually interpretable and the screen reader cannot access the information.

The people are not disabled, they just have any different needs.

  • We use the grid role, which identifies the element that serves as the grid widget container
  • The row and gridcell roles define the spatial structure of our seat map, creating a simple space of 2 rows and 2 columns
  • We use columnheader to identify the column that corresponds to each slot, so we can identify the coordinates, for example 1A in the space (the row number is calculated automatically)
  • We use aria-disabled to identify which seats are disabled or available.
  • Additionally, the map must be navigable using standard keyboard navigation and directional arrows, without the need for assistive technology. This can be achieved programmatically by taking into consideration the WAI ARIA attributes mentioned above.

Important: Another valid approach is to use the role=”grid” in a table element by utilizing <tr>, <th>, and <td> tags without specifying additional roles as they are already inferred through their semantic HTML. While it is generally best practice to use semantic HTML, this article focuses on understanding the role of these attributes in creating accessible seat maps.

We can see that by using a few WAI ARIA attributes, we can create an accessible seat map, which increases the accessibility and reach for all users. This method can be applied to any service that offers seats within a physical space, such as cinemas, airlines, trains, buses, and theaters.

Let us remember the social model of disability: The people are not disabled, they just have any different needs, but if you put them in a poorly designed environment, the environment disables them.

Screen reader reading grid container



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store