Skip to main content

Buckeye Alert

JSThis component requires JavaScript.
Component status:Ready
A component for Buckeye Alert emergency messages. This will only be visible when there is an active alert message.

Example#

<div
id="bux-buckeye-alert"
class="bux-buckeye-alert"
aria-label="Buckeye Alert"
aria-live="polite"
role="status"
hidden
></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.