Accessibility in html5

Question

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>

steveax · Accepted Answer · 2016-04-09 07:47:59Z

3

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>

edited Apr 9, 2016 at 7:47

answered Apr 8, 2016 at 15:25

steveax

17.8k6 gold badges46 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jitender Over a year ago

Thanks! That was really helpful

stringy · Accepted Answer · 2016-04-07 11:59:05Z

0

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.

answered Apr 7, 2016 at 11:59

stringy

1,3637 silver badges16 bronze badges

Comments

Tsundoku · Accepted Answer · 2016-04-07 14:39:31Z

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.

Collectives™ on Stack Overflow

Accessibility in html5

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related