The cards collected by the system after the user answers all questions

[mohammad-suliman]

Problem description:

After the user answers all the questions provided by the chatbot, the system collects a set of cards which have the following accessibility issues:

• The headings hierarchy is problematic - as each card has its title as h1
• each card can be expanded and collapsed - however, this information regarding expand / collapse is not available for a screen reader, and the operation can't be completed using only the keyboard
• The component which expands and collapses the information has no semantic information for assistive technologies like role and state
• The information revealed after expanding a card is not adjacent from a DOM perspective to the component which reveals it, so a screen reader user might not find it at all

Solution:

• Fix the heading hierarchy
• Add semantic information for the component which expands the information:
  • A role like a link or a button
  • A state with aria-expanded = true when it's expanded, and false when it's collapsed
• Ad the component to the tab order with tabindex = 0, and implement keyboard click handlers
• Add a CSS styling to accommodate for the focus visible effect
• It's very important to define the section the link or the button reveals adjacent to the button or the link itself in the DOM, so a screen reader user reaches the revealed content immediately after it's revealed