Fócas soiléir

Déanann Silktide tástáil an athraíonn rialtáin ar do leathanach — naisc, cnaipí agus réimsí foirme — a gcuma go soiléir go leor nuair a roghnaítear iad leis an méarchlár. Ní leor go mbeadh an t-athrú ann amháin; ní mór dó a bheith mór agus ardchodarsnachta go leor le feiceáil i ndáiríre.

Leagan níos déine de Visible focus é seo: fiafraíonn an seiceáil sin an bhfuil aon táscaire fócais ann, ach tomhaiseann an ceann seo an bhfuil an táscaire feiceálach go leor.

Is féidir leat triail a bhaint as tú féin: lódáil leathanach agus brúigh an eochair Táb arís agus arís eile. Ba chóir go n-athródh gach rialtán ar a dtagann tú go feiceálach, mar shampla trí imlíne shainiúil nó cúlra codarsnachta a fháil.

Cén fáth a bhfuil tábhacht leis seo

Bíonn daoine a nascleanúintíonn leis an méarchlár — lena n-áirítear go leor daoine a bhfuil laguithe mótair orthu agus úsáideoirí gléasanna lasc — ag brath ar a fheiceáil cá bhfuil an . Tá táscaire fócais atá i láthair go teicniúil ach atá fann, tanaí nó ísealchodarsnachta chomh húsáideach céanna le gan táscaire ar bith: cailleann an t-úsáideoir a áit ar an leathanach agus ní féidir leis a rá cén rialtán a ghníomhóidh nuair a bhrúitear Iontráil.

Conas é a cheartú

Is é an réiteach simplí iontaofa imlíne sholadach timpeall ar an rialtán fócasaithe, 2 phicteilín ar a laghad ar tiús, i ndath a chodarsnaíonn leis an rialtán agus lena thimpeallacht araon.

Cinntíonn táscaire dhá dhath infheictheacht beag beann ar an gcúlra:

/* Coinníonn imlíne thrédhearcach táscaire sa mhód dathanna éigeantacha */
:focus {
  outline: 2px solid transparent;
  /* Fáinne geal + fáinne dorcha: bíonn codarsnacht ag ceann den dá cheann i gcónaí */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Tagann an cur chuige seo ó theicníc C40 de chuid WCAG.

Seachain táscairí feadh aon imeall amháin, amhail teorainn bhun: braitheann cibé an bhfuil siad mór go leor ar fhad an imeall sin, a athraíonn i gcás naisc téacs.

Conas a dhéanann Silktide tástáil air seo

Insamhlaigh úsáideoir méarchláir ag dul trí gach eilimint infhócasaithe ar an leathanach le Táb, agus scipeáil eilimintí atá eisiata agat ón seiceáil, eilimintí atá i bhfolach ó úsáideoirí feiceálacha, agus eilimintí a bhfuil tabindex de -1 acu.
Déan comparáid idir stíleanna gach eiliminte ina staid fhócasaithe agus neamhfhócasaithe.
Cuir eilimintí ar aghaidh a choinníonn imlíne fócais réamhshocraithe an bhrabhsálaí, nó a n-athraíonn dath a gcúlra le codarsnacht de 3:1 ar a laghad idir an dá staid.
Seachas sin, tomhais imlínte, teorainneacha agus scáthanna an dá staid, agus comhair an limistéar a athraíonn le codarsnacht leordhóthanach. Chun pas a fháil, ní mór don limistéar sin a bheith ar a laghad chomh mór le himlíne 2 phicteilín ar tiús timpeall ar an eilimint, de réir cheanglas 2.4.13 de chuid .

Fabhtcheartú

Tá JavaScript de dhíth chun an stíl fócais a thaispeáint

Ba chóir stíleanna fócais a shainmhíniú in amháin. Má chuirtear fócas i bhfeidhm le — mar shampla, script a chuireann rang leis — b’fhéidir nach dtabharfadh Silktide faoi deara é, agus b’fhéidir nach n-oibreodh sé le teicneolaíochtaí cúnta gan méarchlár fisiciúil. Bain triail as JavaScript a dhíchumasú agus dul tríd an leathanach le Táb chun é a dheimhniú.

Stíleanna fócais nach féidir linn a thomhas

Ní féidir roinnt bealaí chun fócas a chur i bhfeidhm a bhrath ná a thomhas go huathoibríoch:

Fócas tarraingthe le bréag-eilimintí amhail ::before nó ::after.
Fócas curtha i bhfeidhm trí :focus-within ar choimeádán.
Stíleanna fócais a easghluaiseann chuig eilimintí linbh, amhail <span> taobh istigh de nasc. Braitear cuid de na cásanna seo, ach ní bhraitear gach athrú.

Déantar eilimintí a úsáideann na teicnící seo a scipeáil seachas iad a mharcáil.

Eilimintí os cionn íomhánna nó le cúlraí dothuartha

Ríomhtar codarsnacht i gcoinne datha cúlra atá ar eolas. Nuair a shuíonn eilimint os cionn íomhá, nó nuair a bhíonn sí suite lasmuigh dá tuismitheoir ionas nach féidir a cúlra a chinneadh, scipeálann Silktide í seachas buille faoi thuairim a thabhairt.

Tá eilimintí gan choinne infhócasaithe

Éiríonn clibeanna amhail <div> nó <span> infhócasaithe nuair a thugtar tabindex de 0 nó níos airde dóibh, agus is ar an gcaoi sin a thacaíonn rialtáin saincheaptha le húsáid méarchláir. Má thaispeántar ceann i do thorthaí, is féidir teacht air leis an méarchlár i ndáiríre agus teastaíonn stíl fócais uaidh. Féach tabindex ar MDN.