Accessibility: UM Profile Plugin Icons Missing Screen Reader Labels

Hello,

Here are a few issues we found:

Issue 1: Social Media Links Are Not Properly Announced

The UM User Profile plugin has several external social media links, such as Facebook and Instagram. These links are displayed as icons, but they do not have accessible names.

Current behavior: When using a screen reader, the links are only announced as “Link.” The screen reader does not tell the user where the link goes.

Expected behavior: Each social media link should have an accessible name that identifies its destination, such as “Link to Facebook” or “Link to Instagram.” This can be fixed by adding an appropriate aria-label each icon.

Issue 2: Icons Missing Accessible Names or Decorative Markup

There are additional icons in the UM User Profile plugin that are missing aria-labels.

Expected behavior: The icon is only decorative and does not provide any additional information, it should be hidden from screen readers using aria-hidden=”true”.

In this case, these icons can be marked as decorative because they do not provide any additional information or functionality for the user.

Issue 3: Links

The screen reader also reads the full URL, such as “www.sitename.com”.

Can the link be embedded within the relevant text, similar to how the Facebook link is linked? This would make the content shorter and easier for screen reader users to understand and navigate.

The page I need help with: [log in to see the link]