Přístupnost a CSS layout (grid nebo flexbox): pozor na vizuální pořadí

Přístupnost je důležitá disciplína, kterou vývojáři mohou velmi pomoci různým skupinám lidí. Jen zdánlivě se týká hendikepovaných minorit.

Velmi postatné je, že přístupný dokument není až tak nesnadné vytvořit. V nových CSS layoutech kromě „přístupnostních klasik“, jako je využití správných sémantických elementů, vstupuje do hry ještě poněkud kontroverzní možnost změny pořadí.

Přístupnost a pořadí ve flexboxu nebo gridu

Musím vás upozornit na to, že jakmile odlišíte pořadí zobrazování od pořadí v kódu, může se stát, že při ovládání z klávesnice (tabulátorem) nebo použítí s odečítači pro zrakově hendikepované přestane pořadí dávat smysl.

Také proto je ve specifikaci obsaženo toto důrazné varování:

Autoři musí použít změnu pořadí pouze pro vizuální, nikoli logické přeskupování obsahu.

Logické pořadí si můžete představit v těchto kontextech konzumace stránky:

• Roboti
  Například stroje vyhledávačů jako je Google. Roboti postupují podle pořadí v HTML nebo DOM.
• Sekvenční navigace stránkou
  Tento typ procházení provádějí pomocí odečítačů obrazovky slabozrací nebo pomocí tabulátoru občas i jiní uživatelé.
• Hlasově a jinými médii
  Přeskupení vizuálního pořadí nezmění řazení v nevizuálních médiích, například v řeči. Není to úplně běžné, ale stránku můžete stylovat také pro automtaické čtení pomocí podmínky @media speech.

Může se tedy stát, že někdo, kdo se naviguje pomocí klávesnice, bude procházet odkazy na vašem webu a najednou odskočí z dolní do horní části dokumentu, protože tam je další položka logického pořadí.

Ve specifikaci de dále píše:

CSS grid dává autorům velkou moc přeskupit dokument. Nejedná se však o náhradu za správné uspořádání zdroje dokumentu.

Něco vám řeknu. Specifikace má pravdu.

Pokud chcete pro přístupnost něco udělat, rozhodně dbejte na to, aby pořadí v kódu dávalo smysl, pokud byste stránku četli bez stylů.

Dotčené vlastnosti

Problém se týká všech CSS vlastností, které mohou v nových systémech rozvržení ovlivnit vizuální pořadí:

• Vlastnost order, která změní způsob automatického umisťování položek.
• Deklarace grid-auto-flow: dense, jež automaticky přeskupí položky jinak než jsou uvedeny v DOM.
• Vlastnost grid-area, která umístí položek do konkrétního místa mřížky a opět nerespektuje pořadí ve zdroji.

Možností, jak přeskupit obsah je samozřejmě více a vztáhnout to můžeme i na starý dobrý float, takže tento text berte jako obecné varování.

Příklad

Pojďme si to ukázat na jednoduchém demu postaveném na vlastnosti order a flexboxu se čtyřmi položkami:

<div class="container">
  <a class="item item--1" href="#">
    Item 1
  </a>
  <a class="item item--2" href="#">
    Item 2
  </a>
  <a class="item item--3" href="#">
    Item 3
  </a>  
  <a class="item item--4" href="#">
    Item 4
  </a>
</div>

Jak vidíte, tentokrát jsem vyměnil DIVy za odkazy a to proto, abychom mohli obsahem navigovat pomocí tabulátoru.

Kontejner (.container) je obyčejný flexbox, ale za ukázání kódu stojí předpis pro třetí položku:

.item--3 {
  order: -1;
}

Původní pořadí (1, 2, 3, 4) se tedy v prohlížeči změní na 3, 1, 2, 4.

Jenže navigační pořadí je prohlížečem stále bráno podle HTML. Však to uvidíte ve videu:

Případně si to zkuste naživo v CodePenu: cdpn.io/e/JjXxRoJ.

Blbý, že?

Zachránce tabindex? Leda kulový

Někteří z vás si určitě řekli, že situaci může přeci zachránit vlastnost tabindex, HTML atribut, který nastaví pořadí navigace pomocí tabulátorů:

<div class="container">
  <a class="item item--1" href="#" tabindex="2">
    Item 1
  </a>
  <a class="item item--2" href="#" tabindex="3">
    Item 2
  </a>
  <a class="item item--3" href="#" tabindex="1">
    Item 3
  </a>  
  <a class="item item--4" href="#" tabindex="4">
    Item 4
  </a>
</div>

V prohlížeči to po přidání atributů tabindex vypadá nadějně:

Pořadí navigace je nyní správné, protože odpovídá logickému uspořádání položek na obrazovce:

Máme to vyřešeno? Nejspíš bohužel ne.

Otázka, totiž zní – jak moc je tabindex pro tyto případy v praxi použitelný?

Atribut tabindex totiž nastavuje pořadí pro celý dokument, takže jakmile bychom takto zapsali samostatnou komponentu a tu pak vkládali na různá místa DOMu, napácháme s tabindex více škody než užitku.

Na druhou stranu – neumím si představit, že bychom kvůli jedné komponentě s order natvrdo měnili pořadí tabindex pro celou stránku.

Takže z mého pohledu je tabindex pro opravu tohoto problému použitelný jen velmi omezeně.

Ale zkusit si to v CodePenu klidně můžete:

Pomůže aria-flowto?

Léonie Watson v článku „Flexbox & the keyboard navigation disconnect“ (odkaz níže) už před lety upozorňovala na vlastnost aria-flowto, která v rámci specifikace WAI-ARIA umožňuje právě lokální změnu navigačního pořadí. Je to prostě takový tabindex pro komponenty.

Hned jsem to vyzkoušel, ale zdá se, že stále platí to, co píše Léonie v článku z roku 2016: Tahle vlastnost má extrémně špatnou podporu v prohlížečích. Alespoň něco se v prohlížečích nemění.

Pomůže nám vůbec něco? Ani ne

Odlišení pořadí navigačního od vizuálního je možné ve flexboxu a teď i Gridu mnoha různými způsoby, tedy nejen vlastností order.

Bohužel se to zdá jako aktuálně nevyřešitelný problém, protože jej myslím nijak konkrétně neřeší specifikace, natož pak prohlížeče.

Pošlu vás na další zdroje, ale nic veselého se tam nedozvíte:

• Varování ve specifikaci flexboxu. w3.org/TR/css-flexbox-1/
• Totéž ve specifikaci CSS Gridu. drafts.csswg.org/css-grid/
• Adrian Roselli: „Source Order Matters“. adrianroselli.com
• Manuel Matuzovic: „The Dark Side of the Grid (Part 2)“. matuzo.at
• Rachel Andrew: „Grid, content re-ordering and accessibility“. rachelandrew.co.uk
• Text „Flexbox & the keyboard navigation disconnect“. tink.uk

Komunitu, tedy vývojáře, lidi kolem webových specifikací a prohlížečů, zde ještě čeká dost práce. Jednoho by to v roce 2020 překvapilo.