Microformat Examples

Examples explained in the article, hAccessibility.

datetime-design-pattern issues

The following hCalendar examples demonstrate problems using the datetime abbr-design-pattern with ISO-formatted dates.

hCalendar example with abbr-design-pattern

This hCalendar event uses the abbr-design-pattern to house machine-readable ISO date stamps. It is inaccessible in screen readers when the title attributes are read literally. It also has the unfortunate side effect of showing ISO gibberish tooltips to sighted users.

Time: March 12th from 8:30 AM to 9:30 AM in Conference Room 2.

hCalendar event with object param

This hCalendar event uses data objects to house machine-readable ISO date stamps. It does not cause an accessibility issue with any tested screen reader, but has some minor display bugs in current versions of Internet Explorer and WebKit (Safari).

Time: March 12th from 8:30 AM to 9:30 AM in Conference Room 2.

hCalendar event with object param and browser fixes

This hCalendar event uses data objects to house machine-readable ISO date stamps. One additional span element is added to workaround the Internet Explorer and WebKit bugs.

Time: March 12th from 8:30 AM to 9:30 AM in Conference Room 2.

hCalendar event with span title

This hCalendar event uses a span title to house machine-readable ISO date stamps. It has the side effect of showing an ISO gibberish tool tip to GUI browser users, but is much less likely to be spoken to users of screen readers.

Time: March 12th from 8:30 AM to 9:30 AM in Conference Room 2.

hCalendar event with empty span title

This hCalendar event uses the title element of an empty span to house machine-readable ISO date stamps.

Time: March 12th from 8:30 AM to 9:30 AM in Conference Room 2.