style.css — nuorodos ir fokuso žiedas

Dabar apiformink nuorodas ir duok kiekvienam valdikliui klaviatūros fokuso žiedą. Prie style.css prisijungia du blokai; niekas virš jų nekinta.

Įterptinė nuoroda

.text-link {
  color: var(--accent);
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

Ramybės būsenoje padėkos nuoroda yra akcento spalvos, be pabraukimo; užvedus pelę atsiranda pabraukimas. Tai sąmoningas, dažnas pasirinkimas — ir, kaip perspėjo teorija, ramybėje jis visiškai remiasi spalva. Vienai padėkos eilutei akivaizdžioje vietoje tai priimtina; tai būtų klaidingas sprendimas nuorodoms, išbarstytoms po kūno tekstą, kur jas visada pabrauktum. Esmė ta, kad tai yra sprendimas, ir dabar žinai, ką iškeiti.

Vienas fokuso žiedas visam, kas interaktyvu

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

Viena taisyklė įvardija kiekvieną interaktyvų elementą, kurį puslapis turi ar turės — nuorodas, mygtukus ir vėliau atsirasiančius formos laukus — tad jie visi dalijasi tuo pačiu aiškiu klaviatūros fokuso žiedu. Du dalykai daro ją teisingą:

• :focus-visible, ne :focus — kad žiedas rodytųsi klaviatūros naudotojams ir neblykstelėtų prie kiekvieno pelės paspaudimo.
• outline-offset: 2px — žiedas atsisėda 2px nuo valdiklio, ant puslapio už jo, kur aiškiai matomas. Ant akcento spalvos .skip-link tai svarbiausia: žiedas, nupieštas tiesiai ant akcento fono, būtų akcentas ant akcento — nematomas. Iškėlus jį ant puslapio, jis lieka įskaitomas.

Išbandyk sąžiningai: spragtelėk į puslapį, tada spausk Tab. Kai fokusas atsistoja ant prekės ženklo, kiekvienos navigacijos nuorodos, padėkos nuorodos ir kiekvienos kortelės „mėgstamų" mygtuko, turi matyti aiškų žiedą, žingsniuojantį per juos. Tada spragtelėk vieną pele — jokio žiedo. Ta praraja tarp paspaudimo ir Tab yra :focus-visible, atliekantis savo darbą.