Search code examples
htmlaccessibilitysemantic-markup

What is the best practice semantic and accessible element for a tag in a list of tags with expanding information?

I'm constructing a component on a web page which shows skills assigned to your profile and provides interactive functionality to manage the tags.

I would like the tags to be semantically accurate as well as accessible for those without JavaScript support.

Currently, I'm considering an unordered list with a hyperlink through to a page where you can manage that single tag's value, disable it or delete it and return to the page you were on.

If you have JavaScript enabled, I'd like to enable that functionality insitu.

Is it better to use a hyperlink as a wrapper or a button or is there another approach that handles both cases?

Below are some example cases where hidden functionality is made available on-hover:

mikos.co.uk/tags mikos.co.uk/tags html

This one is from mikos.co.uk/tags/ - a very clean implementation in HTML, but uses JavaScript to hide and show the extended content and uses inline styling. A similar effect could be achieved using CSS & CSS Transitions in particular on hover, perhaps.

SO uses the following format:

stackoverflow.com tags

In this format, the tags link through to the appropriate page, but the extended content is not available at all without JavaScript.

stackoverflow.com tags html

This is the HTML used.

stackoverflow.com tags extended

Here is the extended content, which is appended to the body on hover.

Is there a best practice that gives access to the extended information within the same element or from the element with an easy way to return to this element) so that it's read and navigable in order, is semantically accurate and also accessible?

Functionality that I am considering includes:

  1. delete, which can take the user through to a delete page
  2. edit, which can take the user through to an edit page
  3. disable, which can take the user through to a part of the edit page

Information I want to make available from someone navigating to the tag:

  1. tag name
  2. what the tag means
  3. what they can do with the tag
  4. a link to execute a search for matches to that tag
  5. a link to enable notifications for matches to that tag
  6. a link to see most popular content matches with that tag
  7. a link to see who posts content most often with that tag

Considering how this might be read out, and how this would be implemented, some of the information might suit well being represented as an article with header and sections, even though it's a minor visual element, or it might work as a definition list.

Any guidance would be welcome.

UPDATE: From: W3C

aria-owns (property)

#

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. See related aria-controls.

The value of the aria-owns attribute is a space-separated list of IDREFS that reference one or more elements in the document by ID. The reason for adding aria-owns is to expose a parent/child contextual relationship to assistive technologies that is otherwise impossible to infer from the DOM.

Authors SHOULD NOT use aria-owns as a replacement for the DOM hierarchy. If the relationship is represented in the DOM, do not use aria-owns. Authors MUST ensure that an element's ID is not specified in more than one other element's aria-owns attribute at any time. In other words, an element can have only one explicit owner.

In this case, the element would be not immediately hierarchical, but related. I believe the answer below answers the need I have in this case.

Solution

  • What is the best practice semantic and accessible element for a tag in a list of tags with expanding information?

    1. The expanding information must be accessible when the link is focused with the keyboard.

    2. The expanding information must be accessible without keyboard (touch screen, eye tracking device, voice activated devices...)

    The two examples you provided do not answer to those requirements.

    I would say that this will be more difficult if the tag name is already an anchor to another page as this would require two links per tag name (one which leads to the "tag result page", and one to expand the extra information).

    Something like

    <li>
    <a href="/tags/strawberry">Strawberry</a>
    <button title="View Strawberry tag details" aria-owns="strawberry-details">+</button>
    <div class="details" id="strawberry-details">...</div>
</li>