Accessibility of Month Grid Toggle and Lightbox options

  • Loving the popup/lightbox option for additional details on the month view. It’s a great way to keep the calendar display compact.

    However, there’s a huge accessibility issue with this option – essentially the entire month grid is not keyboard navigable at all in this mode.

    I understand why you have done it how it is – there is one set of markup for all the 3 different toggle options: description displayed inline, with a toggle, and in a lightbox. But this means the clickable title for the lightbox is a <span> not a <button> or <a> (which would make things better for keyboard navigable by default). Using the span for the clickable lightbox element can be kept as it is and made accessible if some additional accommodations were made for it in terms of accessibility.

    Some possible approaches:

    • Keep the clickable <span> elements as they are, but add tabindex="0" to make them focusable
    • Introduce a <button> element that would trigger the toggle and lightbox actions, and could be hidden in inline description mode.

    And in either case:

    • add proper Aria tags throughout: aria-label,?aria-labelledby, aria-expanded, aria-controls, aria-hidden, etc.

    Let us know what you think of this and if there’s anything we can do to help with implementing or testing it.

    (here’s the shortcode we are using, for reference:)

    [ics_calendar eventdesc="true" location="true" organizer="true" reload="60" showendtimes="true" toggle="lightbox" url="webcal://outlook.office365.com/owa/calendar/{our-url}/reachcalendar.ics"]

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author room34

    (@room34)

    This is a good suggestion. I will look into adding tabindex="0" to all clickable/tappable elements that are not inherently focusable.

    Thread Starter squarecandy

    (@squarecandy)

    Sounds great, thanks for looking into it!

    Here’s some info about using aria-expanded if you wanted to implement that at the same time to help out screen reader users:

    https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/

    Plugin Author room34

    (@room34)

    @squarecandy Version 10.12.0 will be available momentarily, with tab accessibility added to the calendar views. There are a couple of caveats at this time:

    1. There are still some issues with tabbing into event descriptions that contain links.
    2. Adding the JavaScript to effectively change the aria-expanded value between false and true posed some challenges that I will need to dig into further. So for the moment I have only included the aria-haspopup attribute.
    Thread Starter squarecandy

    (@squarecandy)

    Fantastic, thanks. We will take a look and test it later this week.

    Thread Starter squarecandy

    (@squarecandy)

    Thanks for the work you’ve done so far on this. It’s an improvement for sure. Some feedback/additional fixes to what you have implemented:

    • tabindex="0" is now assigned to every title no matter what. This seems wrong as only some of them do something. It should only be applied to the items with the .has_desc class – so that only items that operate as a toggle for a lightbox or expanding section can be focused.
    • The workflow in term of the tab order of things on the page works well when you first arrive. It also successfully focuses on the X/close button when you open it. However – once you close it, focus should be placed back on the .title.has_desc item you clicked on. This would let keyboard only users browser around the calendar easily. Give it a try – try to explore multiple popups using just the keyboard and not touching your mouse at all. You’ll see quickly how frustrating it is to have focus moved back to the top of the page when you close the lightbox.
    Plugin Author room34

    (@room34)

    Good suggestion on only tabbing to events that have descriptions. That should be easy to implement in the next update.

    As for re-focusing on the item the user tapped on… easier said than done with how this is constructed. I actually spent about an hour trying to get that working but kept running into issues, and ultimately decided to release what I had without it, just to get it out there for now. It’s still on the to-do list.

    Thread Starter squarecandy

    (@squarecandy)

    Sounds great, thanks again for looking into this.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Accessibility of Month Grid Toggle and Lightbox options’ is closed to new replies.