josdejong/jsoneditor

Form elements must have labels (#TextField57).

Open

#1,222 opened on Jan 19, 2021

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (2,034 forks)batch import
featurehelp wanted

Repository metrics

Stars
 (10,781 stars)
PR merge metrics
 (Avg merge 15h 36m) (3 merged PRs in 30d)

Description

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.

Contributor guide