Forms & Labels: WCAG 2.5.3 - Label In Name

FORMS & LABELS WCAG 2.5.3 - LABEL IN NAME @TODDLIBBY - TODD LIBBY

SUCCESS CRITERION IS A TESTABLE STATEMENT THAT ISN’T TECHNOLOGY-SPECIFIC.

SC 2.5.3 LABEL IN NAME FOR USER INTERFACE COMPONENTS WITH LABELS THAT INCLUDE TEXT OR IMAGES OF TEXT, THE NAME CONTAINS THE TEXT THAT IS PRESENTED VISUALLY. * * - A BEST PRACTICE IS TO HAVE THE TEXT OF THE LABEL AT THE START OF THE NAME.

A FORM EXAMPLE WITH BUTTON LABEL DIFFERENT FROM VISUAL LABEL

IN 2020 THE WEBAIM MILLION PROJECT EVALUATED 4.2 MILLION FORM INPUTS AND FOUND THAT 55% WERE IMPROPERLY UNLABELED, EITHER VIA <LABEL>, ARIA-LABEL, OR ARIA-LABELLEDBY. HTTPS://WEBAIM.ORG/PROJECTS/MILLION/#LABELS

A FORM EXAMPLE WITH NATIVE HTML <BUTTON> & NO ARIA-LABEL

THREE WORKING EXAMPLES OF CORRECT USAGE OF THE ACCESSIBLE NAME AND PROGRAMMATIC NAME HTTPS://CODEPEN.IO/ COLABOTTLES/PEN/OJRPGYO

LABELS USED IN FORM CONTROLS THAT ARE IN CLOSE PROXIMITY TO THE FORM COMPONENT

FIRST NAME instead of FIRST NAME: NEXT instead of NEXT…

A, AA, AAA WCAG GUIDELINES

THANKS! @TODDLIBBY - TODD LIBBY