A presentation at WebstaurantStore Internal by Todd Libby
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
A little presentation on forms and labels and how to make them accessible for everyone.
for free. You
can too.