The documentation said to put issues here. The calendar pages are created with out-of-order heading levels - All Events is H5 and dates below that are H3. Here’s the info and links:
Standards and Guidelines
The documentation said to put issues here. The calendar pages are created with out-of-order heading levels - All Events is H5 and dates below that are H3. Here’s the info and links:
Standards and Guidelines
Hi Robyn,
Thanks for writing here—In general, LiveWhale is built with accessibility in mind and we aim to meet the WCAG 2.1 AA and Section 508 standards. Our “out of the box” core theme should meet that criteria and beyond that the front-end website calendar code can be modified by clients after installation as well. There’s more information about accessibility and our approach in our docs here: Accessibility - LiveWhale Support
For your specific question as it pertains to the calendar pages heading levels: Our core theme has header hierarchy that is ordered but may skip some header levels—we don’t internally consider skipped headings a WCAG failure based on our reading of the spec, but we do make it themeable since everyone’s main nav etc have different headers.
Every school’s template that we work with treats h1/h2/h3/h4/h5 somewhat differently, and some schools are stricter about header hierarchy than others. As such, we generally don’t treat this as an “accessibility blocker” but instead as a theming task, with our role to make sure we’re making it as easy as possible to customize header hierarchy to meet each school’s needs.
Often, these are editable in spots like the calendar header (_i/themes/global/components/calendar/lw_cal_header.html, to replace that h5 with your preferred h#) or the main calendar template (/_i/themes/global/includes/main.html) and individual event listing component (_i/themes/global/components/calendar/lw_cal_event.html) are spots you might look to add/edit/remove header markup from your theme. Hope this helps! Feel free to reply here if you run into any questions editing those templates or components. Thanks,
Rachael
On that page it says
You can report accessibility issues to the team using the support forum. Accessibility bugs get added to our roadmap at no cost to you, provided they meet these criteria:
So that’s what I did. Your message above seemed to indicate that you wanted to know when accessibility issues are found.
I don’t know how other colleges are able to ‘treat headers differently’ since it is an A and AA requirement. Any school receiving federal funds is required to meet basic requirements. From my extensive accessibility work, I very much disagree with your assessment “we don’t internally consider skipped headings a WCAG failure.”
The WAVE web accessibility evaluation tool from Web AIM explains the “why” of it this way:
Headings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.
https://webaim.org/techniques/headings/
https://www.w3.org/WAI/WCAG22/Techniques/general/G141
Our out-of-the-box core theme did NOT meet this criteria, which is why I’m writing this. Having “All Events” as H5, then the date headers below it as H3 is not something we chose.
I will continue to work to find and fix this issue, but it wasn’t my error. In a quick look of the three files you list above I don’t see any references to H5 so I’ll have to continue to dig.
Sure thing and thanks for your feedback here—Ah, I see what you mean now: yes, the core component for header defaults to h5 and the date headers for week view beneath that are h3. That could be improved upon, for sure. I’ve filed that as an accessibility bug for our team to fix in core. Assuming there’s no backwards-compatibility issues with a change to that component, I expect it’ll be fixed in our next minor/patch release (released in the next few months) – if there is a backwards-compatibility concern, it’ll go into our next major release.
In the meantime, a quick fix would be to copy lw_cal_header.html from the core theme (/livewhale/theme/core/components/calendar) to your global theme (/_ingredients/themes/global/components/calendar/) and then you can replace the h5 with h2 or div, if you prefer.
If that’s giving you trouble, feel free to use the Help Request form and we can check it out in a more hands-on way.
Thanks Robyn,
Rachael