Tips for Enhancing the Accessibility of SharePoint Web Sites

Article
03/25/2009

Samer Sawaya
Les W. Smith
Microsoft Corporation

December 2004

Applies to:
Microsoft Windows SharePoint Services

Summary: Enhance the accessibility of SharePoint Web sites by making a few easy customizations of the site definition files in a deployment of Microsoft Windows SharePoint Services. (10 printed pages)

Introduction
Use Alternative Text for Images
Add Skip-to-Main Content Links
Add Submit Buttons to the Bottom of Forms
Use the CSS of a Custom Theme to Create Relative Fonts
Create and Apply High-Contrast Themes to Web Sites
Conclusion

Introduction

This article describes ways you can customize the site definition files in a deployment of Microsoft Windows SharePoint Services. To make these customizations, you should copy an existing site definition directory and create a site definition, as described in Creating a Site Definition from an Existing Site Definition. Keep in mind that changes you make within originally installed files may be overwritten when you install updates or services packs for Windows SharePoint Services, or when you upgrade an installation to the next product version.

In the context of a server farm, you must make the customizations described in this article on each front-end Web server. In addition, you may need to reset Internet Information Services (IIS) for changes to take effect.

Use Alternative Text for Images

Visually impaired users rely on alternative text for a description of what an image conveys. Using alternative text, you can provide a text description that conveys the same information as the information you are trying to communicate through the image that the text is associated with.

You can customize the alternative text displayed for images by setting the alt attribute of the appropriate <IMG> tag in SharePoint ASPX user pages such as the Home page or list view pages. For example, you can set the alternative text used for the Home logo and other images contained within these pages by modifying the respective Default.aspx or AllItems.aspx page. Alternative text for logos can be customized within the following ASPX pages of a site definition:

Default.aspx. The Home page.
AllItems.aspx. The page for viewing all the items in a list.
NewForm.aspx. The page for creating a list item.
EditForm.aspx. The page for editing the contents of a list item.
DisplayForm.aspx. The page for viewing a list item.
Site application pages in the Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\Locale_ID directory. For a list of possible values for Locale_ID, see LCID Property.

When you create a site definition, as described in Creating a Site Definition from an Existing Site Definition, the new site definition directory includes one Default.aspx file, as well as AllItems.aspx, NewForm.aspx, EditForm.aspx, and DisplayForm.aspx files for each list type (for example, announcements, tasks, document libraries, and so on). Each list you create in turn creates an instance of one of the list types, whose supporting XML, ASPX, and other files reside in one of the subfolders of the Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\Locale_ID\Site_Definition\LISTS directory.

You need to define an alt attribute for every image. You can use alternative text when an image serves as a hyperlink, although you should not use alt="" for image links. A screen reader ignores a regular image when alt-''" is used, but the reader does not ignore an image link. If you set alt-"" for an image link, users who tab to the image link are confronted with a confusing silence. For regular images, however, it is best to set alt="". Also, do not use alternative text if the images do not convey meaningful information.

To modify the alternative text used for the Image Web Part on the Home page by replacing the Image Web Part with a Content Editor Web Part

On the Home page, click Modify Shared Page, point to Add Web Parts, and then click Browse.
Drag the Content Editor Web Part into the right Web Part zone above or below the Image Web Part, click the down arrow of the Image Web Part, and then click Close.
Click the down arrow of the Content Editor Web Part, click Modify Shared Web Part, and then click Rich Text Editor in the tool pane.
In the Rich Text Editor, click Insert Image. Then, in the Picture dialog box, click Browse to navigate to the Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\IMAGES folder, and then select homepage.gif.
Type the alternative text to use in the Alternate Text box.
To hide the title bar of the Web Part, expand the Appearance section in the tool pane, click None in Frame Style list, and then click OK.

For information about customizing the logo displayed on Home pages, see Customizing the Logos for SharePoint Sites.

Skip-to-Main content links reduce the amount of information produced in assistive technologies, making navigation easier for users who rely on these technologies to distinguish content from navigation links or menus. Screen readers, talking browsers, and even the tab order for the user interface proceed linearly through the page from top navigation, through left navigation, to the main content. Using an invisible Skip-to-Main content link allows users to scan the page more quickly and identify the main content section of a page.

Create a blank one-pixel image file named onepixel.gif, and place it within the Local_Drive:\\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\Loc_ID\IMAGES folder.
In Notepad or another text editor, open the AllItems.aspx file for one of the list types defined in the appropriate Lists directory.

Add an anchor tag, such as the following, to the top left section of the page within the same table cell that contains the <IMG> tag for logo.gif:

  <!--Top bar-->
