Making Relume Components Accessible: Lessons from a Slack Banner Integration

Recently, a client came to me with a vibrant new Slack community and wanted a way to promote it on her website. Naturally, I reached for my trusted Relume Library and selected Banner Component #7 — clean, stylish, and perfect for a quick announcement.

Like many Webflow professionals, I love how easy it is to copy and paste Relume components into a project. But as always, copy/paste is just the start — accessibility takes intention.

P.S. Developers if you are not already subscribed to Relume - please subscribe now or this tutorial will not work for you. 😉

What I Fixed (And Why It Mattered)

After implementing the component, I ran a quick accessibility pass and — no surprise — found several issues that needed to be addressed before this could meet WCAG 2.2 conformance.

1. The Heading That Wasn’t a Heading

The main bolded text visually looked like a heading, but it was just a styled <div>. I converted it to a <h2> because it introduces new content, but that changed its size. To preserve the smaller styling, I created a new class to override the default heading styles without stripping semantic meaning.

Pro tip: Never sacrifice structure for style. Use headings for headings and control appearance with classes.

2. Paragraph Text That Was Just... Text

Below the heading, the supporting line of text was just a loose text node — not even wrapped in a semantic element. I turned this into a proper <p> tag to ensure screen readers can identify it as body text.

3. The “Button” That Wasn’t a Button

The component used a visual button that was actually a styled link. Relume often labels these as “button” in their UI, but they’re <a> tags under the hood. Since this link navigates to an external Slack page, I:

• Kept it as a link
• Added target="_blank" to open in a new tab
• Updated the link text to be meaningful and descriptive

Buttons perform actions. Links navigate. Know the difference and use the right element.

4. The Close “Button” That Was Actually a Link

The close icon — visually an “X” — was built using a link as well. That’s a problem because:

• It performs an action (hiding content), which should be a <button>
• It had no accessible name

So I:

• Changed it to a role="button"
• Added aria-label="Close" for screen readers
• Ensured it had proper keyboard focus and could be activated with Enter/Space

5. The SVG Icon That Needed To Go Silent

The Slack logo was coded as meaningful and exposed to screen readers, even though the word “Slack” appeared directly beside it. I:

• Added aria-hidden="true" to the SVG
• Verified that the icon disappearing on smaller screen sizes was acceptable, since it was decorative and duplicated in text

If an icon disappears on mobile, it should be decorative — not essential for understanding content.

Your Relume Accessibility Checklist

If you're using Relume components in your Webflow projects, don’t assume they’re accessible out of the box. Here's what I always check:

✅ Headings

• Are bolded text elements marked up as real headings (<h1>–<h6>)?
• Do heading levels follow a logical order?

✅ Paragraphs

• Is body text inside <p> tags?
• Are descriptions and supporting lines semantically wrapped?

✅ Links vs. Buttons

• Is this element performing an action? → It should be a button.
• Is it navigating somewhere? → It should be a link.
• Are links opening in a new tab clearly labeled?
• Do interactive elements have visible focus?

✅ Roles & Labels

• Do all actionable elements have an accessible name (aria-label)?
• Is the close button truly a button, not a link?
• Are custom roles correctly assigned (role="button", role="tab", etc.)?

✅ Iconography

• Are decorative icons hidden with aria-hidden="true"?
• Are meaningful icons visible and described with text or labels?
• Do meaningful icons remain visible across all screen sizes?

✅ Final Checks

• Did you publish to staging and test with:
  • Mouse navigation?
  • Keyboard only?
  • A screen reader?
• Does all content respond appropriately to reflow and zoom?

Check out the live accessible banner for youself and while you are at it check out her awesome community too!

Final Thoughts

Relume is an incredible tool for speeding up Webflow builds, but like all component libraries, it needs an accessibility expert’s eye. Building inclusive websites doesn’t happen by default — it happens by design.

If you’re using Relume, take the time to review your components before going live. Your users — all of them — deserve better.