Developing Johan’s Accessible Calendar

These examples relates to the Accessible Calendar with Selection of Weeks topic on Accessify Forums. They are attempts to improve the accessibility and usability of the solution he proposed, testing my knowledge of accessible techniques and attempting to simplify Web form design.

The examples included are:-

1. Table Version One - modified version of Johan’s selection.
2. Table Version One Point One - adds labels to all dates for easier selection of weeks.
3. List with Multiple Selections - removes requirement of tables and uses a "list box" interface instead.
4. Checkboxes - simplifies the form even further by simply using a list of trusty checkboxes.

Banner Advert Schedule (Table Version One)

You may select the week or weeks you would like to run the banner advert from the table below (or skip the table). Ticking a box will select the week on that row.

Table version one ends. Thank you for making your selection.

Banner Advert Schedule (Table Version One Point One)

The following table (skip the table) demonstrates the use of several labels for each input. By using these labels with the checkbox in each row, it can be accessed by clicking on any cell within that row. It creates a massive amount of extra code, though.

Table version one point one ends. Thank you for making your selection.

Banner Advert Schedule (List with Multiple Selection)

Because <table> elements should not be present in <form> elements when using Extensible Hypertext Markup Language (XHTML), the above calendars should not really be used. Placing form controls amongst a table structure makes them difficult (although not impossible) for some technologies to access.

An alternative solution to this is to use an open list. A drop down list should not be used and scrolling should be minimal to make the interface easier to work with. The below example (skip the example) demonstrates how an accessibile form might be created. The <form> element is not included because there is no backend supporting this example. :-)

List example ends. Thank you for making your selection.

Banner Advert Schedule (Checkboxes)

the following example (skip the example) implifyies the form further. The design has now come full circle, leading me back to the start in some ways. The original concept of using checkboxes can be synthesised with the idea of using common controls to radically simplify the form. All it really needs are the checkboxes, in a list, with descriptive labels. Cascading Style Sheets (CSS) can be used to style them as required.

Checkbox example ends. Thank you for making your selection.