Skip to Main Content

 Indiana University


Archive for the 'XHTML' Category

Using JavaScript to create a dynamic tab-based webpage

Have you ever been to a web page where you can click on buttons or tabs that swap content on the page without having to load an entirely separate web page? Have you ever wondered how to make your own page have similar behavior?
Well, there’s good news and bad news. The bad news is that you’re going to need to write a bit of javascript to get this to work, and if you don’t know javascript, I can understand your reflex to just close this tutorial right now– but hold on! The good news is that it’s simple and doesn’t require an in-depth understanding of javascript to get this working.

Prerequisites for this tutorial:
A moderate understanding of XHTML and CSS

(more…)

Web Accessibility Made Easy: Lists

This blog post in the “Web Accessibility Made Easy” series describes how to appropriately use lists… a common feature of Web sites. Although helpful, lists are not always coded correctly.

Lists

HTML lists are an accepted way to outline or organize information into related groups on a Web page. Lists are a particularly helpful means of organizing navigation links. There are three list sub-types: unordered, ordered and definition. Unordered lists, which are proceeded by a bullet, may be the most common type of list. Ordered lists are more commonly recognized as numbered lists.  Definition lists are a special list type, created to order and organize term/definition pair sets.  Below are examples of each type of HTML list. For more information on HTML lists, please consult the W3C HTML 4 List page.

Unordered:

  • Fred
  • Joe
  • Johnny

Ordered:

  1. Joe
  2. Fred
  3. Johnny

Definition:

Sesquipedalian

Given to using long words.

Hortatory

Marked by strong urging; serving to encourage or incite

Note: The Definition list has been faked above because the HTML definition list element is not recognized by WordPress.

Lists, whether unordered, ordered or definition, need to have opening and closing tags to be valid HTML lists and render correctly to user agents including internet browsers and screen-reading software.

Code Example:

<ul>
<li>Fred</li>
<li>Joe</li>
<li>Johnny</li>
</ul>

Many developers create fake lists using images and CSS style rules to create the visual appearance of a list.  This creates navigation roadblocks for screen-reader users, especially if there are multiple lists coded in the same manner.   However, with correctly coded lists, screen-reader users can jump from list to list using keyboard shortcuts for easy navigation. In addition, screen-reading software announces how many items are in each list and if nested lists are present, allowing screen-reader users to understand the hierarchical structure of the list.  For these reasons and many others, lists should always be properly coded, after which, the developer can use CSS style rules to control their visual appearance.

Guideline

IU Web Accessibility Guidelines

18. Mark up lists and nested lists properly.

Tutorial

This tutorial will be using both the Bad example web page and the  Good example web page, along with their associated style sheets.

1.   The bad code – Fake lists coded with images and CSS.

In the code below there is no actual list; the list is faked.  To a screen-reader user, each bullet of this fake list would be read out, “img/bullet,” which would get annoying to any person.  Instead of using <img> tags, the developer should have created a HTML list and used CSS style rules to change the bullet to an image.

<img src="img/bullet.jpg" width="7" height="7" />Learn about the federal statues<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Research free and commercial tools that can aid you<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Participate web accessibility training<br />
<img src="img/bullet.jpg" width="7" height="7" class="float-left" />Design the web site according to the standards provided<br />

2.   Create correctly coded HTML lists.

Add the opening and closing tags <ul> and </ul>. Then, replace the <img> and <br/> tags with <li> and </li> tags.  The CSS style declaration below changes the bullet into the chosen image.

<ul class=“cbullet”>
<li> Learn about the federal statues </li>
<li> Research free and commercial tools that can aid you </li>
<li> Participate web accessibility training </li>
<li> Design the web site according to the standards provided </li>
</ul>

CSS Style declaration:

.cbullet ul {

list-style-image: url(img/bullet.jpg);

}

Note: Having an image as a bullet does not affect how screen-reading software announces the list items.

Wrap Up

