The cards for choosing a place for the business

[mohammad-suliman]

Problem description:

When reaching the question which asks about whether you want to hear about the different areas in the town where you can have your business in, a map with a set of cards corresponding to the different regions is displayed.
The map and the cards view have the following accessibility issues:

• The map and the cards is not linked in a meaningful way. Maybe considering defining the map in figure and the cards as a figcaption is a good idea?
• Each card title is defined as h1 - which is semantically not correct I guess, thus a confusing experience for a screen reader user
• The button for choosing a specific card in each card lacks semantic and keyboard interaction:
  • It has no role to be identified by assistive technologies
  • Not reachable by the keyboard
  • Has no focus visible effect so a sighted keyboard user can tell whether it has focus

Solution:

• somehow link the map to the cards it includes
• Fix the heading level hierarchy issue
• Fix the button for choosing a card by:
  • Add a role using the role attribute
  • Add tabindex = 0 to have it in the tab order
  • Add styling in CSS for focus outline when the button gets focus