Skip to content

Clarification on WCAG 1.4.11 Non-Text Contrast – Updated Understanding Document Statement on Boundaries #5304

Description

@Ashritha-98

I am seeking clarification on how to interpret the updated boundary guidance in the WCAG 1.4.11 Non-Text Contrast Understanding document and how it applies to edit fields with internal icons (e.g., search fields).

Background & Previous Understanding

Previously, the Understanding document stated:

"If text (or an icon) within a button or placeholder text inside a text input is visible and there is no visual indication of the hit area then the Success Criterion is passed."

Based on this, the interpretation was that internal icons inside an edit field do not serve as a visual substitute for the boundary because they do not explicitly define the component type. The only recognized exception was the dropdown arrow on select/combobox elements, as it directly conveys the component type while triggering the field after clicking.

Updated Guidance

The Understanding document now states:

"This success criterion does not require that controls have a visual boundary indicating the hit area. If a control has visible content (such as text or a sufficiently contrasting icon), which helps users identify the presence of the control, then a border or other indication of the overall boundary of the hit area is not required, as is therefore not subject to non-text contrast requirements. Having a visual boundary indicating the hit area is only required when there is no other visual way to identify the presence of the control – and in those cases, the boundary must have sufficient non-text contrast in order to pass this success criterion."

Query

Given a input field such as search edit field as in the attached screenshot where both the placeholder text and the outer border fail the contrast requirement, but an internal search icon meets 3:1 contrast: Can the contrasting icon be used to identify the presence/hit area of the edit field, thereby passing SC 1.4.11 without requiring a 3:1 border contrast?

Here there are two primary interpretations depending on how the icon behaves:

  1. Icon Focuses/Triggers the Field: Activating the icon sets focus to the input field without submitting a search. Because it activates the field itself, does its 3:1 contrast satisfy the requirement to identify the hit area?
  2. Icon Submits the Search Action: Activating the icon executes the search action rather than focusing the field. Since it acts as a separate action button rather than focusing the input, does the input field still require a 3:1 border to pass?

Core Question:

Irrespective of icon click behavior:

  1. Should any sufficiently contrasting internal icon be considered a valid visual indicator of the hit area/presence of the input field?
  2. Should internal icons not be considered an indicator for the input field’s boundary, because prior to interaction, the icon alone doesn't clearly convey that it is an editable input field?

Your insights and guidance would be greatly appreciated.

Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions