ADA Compliance

  • projecta

    (@projecta)


    7 years ago

    Hi,

    I am using this plugin on a site that needs to be ADA compliant, and there just a couple little tweaks needed for me to get it passing. Can you take a look to see if this is something you can add?

    ISSUE #1 – on https://delphic.scarabmedia.com (next 5 events list view)

    Error: Empty Button – A button is empty or has no value text. This is on the previous and next arrows.

    Why It Matters
    When navigating to a button, descriptive text must be presented to screen reader users to indicate the function of the button.

    How to Fix It
    Place text content within the <button> element or give the <input> element a value attribute.

    The Algorithm… in English
    A <button> element is present that contains no text content (or alternative text), or an <input type=”submit”>, <input type=”button”>, or <input type=”reset”> has an empty or missing value attribute.

    ISSUE #2 – https://delphic.scarabmedia.com/calendar/ (full month view)

    This page has the same issue as #1 with the arrows, but also there is an “Empty table header” error in two places on the page.

    What It Means
    A <th> (table header) contains no text.

    Why It Matters
    The <th> element helps associate table cells with the correct row/column headers. A <th> that contains no text may result in cells with missing or incorrect header information.

    How to Fix It
    If the table cell is a header, provide text within the cell that describes the column or row. If the cell is not a header or must remain empty (such as the top-left cell in a data table), make the cell a <td> rather than a <th>.

    The Algorithm… in English
    A <th> element does not contain any text (or contains only spaces) and no images with alternative text.

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

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

  • Hello,

    I ran into the same issue with ADA compliance using this plugin. Overall I really like the plugin, as it does some things that other calendar plugins won’t do, or won’t do as easily. From doing some digging around in the codee, I was able to find a solution that worked for me, though it is only temporary. Below is what I found.

    This problem only exists when you are using a non-static calendar. If the navigation buttons aren’t there, there is no problem.

    I’ve been able to fix the problem by changing the default-calendar-grid.php file to change the contents of the buttons that they noted above. I ended up replacing the chevron icons in the file with stylized “<” and “>” characters, respectively. This allows a screen reader to see that there is actually content within the button, and furthermore within the table header, and as a result fixes the errors it has with the calendar.
    I suspect, though haven’t tested yet, that this would work the same by altering a similar line of code in default-calendar-list.php.

    Here is the line of code that i’ve put in in place of the existing code on the php file in question:
    <button class=”simcal-nav-button simcal-month-nav simcal-prev” title=”<?php _e( ‘Previous Month’, ‘google-calendar-events’ ); ?>”><span style=”font-size:2em;font-weight:bold;”><</span></button>
    Note I’ve removed the <i> tag inside the button and simply put in a styled <span> tag along with a “<” character. I did the same for the other button, just replacing the “<” with a “>”.

    Below is an example of one of the sites I made this change on, run through the compliance checking tool I use. As you can see at this point, there are no errors on the page.
    https://wave.webaim.org/report#/https://www.wmschools.org/calendar/

    My request at this point is if the developers of the plugin could please implement a solution like this so that the plugin can be compliant natively, without me having to jump in and edit the code every time the plugin is updated. It doesn’t need to be this solution exactly, as this is admittedly a bit of a rough fix, but if the buttons could be modified with ADA compliance in mind, it would make things a lot easier for sites that use this and have these requirements to meet.

    Thanks @kyletimm for the tips. Hopefully the creator of this very useful plugin will make some minor updates for ADA compliance.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘ADA Compliance’ is closed to new replies.