Accessible Calendar with selection of weeks
Can some one please critique my calendar with week selection? When researching calendars in general there really isn’t much information around: www.johandesilva.co.uk/calendar.htm (Greyed out area are fully booked)
JAWS seems to read it too well, it reads all the numbers with the "col" and it seems to take ages. Because of this is not the best solution for screen readers but its best for visual users. One over the top solution would be is to replace the numbers with images and have a short description of the week in an ALT tag (yuck!).
Johan De Silva / Portfolio
Share: 
Bit off subject from what you want, but thought this may be of interest to you f you do not know it already: A CSS Styled Calendar--
[size=9]Kyle J. Lamson
Analyst/Programmer III, State of Alaska
Share:
I know this is just an example, but your <style> and <script> elements should be in the <head> section and not the <body> section. You cannot place a <p> element inside the <table> without putting it in a <td> or <th> element. Because the paragraph is a link to skip the table, I don't think it should be in the table anyway.
The background colour change on mouse hover is inaccessible to keyboard users. Also, it is poor usability since an element which changes on mouseover indicates that this element accepts mouse input. If an element does not accept mouse input (such as your table cells) then it should not respond to mouse events, imho.
The checkboxes don't have labels, which means that there is a very small target area to try and click. This is a usability problem as well as an accessibility problem because it is hard for anyone to click such a small object. The highlight is done with Javascript, so this feature will be inaccessible to users who have disabled Javascript. There is no header text for the column of checkboxes, which makes their purpose difficult to understand because their relationship to the caption is unclear.
| Code: |
| <th scope="col" abbr="Check Box"></th>
<th width="80" scope="col" abbr="Sunday">Month</th> <th width="30" scope="col" abbr="Monday">Mo</th> <th width="30" scope="col" abbr="Tuesday">Tu</th> <th width="30" scope="col" abbr="Wednesday">We</th> <th width="30" scope="col" abbr="Thursday">Tr</th> <th width="30" scope="col" abbr="Friday">Fr</th> <th width="30" scope="col" abbr="Saturday">Sa</th> <th width="30" scope="col" abbr="Sunday">Su</th> |
The first column has an abbreviated version (which isn't actually abbreviated) but the header has no content. Giving this a header of something like "Selected" might work better.
I would suggest changing the layout of your table, too. Instead of having a row of headers across the top and the checkboxes in neutral cells down the left side, I would move the checkboxes to the right. This puts them in line with the decision process the user has to make; the user must analyse the contents of the row before they can decide whether they want to run the banner in that week.
With the checkboxes moved to the right, the month names now occupy the left. This puts the primary information (days and months) on the top and left of the table, making it easier to navigate. Now, I would argue that the months are as much a heading as the days are, so they should also be marked up as <th> elements as well.
Finally, I would suggest giving an explicitly associated <label> element to every checkbox so that the clickable area was large and their purpose was clearer. You might choose "Select this row" or "Select this week" as the label text, as examples.
The fixed widths won't suit some devices, particularly small screens. It would be more efficient to set the widths in CSS. Using CSS for presentation like column widths would allow you to use XHTML 1.0 Strict. XHTML 1.0 Transitional is pretty much a waste of time.
Because it's such an interesting and complicated concept to work with, I'll make an example of how I think it should be done. Then we can both get told off by the people who actually know what they are doing.
(EDIT) I have uploaded my own ideas about the calendar and validated the code to check it was generally alright from a code perspective. Whether it is any more accessible or usable is another matter, of course. A big problem with using a table for the checkboxes is that <table> elements are not allowed inside <form> elements, IIRC.
Perhaps it would be better to use a list (not a dropdown) and make a multiple selection of dates within it? As long as the page explains how to use the control, it should be alright.
Share:
Just as a matter of interest (though not of necessarily practical use), in certain excellent browsers (read Gecko) you can style select boxes to look like a calendar:
http://www.jasonkarldavis.com/scripts/calendar.xhtml
Share:
Thats a mighty good job you have done there and the screen reader makes more sense now. For implementation I have chosen something in-between to send to the developers but will revisit this in another version of the site because even though tables is the text book option for calendars we have seen some limitations with tables, I would have liked to do is span the label across the entire row (invalid) so you can click on the dates to selected the entire week and add JavaScript to highlight.
I think the JS mouse over I did, did not prevent accessibility… the equivalent for blind users was the use of correct table mark-up…possibly.
Johan De Silva / Portfolio
Share:
Although you cannot span the label across the entire row, many labels can refer to the same element using the for="input-ID" attribute. I have updated my accessible calendar ideas to include a second version which does this.
I have also added a multiple selection list example and a simple list of checkboxes. I think they might make for a more accessible and usable alternative than a complicated, table-based form which has more detail than may be necessary. IE does not disable the select list item which has disabled="disabled" and does not resize the text inside the select list, either.
I think the list of checkboxes is a pretty good solution. It's a proper form, it's extremely light on page size, the text resizes as expected, it's a very conventional control and has been part of HTML for a very long time.
Share:
They are all good solutions. My target users are not very technical ands so the table solution is still best because the table gives a visual user a much better representation of what they are getting when we user tested them a few weeks ago (sample of only 5 users as our budget for testing prototypes is sadly zero and a cups of cofee). This may reduce support and invoicing queries that we get quote a lot (accountants are more expensive!). For this update I have added the revised version: www.johandesilva.co.uk/calendar.htm
The “table ends” is a very useful for my screen reader… its one of those things I would try and hide as it serves no use for visual users.
Thanks you for you help.
Johan De Silva / Portfolio
Share: