CODEWITHSUNDEEP
htmlaccessibilitywai-aria
Jitender
Jitender

Reputation: 7971

Accessibility in html5

We want to add support for people with disabilities. So I read about it over the internet but did not get too much from there. I am not understanding when to use aria and when to use role attributes.

I have simple HTML with 3 columns. I have used role attributes in that and wanted to know what more can be done on this HTML for accessibility. Like if we want to use aria-labelledby and aria-describedby.

<div class="container">
   <div class="partners clearfix">
      <h2 role="My Content Heading">My Content Heading</h2>
      <div class="row" role="partner type">
      <div class="col-xs-12 col-sm-4">
         <div class="partner__list text-center">
         <div class="center">
            <i class="service"></i>
            <h2>Partner 1</h2>
            <p>Partner 1 Description</p>
            <div class="button-pos">
            <a href="link1">Learn More</a>
            </div>
          </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-4">
         <div class="partner__list text-center">
         <div class="center">
            <i class="tech"></i>
            <h2>Partner 2</h2>
            <p>Partner 2 Description</p>
            <div class="button-pos">
            <a href="link1">Learn More</a>
            </div>
          </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-4">
         <div class="partner__list text-center">
         <div class="center">
            <i class="content"></i>
            <h2 class="text-lg text-black text-ellipsis">Partner 3</h2>
            <p>Partner 3 Description</p>
            <div class="button-pos">
            <a href="link1">Learn More</a>
            </div>
          </div>
         </div>
      </div>
      </div>
   </div>
</div>

Upvotes: 1

Views: 240

Answers (3)

steveax
steveax

Reputation: 17753

Two things immediately stand out that could be improved:

1) You're using what appears to be a font-icon that seems to have meaning that has no text alternative:

<i class="service"></i>

You can provide this with an aria-label property. In addition, I'd recommend using a span instead if <1>:

<span class="service" aria-label="service"></span>

2) The text in your links is repetitive and has no specific information about the link destination. Screen reader users often scan the links to get a feel for the page content and without the surrounding content this will be less useful that it could be ("learn more", "learn more", "learn more")

<a href="link1">Learn More</a>

I'd recommend adding specific information in the linked text rather than the generic "learn more":

<a href="link1">Learn More about partner 1</a>

Modified markup for one section:

<div class="container">
  <div class="partners clearfix">
    <h2 role="My Content Heading">My Content Heading</h2>
    <div class="row" role="partner type">
      <div class="col-xs-12 col-sm-4">
        <div class="partner__list text-center">
          <div class="center">
            <span class="service" aria-label="service"></span> 
            <h2>Partner 1</h2>
            <p>Partner 1 Description</p>
            <div class="button-pos">
              <a href="link1">Learn More about Partner 1</a> 
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Tsundoku
Tsundoku

Reputation: 2687

As stringy already pointed out, the code is already accessible. If you aren't using JavaScript to create UI elements, there is usually no need for WAI-ARIA roles or attributes.

I have just two comments about your code:

  • Why do you use a div around <a href="link1">Learn More</a> instead of a p? Screen readers can move between paragraphs, but div elements are meaningless, as far as I know.
  • If the partner descriptions are meant to look like a table, and especially if there will be regular row or column headers, you should use table markup instead of CSS-styled div elements. Regular table markup makes sense to a screen reader; styling div elements to look like a table results in a meaningless (i.e. from the point of view of a browser or a screen reader) code jumble.

Upvotes: 0

stringy
stringy

Reputation: 1353

This code snippet is already accessible. Most plain HTML doesn't need additional ARIA support. Text-to-speech software will just read through it in order, and keyboards can Tab to the links and press Enter to click them. ARIA is for when you have interactive widgets like tabs or calendars.

Role attributes are part of the ARIA specification. You don't need to make up values to describe your content, they should only be used from this list if they apply to what you're making.

You might also find this introduction to web accessibility article and the other resources on that website useful in learning more about it.

Upvotes: 0

Related Questions