How do I make the Current Day Input Box in the Events module WCAG compliant?

Overview

The Web Content Accessibility Guidelines (WCAG) 2.0 rule 1.1.1 states that the input fields must have associated text labels and rule 3.3.2 details instructions related to input assistance. However, the current date input box in version 07.00.06 of the DNN Events module does not have an associated label.

 

Prerequisites

 

Solution

The DNN Community now manages the DNN Events module. To resolve the issue, you must add a script in the Header section of the page by following the steps mentioned below:

  1. Navigate to: Page Settings > Advanced > S.E.O.

    2020-03-02_0923.png

  2. Add the following code to the Page Header Tags section of the page:

    <script>
    $(function() {
      $(".ModDNNEventsC .EvtHdrMdlCol .riTextBox").attr("title","selected date");
    });
    </script>

 

Testing

The script will add the title attribute with the value selected date as soon as the document is done loading.

 

To further test that the field is adhering to WCAG standards, use Wave to view the error details in the left panel, select the input element with the missing attribute.

2020-01-23_16-28-37.jpg

 

If you find any other errors, you must submit the issue(s) to the DNN Community.

 

Back to Top

Comments

0 comments

Please sign in to leave a comment.