Skip to main content

Buckeye Alert

JS
A component for Buckeye Alert emergency messages. This will only be visible when there is an active alert message.

Example​

<div
  class="bux-buckeye-alert__wrapper"
  role="region"
  aria-label="Buckeye Alert Emergency Message"
  hidden
>
  <div
    id="bux-buckeye-alert"
    class="bux-buckeye-alert"
    aria-label="Buckeye Alert"
    aria-live="polite"
    data-bux-alert-url="https://www.osu.edu/feeds/alert-test/feed.rss"
    role="status"
    hidden
  ></div>
</div>

Implementation Notes​

Add the Buckeye Alert markup to the top of your page. The component is automatically initialized by bux.min.js when it detects #bux-buckeye-alert in the DOM.

<div class="bux-buckeye-alert__wrapper" role="region" aria-label="Buckeye Alert Emergency Message" hidden>
  <div
    id="bux-buckeye-alert"
    class="bux-buckeye-alert"
    aria-label="Buckeye Alert"
    aria-live="polite"
    role="status"
    hidden
  ></div>
</div>

When an active alert is found in the RSS feed, the component will populate and display itself. If no alerts are active, it remains hidden.

Settings​

Buckeye Alert is configurable via the data-bux-alert-url attribute on the #bux-buckeye-alert element:

  • data-bux-alert-url (string): URL to your alert RSS feed (default: https://www.osu.edu/feeds/emergency-alert.rss)
<div
  id="bux-buckeye-alert"
  class="bux-buckeye-alert"
  aria-label="Buckeye Alert"
  aria-live="polite"
  data-bux-alert-url="https://www.osu.edu/feeds/alert-test/feed.rss"
  role="status"
  hidden
></div>

Accessibility​

  • Accessible Alert
  • How to set ARIA live regions for alerts
  • Choose aria-live="polite" vs aria-live="assertive" this is the default for this component
  • Ensure that aria-live="polite" is used when using role="status". It is redundant but it ensures compatibility.
  • Ensure that if this component becomes visible, it does not obscure or interfere with any navigation or interactive elements.
  • This component must be present in the DOM before injecting content to be read. It is a good practice to include it on page load and hide it until it needs to be populated.
Back to top