How to Make Accessible Web Content Using Microsoft Expression Web

Introduction

Expression Web (EW) is the tool that has replaced FrontPage as Microsoft's web design tool. Although the interface is a little bit different than its predecessors, it should be familiar for Microsoft FrontPage and even Office users. Although it offers significant improvements in creating standards-compliant HTML and CSS, it can still be difficult to create accessible HTML using Expression Web "out of the box." This article will show you how to make your content as accessible as possible using MS Expression Web.

Standards and CSS

Pages that use standards-compliant HTML and CSS are more likely to be accessible, and FrontPage has traditionally received a great deal of criticism for creating "sloppy" code that didn't validate to existing standards. This issue has been addressed in Expression Web.

In general, Expression Web does a good job of creating standards-compliant (X)HTML. The default grammar for a page is XHTML Strict, and EW does use CSS for styles. Of course, that doesn't mean that the pages are always valid XHTML, or that CSS is always intuitive and understandable. Its code is sometimes a little cluttered, but code is cleaner and more standards-compliant than any other Microsoft product.

Images and Alt Text

Alternative text, or alt text, provides a textual alternative to non-text content in web pages. If you add an image using the Insert Picture icon in the toolbar ( ), or by choosing Insert > Picture > From File, a window appears that prompts you to enter alt text.

The window contains three important elements

• A field labeled Alternate text. This is where you should enter your alt text. If you have any questions on how to create appropriate alt text please read our article on the appropriate use of alt text.
• A checkbox next to the Alternate text field. When this box is checked, Expression Web will give an image empty or null alternative text (alt=""). This box is checked by default, so an image will have null alt text if you do not enter anything in the Alternate text field, or if you just hit Enter when this dialog box appears. Empty alt text should be used when a graphic does not convey content or have a function. Images with alt text will be ignored by a screen reader, so only do this if the image is purely decorative.
• A field labeled Long description. Enter or Browse to the url of your long description and it will be linked to using the longdesc attribute. The longdesc attribute is not the only way to provide the user with more information for a complex image. You can read more about this and other techniques by reading our article on long descriptions.

If you double-click on an existing image the Picture Properties dialog box appears. In the Accessibility section, you will find the same fields.

Tables

Tables can be used either for visual layout or to organize data. Although it is fairly easy to create a layout table in EW, it takes a little more work to add the appropriate headers to data tables. Read more on tables and accessibility.

Users of Microsoft Word or FrontPage are familiar with the table icon ( ) that appears in the main toolbar--it is probably the most common way that users create tables in Microsoft tools (although you can also create tables using the Table subheading in the main menu).

To define a table header for data tables, select the cell you want to make a header. Right-click on the cell, then select Cell Properties or select Table > Properties > Cell. When the Cell Properties dialog box appears, select the Header cell check box. This will turn the td tags into th tags, but you should still specify the scope of the headers.

Tables used for layout do not need, and should not have, table headers.

Forms

Forms are used for anything from entering search terms to buying something online. They need to be organized logically and every form element needs a label (e.g. "First Name" next to a text field). They serve as important visual cues for all users and, if the <label> tag is used appropriately, they can also be very helpful for screen reader users who wish to complete a form. Read more on creating accessible forms.

To create form elements in Expression Web, follow these steps:

1. Create your form and form elements using the Toolbox sidebar. The toolbox has a Forms submenu that can be used to insert different form elements. Double-click or click and drag to insert an element.
   
2. For each form element (text box, radio button, checkbox, or drop-down menu), you should enter descriptive text that informs the user what to enter or select. This text will become the label for the form element.
3. Add a labels to the form element. To do this, you will probably have to work in the code view. See examples of accessible form elements and their code. While it is possible to create labels using the Label option ( ) in the Toolbox sidebar, it is not recommentded. There are a few reasons for this:
   • The form will still not be as accessible as it will be if you add proper labels manually. This is because EW wraps the form element and the description in the <label> tag. The best approach is to use the the for and id attributes in conjunction with the <label> tag.
   • The Label option only works when descriptions are adjacent to form elements. Labels for non-adjacent elements (e.g., forms where descriptions are in different table cells) must be created manually using the for and id attributes.
   If you insist on using the Label option in the Toolbox, move the cursor to the front of the form element and double click the Label option. You will then need to enter the code view and move the closing </label> tag to the end of the form element and description. You can also try creating the label before you create the form element and description.
4. Repeat for all of your form elements. You may find it easier to create all the form elements and then add the labels or you may find it easier to add the labels as you go.