Flikar: Det är Komplicerat™

0
22

Jag har sagt tidigare en snabb och kraftfull sak du kan lära dig som en front-end utvecklare att bara få börja med JavaScript är att ändra klasser.

const-knappen = dokument.querySelector(“.min-knappen”);
const element = dokument.querySelector(“.innehåll”);

– knappen.addEventListener(“click”, function() {
elementet.classList.växla(“gnistrar”);
});

Vi kunde använda skicklighet att bygga några flikar, eller hur? Rätt.

Vi fick detta.

Säg att vi har denna föränderliga klasser förmåga i vår arbetsgrupp nu och vi måste bygga upp ett gränssnitt. Om vi bara lägga till lite mer kod som behandlar klicka på hanterare, vi kan nog tråd upp några enkla flikar, som denna:

Se Pennan
XQpqZV av Chris Coyier (@chriscoyier)
på CodePen.

Helt funktionella flikar. Jag kan klappa mig själv på ryggen lite här. Se hur jag använt dessa ankare-länkar för att skapa hoppa länkar mellan länk och flikar avsnitt? Det är mäktiga semantiska, tycker du inte? Flikarna är åtkomlig med ett tangentbord, har fokus stilar, och kan vara aktiverad med enter-eller returtangenten.

Kunde vi vinna? Fallet avslutat? Perfekt flikar?

Ingenting är någonsin så enkelt är det?

Ett problem här är att vi inte gör något speciellt med tangentbord hantering, som flikar gränssnitt kan kräva. Heydon Pickering skrev om detta:

Till skillnad från en och samma sida en länk, en flik inte flytta användaren till den tillhörande avsnitt/panel av innehåll. Det bara visar innehållet visuellt. Detta är fördelaktigt för synskadade användare (inklusive synskadade som använder skärmläsningsprogram) som vill flit mellan olika delar utan att behöva vada tillbaka upp sidan varje gång de vill välja en ny.

Detta kommer med en olycklig bieffekt: Om användaren vill flytta till ett avsnitt av tangentbord och interagera med sin inre innehåll, de har att gå igenom alla flikar till höger om den aktuella fliken, som är i fokus för.

Visar sig att det finns en hel lista av andra beteenden saker flikar gränssnitt kan och bör göra. I Heydon förklaring, tabbtangenten faktiskt fungerar som ett sätt att hoppa från fliken sig till innehåll som är relaterat till att fliken faktiskt flytta fokus. Skift+Tab för dem tillbaka. Sedan piltangenterna används för att byta flik. Allt detta kräver mer av JavaScript och även vissa HTML för att möjliggöra fokus state… plus ett stänk av aria-* attribut som jag saknar kompetens för att förklara varför de är viktiga alls.

I slutet, som den här:

Se Pennan
Fliken Interface (PE) genom att Heydon (@heydon)
på CodePen.

Så frågan blir: är vår klass-förändrade faktiskt en nackdel till webben, eftersom de inte står för saker som detta? Gör saker med vad grundläggande verktyg vi har en nettoförlust för tillgänglighet på webben? Jag vet inte. En allt för stor fråga för min lilla hjärna. Det är intressant att fundera på, dock.

En del av det kommer ner till muscle memory.

Om vi lär oss att koden flikar som som första demo det, kommer vi tenderar att nå för att om och om igen så länge som ingen bett våra fingrar för att göra det. Jag kodat som demo i cirka tre minuter eftersom jag har gjort det så många gånger. För att skapa dessa flikar är verkligen en del av min muskel minne.

Det är mycket prat om JavaScript-ramverk är ett gissel över nätet eftersom de verkar vara inleda en era av värsta-in-class tillgänglighet. Men vad händer om din muskel minne för att bygga flikar var att nå för en pre-byggd tabs UI som tar med alla rätt funktionalitet och vänster styling till stor del för dig?

Det är vad som Når UI tabs är (vilket förutsätter att vi arbetar med att Reagera…).

Jag säger inte att du ska gå ut och byta dina projekt att Reagera så att du kan få lite gratis flikar, men Reagerar är redan omfattande. Om bra mönster som detta blivit defacto val, då är det möjligt att effekten är en vinst på tillgänglighet. Verkar som möjligt för mig i alla fall. Det kan bara sluta mig från dåligt hand-kodning ett gränssnitt för 359th tid.