Search code examples
accessibilitywai-aria

Should aria-label be used to describe user generated content like username links?

Let's take an Open Library list page for example. When you visit the page, one of the first things that a user with a screen reader would hear is "link, Mek". Mek is the username. However, in the case of social websites someone could pick any username like "borrow the book" or things that I imagine would be disorienting to people using screen readers.

So, my question is, would it be appropriate to use something like aria-label to say that it is a username since that is not otherwise written on the page? If not, is there another way that people using screen readers deal with this?

I'm new to A11Y and ARIA so maybe I'm looking in the wrong place for answers. I have tried searching this in may ways and read some documents like Using aria-label for link purpose and Using aria-label to provide an invisible label where a visible label cannot be used.

I also looked at the code on social sites such as Twitter, Reddit, and Facebook but as far as I can tell none of do anything special for usernames. Perhaps it is less important for sites that are primarily user generated content.

Solution

  • Linked Example

    In the example page you linked those are actually breadcrumbs so technically make sense.

    <div class="superNav">
        <a href="/people/mekBot">Mek</a>
        /
        <a href="/people/mekBot/lists">Lists</a>
    </div>

    With that being said they should be located within an unordered list (as an unordered list is useful for screen reader users to know how many links there are as it will read "1 of 2 option" or similar) and have some form of identification on the <nav> (so it is not considered main navigation):

    <nav aria-label="breadcrumbs" class="superNav">
  <ul>
    <li>
      <a href="/people/mekBot">Mek</a>
    </li>
    <li>
      <a href="/people/mekBot/lists">Lists</a>
    </li>
  <ul>
</nav>

    Finally if you have a sophisticated back-end or the first link will always be a link to a user profile then you could add some visually hidden text to the link just for clarity.

    HTML

    [...]
 <ul>
    <li>
      <a href="/people/mekBot"><span class="visually-hidden">User Profile for </span>Mek</a>
    </li>
[...]

    CSS

    .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 */
}

    Social sites

    However for social sites there are loads of things you can do.

    For example if the image is a link to their profile you can use the alt attribute to indicate the action of the link.

    <a class="profile-container"
  <img src="profile-image-user-rayb.jpg" alt="RayB profile page" />
</a>

    If it is just a static image (and their username is not shown anywhere else) then the alt attribute would change with the context.

    <img src="profile-image-user-rayb.jpg" alt="RayB profile picture / avatar" />

    If it is a static image and the persons name is located somewhere else within that article / block then you would likely hide the image:

    <article>
   <h2>Some article Title</h2>
   <img src="profile-image-user-rayb.jpg" alt="" role="presentation" aria-hidden="true"/>
   <p class="written by">Author: RayB</p>
</article>

    ** please note:** in the last example an empty alt attribute is sufficient to hide an image from a screen reader. I add role="presentation" and aria-hidden="true" so that I can check for empty alt attributes that are mistakes (e.g. if they do not have aria-hidden="true" then I know they should have an alt attribute filled in).

    Why so many variations?

    This is where accessibility turns from a set of rules into an art form, you have to pick the best option depending on the circumstances.

    A good place to start for alt attributes for example is the alt text decision tree from W3.

    Other than that consider things like:

    • does this add additional information a screen reader user needs?
    • Is the information available elsewhere / nearby and does this then just duplicate it?
    • If this is an image in a link does the alt attribute reflect the action of the link in context. etc....

    Above all, grab a screen reader and try it, that is without doubt the quickest way to learn (as you can identify an issue / something that confused you / repetition etc. and then it is easy to look for a fix/).

    If you need more info just let me know!