CODEWITHSUNDEEP
htmlaccessibilityaccessibility-inspector
edgarsbarajas
edgarsbarajas

Reputation: 9

How do I make my component with multiple CTAs ADA Compliant?

I have a component with a background image, HTML text and multiple CTAs. How would you guys make this component ADA compliant? Ideally, the background and h3 would have the same href.

My HTML looks something like this:

<div style="position: relative;">
  <a href="/link-1">
    <img src="decorative-background-img.jpg" alt="">
  </a>
  <div style="position: absolute; top: 50%; left: 25%;">
    <a href="/link-1">
      <h3>Generic Marketing Message Heading</h3>
    <a href="/link-1">
    <div class="ctas-wrapper">
      <a href="/link-1">Shop Item 1</a>
      <a href="/link-2">Shop Item 2</a>
      <a href="/link-3">Shop Item 2</a>
    </div>
  </div>
</div>

If I were to implement with only one CTA, would the code be something like this?

<div style="position: relative;">
  <a href="/link-1">
    <img src="decorative-background-img.jpg" alt="">
    <div style="position: absolute; top: 50%; left: 25%;">
      <h3>Generic Marketing Message Heading</h3>
      <span>Shop Item 1</span>
    </div>
  </a>
</div>

Upvotes: 0

Views: 33

Answers (0)

Related Questions