Skip to main content

Fixer & Remediation

Targeting One Element Among Many Identical Buttons Using Attribute Selectors

Document the issue and its intended behavior before applying a change. Test corrections in the relevant page states, including keyboard interaction and dynamic content, before and after deployment.

Targeting One Element Among Many Identical Buttons Using Attribute Selectors (Pluro Custom JS/CSS)

Why this problem exists

Modern websites often reuse the same CSS classes across multiple buttons and links for consistent styling (e.g., .hero__button.hero__button--primary). That’s great for design systems—but it becomes a challenge when you need to apply an accessibility fix (like updating an aria-label) to only one specific element.

If you update all elements by class, you risk:

  • Breaking accessibility labels site-wide

  • Changing behavior or styling unexpectedly

  • Creating regressions that are hard to debug

The solution is to use a selector that stays narrow and stable, combining the shared class with a unique attribute such as href, aria-label, or a container scope.

The safest approach: class + unique href

If a specific button points to a unique URL, you can target it precisely with an attribute selector:

(function () {
// Target ONLY the button with this exact href
const selector =
'a.hero__button.hero__button--primary[href="/collections/%D7%9E%D7%96%D7%A8%D7%A0%D7%99-%D7%9E%D7%9C%D7%95%D7%A0%D7%95%D7%AA-%D7%94%D7%99%D7%95%D7%A7%D7%A8%D7%94"]';

const btn = document.querySelector(selector);
if (!btn) return;

// Update aria-label ONLY for this element
btn.setAttribute("aria-label", "Shlomi");
})();

Why this is safe

  • The class ensures you’re still matching the correct component type.

  • The href makes the selector unique, so other buttons with the same classes won’t be affected.

Important detail: In your message you wrote hero_button, but your HTML shows hero__button.
CSS selectors must match exactly (including underscores).

Alternative targeting strategies

Sometimes href isn’t stable or isn’t unique. Here are other options:

1) Target by aria-label (only if it’s unique)

const btn = document.querySelector(
'a.hero__button.hero__button--primary[aria-label="למזרני מלונות היוקרה שלנו"]'
);

2) Target by container scope (preferred when you have a unique section)

If the button is inside a unique hero section:

const hero = document.querySelector(".homepage-hero"); // example container
const btn = hero?.querySelector('a.hero__button.hero__button--primary');

3) Target by visible text (least stable)

Text changes with marketing edits, translations, or A/B tests:

const btn = Array.from(document.querySelectorAll('a.hero__button.hero__button--primary'))
.find(a => a.textContent.trim().includes("מלונות היוקרה"));

Accessibility note: what should an aria-label contain?

aria-label should provide a clear purpose (especially for screen reader users).
A label like "Shlomi" may not communicate what the link does.

A more accessible pattern is:

  • “Shlomi — Luxury Hotel Mattresses Collection”

  • or in Hebrew: “shlomi-example”

Example:

btn.setAttribute("aria-label", "Shlomi — Luxury Hotel Mattresses Collection");

Using this approach in Pluro

When applying fixes via Pluro Custom JS/CSS:

  1. Keep selectors tight (class + unique attribute).

  2. Wrap JS in an IIFE ((function(){...})();) to avoid global pollution.

  3. Add null guards (if (!btn) return;) so the fix doesn’t throw errors.

  4. Test:

    • Keyboard navigation

    • Screen reader announcement (NVDA/JAWS/VoiceOver)

    • Multiple pages where the class appears

This method lets you deploy precise accessibility improvements without touching the site’s codebase—a practical approach when you need safe, targeted fixes at scale.

Before you finish

  • Confirm the UI labels against the installed version of Pluro.
  • Test the complete workflow on an authorized site.
  • Record the result and re-test after relevant changes.
← Back to Knowledge Center
← More Fixer & Remediation guides