LESSON 3: How to build a web page with presence and accessibility

Understanding web accessibility    Page 1 of 5

Welcome back. In Lesson 2, you learned how to create, rename and use CSS styles. In this lesson, you'll learn about web design standards and accessibility requirements. They help ensure your web pages are usable by persons with disabilities and that your pages are accessible across different browsers and using a variety of devices.

There are two primary factors that drive the need for standards in web design today. The first is Section 508 of the U.S. Rehabilitation Act, which requires that electronic and information technology be accessible to individuals with disabilities. To help web designers comply with Section 508, the World Wide Web Consortium (W3C) developed a set of standards called the Web Content Accessibility Guidelines (WCAG).

The second factor driving the need for standards is the proliferation of web technology. Web pages are no longer viewed in only one or two web browsers. Today, people can access your website from any number of web browsers and using different technologies, some of them with tiny screens, others with audio-only output. The WCAG is intended to help web developers, page authors and site designers develop web content that's accessible to persons with disabilities; however, using these guidelines also helps ensure that web content is accessible across a wide range of browsers, mobile phones, vehicle-mounted displays and so on.

Because web users might be limited in how they access web content, either by disability or by the technology used, it's important to design websites that transition from one display mode to another gracefully and without reducing the effectiveness of the content.

Some of the limitations considered by the WCAG are:

The WCAG is fairly simple to follow if you adhere to some basic principles of good website construction:

1. Use style sheets to control as much of the look of your website as possible.
2. When adding images, video or audio files to your pages, include alternative text.
3. Keep language clear and simple.
4. Don't use color alone to indicate meaning or differentiate between areas of a page.
5. Be sure that any new technology works well in multiple web browsers.
6. Offer direct access to embedded user interfaces.
7. Don't design your pages for a specific device or viewing method.

For a more comprehensive understanding of the WCAG, visit the W3C Web Content Accessibility Guidelines web page.

Microsoft Expression Web is designed with these guidelines in mind. As you'll see, the software includes several options that make it easy for you to meet various requirements. The next section shows you how to validate your web pages to ensure you meet accessibility requirements.

Validating web pages for accessibility    Page 2 of 5

Whenever you create or change web pages, you should validate them using the Expression Web Accessibility Checker tool. The Accessibility Checker validates your pages against WCAG standards and generates accessibility reports, which you can print or save as a separate HTML document. By running these reports and correcting any errors found, you can be sure your website will be usable regardless of who's accessing it.

Using the Accessibility Checker

With your website open, you can check it for accessibility issues by running accessibility reports. Here are a few ways to accomplish the same task:

The Accessibility Checker dialog box appears, as shown in Figure 3-1.

Figure 3-1: Accessibility Checker dialog box.

In the Accessibility Checker dialog box:

1. Tell Expression Web where you want to check for errors. In the Check where section, you can select to run a check on all pages in the website, only the pages you currently have open, selected pages (you can select the pages you want to check in the Folder List task pane) or just the current page.
2. Tell Expression Web which errors you want to check for. You can configure options in the Check for section so the checker reports errors against:

3. Tell Expression Web which type of problems you want to see in the reports. In the Show section, you can select:

4. When you're finished selecting options, click Check to run the report. When the report is finished running, the Accessibility task pane opens, as shown in Figure 3-2.

Figure 3-2: Sample accessibility report in the Accessibility task pane.

The Problem Summary column on the right in the task pane describes each error and how to fix it. Just follow the instructions and re-run the accessibility report until no errors are reported.

Now that you understand accessibility reports, you're ready to tackle web browser incompatibilities. First, in preparation of that discussion, you'll explore an important part of web page creation: document types and schema.

Exploring document types and schema    Page 3 of 5

To understand how to create web pages that conform to W3C guidelines, you first need to understand web page document types and schema. There are several schema languages in use on the World Wide Web. However, in the context of this lesson, the schema refers to the description of the web page document, which includes its document type and format (also called document type definitions).

HTML and XHTML document types

HTML is the primary language used on the web. It is a collection of tags that denote how text and imbedded files, such as images and videos, should appear in the browser window. Expression Web supports the HTML version 4.01 for Strict, Transitional or Frameset document type formats. These versions are the current standards readable by modern web browsers.

XHTML is a standards-based form of HTML tags using XML structure. In XHTML, the rules of XML code structure are strictly enforced. Using XHTML makes the code for your web pages cleaner, more efficient and accessible across different web browsers because the rules of XML encourage the use of style sheets rather than presentation-based tags.

Expression Web supports XHTML version 1.0 for Strict, Transitional or Frameset formats and version 1.1.

Strict format

Strict format for HTML and XHTML is the most current standard recommended by the W3C. Modern browsers support strict formats better than any other format. This is because strict format doesn't include presentational tags such as <font> and <b> (for bold), which might have different appearances in different browsers. Instead, it relies on style sheets to determine how different elements should look. Using strict format ensures that your website will appear the same in all modern browsers.

Transitional formats

