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

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

Apply this class to all of the TABLE rows that do not need to be displayed.

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.