Making Your Pages Easier to Use

As well as adhering to standards, you should create pages and sites that are easy to use. There are many examples on the Web of sites where you seem to go round in circles trying to locate information, or where links to other pages seem to be hidden until you realize that some non-standard form of hyperlink is in use. Other issues you will have come across include sites where simply reading the content is hard work, because each page follows a different design and structural layout, uses strange fonts and colors, or covers the page with floating windows and other random features.

A good Web site should follow consistent design, with consistent interactive element styles. This allows visitors to roam the site with ease, making the experience more enjoyable and relaxing. It also means that they can concentrate on the content and find what they want more easily. This does not mean that your site must be boring or look like every other site. It does mean using a consistent structure, layout, color scheme, and linking metaphor.

Overall Site and Page Design

There are recurrent themes in terms of layout in many Web sites. The menu bar at the top, list of links or other navigation features on the left, and text links at the bottom of every page may seem to limit creativity, and you can certainly use an entirely different layout if you prefer. However, visitors will immediately recognize the commonly used layout patterns, making it easier to use your site.

Also, consider your user's screen size and browser window size, which may not be the same. Some users like to use the browser maximized, while others prefer to open multiple windows that are smaller than the overall screen size. Some users have portrait-mode screens, while the majority use either standard or wide-screen mode. In addition, although screen resolutions continue to increase, the majority of users are still working at 1024 x 768, or even 800 x 600.

One effect of these varying screen resolutions is that, if you use CSS or HTML tables to position elements rather than relying on the natural flow provided by HTML, you should test your pages at lower screen resolutions and in non-maximized browser windows to ensure that doing so does not affect the layout, appearance, and readability of the content. Also, check that long lines do wrap correctly, particularly when using code-style or preformatted text elements such as <code> and <pre>.

Some Web sites attempt to solve the variable screen resolution problem by deciding on a specific width for the main content area and then centering that area on the page so that (on high-resolution screens) blank areas appear on either side. This means that they will usually work fine at 1024 pixels wide, but either wrap or overshoot the screen in lower resolutions while forcing additional scrolling on users of large resolution screens because the content is in a band down the center of the screen. However, because very long lines of text are hard to read, this approach does have its advantages.

In the end, the best way to decide on a layout is to browse plenty of sites to see what they do, how they work, and whether they provide the appearance and capabilities that you want for your site in terms of layout and overall page structure.

Page layout and structure generally affect the browsing experience for disabled visitors even more than other users, as you will see later in this chapter.

Controls, Captions, Short-cut Keys, and Tab Order

In the next major section of this chapter, Supporting Disabled Users and Specialist User Agents, you will see recommendations on the positioning of text captions for interactive controls such as text boxes, list boxes, and radio buttons. However, one useful capability of HTML 4.0 and later, when building pages that use the various interactive form controls (such as lists, buttons, checkboxes, and text boxes), is to associate a text label with a control. This is one of the features of HTML and ASP.NET that you should aim to take advantage of in all your pages to provide behavior that is more consistent and that meets the needs of the maximum number of users.

Linking Captions to Interactive Controls

The Label control in ASP.NET exposes the AssociatedControlID property, which sets the for attribute in the <span> element that the Label control creates, and allows you to connect a label to an interactive element on a <form> in your page. For example, this declaration of a Label and TextBox control links the Label to the TextBox using the AssociatedControlID property of the Label control:

<asp:Label  Text="Name" runat="server"            AssociatedControl /> <asp:TextBox  runat="server" />

In a normal graphical browser, this has no effect. However, it allows nonvisual user agents and specialist page readers to link them together and indicate to users what the control caption is when they navigate to the text box. For this reason alone, you should consider always using the Label control and setting the AssociatedControlID property.

You can also use the Caption property of controls that generate an HTML table, such as Table, GridView, and Calendar, to generate a caption that automatically links to the control (this creates a <caption> element within the <table> element).

Implementing Short-cut Keys

In most modern browsers, you can define a hot key or short-cut key for the control and then display this key in the associated label to make the form more like a traditional Windows executable application (you saw the AccessKey attribute used in Chapter 10 in association with the Hyperlink control). You set the AccessKey property for the Label to the key you want to act as the hot key. You can also indicate this key to the user by underlining it in the Label text:

<asp:Label  Text="<u>N</u>ame" runat="server"            AccessKey="N" AssociatedControl /> <asp:TextBox  runat="server" />

Now, when the hot-key combination (in this case, Alt+N) is pressed, the focus moves to the TextBox control automatically. Likewise, you can set the AccessKey property of a control that creates an HTML table, such as the GridView, and underline a letter in the caption to indicate the short-cut key. You will see both of these techniques demonstrated in the example in the next major section of this chapter, Supporting Disabled Users and Specialist User Agents. However, you cannot use keys already defined for the various UI features of the browser. For example, you cannot use Alt+T in Internet Explorer, because it activates the Tools menu.

Setting the Tab Order

By default, the browser moves the input focus from one control to the next in the order they appear on screen, horizontally and then vertically, as you press the Tab key. If you use a table to lay out the controls in columns, the input focus moves across the rows and then down to the next row. However, you can control the tab order by setting the TabIndex property.

A value of zero (the default if not specified) indicates that the tab order is not set for this control. Other positive values define the order. When the user loads a page, the input focus is initially set to the address bar of the browser and then moves through the controls on the page in the order of their TabIndex values, starting with the lowest non-zero value. Afterwards, the input focus moves through the remaining controls in the order they appear in the page.

The TabIndex property is available for all the ASP.NET Web Controls, though it has no effect on controls that cannot receive the input focus. However, keep in mind that it applies to controls such as Hyperlink and LinkButton as well as the more usual text boxes, lists, and button controls. Again, you will see this technique demonstrated in the example in the next section of this chapter.