For one of my current projects, I've been tasked with making a Sharepoint site match up to our exacting Accessibility standards.
Out of the box, Sharepoint only nods in the direction of Accessibility. The default templates don't validate and only tick a few Web Accessibility checkpoints. Somehow we are going to have to 'mangle' the code produced by Sharepoint and massage it into something a bit more acceptable.
There are a couple of techniques we can employ to help us along the road to Accessible Sharepoint. I'll be looking at these techniques over the next few posts.
To start with, we need to make sure ASP.Net can produce the accessible code we require.
First stop: Built in Controls.
This has nothing to do directly with Sharepoint. I'm talking about the built in ASP.Net controls, but a fair few sharepoint web parts rely on these controls, so they need a little work.
Microsoft have supplied a way to re-skin these controls by using Control Adaptors. In essence, control adaptors overwrite the default output methods of a control with custom methods allowing you to customise a controls output.
Fortunately, a lot of the work has already been done for us! Microsoft have already released some free (and open source) CSS Friendly Control Adaptors (CFCA) which turns the 80's table based layout of most controls into something a lot easier to style with CSS and a lot more accessible.
Installing these into a Sharepoint installation is not too tricky. There are a number of sites out there that explain the process. Unfortunately, all these sites install the control adaptors into the main website. I just wanted a solution that could be packaged alongside the website and re-distributed cleanly.
I'll show you how to get CFCA working for one User Control: The ASP Menu Control. In its raw state, the menu produces some really nasty table-in-table mark-up when what we ideally need is a nice, clean, nested unordered list.
- Download and install the CFCA package onto the PC that hosts your sharepoint site.
- Copy MenuAdapter.vb and WebControlAdapterExtender.vb into your sharepoint sites virtual directory.
Mine for example is: C:\Inetpub\wwwroot\wss\VirtualDirectories\bffs80\App_Code
(where bffs80 is the name and port of the website)
If you don't have an App_Code directory, create one. - Now, we need to tall ASP to use our control adaptors for all instances of menu controls in the site.
Add the following code to the file: C:\Inetpub\wwwroot\wss\VirtualDirectories\bffs80\App_Browsers\compat.browser
It needs to be just inside <browsers><browser refid="Default">
<controladapters>
<adapter controlType="System.Web.UI.WebControls.Menu"
adapterType="CSSFriendly.MenuAdapter" />
</controladapters>
</browser> - That *should* be it. If you refresh your webpage, the site menus should now be a lot more CSS friendly.