<table class="ms-bannerframe" border="0" cellspacing="0" cellpadding="0" width="100%"><tr>
<td nowrap valign="middle">

<!—Add the following before the IMG tag for logo.gif-->
<A href="#Content">
<IMG alt="Skip to main content" src="/_layouts/images/onepixel.gif" width=1>
</A>

<img ID=onetidHeadbnnr0 alt="Logo" src="/_layouts/images/logo.gif">
</td>

Add a bookmark, such as the following, before the <Web Part Zone> tag near the bottom of the page:

  <TABLE width=100% cellpadding=2 cellspacing=0 border=0>
   <tr>
    <td valign=top class="ms-descriptiontext" style="padding-bottom: 10px">
    <SharePoint:ListProperty Property="Description" /></td>
   </tr>
  </TABLE>

<!--Add the following bookmark before the Web Part Zone-->
<A name=Content></A>

<WebPartPages:WebPartZone  FrameType="None" ID="Main" Title="loc:Main" />
<!-- FooterBanner closes the TD, TR, TABLE, BODY, And HTML regions opened above -->

Add Submit Buttons to the Bottom of Forms

Adding Submit buttons to the bottom of long forms or long site application pages prevents users from having to tab back through the form to submit a request. You can add buttons, for example, to the bottom of the Manage Users page.

Open the user.aspx file located in Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\Locale_ID.

In user.aspx, find and copy the following table, which contains the toolbar with options for adding or removing users, as well as for editing the site groups of users:

<TABLE class="ms-toolbar" style="margin-left: 3px;" cellpadding=2 
    cellspacing=0 border=0 id="onetidGrpsTB"> <TR>
<td class="ms-toolbar"> <table cellpadding=1 cellspacing=0 border=0> <tr> 
<td class="ms-toolbar" nowrap> 
<a tabindex=2 ID="idAddMembers" class="ms-toolbar" 
    ACCESSKEY=N href="aclinv.aspx" 
    title="Add Users"><img src="../images/newuser.gif" ID="tbbutton1N"
alt="Add Users" border=0 width=16 height=16></a></td> <td nowrap> 
<a tabindex=2 class="ms-toolbar" ACCESSKEY=N ID="idAddMembers" 
href="aclinv.aspx">Add Users</a></td> </tr></table>
</td>
    <TD class=ms-separator>|</TD>
<td class="ms-toolbar"> <table cellpadding=1 cellspacing=0 border=0>
<tr> <td class="ms-toolbar" nowrap> 
<a tabindex=2 ID="idDelMembers" class="ms-toolbar" ACCESSKEY=X
href="javascript:deluser()" title="Remove Selected Users">
    <img src="../images/delitem.gif" ID="tbbutton1X" alt="Remove 
Selected Users" border=0 width=16 height=16></a></td> <td nowrap> 
    <a tabindex=2 class="ms-toolbar" ACCESSKEY=X ID="idDelMembers"
href="javascript:deluser()">Remove Selected Users</a></td>
</tr></table></td>
    <TD class=ms-separator>|</TD>
<td class="ms-toolbar"> <table cellpadding=1 cellspacing=0 border=0>
<tr> <td class="ms-toolbar" nowrap> 
<a tabindex=2 ID="idEditMembers" class="ms-toolbar" ACCESSKEY=I
href="javascript:EditRoles()" title="Edit Site Groups of Selected
Users"><img src="../images/edit.gif" ID="tbbutton1I" alt="Edit Site
Groups of Selected Users" border=0 width=16 height=16></a></td> 
    <td nowrap> <a tabindex=2 class="ms-toolbar" 
    ACCESSKEY=I D="idEditMembers" href="javascript:EditRoles()">Edit 
Site Groups of Selected Users</a></td> </tr></table></td><TD width=99% 
class="ms-toolbar" align=right nowrap id=align01>
    <IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt=""></td> 
</tr> </table>

Paste the table at the bottom of the same ASPX page, just before the last closing table cell tag (</td>).
Because the use of a tabindex attribute within each anchor tag of the two tables breaks linear tab order, remove this attribute entirely from all anchor tags in the two tables, and then save the file.

Note Making this customization affects the Manage Users page for every site in the deployment.

You can also define Submit buttons within the list schema files (SCHEMA.XML) of a site definition so that future sites or lists that you create will contain the buttons by default.

To add a Submit button (for example, to the bottom of an item form for either creating or editing items)

