Common Accessibility Failures In The Seat Maps

During the holiday period I visited the websites of about ten bus companies and examined their seat maps. As far as I can see, the biggest design problem is the requirement to display occupied seats for women and men in different colors. This is because if you do not purchase a ticket as a pair, you cannot sit next to a passenger of different gender. Below I list the most frequently encountered issues with screenshots:

• Empty-Seat / Occupied-Seat Contrast: Seats occupied by men are usually shown in light blue. However, as can be seen in the example below, the light-blue is very close to the white used for empty seats. The contrast between the two is below the 3:1 ratio, making it especially hard to tell which seats are free or taken when trying to book from a mobile device.

• Gender Contrast: The pink used for seats occupied by women and the blue used for seats occupied by men are generally very similar. In the example below this similarity is exaggerated. I cannot determine whether the empty seat number 17 can be taken by a woman or a man. The distinguishability of the blue and pink colors should also meet a 3:1 contrast requirement.

• Blurry Icons: Using icons instead of colors to indicate gender would be a safer approach. However, in the example below the icons are so blurry and hard to differentiate that they do not solve the problem. On small screens it is especially difficult to tell which icon represents a woman and which represents a man.

• Small Icons: The use of minimalist icons supported by colors is a good practice. Consequently, the most accessible seat map I have seen is shown below. Nevertheless, I would prefer larger icons and additional distinguishing elements, such as longer hair for woman icons.

• Are Tooltips Sufficient?: Showing a tooltip when the mouse hovers over or a tap lands on an empty seat is a commonly used technique and it does provide some benefit. However, it does not resolve the issues encountered on mobile devices.