Eliminate date text in /calendar (squares) view

In the /calendar view, its redundant to list the date text in each square. Ideally, the date text would not print in this context.
2 people like
this idea
+1
Reply
  • Dan! It took wading through 3 pages of calendar-related topics, but this is exactly what I came on here to say. Any updates on this?

    Some calendar boxes really get out of control and this would help.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Yes, I agree. It will help. No update on this, but marking for a closer look during our next planning cycle. Thanks.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • You might remove it from the visual layout but keep the MM/DD/YYYY of the event in the DOM for non-visual users. As the monthly layout currently is, I think it would be very difficult for a screen reader user to know the day of the month an event is being held if the date was not there along with the start and end times.

    If other updates were made to the design (e.g. move the month & year to a caption element inside the table, add an id to each day of month and day of week & a headers attribute to each td referencing the appropriate header ids), then having the full date in the DOM along with the time could be less important. I bet adding those id and headers attributes is a lot more work.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • When the calendar page is viewed with styles turned off, the calendar still works as the month and year are in the header and the event is in the same cell as the day cell. If the time is kept and the full date is eliminated, it appears that accessibility is not affected.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • In your screenshot, "April 2015" is a header (h3) and fairly well positioned in the reading order but I think it would be even better if there was a semantic connection between the month and year and the contents of the table (i.e. "April 2015" being inside a table caption element.

    Looking at a live monthly calendar, I see the day-of-week headers have ids and the table cells have corresponding headers attributes so in your screenshot a screen reader user can hear that "Frontline with Faculty: J. Bryan Hehir" is in the Thursday column. But it's harder to tell that the event is on the second day of the month, the day-of-months are in separate rows from the event information and are not headers. If a screenreader user navigates from the cell containing the event title to the cell above, they might deduce that a cell containing nothing but the number 2 indicates the day of month but there's nothing to give them a stronger indication. It might actually be easier to deduce that the number 2 is the day if it wasn't in its own row but was inside the same table cell as the event titles. But I think best of all would be to make the day of month cells th instead of td and to add the ids of those table headers to the headers attribute of the td cell below it; so the cell with the "Frontline" event would have the attribute headers="Thursday os_events-2015-04-02-date-box" and a screenreader user might hear "Thu two" (I don't know how a screenreader would try to pronounce the abbreviation for Thursday).
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I think we should leave it as it is, but add CSS to push the redundant date offscreen but still readable for screenreaders. The solution would be very accessible and at the same time, non visibly redundant. More info below:

    "Hiding interactive content from visible display

    Hiding interactive (focusable) content from visible display using the off screen technique means it is not visible, but still in the tab order and causes issues for keyboard only users. Focusable content should only be hidden from visible display if the focusable element becomes visible when it recieves focus:
    Example code:

    a.offscreen
    {position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;}

    a.offscreen:focus
    {position:relative;
    left:0px;
    width:auto;
    height:auto;
    overflow:auto;
    }

    this link is offscreen unless it has focus

    Notes by Ted Drake, on use of the off screen technique described:

    Using negative position can create long scroll bars when localizing a site for a rtl language. Also, it uses CSS properties that are commonly used and easy to accidentally over-ride.

    The Yahoo Accessibility Lab recommends using clip for content that should be hidden from the visual user, yet available to screen reader users. Thierry Koblentz has a great article on this technique, as well as the underlying philosophy behind using the correct CSS techniques for hiding content. Clip your hidden content for better accessibility
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • This is awesome info Richard, and a great idea. Thank you. Will save a lot of time. 
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • From 4/23/2015 Accessibility Team review:
    Relative Importance = Low
    Suggested Priority = 9

    See Curtis Wilcox's comments; date info necessary for screen reader user. [Use off-screen tag; just remove from visible text]
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • This reply was removed on 2016-03-10.
    see the change log