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>

Comments (2)

  1. jeremy says:

    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

  2. Stefan_Gossner says:

    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