Banner

Banner provides a distinguishable and non-disruptive way to communicate important information or conditions to users. Banners should be used sparingly and only for important messages.

WCAG Score - 2.2 A Compliant


Provided by the component

 


Implementation considerations

Developers must do the following in the implementation to be considered fully accessible:

WCAG 1.1.1

As we offer slots, any non-text passed via the slot must be accessible.

WCAG 1.3.1

Use semantic HTML (e.g., <ul>, <li>, <button>, <label>, <fieldset>, <legend>, <section>, <header>, <nav>, <p>, <h*>, etc.) to ensure that visual groupings, labels, and relationships are also present in the markup.

As we offer slot, be careful with the content placed inside:
For example, if Banner has a title and description render title with h2 tag and description with p tag.