Form elements must have labels (#TextField57).

[harshgangrade111]

GitHubTag:#A11yMAS; #A11yTCS; #Win10; #DesktopWeb;#WCAG3.3.2; #A11ySev2; #Benchmark;#ChromiumEdge;#Chrome;#AI4W;

Environment Details: Version 1809 (OS Build 17763.253) Platform: ChromiumEdge , Chrome Tool used: AI4W Chrome Version 87.0.4280.141 (Official Build) (64-bit)

Additional Details: References:WCAG3.3.2

Repro Steps:

1. Launch the application
2. "Home" page will open.
3. Navigate to "Flows" menu item and select it.
4. Navigate to "New" button and select it.
5. "Info" screen will open.
6. Enter all valid data in "Info" section then navigate to "Input" section .
7. Navigate through all the controls appearing under "Input" section.
8. Open Keros for web tool and select Fast pass option.
9. Verify, whether form elements have labels or not.

Actual: Form elements does not have labels.

Expected: Form elements must have labels.

Note: Same issue also exist for the Duration in second and text area field.

Element path: #TextField57

Snippet:

How to fix: Fix any of the following: aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Form element does not have an implicit (wrapped) Form element does not have an explicit Element has no title attribute or the title attribute is empty

User Impact: When labels for form elements are absent, screen reader users do not know the input data expectations. Screen readers cannot programmatically determine information about input objects without an established label relationship (or redundant text serving as a label). It also affect the assistive technology of the page.

[josdejong]

Thanks for your report @harshgangrade111 . Would be nice to improve accessibility of JSONEditor. I do not really understand the "Repro Steps", JSONEditor doesn't have "Flows", an "Info" screen, or a #TextField57. Where are these repro steps referring to?

[silviabaptista]

I'm also running into this issue. This is a snippet of the html generated by jsoneditor that is causing the issue TextArea should have a label, or aria-label, or title

<div class="jsoneditor jsoneditor-mode-code">
    <div class="jsoneditor-menu">
        <button type="button" class="jsoneditor-format" title="Format JSON data, with proper indentation and line feeds (Ctrl+I)"></button>
        <button type="button" class="jsoneditor-compact" title="Compact JSON data, remove all whitespaces (Ctrl+Shift+I)"></button>
        <button type="button" class="jsoneditor-sort" title="Sort contents"></button>
        <button type="button" title="Filter, sort, or transform contents" class="jsoneditor-transform"></button>
        <button type="button" class="jsoneditor-repair" title="Repair JSON: fix quotes and escape characters, remove comments and JSONP notation, turn JavaScript objects into JSON."></button>
        <button type="button" class="jsoneditor-undo jsoneditor-separator" title="Undo last action (Ctrl+Z)" disabled=""></button>
        <button type="button" class="jsoneditor-redo" title="Redo (Ctrl+Shift+Z)" disabled=""></button>
        <a href="https://ace.c9.io/" target="_blank" class="jsoneditor-poweredBy">powered by ace</a></div>
        <div class="jsoneditor-outer has-main-menu-bar has-status-bar" style="margin-bottom: -26px; padding-bottom: 26px;">
            <div class=" ace_editor ace_hidpi ace-jsoneditor" style="height: 100%; width: 100%; font-size: 14px;">
                <textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; font-size: 1px; height: 1px; width: 1px; transform: translate(71px, 18px);"></textarea>

[josdejong]

@silviabaptista thanks, for the extra information. This text area <textarea class="ace_text-input" .../> is part of https://ace.c9.io/, so to solve it for real, it should be solved in that library. I guess we could hack something in the JSONEditor though, like attach a title to the textarea after the ace editor is created. Would that solve the issue?

Anyone interested in working out a solution for this? Help would be welcome.