Properly coding all lists is an easy way to improve the accessibility and navigability of a Web site without impacting the visual design.  Properly coded HTML lists are particularly important for screen-reader users.  In addition, coding lists items properly helps web pages to validate and ensures the Web page renders accurately in any Web browsing software.

Web Accessibility Made Easy: Tab Order

This entry in the “Web Accessibility Made Easy” series discusses an HTML attribute many web developers may overlook… tab order.

Tab order and tabindex

Tab order or “tabbing order”, “defines the order in which (HTML) elements will receive focus when navigated by the user via the keyboard.” (Tabbing navigation, W3C) All elements that by specification or scripting can receive focus will be present in the tab order. The tab order works with the following elements among others…. (more…)

Web Accessibility Made Easy: Form Labels

This entry in the “Web Accessibility Made Easy” series will discuss explicitly associating a label with a form control.

Label Elements

The <label> element is an HTML element that defines a label for a specific control on a form.  There are two different ways to use label elements to associate a form control with a meaningful, control specific label. The first way is to associate the label element’s “for” attribute with the corresponding “id” attribute of the form control.  The second way is to give the form control a title attribute, using the label description as the title.

Associating labels with form controls is essential to screen-reader users. Without explicit labeling of form controls, these users would have to guess what kind of information should be entered in each form control. (more…)

Web Accessibility Made Easy: Primary Language

This entry in the “Web Accessibility Made Easy” series will discuss setting the primary language of a web page and how to deal with language changes.

Language Attribute

The Language attribute of HTML, lang=”fr”, identifies the language of the document to user agents (browsers, search engines, assistive technology), in this case to French. Including the language attribute in the <html > tag at the beginning of a document sets the primary language for the entire document.  If the document will adhere to the XHTML specification, the xml:lang=”fr” language attribute should also be included. The xml:lang attribute is the standard way to identify language information in XML. Subsequent use of the language attribute changes the primary language to a different language, but only for that HTML element.  Language reverts back to the primary language at the end of the element.  

(more…)

Web Accessibility Made Easy: Headings

This entry in the “Web Accessibility Made Easy” series addresses the use of headings to add structure to the content of Web pages.

Headings

HTML headings have been part of the structure of an HTML document from the beginning.  The heading tags <H1> through <H6> are meant to give web documents structure. Therefore, headings should be properly nested to assign level of importance in the structure of the Web page.   (more…)

Web Standards Smackdown: XHTML2 vs. HTML5

Standards Smackdown: XHTML2 vs. HTML5Way back in July, the W3C (the governing organization of web standards) announced that it was not going to renew the charter of the XHTML2 working group. In non-bureaucracy speak, that means the W3C has stuffed XHTML2 standards development into a bottle and chucked it out to sea, where it will spend the rest of eternity bobbing on the waves and following the thermal currents. The W3C did this so that it could focus all of its attention on developing HTML5.

“Wait a minute, ” one might shout on hearing this news, “I thought XHTML was the wave of the future, and HTML was what Cro-Magnons used to code their web pages??? What’s going on?”

Its easy to be confused, and, yes, even a little bit alarmed by this news. But, in essence, the labels here don’t really represent what you think they do: XHTML2 isn’t really XHTML as you know it, and HTML5 encompasses a lot more than HTML4.01. Here’s what you need to know about both of these standards: (more…)

Tag, you’re it! The Dreamweaver Tag Chooser

Web authors have a wide variety of HTML or XHTML tags to work with when creating Web pages. In addition to common tags like <p>, <ul> or <strong>, there are lesser-known, but still useful ones such as those below:

HTML/XHTML Element Use
<acronym> An acronym
<cite> A citation to a document such as a book or magazine
<code> A code sample
<dfn> A term that is being defined
<q> A short, inline quote
<sub>,<sup> A subscript and superscript

There are dozens of similarly useful and perfectly valid elements available for use. Some of them, such as <code>, have a default style in most browsers (<code> will render in a monospaced font). Others such as <acronym> have no default style. However, you can use the tags as hooks to add your own style by redefining the look of the element using CSS.

(more…)

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.