Használható-e a HTML5 placeholder attribútuma űrlapcímkeként?

Az Űrlapmezők akadálymentes címkézése című cikkemből szándékosan kimaradt a helykitöltő (angolul placeholder) segítségével megvalósított űrlapcímkézés. Ugyanis ez a mobilweben robbanásszerűen terjedő megoldás komoly viták kereszttüzében van használhatósági és akadálymentességi szempontok miatt is. Ebben a cikkben megpróbálom összeszedni a vitatott kérdéseket.

Mi az a helykitöltő?

A helykitöltő egy olyan rövid instrukciós szöveg, amit az űrlapmezőbe lehet elhelyezni abból a célból, hogy segítse a felhasználót az adatbevitelben. Ez a szöveg elvileg csak addig látszik, amíg az űrlapmező üres, és a fókusz nem kerül az űrlapmezőbe.

A helykitöltő szöveg elhelyezését és viselkedését hagyományosan JavaScript segítségével oldják meg a fejlesztők, de a HTML5 szabványtervezet már egyszerűbb megoldást is kínál. Bevezeti ugyanis a placeholder nevű attribútumot, amelynek értékeként egyszerűen meg kell adni a helykitöltő szöveget, valahogy így:

<label for="emailcim">E-mail:</label>
<input type="email" name="email" id="email" placeholder="valaki@valahol.hu" />

Ez idáig viszonylag egyszerű. A vita azon lángolt fel, hogy mi lehet a placeholder szövege. Hogyan segítse a felhasználói adatbevitelt?

Sok fejlesztő úgy véli, hogy maga a címke is bevitelt segítő szöveg, és ha a title attribútumot szabad ilyen célból használni, akkor a placeholder-t miért ne? Bár rögtön hozzáteszem, hogy sokaknak inkább azért lehet szimpatikus a helykitöltővel megvalósított címkézés, mert helytakarékosnak tűnik. Ez főleg a kisképernyős, mobilwebes űrlapoknál merül fel.

Mit mond a HTML5?

A HTML5 szabványtervezet szerint a helykitöltő szöveg egy beviteli minta vagy a kért formátum rövid leírása lehet. Majd az eredeti angol szöveg így fogalmaz:

The placeholder attribute should not be used as an alternative to a label.

Értelmezésemben ez azt jelenti, hogy a placeholder attribútumot nem ajánlott a címke alternatívájaként használni. Fontos azonban, hogy nem is tiltott, hiszen akkor angolul „must not” szerepelne a mondatban. Szerintem ez jól jelzi azt a szakmai bizonytalanságot, amire a bevezetőben utaltam. Persze azok, akik mindig is kételkedtek a webszabványok létjogosultságában, azok bizonyára megmosolyogják a szavakon történő efféle lovaglást.

De nézzük, hogy milyen akadálymentességi problémákkal kell szembenéznünk, ha nem fogadjuk meg ezt az ajánlást.

Mit kezdenek a helykitöltővel a képernyőolvasó programok?

A legújabb képernyőolvasó programok a HTML5 specifikációt támogató böngészőprogramokra épülve már felismerik és felolvassák a placeholder attribútumot.Így elméletileg a helykitöltő teljes értékű, név szerinti azonosítást biztosíthat, vagyis betöltheti a címke szerepét.

Sajnos azonban ez a megoldás csak a jövőben lesz biztonságosan alkalmazható. Ha ugyanis a felhasználó még olyan képernyőolvasó és böngészőprogram kombinációt használ, ami a HTML5 specifikációt nem ismeri, akkor a kizárólag a placeholder-ben megadott címke egyértelmű akadályt jelent számára. Az adott űrlapmezőhöz ugyanis így semmilyen címkét nem tud azonosítani. Még annyit sem, mint amennyit egy rosszul elkészített régi HTML oldalon magától ki tudott következtetni. Vagyis mindenképpen érdemes hozzárendelt label jelölőelemet vagy title attribútumot is használni.

[törölt szöveg kezdete]Frissítés (2018.november): A cikkem megjelenése óta kiadott specifikációk alapján a placeholder egyértelműen nem definiálhatja az űrlapmező nevét (címkéjét). Lásd a Hogyan adjunk akadálymentes nevet? című cikkemet.[törölt szöveg vége]

Frissítés (2019.augusztus): A placeholder körüli zavar tovább fokozódott azzal, hogy az említett specifikációkba újra visszakerült, mint ami mégis definiálhatja az űrlapmező képernyőolvasós nevét. Lásd a Hogyan adjunk akadálymentes nevet? című cikkemet.

Emlékszik, mit kell ide írni?

Általánosabb felhasználói kört érint az a probléma, hogy a helykitöltő eltűnik, amikor a felhasználó belekattint, vagy a tabulátor gomb segítségével belelép az űrlapmezőbe. Ilyenkor a felhasználó kénytelen a rövid távú memóriájára hagyatkozni ahhoz, hogy emlékezzen, mi is volt a helykitöltő szöveg, azaz mit is kell beírnia az adott mezőbe.

Ez egyértelmű akadályt jelent azoknál, akiknél valamilyen képességzavar mutatkozik a rövid távú emlékezetben. Nekik a mező kitöltése közben mindenképpen tudniuk kell, hogy melyik mezőt töltik ki éppen.

De szituációtól függően bármely ép felhasználónál is problémát okozhat a helykitöltős címke eltűnése. Tételezzük fel, hogy belekattintok egy ilyen űrlapmezőbe és a szobában játszó gyermekem váratlanul kérdez tőlem valamit. Ilyenkor elég, hogy egy pillanatra másra koncentráltam. Ha visszatérek az űrlapmezőhöz, amiben ott villog a kurzor, akkor már nem biztos, hogy emlékszem rá, mit is kellene nekem beírnom.

Bármelyik eset is áll fenn, a felhasználó csak azt tudja csinálni, hogy kikattint a mezőből, vagy tabulátorral átlép egy másikba, hogy újra lássa a helykitöltő szöveget.

Megjegyzem, ha a helykitöltő nem címkét tartalmaz, hanem mondjuk egy beviteli formátumra vonatkozó mintát, akkor ugyanez a helyzet. Miért kellene például megjegyezni egy elvárt telefonszám formátumot?

Egyéb potenciális problémák

Létezik olyan felhasználói tesztelésen alapuló kutatás, amiben kimutatták, hogy a felhasználók időnként hajlamosak azt gondolni, hogy a helykitöltővel ellátott mező már ki van töltve, vagyis nyugodtan átugorható. Ezen még az sem feltétlenül segít, hogy a helykitöltő szöveg általában halványabban, szinte vízjelként jelenik meg. Sőt, ez egy újabb problémát is felvet.

Tapasztalatom szerint a böngészőprogramok alacsonyabb kontrasztaránnyal jelenítik meg a helykitöltő szöveget, mint azt a WCAG 2.0 szabvány AA szintje előírja. Van olyan böngészőprogram, amelyik a minimálisan előírt 4,5:1 kontrasztarány helyett csak 2,4:1 arányt használ. Ennek korrigálása CSS segítségével történhetne, de a helykitöltő szövegszínét ma még böngészőfüggetlen és szabványos módon nem lehet definiálni.