Announcement bar has no landmark role or aria-live region

[alexwolson]

Summary

The announcement bar rendered at the top of the homepage is a plain <div> with no landmark role or live region. Screen reader users have no way to identify it as an announcement, and if the content were to change dynamically it would not be announced.

Affected location

_includes/announcementbar.html:4

<div class="announcement-bar">
  <a href="{{ announcement.url }}"><strong>Announcement:</strong> {{ announcement.title }}&nbsp;&rarr;</a>
</div>

Fix

Add role="region" and aria-label="Announcement" so it appears as a named landmark. If announcements could ever update without a page reload, also add aria-live="polite":

<div class="announcement-bar" role="region" aria-label="Announcement">
  <a href="{{ announcement.url }}"><strong>Announcement:</strong> {{ announcement.title }}&nbsp;&rarr;</a>
</div>

WCAG criterion

1.3.1 Info and Relationships (Level A)