How to customise the ‘EDIT IMAGE PROPERTIES’ in SharePoint 2007 to ensure accessibility

Situation:
We need to ensure that the code produced by the Sharepoint ‘Edit Image’ control ensures that the code generated is XHTML 1.0 compliant and in line with W3C accessibility conditions. In particulare we need to ensure that an ALT text is provided and style controls are disabled.
Complication:
Standard sharePoint web parts contains Layout and size fields that would allow the content entry team to break the look and feel of the templates. Also the are no checks to ensure that an alternate text is provided for imags
Solution:
To remove the LAYOUT and SIZE controls in order to guarantee that the content entry team cannot modify the layout and XHTML of the generated pages.
Edit the file in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\AssetImagePicker.aspx

Default Image Edit Properties in SharePoint

STEP 1 – Declare a Class to hide content
Create a CSS class DONOTDISPLAY

.doNotDisplay

{

display:none;

}

STEP 2 – Add this Style to the appropriate areas

Extract of the Default XHTML structure of AssetImagePicker
Apply this class to all of the TABLE rows that do not need to be displayed.

Extract of the CUSTOMISED XHTML structure of AssetImagePicker

STEP 3 – Hide the remaining Hyperlink Control
For the remaining HYPERLINK Control we will need to look at hiding the USER CONTROL that is being called.

<asp:Placeholder runat=”server” id=”assetHyperlinkSection”>

<wssuc:InputFormControl LabelText=”<%$Resources:cms, asseteditimage_hyperlink_label%>” runat=”server” visible=”False”>

<Template_Control>

<div class=”doNotDisplay”>

<IMG src=”/_layouts/images/blank.gif” width=12 height=10 alt=””>

<CMS:AssetUrlSelector id=”assetImageHyperlink” CssTextBox=”ms-input ms-assetimagedialog-longtextbox” MaxLength=512 DecodeUrlPath=”false” runat=”server” />

<label style=”DISPLAY: none;” for=”<%= assetImageHyperlink.PrimaryInputControl.ClientID %>”><SharePoint:EncodedLiteral runat=”server” text=”<%$Resources:cms, asseteditimage_hyperlink_label%>” EncodeMethod=’HtmlEncode’/></label>

<BR><IMG src=”/_layouts/images/blank.gif” width=12 height=10 alt=””>

<asp:Checkbox id=”assetNewWindowCheckbox” runat=”server” /><asp:Label id=”assetNewWindowLabel” runat=”server” AssociatedControlID=”assetNewWindowCheckbox” Text=”<%$Resources:cms, assetedithyperlink_openlinkintarget_newwindow%>” />

</div>

</Template_Control>

</wssuc:InputFormControl>

</asp:Placeholder>

STEP 4 – Remove the height attribute from the table
In order to improve the alignment of the control remove HEIGHT=100% from the TABLE declaration

<!– First column defines margin width for subsequent rows without colspan=4 –>

<td width=”25″><IMG src=”/_layouts/images/blank.gif” width=25 height=1 alt=””></td>

<td class=”ms-assetimagedialog-editcontrolcell” colspan=”2″ >

<table cellSpacing=0 cellPadding=0 height=100% width=100%>

STEP 5 – Validate that ALT text is not empty
Add a Required Field Validator

<wssuc:InputFormControl LabelText=”<%$Resources:cms, asseteditimage_alternatetext_label%>” LabelAssociatedControlId=”assetAlternateTextTextbox” runat=”server”>

<Template_Control>

<div><IMG src=”/_layouts/images/blank.gif” width=12 height=10 alt=””>

<wssawc:InputFormTextBox Title=”<%$Resources:cms, asseteditimage_alternatetext_textbox_tooltip%>” class=”ms-input” ID=”assetAlternateTextTextbox” Columns=”35″ Runat=”server” CssClass=”ms-input ms-assetimagedialog-longtextbox” MAXLENGTH=128 />

</div>

<div>

<asp:RequiredFieldValidator ID=”assetSelectedAltTextValidator” EnableClientScript=”False” Display=”Dynamic” ControlToValidate=”assetAlternateTextTextbox” Text=”Alternate Text required for all images” Runat=”server” />

</div>

</Template_Control>

</wssuc:InputFormControl>

Final Version
Deploy the final version on all releases and the customised control should look like the control below.

Customised version which shows alt text validation

Advertisements

3 thoughts on “How to customise the ‘EDIT IMAGE PROPERTIES’ in SharePoint 2007 to ensure accessibility

  1. Hello, this post was very helpful in leading me to the AssetImagePicker.aspx, which I need to modify. However, in the course of trying to implement your example, I find I cannot make any changes to this file, not even adding a space somewhere, without getting an error page when I try to view it on the site. Any thoughts on why this may be?
    Thanks,
    Matt

  2. Hi Connor,

    Thanks for a great article! It described exactly what I was looking for.

    I have one follow up question: When the AssetImagePicker is containing less controls I would also like it to open in a smaller window to make it look more appropriate. Do you know how I can achieve this?

    Regards,
    Anna

  3. Hi Anna,

    Glad the post helped. I’m not working on SP at the moment so I cannot find how to do this. But please post an update when you find a solution as I think this should be achievable. I suspect there is probably one place that does this for all edit windows… so when you are making the changes you will probably only want to change the window size when the URL = AssetImagePicker. I suspect this will be needed to prevent all editor windows opening at the new height x width.

    Connor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s