Skip to main content

Buckeye Alert

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

Example​

<div role="region" aria-labelledby="buckeye-alert-title" hidden>
    <div id="bux-buckeye-alert" class="bux-buckeye-alert" aria-label="Buckeye Alert" aria-live="polite" role="status" hidden>
    </div>
</div>
<script>
  const buckeyeAlert = new BuckeyeAlert({
    url: 'https://www.osu.edu/feeds/alert-test/feed.rss',
    callback: function() {
      console.log('The Buckeye Alert callback has been executed.');
    },
  });

  buckeyeAlert.initialize();
</script>

Implementation Notes​

Add the Buckeye Alert container element to the top of your page.

<div
  id="bux-buckeye-alert"
  class="bux-buckeye-alert"
  aria-live="polite"
  hidden
></div>

After the container element has been added create an instance and initialize Buckeye Alert.

<script>
  const buckeyeAlert = new BuckeyeAlert(); buckeyeAlert.initialize();
</script>

Note: The script must be added after bux.min.js in the page for the alert to be initialized.

Settings​

Buckeye Alert is configurable and will accept an object with the following parameters:

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 navigaiton or interactive elements.
  • This component must be present in the DOM before injecting content to be read. It is a good parctice to include it on page load and hide it until it needs to be populated.
Back to top