Slightly more accessible Web Parts

Recently, while researching the RSS Feed mechanism of the Content Query Web Part I have stumbled upon the SuppressWebPartChrome Property. As this Property sounds very promising but is not very well documented in the current WSS SDK I have decided to have a further look at it.

What is SuppressWebPartChrome and why does the Content Query Web Part need it?

The Content Query Web Part gives you the possibility to produce an RSS feed of the items returned by the query. It uses the /_layouts/Feed.aspx page with some query string parameters. First the Feed.aspx page instantiates a new Content Query Web Part with an alternative XSL stylesheet which produces RSS XML. Then it tries to get the cached query result. If it won’t find it, it uses the query string parameters to obtain the reference to the CQWP on the Publishing Page and gets the query information from it. Now comes the interesting part: The Feed.aspx page adds the new instance of CQWP as a control and sets the SuppressWebPartChrome Property to true. This causes that only the contents of the Web Part are rendered: without any tables or divs around it! And all that supported by the SharePoint Object Model.

Is SuppressWebPartChrome the Holy Grail of accessible Web Parts?

Unfortunately it isn’t. It works only with WSS Web Parts (Web Parts which derive from the Microsoft.SharePoint.WebPartPages.WebPart class) and only with Web Parts which are put outside a Web Part Zone. It’s not really of much use in the most common scenario’s but if you’re using Web Parts outside Web Part Zones and you’re into accessibility, it might be just the right solution for you. But then again: why using Web Parts instead of Custom Controls in the first place? Out of the box support for caching might be just one of the reasons.

SuppressWebPartChrome in action

Curious about the result of using the SuppressWebPartChrome Property, I have created a custom Web Part writing a simple <h1>Hello World!</h1> to the output. I have combined the SuppressWebPartChrome Property with the ChromeType Property which can be set using the standard Tool Part. Below are the results.

Chrome: Default; SuppressWebPartChrome: false

Default output of a Web Part.

<table width="100%" cellspacing="0" cellpadding="0" border="0"
toplevel="">
  <tbody>
    <tr>
      <td>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="ms-WPHeader">
              <td style="width: 100%;" id="WebPartTitleWPQ2"
              title="HelloWorldWebPart">
                <h3 class="ms-standardheader ms-WPTitle">
                  <nobr><span>HelloWorldWebPart</span>
                  <span id="WebPartCaptionWPQ2"/></nobr>
                </h3>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td valign="top" class="ms-WPBorder">
        <div style="" allowdelete="false" onlyformepart="true"
        class="ms-WPBody" width="100%"
          id="WebPartWPQ2" haspers="true"
          webpartid="00000000-0000-0000-0000-000000000000">
          <div id="ctl00_PlaceHolderMain_g_61111a13_0082
                _44f0_a109_a73449e692ae">
            <h1>
              Hello World</h1>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Chrome: None; SuppressWebPartChrome: false

The title of a Web Part is not being rendered. All other tables remain.

<table width="100%" cellspacing="0" cellpadding="0" border="0"
toplevel="">
  <tbody>
    <tr>
      <td valign="top">
        <div style="" allowdelete="false" onlyformepart="true"
        class="ms-WPBody" width="100%"
          id="Div1" haspers="true"
          webpartid="00000000-0000-0000-0000-000000000000">
          <div id="ctl00_PlaceHolderMain_g_61111a13_0082
          _44f0_a109_a73449e692ae">
            <h1>
              Hello World</h1>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Chrome: None; SuppressWebPartChrome: true

The Web Part content only

<div id="ctl00_PlaceHolderMain_g_61111a13_0082_44f0_a109_a73449e692ae">
    <h1>Hello World</h1>
</div>

Comparing the three rendering approaches you can clearly see how great it would be to be able to benefit of the SuppressWebPartChrome Property for all Web Parts - even if it was in the display mode only (because of how the Web Parts frameworks has been designed and developed, Web Parts require tables to leverage the rich interface as presented in SharePoint).

So why it doesn’t work and what are the options?

Some time ago I’ve been busy with researching accessibility in SharePoint 2007. The Web Part Zones took my attention almost immediately. It turned out that the Web Part Zones are actually the root of all evil with rendering tables all over the place. Suppressing the Web Part chrome by setting the chrome to None provides a pretty clean output. The Web Part Zones are actually to be blamed for the decreased accessibility.

So what are your options? You can use Custom Controls if you don’t require end-user customization and would like to provide accessible content. You can use Web Parts outside the Web Part Zones if you want to benefit of caching and still want to deliver an accessible solution. Don’t forget to set the SuppressWebPartChrome Property to true. It’s not by default. For all the other scenario’s you will probably have to stick to the Web Parts. A custom Control Adapter for the Web Part Zones could provide you just the sufficient control on the rendered output to clean it and get rid of any tables.

Technorati Tags: SharePoint, SharePoint 2007, MOSS 2007, WCM, Accessibility

Others found also helpful: