SharePoint 2010 Web Compliancy

SharePoint 2010's web standards compliancy has changed a lot, compared to its predecessors. SharePoint 2010 now uses fully XHTML compliant code right out of the box, which allows for better browser compatibility and performance. To maintain this XHTML-compliant state, your Web Parts must conform to the XHTML standard. Using Standard ASP.NET controls will help you with this. However, there are a few rules to follow when using Visual Web Parts, LiteralControl controls, or your own HTML elements:

* Elements can't be nested
* Elements can't be closed
* Element names must be in lowercase
* Attributes must be in lowercase
* Attributes must always have a value
* Attribute values must be enclosed with quotation marks

Another thing to consider: Avoid using <b> for bold and <i> for italics and similar. XHTML standards discourage the use of these types of elements. Move such formatting elements to the CSS definitions.

SharePoint 2010 is also, by default, WCAG 2.0 compliant. WCAG stands for Web Content Accessibility Guidelines. WCAG 2.0 is a set of recommendations to make web content more accessible for people with disabilities. The full guideline can be found at http://www.w3.org/TR/WCAG20/. Listing 1 is a simple example of how you can enhance your Web Part and use some of the WCAG 2.0 guidelines.

<asp:TextBox ID="textBox" runat="server" 
    ToolTip="Enter text here"/>
<asp:Button ID="button" runat="server" 
    Text="Click me"                                                  
    ToolTip="Click here to submit"
    AccessKey="C"/>                                                  
<asp:RequiredFieldValidator ID="rfv"                                 
    ControlToValidate="textBox" 
    runat="server"
    ErrorMessage="You need to specify a value" />                    

This listing contains a text box and a button. The button contains descriptive text and an AccessKey. The AccessKey property allows you to use Alt+C to invoke the button click. This inclusion conforms to WCAG 2.0 Guideline 2.1, which means that the control is keyboard accessible. The Web Part also contains a required field validator that makes sure the text box contains a value before clicking. If the control is empty, the code displays a friendly error message. This conforms to Guideline 3.3.1, Error Identification.

Web Part Icons

Each Web Part can have two icons -- one that identifies the Web Part in the Web Part Gallery and one that identifies the Web Part on a page. Highlight your icon is a quick, easy trick that usually requires no programming.

The Web Part definition contains two properties that specify the icons. The first property, CatalogIconImageUrl, specifies the URL to the location of the icon image file. The image must be a 16x16 pixel image in PNG, GIF or JPEG format. This icon is used in the Web Part Gallery to identify the Web Part, as shown below. This icon will help users find the Web Part.

Using catalog icons for the Web Parts enhances the Web Part Gallery experience and makes it easier for the users to find the Web Parts.

The second icon property is TitleIconImageUrl. This property shows an icon in the title bar of the Web Part (to the left of the Web Part title). The icon should be the same size and type as the catalog icon. This icon is just right in some situations but it can also affect the visual appearance of the Web Part in a negative way, if other Web Parts don't also have icons.

You have the option of specifying icons in the Web Part Control Description file (.webpart) or by overriding the properties on your Web Part class. The easiest way is to modify the .webpart file.

Before you can add an icon to your Web Part, you must first add the icon images to your Web Part project. You do so by adding the SharePoint Images Mapped Folder. Simply right clicking the project and then select Add > SharePoint Images Mapped folder. Visual Studio will add the folder to the project and create a subfolder (using the project name). Add the icon of your choice to that subfolder, as shown below.

Images are added to the project using the SharePoint Images mapped folder. Visual Studio creates a sub folder using the name of your Project.

After adding the icon(s), edit your Web Part Control Description file. You'll find this file inside your Web Part project item. The code in Listing 2 adds icon properties to the .webpart file.

<properties>
    <property name="Title" type="string">WCAG 2.0 Web Part</property>
    <property name="TitleIconImageUrl" type="string">                    
        /_layouts/images/WebPartsInAction.Ch4.WCAG/Icon.png</property>
    <property name="CatalogIconImageUrl" type="string">                  
        /_layouts/images/WebPartsInAction.Ch4.WCAG/Icon.png</property>
</properties>

The properties added to the Web Part Control Description file and the TitleIconImageUrl point to the location of the title icon image. CatalogIconImageUrl points to the location of the catalog icon image. In this case, they're the same.

To prohibit users from changing your icons and adding default icons, override the two properties in your Web Part class. Edit the setter of the properties to do nothing and the getters to return a constant location to the icon image files.

Courtesy of Manning Publications.