Workshop archive needs accessibility improvements

[TimothyGu]

• Quarter headings and event headings are both h2s. This is confusing, since events are subordinate to quarters. Event headings should be h3, while individual sessions of the event should be h4.

• It's not clear to accessibility technologies (AT) that tags should be treated as tags. Even though they are visually displayed as pills, AT don't know that, and tags appear as merely a heap of words.

  • We need to add role="list" to containers of a collection of tags, and role="listitem" to each tag.
  • We need to add aria-label="Tags" to containers of a collection of tags.

• The "launch" button next to each event heading is an HTML label element. The label element should only be used in forms, not for a link.

  

• The accordion buttons have a weird label. We should make sure neither "Launch" nor "javascript" is included in the label for that button.

  

• It's unclear to AT what the div for each event is. As far as it sees, the div is just a generic container. We need to add aria-label or aria-labelled-by with the title of the event.