Open the SCHEMA.XML file for the list, which is located in the appropriate Local_Drive:\\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\Loc_ID\Site_Definition\Lists\List_Type folder.
Find the form definition for the NewForm.aspx or EditForm.aspx page. As an example, the edit form definition begins with <Form Type="EditForm" Url="EditForm.aspx" WebPartZoneID="Main">.

Before the Switch clause that determines if there are any required fields, add an INPUT button like the following within the ListFormBody element:

<HTML>
  <![CDATA[ 
    <TABLE border=0 cellpadding=2><TR><TD>
      <INPUT Type=button onclick="javascript:SubmitForm()" value="Save and Close"></TD> </TR>
  </TABLE>]]> 
</HTML>
<Switch>
  <Expr>
    <GetVar Name="HasRequired" /> 
  </Expr>

To display the entire item toolbar near the bottom of the page instead, including such options as Save and Close, Attach File, Delete Item, or Go Back to List, copy the entire contents of the ListFormButton section of the form definition (minus the containing ListFormButton element) to the same location as described for the Submit button in the previous example.

Use the CSS of a Custom Theme to Create Relative Fonts

You can convert fonts used in SharePoint sites from fixed to relative by creating a custom theme with a cascading style sheet (CSS) file that specifies relative fonts, rather than fixed fonts. Using relative fonts allows users to control the text size through the View menu, for example, of Microsoft Internet Explorer.

You cannot simply convert fonts globally from fixed to relative by changing all the font-size values within OWS.CSS, the principal CSS file used in Windows SharePoint Services (Local_Drive:\\Program Files\Common Files\Microsoft Shared\web server extensions\ 60\TEMPLATE\LAYOUTS\Locale_ID\STYLES). Changing all the values to larger or smaller in this way causes some areas of a site to become unreadable when resized in Internet Explorer. Windows SharePoint Services uses nested classes in its CSS definitions, but Internet Explorer makes font sizes relative to parent classes, which can make text unreadable in certain contexts.

The following task shows how to create relative fonts, maintaining the default theme of Windows SharePoint Services without modifying colors or images, and without creating unreadable font sizes.

To create relative fonts through a custom theme

Determine the CSS styles you need to modify. You can view the page source in Internet Explorer to determine which styles to change, but you can also use the code sample provided in Cascading Style Sheets Class Definitions for Microsoft Windows SharePoint Services to help you identify the styles.

The following styles can be modified to provide relative font sizes in the Home page and other pages:

.ms-descriptiontext
.ms-pagetitle
.ms-titlearea
.ms-banner a:link
.ms-banner a:visited
.ms-WPTitle
.ms-vb
a.ms-addnew
.ms-nav a
.ms-SPLink

Some of the preceding styles can be used together with the following styles to provide relative font sizes in the AllItems.aspx page for viewing lists, and in the item forms for creating, editing, or viewing list items:

.ms-vh, .ms-vh2
.ms-toolbar
.ms-nav td, .ms-nav, .ms-SPZoneLabel, .ms-input
.ms-formdescription

The following styles can be modified for Web Part tool panes:

.ms-ToolPaneTitle
.ms-TPBody
UserCell
UserCellSelected
.ms-ToolStrip
UserButton, UserInput, UserSelect
.ms-TPTitle

The following styles can be modified for calendars and recurring events:

.ms-CalHour
.ms-firstCalHour
.ms-calhead
.ms-calDOW
.ms-calTop
.ms-formrecurrence
.ms-RadioText
.ms-appt
.ms-apptsingle

The following styles can be modified for site administration pages:

.ms-sectionheader
.ms-smallheader
.ms-authoringcontrols
.ms-ButtonHeightWidth
select
.ms-formlabel
.ms-formbody
.ms-propertysheet
.ms-long
.ms-viewselect a:link, .ms-GRFontSize

All the preceding styles can be changed to relative font sizes (larger or smaller) for text displayed on the Home page and other user pages for working with lists, and on application pages for managing a site.

For descriptions of the preceding styles and other CSS styles used in SharePoint sites, see Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3.
Create a folder in the Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES directory (in this example, RELATIVEFONTS), which will contain a .CSS file and an .INF file.
In Notepad, create a .CSS file called THEME.CSS within the folder you created in the second step. This file needs to specify only relative font-size values (larger or smaller) for the styles you determined to change in the first step.

