Markup and aria role for a checkout summary

Question

I'm working on an appointment booking checkout and I'm about to add a booking summary to the footer - you know the type of thing that updates with your choices as you go through each step in the checkout process. This one looks something like this:

Appointment Summary
  Location__________
  Service___________
  Practitioner______
  Date______________
  Time______________

My question is to do with HTML5 and accessibility:

1) Should you mark-up the summary in any particular way? The <aside> tag seems most likely, but I don't think that it is really relevant since the <aside> is intended for information that is tangentially related to the main content.

2) If a simple <section> element will suffice, is there anything Aria-related that I should bear in mind? I was considering adding a Aria live region to when the summary is updated, but maybe that would be a bit irritating after each step. Also, role="complementary" seems to be similar to the <aside>, but the description here seems to leave enough wriggle room to make it relevant. Would a screenreader user expect to find this kind of summary information in a complementary area?

Answer 1

Based on your information, I would consider this piece of information "complementing" the main content. In that case, a normal section would do, and you could use the complimentary role.

As a screen reader user, I would really prefer this information not to be repeated at every step. This is a large chunk of information, and when I click on "Next", it would be quite unexpected to have my screen reader begin reading it. If you want to alert the user to the fact that the steps have changed, you can do one of the following:

1. Have an invisible HTML element with the aria-live attribute set to polite, and use it to report that a content has changed (I.E. by adding a text such as "Summary updated").
2. By explicitly mentioning in the text that the summary will update as you complete each step.