ADA Compliance – H3 before H2

Resolved

(@dbott)

Hi…

Trying to make our site ADA Compliant as we are being sued seeing that the site was not accessible enough for a blind person to use. It’s a money grab thing where a layer got a blind person to file actions against so far 22 Mom and Pop Campgrounds in NY. (Can’t make this stuff up.)

Anyway…In the My Calendar there is a Heading tag “out of order” where it has an H3 before and H2 and that is a NO NO and is flagged as non-compliant.

The link I provided will open to WAVE which is used for testing and you can see the issue of where it is flagged.

I am trying to find where I can change the code and not having much luck.

Issues: h3 without h2; <h3 class='event-title summary' id='mc_1780-title'><a href='#mc_calendar_29_1780-calendar-details' class='et_smooth_scroll_disabled url summary'>Thanksgiving Dinner</a></h3><h3 class='event-title summary' id='mc_1996-title'><a href='#mc_calendar_30_1996-calendar-details' class='et_smooth_scroll_disabled url summary'>Hand 'n Foot card game</a></h3><h3 class='event-title summary' id='mc_1920-title'><a href='#mc_calendar_05_1920-calendar-details' class='et_smooth_scroll_disabled url summary'>Coffee & Donuts</a></h3><h3 class='event-title summary' id='mc_1779-title'><a href='#mc_calendar_05_1779-calendar-details' class='et_smooth_scroll_disabled url summary'>HAUNTED HOUSE</a></h3><h3 class='event-title summary' id='mc_1766-title'><a href='#mc_calendar_07_1766-calendar-details' class='et_smooth_scroll_disabled url summary'>Ladies Monthly Luncheon</a></h3><h3 class='event-title summary' id='mc_1997-title'><a href='#mc_calendar_07_1997-calendar-details' class='et_smooth_scroll_disabled url summary'>Hand 'n Foot card game</a></h3><h3 class='event-title summary' id='mc_1816-title'><a href='#mc_calendar_10_1816-calendar-details' class='et_smooth_scroll_disabled url summary'>Monthly Potluck Supper</a></h3><h3 class='event-title summary' id='mc_1921-title'><a href='#mc_calendar_12_1921-calendar-details' class='et_smooth_scroll_disabled url summary'>Coffee & Donuts</a></h3><h3 class='event-title summary' id='mc_1778-title'><a href='#mc_calendar_12_1778-calendar-details' class='et_smooth_scroll_disabled url summary'>Kids Candy Bar Bingo</a></h3><h3 class='event-title summary' id='mc_1772-title'><a href='#mc_calendar_12_1772-calendar-details' class='et_smooth_scroll_disabled url summary'>HAUNTED HOUSE</a></h3><h3 class='event-title summary' id='mc_1777-title'><a href='#mc_calendar_12_1777-calendar-details' class='et_smooth_scroll_disabled url summary'>Adult Bingo</a></h3><h3 class='event-title summary' id='mc_1998-title'><a href='#mc_calendar_14_1998-calendar-details' class='et_smooth_scroll_disabled url summary'>Hand 'n Foot card game</a></h3><h3 class='event-title summary' id='mc_1776-title'><a href='#mc_calendar_16_1776-calendar-details' class='et_smooth_scroll_disabled url summary'>Haunted Wagon Ride Ticket Sales for Seasonals</a></h3><h3 class='event-title summary' id='mc_1774-title'><a href='#mc_calendar_18_1774-calendar-details' class='et_smooth_scroll_disabled url summary'>Haunted Wagon Ride Ticket Sales for Overnight/Weekend Campers</a></h3><h3 class='event-title summary' id='mc_1773-title'><a href='#mc_calendar_19_1773-calendar-details' class='et_smooth_scroll_disabled url summary'>Halloween Fun Fest Weekend</a></h3><h3 class='event-title summary' id='mc_1922-title'><a href='#mc_calendar_19_1922-calendar-details' class='et_smooth_scroll_disabled url summary'>Coffee & Donuts</a></h3><h3 class='event-title summary' id='mc_1765-title'><a href='#mc_calendar_19_1765-calendar-details' class='et_smooth_scroll_disabled url summary'>HAUNTED HOUSE</a></h3><h3 class='event-title summary' id='mc_1764-title'><a href='#mc_calendar_20_1764-calendar-details' class='et_smooth_scroll_disabled url summary'>Camp Closes; see ya next year!</a></h3><h3>Categories</h3>
Issues: h3 without h2;

Thank you.

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

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Joe Dolson
(@joedolson)

6 years, 8 months ago
You can use the filter mc_heading_level_table to change the heading used. Example:
```
add_filter( 'mc_heading_level_table', 'my_custom_heading', 10, 1 );
function my_custom_heading( $heading ) {
   return 'h2';
}
```
Thread Starter dbott
(@dbott)

6 years, 8 months ago

Thank you kindly for the reply. I am just not sure where to find that code or where to add the filter code you listed above.

Thank you kindly.

BTW…You might care to look into this ADA thing for your code, it is one of the worst money grabs going right now. Maybe offer and ADA compliant theme version. ???

This is what the site I am working on TRYING to fix is involved in…

https://nypost.com/2017/07/11/lawyers-cash-in-on-suits-demanding-ada-compliant-web-sites/

I use WordPress as I am NOT a programmer. Plug-ins like yours are what makes sites possible as most people and turn things on and off to make a site, but that is not the same as coding a site. Which I am not a coder. I feel so bad as I helped them by making the site like 4 years go and now this!

Plugin Author Joe Dolson
(@joedolson)

6 years, 8 months ago

It’s not a problem with the plug-in; it’s that there’s no way for My Calendar to know what the heading hierarchy within your site is. If your posts started with an H2, then everything would be fine. At the time My Calendar was written, an H2 was the predominant heading for posts and pages in most themes; today it’s more common for that to be an H1. However, I can’t readily just make that change, as it would create significant problems, while solving what is a minor accessibility concern.

Here are some instructions on using this code as a plug-in:

https://github.com/joedolson/plugin-extensions

The code above doesn’t include the comment headers, but if you look at any file within the linked repository, you can see the pattern to follow.

Thread Starter dbott
(@dbott)

6 years, 8 months ago

Totally understood on the reasons. Just a bad thing going on and trying to do our best.

Oh my…Thats alot of code. 🙂 I can see all the PHP files etc, but which one is needed to be edited? You mentioned using a “Filter” but no idea where that filter would be/should be, placed.

Thank you kindly Joe. Very kind of you for your help.
Plugin Author Joe Dolson
(@joedolson)

6 years, 8 months ago
The code I provided above is *literally* all the code you need. Create a text file called ‘my-calendar-custom-heading.php’, add this above the code:
```
<?php
/*
Plugin Name: Change heading
Plugin URI: http://www.joedolson.com/my-calendar/
Description: Switch from h3 to h2
Version: 1.0.0
Author: Joseph Dolson
Author URI: http://www.joedolson.com/
*/
```
Then upload that file into wp-content/plugins. Activate in WordPress.
Thread Starter dbott
(@dbott)

6 years, 8 months ago

LOL! See I had no idea. I was looking for a place it had to go.

IT WORKED! My Calendar is now one step closer to ADA “Guidelines”. 🙂

THANK YOU! THANK YOU! THANK YOU!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘ADA Compliance – H3 before H2’ is closed to new replies.