Ffocws clir

Mae Silktide yn profi bod rheolyddion ar eich tudalen – dolenni, botymau, a meysydd ffurflen – yn newid eu golwg yn ddigon clir wrth eu dewis â'r bysellfwrdd. Nid yw bodolaeth y newid yn unig yn ddigon; rhaid iddo fod yn ddigon mawr a chyferbyniol i'w weld mewn gwirionedd.

Mae hwn yn fersiwn fwy llym o Ffocws gweladwy: mae'r gwiriad hwnnw'n gofyn a oes unrhyw ddangosydd ffocws yn bodoli, tra bod hwn yn mesur a yw'r dangosydd yn ddigon amlwg.

Gallwch roi cynnig arni eich hun: llwythwch dudalen a gwasgwch y fysell Tab dro ar ôl tro. Dylai pob rheolydd y byddwch yn cyrraedd newid yn weladwy, er enghraifft drwy ennill amlinell benodol neu gefndir cyferbyniol.

Pam mae hyn yn bwysig

Mae pobl sy'n llywio â bysellfwrdd – gan gynnwys llawer â namau echddygol a defnyddwyr dyfeisiau switsh – yn dibynnu ar weld lle mae . Mae dangosydd ffocws sy'n bresennol yn dechnegol ond yn welw, yn denau neu'n isel ei gyferbyniad mor ddiwerth â dim dangosydd o gwbl: mae'r defnyddiwr yn colli ei le ar y dudalen ac ni all ddweud pa reolydd y bydd gwasgu Enter yn ei actifadu.

Sut i'w drwsio

Y datrysiad dibynadwy symlaf yw amlinell solet o amgylch y rheolydd sydd â'r ffocws, o leiaf 2 bicsel o drwch, mewn lliw sy'n cyferbynnu â'r rheolydd a'i amgylchedd.

Mae dangosydd dau liw yn gwarantu gwelededd waeth beth fo'r cefndir:

/* Mae amlinell dryloyw yn cadw dangosydd yn y modd forced-colors */
:focus {
  outline: 2px solid transparent;
  /* Halo golau + cylch tywyll: mae un o'r ddau bob amser yn cyferbynnu */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Daw'r dull hwn o dechneg WCAG C40.

Osgowch ddangosyddion ar hyd un ymyl, fel border gwaelod: mae p'un a ydynt yn ddigon mawr yn dibynnu ar hyd yr ymyl honno, sy'n amrywio ar gyfer dolenni testun.

Sut mae Silktide yn profi hyn

Efelychu defnyddiwr bysellfwrdd yn tabio drwy bob elfen y gellir rhoi ffocws iddi ar y dudalen, gan hepgor elfennau rydych wedi'u heithrio rhag cael eu gwirio, elfennau sydd wedi'u cuddio rhag defnyddwyr sy'n gallu gweld, ac elfennau â tabindex o -1.
Cymharu arddulliau pob elfen yn ei chyflyrau â ffocws a heb ffocws.
Pasio elfennau sy'n cadw amlinell ffocws ddiofyn y porwr, neu y mae eu lliw cefndir yn newid gyda chyferbyniad o leiaf 3:1 rhwng y ddwy gyflwr.
Fel arall, mesur amlinellau, borderi a chysgodion y ddwy gyflwr, a chyfrif yr ardal sy'n newid gyda chyferbyniad digonol. I basio, rhaid i'r ardal honno fod o leiaf mor fawr â pherimedr 2 bicsel o drwch o amgylch yr elfen, yn unol â gofyniad 2.4.13.

Datrys problemau

Mae angen JavaScript ar yr arddull ffocws i ymddangos

Dylai arddulliau ffocws gael eu diffinio yn yn unig. Os cymhwysir ffocws gan – er enghraifft sgript sy'n ychwanegu dosbarth – efallai na fydd Silktide yn ei arsylwi, ac efallai na fydd yn gweithio i dechnolegau cynorthwyol heb fysellfwrdd corfforol. Ceisiwch analluogi JavaScript a thabio drwy'r dudalen i gadarnhau.

Arddulliau ffocws na allwn eu mesur

Ni ellir canfod na mesur rhai ffyrdd o weithredu ffocws yn awtomatig:

Ffocws wedi'i luniadu â ffug-elfennau fel ::before neu ::after.
Ffocws wedi'i gymhwyso drwy :focus-within ar gynhwysydd.
Arddulliau ffocws sy'n rhaeadru i elfennau plant, fel <span> y tu mewn i ddolen. Caiff rhai o'r achosion hyn eu canfod, ond nid pob amrywiad.

Caiff elfennau sy'n defnyddio'r technegau hyn eu hepgor yn hytrach na'u nodi.

Elfennau dros ddelweddau neu â chefndiroedd anrhagweladwy

Caiff cyferbyniad ei gyfrifo yn erbyn lliw cefndir hysbys. Pan fo elfen dros ddelwedd, neu wedi'i lleoli y tu allan i'w rhiant fel na ellir pennu ei chefndir, mae Silktide yn ei hepgor yn hytrach na dyfalu.

Mae elfennau annisgwyl yn gallu cael ffocws

Mae tagiau fel <div> neu <span> yn gallu cael ffocws pan roddir tabindex o 0 neu uwch iddynt, a dyna sut mae rheolyddion personol yn cefnogi defnyddio bysellfwrdd. Os yw un yn ymddangos yn eich canlyniadau, mae'n wirioneddol gyrraeddadwy â bysellfwrdd ac mae angen arddull ffocws arni. Gweler tabindex ar MDN.