Is it ok to combine aria-label and aria-describedby?

user_4826740 0
Viewed 1532

I have searched around and I'm not finding any information if it is ok to combine the aria-label and aria-describedby for an element and if it would cause confusion to someone using a screen reader?

I have a list of many items and each item has a title and then next to the title is a PDF icon to download a pdf of the item, like this:

<ul>
    <li>
        <div id="item-{{item.id}}">{{item.title}}</div>
        <button class="icon-pdf"></button>
    </li>
</ul>

I am wondering if I can do something like this and if it would still make sense to the user and if screen readers would handle this scenario:

<ul>
    <li>
        <div id="item-{{item.id}}">{{item.title}}</div>
        <button class="icon-pdf" 
                aria-label="Download PDF button" 
                aria-describedby="item-{{item.id}}">
        </button>
    </li>
</ul>

Perhaps it would be better to convert the button to a link and just use a title attribute like this?

<a href="javascript:void(0);//Download PDF"  
   class="icon-pdf"
   title="Download PDF"
   aria-describedby="item-{{item.id}}">
</a>
accessibility html
1 Answers

Short Answer

There is no need to add the extra information you are trying to add if you use a hyperlink and recommended practices of adding file type and size in brackets (oh and language if your site is multi-language).

Long Answer

To answer the original question, yes you can use aria-label and aria-describedby together. They serve different purposes.

aria-label is for providing a usable name for a control, it overrides any semantically derived information (i.e. button text).

aria-describedby is used to provide additional information for custom controls etc. It can also be used to provide hints to screen reader users. Also this answer I gave has information about support for aria-describedby etc. Something to consider.

If you use them together you would get the aria-label read first and then get the aria-describedby information read after.

Quick example of aria-label and aria-describedby together

<button aria-label="read first" aria-describedby="extra-info">Not Read Out</button>
<div class="visually-hidden" id="extra-info">This would be read second</div>

In the above example it would read "read first, This would be read second", notice the "Not Read Out" original button text is completely overwritten.

Your use case doesn't really need these though

With all of the above being said, here are a few suggestions for your use case as there is no real need for WAI-ARIA here:-

  1. Even if a document is being downloaded on the same page you should use a hyperlink. The main reason for this is when JavaScript fails on your page (or for those who still browse the internet without JavaScript) there is a fallback so the document is accessible. Additionally this helps with SEO if you want the document to get indexed etc. (I know, I dare to mention SEO on Stack Overflow!). Finally it is semantically correct, it is a linked file and that is ultimately what hyperlinks are for.

  2. If information is useful to screen reader users it is probably also useful to other people, i.e. those with cognitive impairments. However in this use case it would be better that the control that performs the action contains all the relevant information.

  3. Generally (if your design can be adjusted to allow for it) it is a good idea to include the file type and file size as additional information in brackets next to any download.

  4. Don't use the title attribute, it is not a very accessible attribute and is useless to most screen reader users as it will not be announced. (It is also useless to any keyboard only users etc.)

  5. WAI-ARIA is useful for supplemental information, the general rule is a control should work without it and WAI-ARIA is for progressive enhancement.

Putting it all together

You will notice in the following example I have completely removed the need for the "Download PDF" extra information.

Because a hyperlink is semantically correct and the fact we state it is a PDF in brackets (plus file size) there is no need to tell people that this will download the PDF, they already know this!

I have done two different examples for you, one with the file type and size visible, one with them visible only to screen reader users.

I have added comments to the first example to explain bits. Any questions just ask!

body {
  font-family: Century Gothic;
  background: #272727;
}

.btn {
  float: left;
  width: 25%;
  height: 30px;
  padding: 1px 0px;
  min-width: 200px;
  margin: 2% .8%;
  overflow: hidden;
  background: #527EBF;
}
.btn:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background: #666;
}
.btn a {
  text-decoration: none;
}
.btn img {
  width: 22px;
  margin: 0 5px;
  transition: all .5s ease;
  position: relative;
  left: 0;
  transform: scale(0.7);
}
.btn .container span.text {
  font-size: 12px;
  color: #fff;
  position: relative;
  left: -3px;
  top: -8px;
  transition: all .45s ease-in-out;
}


.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<div class="btn">
    <a href="link-to-pdf.pdf"> <!--obviously if you want to intercept this with an event listener in JS then do so but leave the URL for fallback-->
      <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png" aria-hidden="true"/> <!-- hide the icon from screen readers with `aria-hidden`, preferably use a **inline** SVG instead of external image to save an uneeded request. -->
        <span class="text">Item Name (PDF, 21MB)</span> <!-- added the file type and size as this is useful information for people, made it visible to all. If yourdesign won't allow for this then hide it as per second example -->
      </div>
    </a>
  </div>
  
  
  
  <div class="btn">
    <a href="link-to-pdf.pdf">
      <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/267px-PDF_file_icon.svg.png" aria-hidden="true"/>
        <span class="text">Item Name Hidden file size info <span class="visually-hidden">(PDF, 21MB)</span></span>
      </div>
    </a>
  </div>

user_27028940
Related