Skip to content W3C SVG

3.2.4 Consistent identification

Problem description

Icons with three dots are often used to signify that the user can activate them to open a menu with settings, tools, or alternatives for the relevant object. The names for these objects are inconsistent, both in what they’re called and in what language is used for their name, sometimes Swedish and sometimes English.

Some examples of the names we’ve seen are “options”, “actions” “åtgärder”. These need to be consistently named.

This problem exists in all the apps.

Apart from this being inconsistent, the names used for them often aren’t even correct. This makes it very hard for screen reader users to understand what these buttons do.

Example button of three dots.

Filer app

There is a navigation tree for files and folder structures that can be found in several places in the interface. There are buttons with a plus-icon here that aren’t consistently named.

In the screenshot below the plus-button in the modal doesn’t have a name at all, but the identical icon on the page below has got a name.

Remember that consistent naming doesn’t necessarily mean identical naming. If these buttons add different things they could be named “Add folder”, “Add document” for instance, at it would be consistent since their function of adding something would be consistently explained.

Select or copy file modsl is opend, add new file is marked inside and behind the modal.

Meddelande app

The button with the users initials that can be seen in the chat leads to the users profile. But its accessible name is “Åtgärder”, which isn’t correct, but it’s also inconsistent with other links to the user profile, failing this success criterion.

Make sure interactive objects that lead to the same place are named consistently.

One thing that goes beyond the WCAG-requirements, but is still worth considering, is that the initial button is visually identical across apps, but isn’t consistent functionally. Generally speaking, it’s best if objects that look the same way work the same way.

Profile icone in message is marked.

Suggested solution

  • Always make sure that an object’s accessible name identifies it and makes it easy to understand its function, and when necessary differentiates it from other, similar, objects
  • Make sure interactive objects that lead to the same place are named consistently
  • Make sure that objects that look the same way work the same way

Medium priority (3)

Powered by Cupper