Knowledge Base

Accessible Images with Media Content Types

Last Modified:
27 Nov 2018
User Level:

To help users add images that comply with accessibility guidelines, you can create a default media Content Type Layout that adds additional attributes to the image element. This can then be associated with the "Media Type" that users select when adding images to the Media Library.

During your initial implementation of the CMS, your Administrator / Power User will have configured this and it is advised that before changing the media layout that existing content is tested fully to ensure that the changes will not have a negative impact on the existing content.

The following is the recommended Media Content Layout to be associated with the Media Type that users select when adding images to the Media Library and then add to content in the editor:

<img src="<t4 type='content' name='Media' output='file' modifiers='' />" alt="<t4 type='content' name='Description' output='normal' modifiers='striptags,htmlentities' />"<t4 type='media' attribute='longdesc' format=' longdesc="$value"' /><t4 type='media' attribute='title' format=' title="$value"' />/>

The alt text should is taken from the media description and will always be output even if the description is empty.

There is an option to output text for a longdesc attribute as well as an option to output text for a title.
Using this format it should be possible to meet Guideline 1.1 of the Web Content Accessibility Guidelines (WCAG) 2.0.

When adding an image to the editor, users will have options to set the longdesc and title for the image.

The following attributes would no longer be available by default:

  1. Width
  2. Height
  3. (maintain aspect ratio)
  4. Border
  5. Margin
  6. Padding
  7. Display
  8. Float

CSS should be used to handle these and additional attributes.

Back to top