Pochopení technik HTML pro zlepšení přístupnosti webu

Vytvoření webové stránky není jen vytvoření webové stránky. Důležitým aspektem vývoje front-endu je zajistit, aby uživatelská rozhraní byla přístupná všem na internetu, včetně lidí se zrakovým a sluchovým postižením. Musíte napsat svůj kód s ohledem na tyto lidi. Jak poskytujete zrakově postiženým lidem rovný přístup na váš web jako nevidomým? Přečtěte si tento článek, abyste to zjistili.

Proč by se vývojáři měli zajímat o přístupnost webu?

Přístupnost webu se točí kolem myšlenky, že každý by měl mít rovný přístup k webu bez ohledu na jakékoli postižení nebo postižení. Přístupný web usnadňuje oslovení většího publika (asi 16 % lidí na světě trpí jedním nebo druhým postižením).

Digitální dostupnost by neměla být alternativou pro vývojáře. Je nutností pro každou profesionální značku. To se bere vážně: jak uvádí Odrůda, někdo zažaloval The Pokémon Company v roce 2019 kvůli nepřístupnému webu.

Přístupnost webu s HTML

V HTML existují pravidla pro zajištění rozvoje přístupných webových stránek. Tato část vysvětlí některá z těchto pravidel.

Používejte sémantické prvky

Sémantické prvky v HTML jsou prvky, které mají význam. V HTML5 je kolem 100 prvků. Některé prvky, jako např a, jsou nesémantické, zatímco ostatní HTML tagy jsou sémantické. Ačkoli může být nemožné přestat používat tyto nesémantické prvky, je důležité začlenit do své práce co nejvíce sémantických prvků. Zde je seznam oblíbených sémantických prvků:

Zvažte tento příklad od Taaskly:

Pohled na obrázek výše odhalí následující prvky:

• Nadpis
• Obrázek
• Odstavec
• Tři tlačítka

Je snadné předpokládat, že vývojáři použili tagy pro uspořádání prvků na obrazovce. Při bližším pohledu na kódy zjistíte, že místo toho použili šest sémantických značek. Zjednodušený kód vypadá takto:

<sekce>
<imgsrc="/hero.png"alt="hrdina">
<článek>
<h1>Najděte správné produkty a služby ve správný čas.h1>
<p>
 Ručně vyráběná obuv, úprava vlasů, manažer sociálních sítí, zasílání pochůzek, zdroj příjmůb>— co si jen vzpomenete, Taaskly to pochopil. Najděte každý produkt nebo službu, kterou dnes potřebujete, když se zaregistrujete a používáte Taaskly. 
p>
<Ahref="/main/home">Zadávat úkolA>
<Ahref="/main/services"> Najděte si službuA>
<Ahref="/hlavní/tržiště" >Najít obchodA>
článek>
sekce>

Z fragmentu HTML můžete pozorovat následující:

1. Obrázky, text a tlačítka jsou uvnitř a živel.
2. The prvek rovnoměrně rozděluje a Prvky.
3. The prvek drží, , a Prvky.
4. Tlačítka jsou kódována jako Prvky; jsou to tedy odkazy, nikoli tlačítka. Obecným pravidlem je, že vždy používejte odkazy k přesměrování uživatele na jinou stránku nebo zobrazení a použijte tlačítka, když chcete, aby uživatel provedl akci pouze ve stejném zobrazení. Vidět Stránka tlačítka Angular pro více informací o tomto.

Použijte orientační body k vytvoření jasné struktury stránky

Orientační body jsou sémantické značky, které pomáhají nevidomým uživatelům procházet webovou stránku pomocí programů pro čtení z obrazovky. Pomocí orientačních bodů je snadné definovat různé části webové stránky. webové stránky společnosti Apple používá orientační body.

Obrázek nahoře ukazuje čtyři různé orientační body. Můžete použít Statistiky přístupnosti rozšíření pro vizualizaci těchto orientačních bodů.

