WCAG compliance for media and URLs

[BramvdBogaard]

I'm currently working on a site that has to be WCAG compliant for user accessibility. Unfortunately this is still very hard to do using Umbraco.

Would it be possible to update the Media Picker and Url Pickers (and thereby the MediaWithCrops and Link models) with an extra field to insert an Alt text? For the Media Picker it would also greatly improve the accessibility of a site if the role could be set while selecting the image.

By doing this the editor would have the ability to easily make their site more accessible.

[markadrake]

Hello @BramvdBogaard,

I hope you are okay with me jumping on here to share a typical pattern we use when building Umbraco sites. I hope it can at least provide a solution you can work with today, while continuing your discussion about the out-of-the-box functionality improvements.

• The approach below assumes you are using a media picker, not the image cropper.

Preparing Media

1. Create a new media type, call it Has SEO.
2. Edit any of your existing media types, add a composition, choose Has SEO.
3. Edit any of your existing media content. Notice the new SEO tab.

Note: in my screenshots below, I have another composition called Has Copyright, which adds the Copyright tab. Please ignore this.

Preparing Your Frontend

Given the setup above, one could print an <IMG> tag in their razor template like this:

Render the image at the original uploaded size.

• The variable image is strongly typed, using the models builder.
  It is typed as MediaWithCrops.

@if (image != null)
{
	<img src="@(image.Url())" 
	     alt="@(image.Value<string>("SEOAlternateText"))" 
	     width="@(image.Content.Value("umbracoWidth"))" 
	     height="@(image.Content.Value("umbracoHeight"))" />
}

Render the image using a configured image crop.

• The variable image is strongly typed, using the models builder.
  It is typed as MediaWithCrops.
• The crop we want is defined locally. Locally means that you have
  configured the media picker property with custom crops. This is important!

@{
	var localCrops = image?.LocalCrops.Crops;
	var localCrop = localCrops?.Where(crop => crop.Alias.Equals("1:1")).FirstOrDefault();
}
@if (localCrop != null)
{
	<img src="@(image.GetCropUrl(localCrop.Alias))"
	     alt="@(image.Value<string>("SEOAlternateText"))"
	     width="@(localCrop.Width)"
	     height="@(localCrop.Height)" />
}

Render the image using a configured image crop.

• The variable image is strongly typed using the models builder.
  It is typed as MediaWithCrops.
• The crop we want is defined globally. Globally means that you have
  configured the media content type. This is important!

@{
	var convertToImage = image.Content as Image;
	var globalCrops = convertToImage?.UmbracoFile?.Crops;
	var globalCrop = globalCrops?.Where(crop => crop.Alias.Equals("16:9 XL")).FirstOrDefault();
}
@if (globalCrop != null)
{
	<img src="@(image.GetCropUrl(globalCrop.Alias))"
	     alt="@(image.Value<string>("SEOAlternateText"))"
	     width="@(globalCrop.Width)"
	     height="@(globalCrop.Height)" />	
}

[BramvdBogaard]

Thanks for your reply! I'm definitely okay with you sharing that pattern, it is greatly appreciated.

This sounds like a great way to improve the WCAG compliance for images. But I'm still a bit worried about what will happen with media that is used in multiple ways. Maybe I'll have an image that is used on multiple pages for different purposes. Is this approach flexible enough for this use case? Hence why I thought that updating the pickers itself (and the underlying models) would be the best approach to make Umbraco more accessible.

[bergmania]

Any reason not just to add a textstring-property next to the image picker? Thereby you have full freedom, to make an picker mandatory, but not the alt-text. And then you could fall back to an alt-text on the media type as described above.

[BramvdBogaard]

By creating a blockList item with an textstring and image picker you mean? That could be possible but in my opinion that is an undesired workaround to make something WCAG compliant and this would also decrease the ease of use for content editors. I believe the URL and media pickers should be compliant out of the box, making it as easy as possible to be WCAG compliant.

Is this something that is currently being worked on by Umbraco?

[jdpnielsen]

It might be nice to be able to mark certain media type fields as locally overwritable - similar to how the two tiers of crop definitions work:

Media library:

Media picker:

[bergmania]

By creating a blockList item with an textstring and image picker you mean? That could be possible but in my opinion that is an undesired workaround to make something WCAG compliant and this would also decrease the ease of use for content editors. I believe the URL and media pickers should be compliant out of the box, making it as easy as possible to be WCAG compliant.

Is this something that is currently being worked on by Umbraco?

Currently we do not have the workforce available to work on this.

I'm also not convinced an additional field on the pickers is the best solution. I see lot's of problem when you start working with variants, where the image still is shared but only the alt-text variant. In that case it is also better to split in two properties. Today a property either vary or not, not a both 🤯 .