Forcing ALT attribute for images in MCMS (last updated: January 31, 2006)

Accessibility guidelines require to ensure that alternate text (ALT attribute) is provided for images. MCMS itself does not have a method to enforce that an ALT text needs to be provided with any image added to a placeholder.

The following steps will change the standard dialog of MCMS in a way that ALT text is enforced.

Enforce the ALT text for images from the Resource Gallery

Please backup the following file and then apply the modifications listed below:
\Program Files\Microsoft Content Management Server\Server\IIS_CMS\WebAuthor
   \Dialogs\ResourceBrowser\Authoring\ImagePropertiesBrowse.aspx

Below the HandleKeyPress Javascript routine add the following routine:

function CheckAltTag()
{
   if (NC_LocalForm.NC_AltText.value != “”)
      return true;
   else
   {
      alert(“Please provide an Alternate Text for this Image”);
      return false;
   }
}

In addition you need to change the following line:

<button id=”NCImg_Insert” onclick=”WBC_procsImage(‘<%= PlaceholderName %>’, ‘<%= PlaceholderType %>’, ‘<%= Resource.Url %>’); return false;”

As follows:

<button id=”NCImg_Insert” onclick=”if (CheckAltTag()) {WBC_procsImage(‘<%= PlaceholderName %>’, ‘<%= PlaceholderType %>’, ‘<%= Resource.Url %>’);} return false;”

Enforce the ALT text for local images

Please backup the following file and then apply the modifications listed below:
\Program Files\Microsoft Content Management Server\Server\IIS_CMS\WebAuthor
   \Dialogs\ResourceBrowser\Authoring\ImageLocalBrowse.aspx

Add the following Javascript code to the HEAD section:

<script language=”JavaScript” type=”text/javascript”>
function CheckAltTag()
{
   if (NC_LocalForm.NC_AltText.value != “”)
      return true;
   else
   {
      alert(“Please provide an Alternate Text for this Image”);
      return false;
   }
}
</script>

In addition you need to change the following line:

onsubmit=’return WBC_validateLocalPath(“Image”)’

As follows:

onsubmit=’if (CheckAltTag()) {return WBC_validateLocalPath(“Image”)} else {return false;}

Enforce the ALT text when using the properties dialog of the ImagePlaceholderControl

Please backup the following file and then apply the modifications listed below:
\Program Files\Microsoft Content Management Server\Server\IIS_CMS\WebAuthor\Dialogs\ResourceBrowser\Authoring\ImagePropertiesOnlyBrowse.aspx

Add the following Javascript code to the HEAD section:

<script language=”JavaScript” type=”text/javascript”>
function CheckAltTag()
{
   if (NC_LocalForm.NC_AltText.value != “”)
      return true;
   else
   {
      alert(“Please provide an Alternate Text for this Image”);
      return false;
   }
}
</script>

In addition you need to change the following line:

<button id=”OKButton” onclick=”WBC_setImageProp( ‘<%= PlaceholderName %>’ ); return false;” class=”WBC-styclsButton”><%= IDS_UI_ButtonOKText %></button>

as follows:

<button id=”OKButton” onclick=”if (CheckAltTag()) {WBC_setImageProp( ‘<%= PlaceholderName %>’ );} return false;” class=”WBC-styclsButton”><%= IDS_UI_ButtonOKText %></button>

2 Comments


  1. Stefan, thanks for this, very useful. I tried to add the same function to the ImagePropertiesOnlyBrowse.aspx file but the form tag seems to be overwritten, thereby losing the onsubmit event handler. Is this why you didn’t include it in your instructions? 😉

    All the best, Jeremy

    Reply

  2. Hi Jeremy,

    actually I just forgot to include this dialog.

    I adjusted this article and it now reflects the required changes for the properties dialog as well.

    Cheers,

    Stefan

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.