For example, the following style definitions specify large relative font sizes for certain styles used globally in a SharePoint site:
```
.ms-descriptiontext{
font-size: larger; 
}
.ms-pagetitle{
font-size: larger; 
}
.ms-titlearea{
font-size: larger; 
}
.ms-banner a:link{
font-size: larger; 
}
.ms-banner a:visited{
font-size: larger; 
}
```
In Notepad, create an .INF file within the folder you created in step 2, and give this file the same name used for the new folder (for example, RELATIVEFONTS.INF). This file should contain information like the following, where the same folder name is assigned to a title attribute:
```
[info]title=RELATIVEFONTScodepage=65001version=3.00format=2.00readonly=truerefcount=0
```
You can find this information in the .INF file for one of the default themes installed in the Local_Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\THEMES directory.
Add a theme definition to the SPTHEMES.XML file located in the Local_Drive:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\60\TEMPLATE\LAYOUTS\Locale_ID directory. This file determines which themes are available as options on the Apply Theme to Web site page. The following example specifies a template for the RELATIVEFONTS theme:
```
<Templates>
   <TemplateID>RELATIVEFONTS</TemplateID>
   <DisplayName>Relative Fonts</DisplayName>
   <Description>Use this theme to provide relative font sizes.
   </Description>   
   <Thumbnail>../images/thnone.png</Thumbnail>
   <Preview>../images/thnone.gif</Preview>
</Templates>
```

Because the example uses the default Windows SharePoint Services theme, and does not entail customizing colors or images, the default thumbnail and preview images are specified in the example.

Create and Apply High-Contrast Themes to Web Sites

The preceding example implements a minimal version of a custom theme to show how to create relative font sizes, but you can also create custom themes that effect high contrast through the colors, styles, and images that you choose. For more information about creating custom themes, see Customizing Themes.

You can also create and apply custom themes to SharePoint sites in Microsoft Office FrontPage 2003. In FrontPage, on the Format menu, click Theme to open a pane with options for selecting or creating themes. For information on accessibility customizations that are possible in FrontPage, see Adding Rules to the Accessibility Checker.

Conclusion

By making the customizations described in this article, you can expand the reach of SharePoint sites, allowing greater access for users with disabilities.

Additional Resources

You may find the following additional resources useful when you are designing SharePoint sites:

Section 508: Legislation that specifies standards for the electronics and information technology used by federal agencies, so that employees with disabilities have access to information that is comparable to that available for employees without disabilities.
Voluntary Product Accessibility Template (VPAT) for Windows SharePoint Services: Document download that provides a Voluntary Product Accessibility Template. This is an informational tool developed by industry and government to help facilitate the new market research responsibilities of Federal IT professionals under Section 508. This Windows SharePoint Services VPAT describes how Windows SharePoint Services addresses Section 508 standards.
Authoring Tool Accessibility Guidelines 1.0 (ATAG 1.0): Specification that provides W3C guidelines for Web authoring tool developers. Its purpose is two-fold: to assist developers in designing authoring tools that produce accessible Web content and to assist developers in creating an accessible authoring interface.
Web Content Accessibility Guidelines 1.0 (WCAG 1.0): W3C guidelines that explain how to make Web content accessible to people with disabilities. The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility, but following them can make Web content more available to all users, regardless of the user agent that is employed (for example, desktop browser, voice browser, mobile phone, automobile-based personal computer, and so on), or constraints under which they may be operating (for example, noisy surroundings, under- or over-illuminated rooms, a hands-free environment, and so on). Following these guidelines can help people find information on the Web more quickly, and also explain how to make multimedia content more accessible to a wide audience.

Tips for Enhancing the Accessibility of SharePoint Web Sites

Contents

Introduction

Use Alternative Text for Images

To modify the alternative text used for the Image Web Part on the Home page by replacing the Image Web Part with a Content Editor Web Part

Add Submit Buttons to the Bottom of Forms

To add a Submit button (for example, to the bottom of an item form for either creating or editing items)

Use the CSS of a Custom Theme to Create Relative Fonts

To create relative fonts through a custom theme

Create and Apply High-Contrast Themes to Web Sites

Conclusion

Additional Resources

Additional resources

Tips for Enhancing the Accessibility of SharePoint Web Sites

Contents

Introduction

Use Alternative Text for Images

To modify the alternative text used for the Image Web Part on the Home page by replacing the Image Web Part with a Content Editor Web Part

Add Skip-to-Main Content Links

To add a Skip-to-Main content link (for example, in an AllItems.aspx page)

Add Submit Buttons to the Bottom of Forms

To add the default toolbar for managing users to the bottom of the Manage Users page

To add a Submit button (for example, to the bottom of an item form for either creating or editing items)

Use the CSS of a Custom Theme to Create Relative Fonts

To create relative fonts through a custom theme

Create and Apply High-Contrast Themes to Web Sites

Conclusion

Additional Resources

Additional resources