Na obrázku můžeme odvodit a nahoře, a obsahující a a a živel. Zřetelně to ukazuje obrázek "navigace", "kraj", a "informace o obsahu". Tyto jsou známé jako role, na které se podíváme později.

Kdykoli musíte pro stránku použít více orientačních bodů, vždy je odlište štítkem. Například, pokud používáte více prvky jako má Apple, musíte je označit. Měli byste je označit árie-štítek atribut. Můžete tedy napsat něco takového:

<navárie-štítek = "globální">
<navárie-štítek = "místní navigace">
<navárie-štítek = "adresář apple">

Použití štítků může pomoci čtečkám obrazovky přeskočit na jakoukoli navigaci.

Využijte atributy role, názvu a hodnoty

Někdy může být nemožné použít prvky HTML s vestavěnými funkcemi usnadnění. Takovými případy mohou být jeden z těchto dvou:

1. Neexistuje žádný nativní prvek HTML pro to, čeho chcete dosáhnout. Například, pokud musíte použít a protože se nezdá, že by do role pasoval žádný jiný prvek.
2. Kvůli technickým problémům nemůžete používat sémantické prvky. Pokud používáte rámec, který používá kdy by bylo lepší použít, bude vaší povinností definovat vlastní ovládací prvek.

Chcete-li definovat vlastní ovládací prvek, potřebujete roli, název a hodnotu (někdy) pro váš prvek.

Role

Ve výchozím nastavení a prvek má navigační roli, zatímco a prvek má roli banneru. Tyto prvky byste měli používat pouze pro zamýšlené účely, abyste pomohli pomocným technologiím pochopit strukturu webové stránky. Pokud musíte použít jeden místo druhého, měli byste zadat roli takto:

<záhlavírole = "navigace">
<navrole = "prapor">
<divrole = "navigace">

název

Název je popisný text nebo štítek spojený s prvkem HTML. Nejjednodušší formou názvu je text prvku. Zde je příklad:

<divrole = "knoflík">Klikni na mě!div>

Ve výše uvedeném úryvku "Klikni na mě!“ je jméno živel. Je také známý jako přístupný název.

U prvků, jako je navigace, rozevírací seznamy atd., je přiřazení názvu složitější než v předchozím příkladu. Je to jiné, protože tyto prvky mají v sobě podřízené prvky. Chcete-li výše uvedené navigaci přiřadit název, použijte árie-štítek atribut. Podívejte se na tento příklad:

<navrole = "navigace"árie-štítek = "globální navigace">...nav>

Měli byste si uvědomit, že a název atribut se liší od přístupného názvu. Tento fragment kódu poskytuje lepší pochopení:

 atribut názvu 
<navrole = "navigace"název = "globální navigace">...nav>
 přístupný název 
<navrole = "navigace"árie-štítek = "globální navigace">...nav>

Vidět Článek TGPi o přístupných jménech abyste tomu porozuměli hlouběji.

Hodnota

V HTML může atribut value poskytnout další informace o prvku. Hodnoty poskytují informace o stavu komponenty pro vlastní komponenty, jako jsou akordeony. Například akordeon lze otevřít nebo zavřít.

Svým prvkům můžete přidat hodnotu několika způsoby. Tento úryvek ukazuje některé ze způsobů, jak toho dosáhnout:

 aria-valuenow 
třída="tlačítko přehrávání" aria-label="Přehrát zvuk" aria-valuenow="0"></button>
<Zvuksrc="audio-soubor.mp3">Zvuk>
árie-rozšířená
<divrole="knoflík"árie-rozšířená="Nepravdivé">FAQ 1div>
hodnota
<vstuptyp="zaškrtávací políčko"název="produkt[]"hodnota="1">

Upřednostňování dostupnosti webu pro komplexní online zážitek

Přístupnost webu přesahuje dodržování pravidel; jde také o zajištění rovného přístupu všech k vašemu webu. Začleněním sémantických prvků, orientačních bodů a atributů, jako je role, název a hodnota, do kódu HTML může být váš web přístupnější pro lidi s postižením. Nepřemýšlejte o dostupnosti webu jako o možnosti; považovat to za nutnost.