The transitional formats of HTML and XHTML are more forgiving. They were originally designed to ease the change from earlier versions of HTML, which were based on Standard Generalized Markup Language (SGML), to XML-based XHTML. Transitional formats let you use presentational tags like <font> for applying a font to the marked text; you also can use attributes like align and bgcolor on table elements.

Framesets

Expression Web supports the use of framesets to create web pages. Framesets let you build pages that are comprised of multiple independent HTML documents. In a frameset, you have to define a target frame for your hyperlinks. For example, you can build a frameset consisting of a navigation page and a content page. The navigation page would remain static, whereas the content page would change depending on which link the viewer clicks.

To set up a frameset, select File > New Page. Select Frameset for the page type, and then select a frameset template with which to work.

Some web browsers don't handle framesets cleanly, so Expression Web lets you define a "No frames" statement. This lets users access your website in a non-frames mode.

The framesets formats for HTML and XHTML are more flexible in the coding allowed. In frameset format, the <body> element is replaced by the <frame> and <no frames> elements. In a frameset document, you can have multiple frames, whereas in a strict or transitional document, you can have only one body.

Now that you understand the main document types and schema involved in web pages, read on to put this information to use to reduce or eliminate web browser incompatibility issues.

Understanding and reducing web browser incompatibility issues    Page 4 of 5

Since commercial use of the internet started, web browsers have become increasingly sophisticated. Likewise, HTML, the primary language of web pages, has grown to accommodate an ever-expanding choice of design options. In the early days of the internet, only a few web browsers were on the market. Because each web browser can interpret and render web pages differently, the same web site could look drastically different from one browser to the next.

Although most modern web browsers have eliminated many of the issues involved in web browser incompatibility, some problems still exist. Therefore, to make your website adjust for the differences in web browser technology, it's important to conform to the standards recommended by the W3C.

You can find out more about W3C website recommendations on the W3C.org website.

Expression Web helps you conform to the W3C recommendations by using built-in Authoring preferences, which tell Expression Web which coding language (document type) to enable, its format and the CSS version you want to use.

Expression Web can automatically code your web pages to follow specific schema and doc types. This means that after you tell Expression Web which doc type, format and CSS version to code for, you can work in Design mode without worrying about the underlying code. These settings are available on the Authoring tab of the Page Editor Options dialog box, which is shown in Figure 3-3.

Figure 3-3: Page Editor Options, Authoring tab.

To configure these settings:

1. Select Tools > Page Editor Options from the main menu.
2. Click the Authoring tab.
3. Use the Default Document Types setting to determine the type of blank document opened when you use the New Document toolbar button (or press the Ctrl+N key combination) to create new documents. This lets Expression Web use shortcuts to open the type of document you create most frequently. Select from HTML, ASPX, CSS, XML or Text File. When you first install Expression Web, this option is set to HTML by default.
4. Use the Doctype and Secondary Schema settings to define the doctype statement written into the top line of code for each page. An example is shown in Figure 3-4.

Figure 3-4: A doctype statement in Code view.

The doctype statement tells web browsers which type of document it's reading and the language version in which the code is written. The doctype statement also helps you to validate your web pages. If a tag that's not defined in the current version of the language is used in the document, Expression Web gives a warning by underlining the bad code with a red squiggly underline, much like Microsoft Word underlines misspelled words in a document.

5. Use the Secondary Schema to select a version of HTML, XHTML or Internet Explorer to code for. If no doctype statement is included in the page code, or if the doctype statement is unrecognizable, Expression Web relies on the Secondary Schema to determine whether tags are valid.
6. Use the CSS Schema settings to select a version of CSS to be used in your pages. Expression Web supports CSS versions 1.0, 2.0, 2.1 and IE6.
7. After selecting settings, click OK to apply them.

Now that you know how to configure Expression Web to reduce or eliminate web browser incompatibilities, it's time to find out how using Expression Web can help your website adjust to the ways in which people interact with the web using different devices.

Presenting data in multiple formats    Page 5 of 5

To stay competitive in a today's web market, your website needs to be usable in a variety of conditions. Your web pages, therefore, have to adapt to all of the technologies your target audience uses, from large desktop monitors with full web browser functionality to tiny text-only hand-held devices. Expression Web is designed to help you create your website to be presented in multiple formats.

Rather than designing your site to accommodate web browsers with the least functionality, you can set up data views and conditional formatting, therefore limiting the type and amount of data displayed.

XPath Expression Builder

XML Path Language (XPath) is a simplified language used for locating tags, elements or attributes in XML documents. XPath uses the logical structure of XML to create paths to specific items within the document.

Manually creating XPath Expressions requires significant understanding of both XML and XPath; however, Expression Web's built-in XPath Expression Builder creates the XPath expression for you. You use simple drag-and-drop techniques, option lists and dialogs, and then Expression Web writes the code.

XSLT support

XSL Transform (XSLT) is a method for creating a visual format for raw XML files. You can add XML files into your HTML pages by just dragging the XML file from the Folder List task pane into the Editing window. Expression Web automatically creates XSLT and JavaScript files for you when you save the HTML document. These files make the XML portion of your page viewable in the web browser window.

Moving on