Don’t change the shape of images in SharePoint

UPDATE: 18.12.2024
In the latest deployment Microsoft silently fixed this issue and use now a SVG clipping mask for the images instead. It is NOT an accessibility issue anymore and is safe to use.

A couple of months ago, a new feature was released to SharePoint. This feature allows you to change the shape of an image on the fly.

When you care about accessibility, please don’t use this feature. Let me explain. It might take a while.

The image and the alternative text

All images should always have an alternative text that describes the image.

SharePoint allows you to add this text in the left side pane, which will be added to the markup language on the image. It is hidden from users who can see the picture.

For everyone who relies on screen readers, the image will be pronounced as ‘Picture of a vintage camera on white background’.

When you mark the image as decorative via the toggle below, the image will be removed from the page context. It sets the alt attribute, but it is empty. Screenreaders consider this image as not existent. It should only be used on a horizontal line that separates the content visually.

Everyone gets angry when they don’t “see” the image. It couldn’t be loaded, or no text describes what everyone else “sees” there. Everyone with a camera can make at least some sense of this description.

An image is not an image – It is a button

While any content management system allows you to choose how the author embeds an image, SharePoint differs. In SharePoint, an image is always a button. Sadly, there is no way around it.

A user who uses a screen reader will read the text and suddenly get interrupted by a button that spells:

Picture of a vintage camera on white background, You are currently on a button, group. To click this button, press Control-Option-Space.

What should the user now do with this information? Press the button to see a larger picture already described by the text. This is one of the troubles they might face using SharePoint.

Modern browsers have a built-in feature that allows the developer to show something called the accessibility tree. This shows which pieces of the HTML code are important for overall accessibility.

Here, we see the button and the button’s label “Picture of a vintage camera on white background”.

Problem 2: What is this button for

Let’s apply an overlay over the image from before with a circle.

We have already specified an appropriate alternative text on and for the image. One would assume everything has stayed the same for the end user.

Sadly, this is not the case because now we get the following.

You are currently on a button, group. To click this button, press Control-Option-Space.

Button for what? Were we not before we applied the shape on a “Picture of a vintage camera on a white background”?

Sadly not, and this is the cause of how this feature was implemented. The accessibility tree view reveals how this button is now rendered.

It is a button with an empty image inside, no alternative text and nothing else that describes the image.

Instead of rendering the image on the page like before. The image is now wrapped inside of an SVG graphic – The circle.

The SVG image does not have a <title></title> attribute that could be used to function as the alternative text.

The original photo inside the SVG is now an SVG Image. This SVG element does not support the alternative text.

The reason is that the SVG should have proper descriptive information and can contain multiple <image></image> inside.

SharePoint renders now a not correctly implemented “icon button”. How a correct implementation with an SVG graphic would work is described in a great article by Sara Soueidan on accessible icon buttons.

Next steps

I hope Microsoft will fix this accessibility flaw soon. My recommendation for now is. Please do not use it.

If you have used it, it is up to you how big of an impact it is. In general, I would prefer that it would be accessible in the first place.

I am, technically speaking. This feature could have been implemented non-destructive using, for example, SVG clipping masks in CSS. This feature would have the same effect but no accessibility downsides. A method that is already known since 2014.

I hope you found this article useful. May you are an intranet author or a developer, I wanted to uncover some myths regarding the alt tags, and we, as users of the software, always need to be cautious when someone claims the software is accessible.

If you have questions, please ask them. I want to hear your opinions.

Also check out my other blog post on accessiblities