Musí být text neaktivního prvku rozhraní dostatečně kontrastní?

Možná si říkáte, co je to za divnou otázku v nadpisu dnešního příspěvku. Požadavky na dostatečný kontrast jsou přece jasně definovány a není moc o čem diskutovat. Nebo ano?

Na text nebo text v obrázku, který je součástí neaktivního prvku uživatelského rozhraní, se nevztahují žádné požadavky, týkající se kontrastu, píše se v Kritériu úspěšnosti 1.4.3 Minimální kontrast metodiky WCAG 2.1.

Odpověď na tuto otázku ale není tak jednoduchá, jak by se mohlo na první pohled zdát. Požadavek autorů doporučení WCAG 2.1 je věc jedna, realita věc druhá.

Asi nejlépe jsou možné úhly pohledu shrnuty v článku Do disabled buttons still need to be contrast compliant for accessibility?, ze širšího úhlu pohledu se pak tématice neaktvních prvků v rozhraní věnuje Hampus Sethfors v článku Disabled buttons suck.

Neaktivní prvky sice formálně požadavku na minimální kontrast vyhovět nemusí, na druhou stranu by uživatel určitě měl mít alespoň ponětí o tom, že se v rozhraní takové prvky nachází. A pokud má problémy se zrakem, nízký kontrast může získání takové informace poměrně snadno zkomplikovat.

Jak to tedy udělat?

Není asi žádným překvapením, že – podobně jako i v jiných případech – navrhuji k řešení přistoupit pragmaticky a vyjít z dobré praxe. Změřil jsem kontrast neaktivních prvků v rozhraní některých typických aplikaci v MS Windows, a dostal jsem se na hodnotu 3:1.

Toto doporučení jsem si ověřil i jednoduchým průzkumem mezi několika slabozrakými uživateli a závěr byl jednoznačný: text neaktivního prvku by měl být čitelný (což myslím hodnota 3:1 splňuje, současně by ale mělo být zřejmé, že se jedná o neaktivní prvek (což se dá pěkně udělat právě tím, že je méně kontrastní v porovnání s texty aktivních prvků).

Další čtení k tématu

Radek Pavlíček

7 komentářů u „Musí být text neaktivního prvku rozhraní dostatečně kontrastní?

  1. Řekl bych, že i neaktivní prvek by měl být obstojně čitelný. To, že je neaktivní neznamená, že bude neaktivní stále. Dejme tomu, že tlačítko Odeslat se zaktivní po správně vyplněné e-mailové adrese. Takže by bylo fajn vědět, že to tlačítko tam někde je.

    1. A už tím, že je neaktivní, a je to rozlišitelné od aktivního, je indikováno, např. u nějakého většího formuláře, že jsem něco nevyplnil, a můžu to přehlédnou i jako vidící. Ale hlavně, grafikovi bych nadhodil, že přeci nejde o pravidla (jak je zmíněno ve tweetu), ani abstraktní ideu „krásna“, ale o uživatele, pro které je webový obsah vytvářen, ne? 🙂

      1. Myslím, že Vám Radek krásně odpověděl v posledním odstavci svého článku. Musíte si uvědomit, že pro uživatele je stejně tak důležitá čitelnost (dostatečný kontrast) jako schopnost rozlišit, na co může a nemůže kliknout. Kontrast 3:1 je v tom případě přijatelný kompromis, protože to zdaleka neznamená neviditelný text.

  2. Problém ovšem je, že zkontrastnělé to bude jen na stránkách webnastrů, kteří o tomto požadavku budou vědět, tedy, že na většině jiných stránek to zkontrastnělé nebude. Není pak lepší to nepřizpůsobovat? a když se jde screen readerem po těch prvcích, tak neaktivní tlačítko to čte a říká o něm, že je neaktivní?
    Ještě bych měl k nastavení kontrastu jednu zkušenost, i kdy ž to je trochu od hlavního tématu. Koupil jsem si mobil Huawei P20 Lite a našel v nastavení položku Kontrastní ovláídací prvky nebo tak něco. Zajásal jsem, že se mi to může hodit a zaškrtl a zapomněl jsem, že jsem to udělal – nastavoval jsem si další věci a hned to neskontroloval. Už si úplně nepamatuju, co to nezobrazovalo, ale bylo to totálně špatně pro vidícího a než jsem na to přišel …. dost jsem se tím protrápil. Takže bych před touto volbou chtěl uživagtele varovat – nezaškrtávat, alespoň na tomto typu mobilu a nebo v tomto Androidu 8?

    1. Miloši, díky za komentář.

      > Není pak lepší to nepřizpůsobovat? a když se jde screen readerem po těch prvcích, tak neaktivní tlačítko to čte a říká o něm, že je neaktivní?

      Nejde o potřeby nevidomých, těm je to opravdu „jedno“, protože screen reader jim přečte i bílý text na bílém pozadí (nebo i text, který není vůbec zobrazen na stránce), ale o potřeby slabozrakých, respektive všech těch, kteří s tím rozhraním pracují vizuálně, mají třeba trochu horší zrak (tam už řadím i sebe), screen reader nepoužívají a potřebují ty prvky od sebe odlišit.

    1. Martine, ano, z praktického hlediska (pomíjím teď to, že WCAG neaktivní prvky z požadavku na minimální kontrast vyjímá) na to nahlížím stejně.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..