Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Visually impaired people using screen readers.

  • People with motor function impairments using the keyboard to activate website functionality.

  • People with hearing impairments relying on captions/subtitles or other text alternatives for audio/video content.

\uD83D\uDCD8 Instructions

In order to make the application accessible we can do the following steps.

  1. Add TextMode="Date" in the text boxes we need to make accessible, as in the example below. <asp:TextBox ID="txt_OccurrenceDateFrom" runat="server" TextMode="Date" MaxLength="10" Columns="10" CssClass="form-control input-lg full-width"></asp:TextBox>

  2. Remove the Calendar Widgets from the pages, as it would be a duplicate, the text boxes would have a Calendar when we add textmode=date.

  3. Remove Regular expression validators and the respective code in code behind.

  4. Add compare validators, I have researched, and these validators seem to be working best. <asp:CompareValidator id="dateValidatorFrom" meta:resourcekey="invalidOccurrenceDateFrom" runat="server" Type="Date" Operator="DataTypeCheck" Display="Dynamic" ControlToValidate="txt_OccurrenceDateFrom"></asp:CompareValidator>

  5. Test with Screen Reader NVDA.
    Link to download NVDA - https://www.nvaccess.org/download/

Info

Highlight important information in a panel like this one. To edit this panel's color or style, select one of the options in the menu.

...

TC - Web Accessibility Overview - Nov 15, 2024.pptx

  1. Test with Screen Reader NVDA.
    Link to download NVDA - https://www.nvaccess.org/download/

  2. WAVE extension for FireFox, Chrome, Edge

Per 385903: CADORS Query does not return correct results

Do not use ASP TextMode="Date" property.  The reason is because this property transforms a regular text input into an HTML5 date input field, rendering as <input type="date"> in supported browser but not all and conflicts with the front-end html5 <input date="">.  

Testing:

The following test should pass:

  1.    Basic functionality works for mouse users including:

  2. navigating the pages (query, word search, national report, regional report

    1. queries return correct results.

  3. Regression test to confirm that subscriptions were not inadvertently affected has passed (emails continue to be sent/received)

see also PBI 389225: CADORS Accessibility Issues - Recommended adjustments

  1. Part of the acceptance criteria should include inline (real-time) validation vs form level validation testing (only when user hits Search button)

    Currently the form has a combination of both.

    Example:

    Form-Level Validation

    1. Empty Form Submission:

      • When user clicks "Search" with zero/no data entry in any form field

      • A WET compliant bulleted list is displayed of ALL required fields (missing mandatory fields)

      • Error message appears at top of page above the form

      • Includes date and non-date fields

    2. Partial Form Submission:

      • When user enters SOME valid data (Both date fields)

      • Clicks "Search" with incomplete required fields

      • A WET compliant bulleted list is displayed of ALL required fields (missing mandatory fields)

      • Exclude previously validated date fields from error list

      • Date fields are not cleared out

    Inline Validation (Validation occurs in real-time)

    1. Date Field Validation:

      • On invalid date entry (onBlur)

        • Trigger inline error immediately above specific date field (error message between visible label and form field)

        • Error message specific to date format/range

        • Include WET formatting that includes  the word "Error" in error messagetext 

      • On valid date correction

        • Remove error message dynamically

        • Allow progression to next input field

    2. Special Date Scenarios:

      • Today's date entry

        • Permit field progression without errors

      • Date range changes

        • Valid to valid date: No error triggered

        • Valid to invalid date: Inline error displayed

    Hope this helps

WCAG link regarding flashing and blinking content:

Understanding Success Criterion 2.3.1 | Understanding WCAG 2.0