Tuesday, May 16, 2006

Improving SharePoint Accessibility - adding 'ALT' attributes to bullet images

1. Introduction

Following a research in a customer site (see my last article aboutsharepoint portal server accessibility) some conclusions were made on the best practices of implementing a portal server so that it meets accessibility requirements. One of the findings was that the built in web parts that show a link list in a summarized view (bulleted list) do not add an “ALT” tag to the bullet images. This breaks one of the chief (Conformance Level A) requirements of WCAG and therefore needs to be fixed. Two possible workarounds for this were proposed:

  1. Use a different view – one that doesn’t include bullets. This method is not advisable due to the fact that bulleted lists are easier to read and enhance usability of the site.
  2. Use FrontPage 2003 to change the web part and add the “ALT” tags

1.1 Purpose

This article’s purpose is to describe how to use FrontPage 2003 to change the web part and add the “ALT” tags.

2. Walkthrough
2.1. CREATE A TEMPORARY WEB PART PAGE

Open the portal area that contains the link list you want to add to a page Click “Manage Content” and then “Create” Click “Web Part Page” (last choice in this screen)

Give the page a name (“temp” for example) and hit “OK”

2.2. ADDING THE LINKS WEB PART TO THE TEMPORARY PAGE

Browse through the web parts in the gallery and find the links list you want to add. This might have a different name (for example “other information” or “external links”)

Drag the list to the page (doesn’t matter where to)

Close the web part gallery (use the “X” button on the top of the pane) to view the page.

At this stage you should modify web part settings such as toolbar other settings. This is not compulsory, as these changes can be done in FrontPage in step 2.3, but it is easier to do it now using the web interface to change the web part’s properties.

2.3. MODIFY THE PAGE IN FRONTPAGE TO PRODUCE A WEB PART

Open the page in FrontPage (hit the “Edit in FrontPage” button in internet explorer)

Right click the links web part and select “Convert to XSLT Data View” from the menu

With the web part still selected, switch to code view (button in the bottom left of the screen)

Scroll down (or run a search) and find the line that says <img src="/_layouts/images/square.gif" />

Change the line to <img alt="””/" src="/_layouts/images/square.gif" /> Save the page and exit FrontPage

2.4. EXPORTING THE WEB PART

Using internet explorer, browse back to the page you have created (if you left the window open with it, you will need to refresh the page, and you will get a link telling you to refresh it again).

Open the web part’s drop down menu and hit “export”

Select the option to save the file

Save the file to a location on your machine

You can now safely delete the web part page (go to the document library where it was saved, select it and delete it)

2.5. IMPORTING THE WEB PART TO OTHER PAGES

Open the page you want the web part to appear in (for example the home page)

Click “Edit Page” and then open the drop down menu “Modify Shared Page” to select “add web parts” > “import” Click “View Page” to view the page correctly.

browse to the file you saved in step 2.4 and hit upload

drag and drop the web part to the location in the page where you want it

View the results

The new web part is not in the page, with all the bullets with an 'alt' tag. More options to cosider on this scenario is to create the data view using web services and not from the list view - that option will allow you to add the web part in every site (and server) and not just the site you designed the web part on.

No comments: