Den Gangen jeg Prøvde å Surfe på Nettet Uten CSS

0
77

CSS er det som gir hver nettside design. Nettsteder at ikke er veldig morsom og vennlig uten det! Jeg har lest om noen som går en uke uten JavaScript og hvordan opplevelsen resulterte i nettsteder som var raskere, selv om visse aspekter av dem ville ikke fungere som forventet.

Men CSS. Slå av CSS mens du surfer på nettet ville ikke akkurat gjør web langt mindre brukbare… ikke sant? Eller, som JavaScript, vil enkelte funksjoner ikke vil fungere som forventet? Ut av nysgjerrighet, og jeg bestemte meg for å gi den en virvel, og rippe CSS kjøtt av HTML-skjelett mens du surfer på et par områder.

Hvorfor, spør du kanskje? Er det noen ikke-masochistisk grunner for å slå av CSS? Heydon Pickering når twitret at deaktivering av CSS er en god måte å sjekke tilgjengelighet standarder:

  1. Vanlige elementer, for eksempel overskrifter, lister og skjema kontrollene er semantisk og fortsatt ser bra ut.
  2. Et visuelt hierarki er fortsatt etablert med standardstilene.
  3. Innholdet kan fortsatt leses i en logisk rekkefølge.
  4. Bilder eksisterer fortsatt som <img> – tag-heller enn å gå seg vill som CSS bakgrunn.

En WebAIM undersøkelse fra 2018 rapportert at 12.5% av brukerne som er avhengige av enhver form for assistert teknologi, surf på nettet med tilpasset stilark, som kan inkludere å gjøre unna med hver CSS erklæring over et nettsted. Og, hvis vi snakker om treg internett-tilkoblinger, grøfting CSS kan være en måte å konsumere innhold raskere. Det er også sjansen for at CSS er deaktivert av årsaker utenfor vår umiddelbare kontroll, som når en server har hikke av unnlater å laste eiendeler.

Som et eksperiment, jeg har brukt fem nettsteder og web app uten CSS, og dette innlegget vil dekke mine erfaringer. Det endte opp med å bli en ganske tankevekkende opplevelse for meg personlig, men har også informerte meg profesjonelt som en utvikler på måter som jeg håper du vil se, så vel.

Men først, her er hvordan du kan deaktivere CSS

Du er absolutt velkommen til å leve vicariously gjennom meg i form av dette innlegget. Men for de av dere som føler opp til oppgaven, og ønsker å oppleve en stil-mindre nettet, her er hvordan du kan deaktivere CSS i ulike nettlesere:

  • Chrome: Det er faktisk ingen innstilling i Chrome for å deaktivere CSS, så vi er nødt til å ty til en utvidelse, som deaktivere HTML.
  • Firefox: Vis > Side Stil > Nei Stil
  • Safari: Safari > Innstillinger… > Vis Utvikle-menyen i menylinjen. Gå deretter til å Utvikle-rullegardinmenyen, og velg “Deaktiver Stiler” – alternativet.
  • Opera: Som Chrome, vi trenger en utvidelse, og Web-Utvikler som passer regningen.
  • Internet Explorer 11: Vis – > Style > – Ingen stil

Jeg kunne ikke finne en dokumentert måte å deaktivere CSS i Kanten, men vi kan fjerne CSS fra noen annen nettleser programmatisk via CSS Object Model API i DevTools-konsollen:

var d = document;

for (var s i S = d.stilark)
S[s].deaktivert = true;

for (var jeg i I = l.querySelectorAll(“[style]”))
Jeg[jeg].style = “”;

Den første loop deaktiverer alle eksterne og interne stiler (i <link> og <style>), og den andre eliminerer alle innebygde stiler. Det forbeholdet her, er imidlertid at elementer kan fortsatt dynamisk bli gitt nye innebygde stiler. Til å umiddelbart slette dem, den beste løsningen er å legge til en tidtaker. Noe sånt som dette:

(f = function(){
// Fjerne CSS

setTimeout(f, 20);
})();

Alternativt, det er bare tekst nettlesere — for eksempel de gamle Lynx — men regner med å være levende uten video, bilder (inkludert SVGs) og JavaScript.

Gjennom stil-mindre looking glass…

For hvert område jeg surfet uten CSS — Amazon, DuckDuckGo, GitHub, Stack Overflow, Wikipedia og kontrast checker kalt Hex Naw — jeg vil dele mine første inntrykk og sette noen forslag der ute som kan hjelpe med erfaring.

Gjør deg klar, fordi ting kan bli litt… forferdelige. 😱

Nettsted 1: Amazon.com

Den Amazon.com hjemmeside med CSS (til venstre) og uten CSS (høyre).

Det er ikke noe reelt behov for en introduksjon her. Ikke bare er Amazon en husholdning stift for så mange av oss, er det også krefter en stor del av internett, takket være deres storslagne Amazon Web-Tjenester plattform.

Det er en rekke ting som skjer her, så vil jeg utforske de stil-mindre ting som kommer i min vei mens å finne et produkt og utgir seg for å kjøpe det.

Den Amazon.com resultater for en “mac mini” – søk.

På hjemmesiden, jeg umiddelbart se en sprite ark som brukes av området. Det er virkelig på plass av hvor logoen kan være, og dermed gjør det vanskelig å vite hvorvidt disse bildene er ment til å være det. Hver sprite inneholder flere versjoner av logoen, og selv om jeg kunne se det “Amazon” ord mark i det, det er overraskende at det ikke er den globale hjem link. Hvis du er nysgjerrig der hjemme link egentlig er, det er denne strukturen av spenn, der logoen er tjent opp som bakgrunnsbilde… i CSS:

<a href=”/ref=nav_logo” class=”nav-logo-link” aria-label=”Amazon” tabindex=”6″>
<span class=”nav-sprite nav-logo-base”></span>
<span class=”nav-sprite nav-logo-ext”></span>
<span class=”nav-sprite nav-logo-locale”></span>
</a>

Det neste problemet som oppstår er at “Hopp til hoved innhold” – lenken ser ikke ut som en typisk koblingen hoppe, men det fungerer som en. Det viser seg å være en <a> – elementet uten en href, og JavaScript (ja, jeg la det aktivert) brukes til å etterligne anchor funksjonalitet.

Når jeg starter et søk, jeg må se videre under “Komme i gang” – lenken for å se forslag. Under “Lister” og “Din Konto” elementer, det blir vanskelig å fortelle lenker fra hverandre. De synes alle er knyttet sammen som om de var en super lang mega link. Jeg tror det ville ha vært mer effektivt å bruke en semantisk unummerert liste i dette scenariet til å opprettholde en følelse av hierarkiet.

Under alle de søkeforslag, men kontoen og navigasjon koblinger er lettere å lese, siden de er atskilt med noen plass.

Det er interessant at karusellen lavere ned på siden er fortsatt noe i bruk. Hvis jeg klikker på “Forrige side” eller “Neste side” valg, bestilling av bilder som er endret. Imidlertid, hopping mellom de alternativene som er nødvendige for meg å bla.

Karusellen vises med sine sider stabelen på toppen av en annen. Forrige eller neste side viser opp på toppen.

Hoppe ned litt videre, det er en reklame element. Den inneholder en “Ad tilbakemelding” streng ” som ser ut som statisk akkurat som det vi så med “Hopp til hovedinnholdet” link tidligere. Vel, jeg klikket det likevel, og det er åpenbart en form for deling tilbakemelding på annonsen relevans.

For å ringe til handling klarere, “Ad tilbakemelding” bør være en kobling eller en knapp.

Du kan ha gått glipp av det, men det er en blank-knappen ovenfor de to gruppene i form av etiketter og radioer knappene er ute av sted. Strukturen er forvirrende, fordi jeg ikke vet hvilke etiketter som hører til hvilken radio knapper. Jeg mener, jeg antar at jeg kunne anta at den første etiketten går med den første radio-inngang, men det er akkurat det det er: en gjetning.

Det er også forvirrende er at det er Send-knapper mellom “Lukk Vinduet” på “Avbryt” og “Send Tilbakemelding” alternativer nederst i skjemaet. Hvis jeg trykker på en av disse, jeg tatt tilbake til annonsen. Nå, la oss anta at jeg var blind og bruker en skjermleser til å navigere på denne samme del, selv med tilstedeværelsen av CSS. Jeg ville bli sa “Send-knappen” for to av knappene og ville derfor har null anelse om hva du skal gjøre uten å gjette. Det er en god påminnelse om viktigheten av semantikk ved håndtering av markup (knappen etiketter i dette tilfellet) og å være oppmerksom på hvor mye tillit er plassert på JavaScript for å overstyre web defaults.

Gjør et søk — la oss si for “Mac Minis” — jeg kan fortsatt få tilgang til og forstå produktet rangeringer siden de vises som tekst (i stedet for verktøytips de ellers) i stedet for stjerner. Dette er et godt eksempel på bruk av en solid tekstlig tilbakefall når et bilde er brukt som visuelle innholdet, men fungerte som et bakgrunnsbilde i CSS.

Siden krevde meg for å bla en stund å komme til den faktiske søkeresultater. Legg merke til at gigantisk overlegg for et sponset produkt.

Etter å ha valgt Mac Mini med Intel Core i3, jeg møtt av andre Mac-produkter over produktet jeg har valgt, og nødt til å gå utover dem til å velge antallet jeg ønsker å kjøpe.

Produktet side viser Amazon Prime medlemskap info slo mellom antall utvalg og kjøpe knapper.

Bla ned, og en “Legg i Handlekurv” – knappen vises ved siden av en etikett med samme innhold. Det er overflødige og trolig unødvendig siden a < – knappen> – elementet er i stand til å holde sin egen label:

<- knappen>Legg til i Handlekurven</button>

Neste opp, vi har et tilbud for en Amazon Prime-medlemskap. Det er alt fint og dandy, men legg merke til at det er satt inn mellom produktet jeg kjøper og “Kjøp Nå” – knappen. Jeg har en veldig vanskelig tid å vite om å klikke på “Kjøp Nå” kommer til å legge til Mac Mini til kassen, eller om jeg kjøper Amazon Prime i stedet.

Jeg ønsket også å spille litt rundt, så jeg prøvde å fjerne Mac Mini fra handlekurven min når jeg fant ut hvordan å legge det til. Det tok meg som ti sekunder å finne vogna, så jeg kan redigere det. Det viser seg at det var rett ved siden av “Gå til kassen (1) elementet” link, men rams rett opp sammen slik at det hele ser ut som en enkelt link.

Totalt sett var det ikke vanskelig å finne et produkt. På den annen side, på vei til kassa ble mer av en hodepine så jeg fortsatte. Det var noen fattige semantisk – og-tilgjengelighet-relaterte praksis som forårsaket forvirring, og viktige knapper og lenker ble vanskeligere å finne.

👍 Hva Nettstedet Gjør Godt
💡 Hva de Kan Forbedre Nettstedet
Karuseller er funksjonelle, selv uten styling. Logoen er avhengig av et bakgrunnsbilde, kan du skjule vei hjem.
Innholdet hierarkiet er fortsatt generelt nyttig for å vite hvor vi er på en side. Mange koblinger og ankere stole på JavaScript og ser ikke ut til å være interaktiv.
Rekkefølgen av elementene forblir om lag i takt. Linker ofte støte opp mot hverandre eller er plassert utenfor der de vil være relevant.
Flott bruk av fallbacks for produktet vurdering som er avhengige av bakgrunnsbilder. Knappen etiketter er enten villedende eller repeterende.
Form elementer som ikke klarer å innrette seg ordentlig.
Det er en grov reisen å sjekke ut.

Nettstedet 2: DuckDuckGo

Den DuckDuckGo hjemmeside med CSS (til venstre) og uten CSS (høyre).

Har du brukt DuckDuckGo før? Jeg antar mange folk å lese CSS-Triks har, men for de som kan være hørte om det for første gang, det er et alternativ til Google-søk med vekt på personvern.

Så, for å komme i gang med dette er litt misvisende fordi DuckDuckGo hjemmeside er super enkelt. Ikke mye som kan gå galt det, ikke sant? Vel, det er litt mer involvert enn at siden vi arbeider med søkeresultater, innhold hierarki og relevans når vi får til å gjøre søk.

Rett utenfor balltre, hva jeg møtt med mye mer innhold enn jeg hadde forventet av et så enkelt lander. På det er ikke helt klart hva dette nettstedet, er ved å skanne nettstedet. Den første omtale av produktet navn er det fjerde elementet i den første liste i tilfeldig rekkefølge, og det er en oppfordring til handling til å “Spre DuckDuckGo.” Logoen er helt mangler, som åpenbart betyr at det er brukt som bakgrunn… i CSS.

Vi snakker om at unummerert liste, antar jeg hva jeg ser på, tilhører i hodet, og det er ingen hopp over navigasjon. Vi har et trippel pil-ikonet () er at en mobil-menyen eller en meny for å skjule de minst viktige elementer, eller noe annet?), etterfulgt av personvern-relatert innhold, sosiale medier linker, noe som ser ut som en link, men det er faktisk to lenker for “Om DuckDuckGo” og “Lære Mer.”

Til slutt, mot den aller nederst er der den primære bruk tilfelle for området faktisk kommer opp: søk bar. Jeg antar at “E” – merket betyr “Søk” og “X” etiketten er en forkortelse for å tømme søkefeltet.

Alright, til å utføre et søk. Det er super kult at jeg kan fortsatt se auto-forslag og bruk opp-og ned-piltastene for å merke hver enkelt. Fjerne fastkjørt feltet skjønt, forslag forsvinner ikke før etter at jeg oppdaterer siden.

Å utføre et søk og sjekke ut den automatiske forslag.

Alt i Innstillinger-menyen er elementer i en liste med hva som bør være overskrifter — “Innstillinger”, “Personvern Essentials,” “Hvorfor Personvern,” “Hvem Vi Er” og “Holde Kontakten.” Disse er svært sannsynlig en del av en mobil menn hvis CSS ble aktivert, kanskje utløst av at triple pil link ting på toppen. I denne menyen, ser jeg fire blanke punktene mellom “Innstillinger” og “Flere Temaer.”

Den DuckDuckGo hjemmeside utsatt et par åpenbare brukervennlighet problemer rett utenfor balltre.

Kommer her som en ny bruker, jeg har ingen anelse om hva de tom liste elementer, men punktmerking markert i skjermbildet ovenfor er egentlig temaet knapper. For å avklare hensikt, noen tilbakefall teksten ville være nyttig, og disse bør være radio eller vanlige knapper i stedet for å liste elementer (vurderer sin funksjonalitet).

Hver blokker av innhold med en “X” — inkludert “Innstillinger” — kan ikke avvises, men å klikke på “X” over et bilde av en turgåer bildet er årsak til en del av innhold for å klare av tv — takk til JavaScript fortsatt være aktivert. Hva jeg virkelig finne vanskelig er det redundante numeration i listen under “Bytte til DuckDuckGo…” ser Vi dette:

1. 1We ikke lagre din personlige info
2. 2We ikke følge deg rundt med annonser
3. 3We ikke spore deg. Noensinne.

Ser ut som noen blandede eksempel på bruk av semantisk markup med noen annen måte å vise listen element tall.

Den tredje “X” ned har funksjonalitet.

Det er en kolossal mengde hvite plass under turgåer i biletet før den første <h1> – element. Forutsatt at de er enten lenker eller knapper, klikke alle forekomster av “Legg til DuckDuckGo til [nettleser]” gjør ingenting. Hver del illustrasjon gjør noen unødvendige horisontal rulling, som er et vanlig problem som vi vil se i de andre områdene vi ser på.

Bla gjennom mellomrom mellom turgåer bilde og første-nivå overskriften. Wheee!

Etter disse paragrafene, det er en tom boks og jeg har ingen anelse om hva det er.

En tom boks som ser ut til å ha noen hensikt.

Jeg sprakk åpne DevTools og det viser seg å være en <body> – element i <iframe> – det har bare JavaScript for noe relatert til POST-forespørsler. Det kan like godt være en av de elementene vi skal la ligge.

Etter det jeg ser to gjentatte tilfeller av “bruk som Standard Søkemotor” pakket rundt et “Sett som Hjemmeside-delen.

Instruksjonene i Safari for å angi søkemotor som standard eller hjemmeside. Instruksjonene kan variere fra en nettleser til en annen.

Disse må ha vært instruksjonene som dukket opp når jeg klikket på “Legg til DuckDuckGo…” handlinger, men det viser virkningen skjule og vise innhold kan ha når vi arbeider med rett markup. I stedet for å gjenta innhold, tilsvarende lenker eller knapper skal peke på ett eksempel. At ville kutte redundans her.

OK, på tide å endelig få inn søk. Det første jeg ser i søkeresultatene er en tom boks med en instruks om å ignorere boksen. Okey-dokey da.

DuckDuckGo ønsker meg til å ignorere en boks.

Flytte på, gjorde du se at DuckDuckGo link? Det må være logoen, og jeg lurer på hvorfor denne var ikke på hjemmesiden. Virker som lavt-hengende frukt for forbedring.

Søk bar fortsatt fungerer normalt med unntak av “S” og “X” – knapper som har byttet steder fra hvor de var på hjemmesiden.

På søkeresultatene. Jeg kunne lett skilles ett resultat fra en annen. Hva jeg fant ganske unødvendig, men morsomt, er at “nettleseren Din viser om du har besøkt denne linken” meldinger som er plassert på slutten av hver side tittel. Det ville være super irriterende fra en leser av skjermen perspektiv. Tenk deg å høre at gjentatt på slutten av hver side tittel. At meldinger er det til å bli vist sammen med haker som inneholder tipsene som holder at meldinger. Men, med CSS deaktivert, vel, ingen haker og ingen verktøytips. Som et resultat, alt jeg får er en ekstra lang vei.

Søkeresultatene på DuckDuckGo er fortsatt godt strukturert med CSS deaktivert, men legg merke meldinger som er lagt til hver resultat tittel.

Navigasjonsfeltet som er normalt vises som faner å filtrere etter ulike typer resultater (for eksempel Bilder) ser ut til å gjøre noe på dette punktet, fordi det er vanskelig å fortelle at de er filtre uten styling. Men hvis jeg klikker på Bildene filter, og bildet resultatene er faktisk lastet lavere ned på siden, stablet rett på toppen av resultater på Nettet, og siden blir mega lang som et resultat. Oh, og du tenker kanskje at å rulle hele veien tilbake opp (og det er en lang vei opp) og deretter klikke på annen filter, sier Videoer, ville erstatte bilder, men som rett og slett setter inn video miniatyrbilder under bilder, noe som gjør en allerede mega lenge siden en super mega lenge siden. Tenk deg siden vekten av alle de eiendeler!

Vel, du ikke må. I henhold til DevTools, bilder alene konto for 831 forespørsler og en samlet vekt på 23.7 MB. Heftig!

Den ekte kicker er at det ikke er umiddelbart klart at alle disse bildene har lagt visuelt.

De siste par av elementer er verdt å merke seg. Ved å klikke “Send tilbakemelding” link tilsynelatende gjør ingenting. Kanskje det utløst en modal med CSS? Og, selv om “Alle steder” – lenken ikke ligner en link, og jeg har lett ignorert det, jeg var nysgjerrig nok til å klikke den og ble tatt med til et ankerpunkt på en liste over land. De to siste linker bare har gjort sine tilsvarende innholdet vises under listen landet valg.

“Alle Områder” valget er hemmelig fungerer som et anker.

Det er mye å gå på her, og det er helt klart muligheter for forbedring. Det er For eksempel samtaler til handling som vises som normal tekst som skal være enten være lenker eller knapper i stedet. Også, vi tror ytelsen til et nettsted ville bli bedre med CSS deaktivert, men alle de som er lagt eiendeler i søkeresultatene er uoverkommelige. Når det er sagt, søk erfaring er ikke vondt i det hele tatt… det er, med mindre du grave i bilder eller videoer mens du gjør det.

👍 Hva Nettstedet Gjør Godt
💡 Hva de Kan Forbedre Nettstedet
Søk er konsistent og arbeider med eller uten CSS. En “skip” linken for å ville hjelpe til med tastaturet surfing.
Innholdet hierarki gjør innholdet enkelt å lese og søkeresultater en ren opplevelse. Ikke-link elementer i “Innstillinger” – menyen bør være overskrifter for egen sorterte lister, så det er et tydelig hierarki for hvordan alternativene er gruppert.
God bruk av en hjemmeside link på toppen av søkeresultatsiden. Noe innhold er enten duplisert eller gjentatt fordi området er avhengig av betinget vise og skjule innhold.
Sørg for at alle samtaler til å handle vises som linker i stedet for vanlig tekst.
Bruk en fallback-løsningen for å filtrere typer søkeresultater til å unngå at elementer stabling og bidra til å kontrollere heftig side vekt.

Nettstedet 3: GitHub

Den GitHub hjemmeside med CSS (til venstre) og uten CSS (høyre).

Hei, her er et område mange av oss er godt kjent med! Vel, mange av oss er vant til å være logget inn hele tiden, men jeg kommer til å surfe på den mens du er logget ut.

Allerede, det er en hoppe link (yay). Det er også en mobil navigasjon-ikonet som jeg forventer vil gjøre noe, og er vist til høyre når jeg prøver.

Det store gapet i hvit? Det er en SVG-ikonet med hvitt fyll, i henhold til DevTools.

Mellom noen av de navigasjon elementer, det er unødvendig gigantiske hull. Hvis du klikker på disse, de vil fortsatt fungere som dropdown menyer. De er <detaljer> og <summary> – elementer… men noe føles semantisk feil. Det er hyggelig at menyelementene er faktisk usortert liste-elementer, og at intern nettleser funksjonalitet kan fortsatt skje ved hjelp av en semantisk måte å utvide innholdet. Men som SVG-ikonet søl med meg.

Før du begynner å skrive noe i feltet, ser jeg tre tilfeller av “Søk Alle GitHub” og “Hopp til” – lenker. Jeg har ingen idé som til å klikke, men hvis jeg gjør et søk, søkeord dukker opp i den tredje gruppen.

Det er ingen klar sammenheng mellom søkeboksen, og de tre gruppene av lenker.

Alt annet sted på hjemmesiden virker fint, bortsett fra en rekke altfor store bilder horisontalt overfylte vinduet.

Bla nedover for å se store bilder overfylte nettleser-vinduet.

La oss gå tilbake til søk bar og navigere til en repo-vi kan finne. Rett under Søk-knappen, vi har to nesten identiske videregående navigasjon barer for at avkastningen depotet teller, kode, forplikter, og andre meta. Uten å se på kilden, jeg har ingen anelse hva formålet er for å ha to av disse.

Søkeresultater for “javascript tips” spørring.

Depotet sider som fortsatt har en lett-å-følge struktur og logisk hierarki for det meste. Mens du er logget ut og har min cache cleared før du kommer, “Avvise” – knappen for “Bli med på GitHub i dag” blokk utfører fortsatt som jeg forventer. Som vi så tidligere på Amazon, merke koblinger er vanskelig å skille fra hverandre fordi de kjører sammen som en enkelt linje.

Et depot side i en logget ut stat.

De neste to knapper — “JavaScript” og “Nye Trekk Forespørsel” — synes ikke å gjøre noe når jeg klikker på dem. Jeg ville tenke trekke forespørsel knappen skal være deaktivert mens du ser på som en gjest siden, med mindre det er ment å ta en bruker til en logg i skjermen først… men selv det føles ikke riktig. Viser seg at knappen er faktisk deaktivert når CSS er aktiv, skjønt. Så resten av siden er ganske lett å forstå.

Hvis du er her hovedsakelig for å administrere, noe som bidrar til, eller å sjekke ut depoter, vil du ikke møte en hel masse av friksjon siden hierarkiet spiller godt ut. Du vil oppleve ganske mye det samme andre steder, uansett om du leter trekk ved forespørsler, spørsmål, eller individuelle filer. De fleste av hekk bor i en mindre fremtredende sider på nettstedet.

👍 Hva Nettstedet Gjør Godt
💡 Hva de Kan Forbedre Nettstedet
Hierarki og struktur av mange sider som er veldig lett å følge og gjøre logiske sans. Bruk den bredde og høyde attributter på <img> – elementer og SVGs å hindre dem fra å blåse opp.
De fleste av SVG-ikoner som er innebygd på siden er riktig størrelse. Se for tom liste elementer.
Fin bruk av et skip linken i overskriften. Kontroller at-knappen etiketter bruk hele ord.
Sørg for at koblingene ha mellomrom eller linjeskift mellom dem for å hindre kjøre-ons.

Nettsiden 4: Hex Naw

Hex-Naw hjemmeside med CSS (til venstre) og uten CSS (høyre).

Dette på neste side er en online verktøy som jeg bruker ofte å sjekke farge kontraster for tilgjengelighet. Og for et område som er så stort på farge, det’ s trolig mye skjer her med CSS, så det skal bli interessant.

Det er umiddelbart en stor mengde plass over navigasjon og ingen hopper over linker. Hamburger og lukke-knappene for mobile layout og “X” – knappene ved siden av hver farge for å teste, er store.

Vi mangler hoppe over koblinger og det er overdreven plass over navigasjon.

Oh, og sjekk ut denne enorme gapet mellom “Test Farger” – knappen og neste del av innholdet.

Det ville være fint å lukke dette gapet, så “ja” og “naw” tellere er synlig i testen.

En av de mange fine funksjoner på dette nettstedet er en knapp som lar deg se bare fargene som passerte testen, snarere enn å vise all testet farger. Dessverre, at knappen ikke gjør noe med CSS deaktivert. Men, jeg kan fortsatt se hvilke farger arbeid, og få definisjonene for kontrast, stor tekst, og lite tekst direkte i resultat-tabellen.

Skjule og vise vilkårene er trolig hva knappen gjør med CSS. Den bummer er at jeg ikke vet formålet med disse enkle bokstaver (f.eks. S og R) etter tabelloverskrifter. Det er også både ironisk og forvirrende å se at meldingen for alle sviktende farger etter tabellen fordi, vel, det er forbi farger i denne listen. Hva kan gjøres er å ha skjule det som standard, men betinget injisere det senere hvis alle farger i en enkelt test mislykkes.

Å trekke ut DevTools, det viser seg at noen av de hvite plass på toppen er Hex-Naw-logoen som en SVG-fil. Plassen ovenfor som er forbundet med andre SVG-symboler brukt til side. Ved hjelp av en standard farge til svart for logo, vil dette bidra til å redusere noen av plass. Jeg laget denne raske endringen i DevTools og det gjør en merkbar forskjell.

Størrelsen på mobil-menyen og “X” – ikonene kan lett bli redusert og være proporsjonal til deres viewBox attributter.
Her er en måte å redusere størrelsen på den mobile-menyen og “X” – ikoner.

Den andre gap på plass er forårsaket av en SVG loader som vises mens beregning farge kontraster. Dette kan bli hjulpet ved å angi et mye mindre, men forholdsmessig, bredde og høyde akkurat som den mobile-menyen og “X” – ikoner.

Jeg var i stand til å avdekke og endre størrelse på SVG loader ikonet i DevTools.

Legge til en innledende bredde og høyde for hver SVG vil definitivt redusere behovet for å bla. Dette er også hva vi kan gjøre for å fikse hullene vi så i GitHub navigation som godt.

Til slutt, Hex Naw er fortsatt ganske nyttig uten CSS. Jeg kan fortsatt teste farger, få pasninger og sviktende farge resultater, og du kan navigere deg rundt på siden. Det er bare synd jeg ikke var i stand til å arbeide med faktiske farger og måtte jobbe rundt de ekstra store SVG-ikoner.

👍 Hva Nettstedet Gjør Godt
💡 Hva de Kan Forbedre Nettstedet
Nettstedet opprettholder godt innhold hierarkiet i hele området. SVGs skal være bruk et tilbakefall fylle farger og bruk den bredde og høyde attributter.
Alle elementene er skrevet semantisk. Tilbakemelding for alle sviktende farger kan være dynamisk lagt til og fjernet for å unngå pinlige meldinger.
De tester seg selv fungerer som den skal med unntak av å være i stand til å vise eller skjule informasjon. Vurdere en alternativ måte å vise fargen for de verdier som blir testet, som tabell celler med bakgrunnsfargen attributtet.

Nettstedet 5: Stakkoverflyt

Den stakkoverflyt hjemmeside med CSS (til venstre) og uten CSS (høyre).

Som GitHub, stakkoverflyt er en av de ressurser som mange (om ikke de fleste) av oss holder i våre tilbake fordi det bidrar til å finne ut om noen har allerede bedt om en utvikling spørsmål og svarene på dem.

På siden for å stille et spørsmål, jeg ser en haug med blank punktene ovenfor de viktigste <textarea> – element. Jeg har ingen anelse om hvorfor de tomme listen elementer er det. Jeg kan ikke se noen av formateringen knapper heller, men etter å rote litt rundt, fant jeg ut at de måtte være noe mer enn tomme listen elementer. Kanskje skifte til en tekst eller et SVG-ikonet for hvert element ville bidra til å identifisere hva disse er og gjør. De bør bli omgjort til ekte knapper, så vel.

Det er også fortsatt mulig å få en liste over lignende spørsmål mens du taster inn tekst i tittel-feltet. Hver fungerer her som forventet, noe som er fint. Selv, det er merkelig at det stemme teller for hvert foreslo spørsmålet vises to ganger, en gang over tittelen som en link, og igjen ved siden av tittelen uten å være koblet.

“Still et Spørsmål” siden har litt vanskelig formateringen, men den totale funksjonaliteten er i takt, og siden er det relativt enkelt å navigere.

En av de viktigste elementene vi alle se etter når du lander på en Stack Overflow spørsmål-side, er at store grønne haken som angir det riktige svaret ut av alle de innsendte svarene. Men med CSS slått av, er det vanskelig å si hvilke svar som ble akseptert fordi hvert svar i listen har en svart hake. Selv om de aksepterte svaret er alltid på topp, det er fortsatt ingen alternativ eller tilbakefall indikasjon uten å måtte samhandle med siden. I tillegg, det er ingen indikasjon på om du har allerede stemt opp eller ned stemte spørsmålet eller noen av svarene.

Spørsmålet (til venstre) ved siden av listen over gitt svar (høyre). Vi mister mye av hierarkiet når stiler er tatt bort.

For å oppsummere min erfaring på Stack Overflow, jeg var i stand til å oppnå det jeg normalt kommer til området for: å finne svar på en programmering problem. Som sagt, det var faktisk en av få muligheter for forbedring, og dette området er et godt eksempel på hvordan design ofte er avhengig farge for å indikere hierarki eller en verdi på en side, som var sårt savnet fra den aktuelle sidene i dette eksperimentet.

👍 Hva Nettstedet Gjør Godt
💡 Hva de Kan Forbedre Nettstedet
Nesten hvert element er skrevet semantisk. Bruk klare kontroller for å identifisere redigering tools mens å spørre eller svare på spørsmål.
SVG ikoner for bruk i bredde og høyde attributter. Vurdere et visuelt ikon for å skille den aksepterte svar fra noen andre svar på et spørsmål.
Lister av svarene er klare og enkle å skanne. Vurdere en annen metode for å indikere en opp stemme eller stemme ned foruten fargen alene.

Nettstedet 6: Wikipedia

Wikipedia hjemmeside med CSS (til venstre) og uten CSS (høyre).

Wikipedia, web primære referansepunkt! Det er et online stift, og en av dens tiltalende egenskaper er en slags mangel på design. Dette bør gjøre for en interessant test.

Noen linker ned, har vi et hopp over navigasjon alternativ for den virkelige navigasjon og søk. Startside header som inneholder verden bilde opprettholder sine to kolonne layout, og du kanskje har gjettet hvorfor: dette er en tabell layout. Mens det kan ikke være en brukervennlighet problem, vi vet det ikke er semantisk til å stole på bordene for å lage en layout. Det var en relikvie av veien forbi når vi ikke har flyter, flexbox, rutenett eller annen måte å håndtere innhold plassering. Som sagt, det er ingen merkbar brukervennlighet problemer eller forvirrende elementer på siden.

La oss gå videre til hva mange av oss bruker mest tid på i en: Wikipedia: en artikkel oppføring. Dette er ofte hovedkilden til Wikipedia, spesielt for de av oss som starter ved å skrive noe i en søkemotor, og deretter klikker du på Wikipedia søkeresultat.

Legg merke til hvordan lignende stil-mindre siden er til stylet side, selv om det blir en enkelt kolonne.

Poenget er at denne siden er fortsatt svært brukbare og hierarkisk med CSS deaktivert. Oppsettet går ned til en enkelt kolonne, men innholdet er fortsatt flyter i en logisk rekkefølge og selv opprettholder biter av styling, takk igjen til en avhengighet av tabeller og inline tabell egenskaper.

Ett problem jeg kom borti opp mot er navigasjon. Det er en “Hopp til navigasjon” – lenken i overskriften som faktisk faller meg ned til navigasjon når jeg klikker på det. I tilfelle du lurer på, navigasjon er inneholdt i bunnteksten, som er grunnen til at du trenger å hoppe til det.

Navigering meny med strandet rutene ovenfor “Varianter” og “Mer.”

Det er tilsynelatende tilfeldig rutene over et par av de navigering på overskrifter (spesielt for “Varianter” og “Mer”) og de ser ut til å tjene noen hensikt, selv om boksen over “Mer” og blir det vises i et bestemt vindu bredde når CSS er aktivert.

Det er faktisk en merkelig ting i navigasjon, og det er en etikett-mindre-knappen mellom “andre prosjekter” og “Språk” overskrifter.

Å holde musepekeren over knappen gir et hint om at det er for innstillinger for språk, men den knappen skal minst ha en tittel for å gjøre det klart foran.

Ved å klikke denne knappen, jeg er fortsatt i stand til å få tilgang til innstillinger for språk, og det meste fungerer som forventet. For eksempel, layout opprettholder en fanebasert layout som er super funksjonelle.

I kategorien Skjerm, men den “Språk” og “Skrifter” – knappene gjør ingenting. De sannsynligvis er kategorier som godt, men jeg kan i det minste se hva de tilbyr. Ved siden av disse knappene er to tomme velger menyer som gjør absolutt ingenting (den første ikke blir fylt opp med ComicNeue, OpenDyslexic, og Systemet font valg når du krysser). Ser på “Input” – kategorien, skrivespråk knappene fortsatt skje til å fungere som faner. Jeg er fortsatt i stand til å velge andre alternativer enn engelsk, spansk og Kinesisk.

Trykk på [ … ] – knappen tar meg til en liste over språk på toppen av siden.

Artiklene er ikke vanskelig å lese i det hele tatt uten CSS og det er fordi nesten hvert element er semantisk korrekt og følger en konsekvent dokument hierarki. En ting jeg lurer på, var hvor “Vis/Skjul” – knappen som er normalt i innholdsfortegnelsen gikk. Det viser seg å være en enslig boksen, og etiketten er falske — den bruker innholdet eiendom på en pseudo-element i CSS for å vise etiketten.

Et annet problem i artiklene er at du må bruke tid på å jakte ned bilder når du forhåndsvise dem. Vanligvis, hvis du klikker på et bilde i artikkelen sidebar vil utløse en full-skjerm-modale som inneholder en karusell av bilder. Uten CSS, at karusellen er borte, og i dets sted, er bildet med en rad av umerket knappene over det. Det er en bummer, men ville være helt OK hvis karusellen var ikke helt ned på siden, på motsatt side av der klikket på bildet på toppen av siden som er uten evne til å hoppe ned til det.

Bildet nedenfor er ikke lenger finnes i en modal, men på slutten av siden.

Jeg vil være uforsiktig hvis jeg ikke nevne at Wikipedia-logoen var ingensteds å bli funnet på artikkelen! Det er ikke engang en hvit SVG på hvitt. Linken inneholder faktisk ingenting:

<a class=”mw-wiki-logo” href=”/wiki/Main_Page” title=”Gå til hovedsiden”></a>

Heldigvis, “Hovedsiden” lenken under “Navigasjon” er en annen vei hjem, uten å trykke på nettleserens Tilbake-knapp. Men, likevel føles merkelig å ha noen merkevarebygging på siden når den gjør en så god jobb med det på hjemmesiden.

Wikipedia er HTML problemer finnes det meste i har jeg forvente å være mindre ofte brukt i stedet for artikler. De har aldri hindret min leseopplevelse i det lange løp.

👍 Hva Nettstedet Gjør Godt
💡 Hva de Kan Forbedre Nettstedet
Nettstedet opprettholder en ren struktur og hierarki. Logo plassering kunne bli flyttet (eller lagt til, i noen tilfeller) til toppen av siden uten CSS bakgrunnsbilde.
Hopp over koblinger som brukes effektivt for søk og navigering. Knapper bør omfatte etiketter.
Artikkelen innhold er semantisk og lett å lese. Bildet karusellen på sidene kunne laste der utløse oppstår og bruke de riktige knappen etiketter for kontrollene.

Måter å lage CSS-mindre en bedre opplevelse

CSS er en viktig komponent til moderne web. Som vi har sett opp til dette punktet, det finnes en rekke nettsteder som blir neste fn-ubrukelig uten det — og vi teller noen av de mest kjente og brukte nettsteder i at mix. Det vi har sett er at, i beste fall, det primære formålet for et nettsted kan fortsatt gjøres, men det er hindringer underveis. Ting som:

  • manglende eller semantisk feil hoppe over lenker
  • lenker som går sammen
  • store bilder som krever ekstra rulling
  • tomme elementer, som listeelementer og knappen etiketter

La oss se om vi kan lage disse i en slags liste over beste praksis for å vurdere situasjoner der CSS kan være deaktivert eller ikke tilgjengelig.

Inkluderer et hopp over navigasjon-koblingen på toppen av dokumentet

Å ha en skjult link til hopp over navigasjon er et must. Legg merke til hvordan de fleste av områdene vi så på som finnes navigasjon lenker direkte i overskriften. Med CSS slått av, de navigasjon ble lange lister med lenker som ville være så vanskelig å fanen eller bla gjennom for alle brukere. Å ha en link til skip som ville gjøre at opplevelsen mye bedre.

Den mest grunnleggende HTML eksempel jeg har sett er en anker-lenke som mål en ID, der de viktigste innholdet begynner.

<a href=”#main”>Hopp til hoved innhold</a>
<!– etc. –>
<viktigste id=”main”></main>

Og, selvfølgelig, kan vi kaste en klasse navn på denne linken for å skjule det visuelt så det er ikke som vises i BRUKERGRENSESNITTET, men fortsatt tilgjengelig for både tastatur brukere og når CSS skjer for å være av.

.hopp over navigasjon {
border: 0;
klipp: rect(1px, 1px, 1px, 1px);
overflow: hidden;
padding: 0;
position: absolute;
høyde: 1px;
bredde: 1px;
}

/* Bonus poeng for å legge til :fokus stiler */

La whitespaces der de gir mening

En annen smerte punktet som vi så i noen tilfeller var tekst linker kjører sammen. Enten det var i navigasjon, koder eller andre knyttet opp meta, vi ofte så linker som var “limt sammen” på en slik måte at flere individuelle koblinger, viste seg å være en gigantisk link. Det er enten et resultat av hånd-koding linker som at eller en automatisert bygge oppgave som komprimerer HTML og fjerner whitespaces i prosessen. Uansett, HTML ender opp som dette:

<a href=”#”>CSS</a><a href=”#”>JavaScript</a><a href=”#”>Python</a><a href=”#”>Swift</a>

Vi kan beholde friheten til å bruke mellomrom eller linjeskift skjønt, selv med CSS deaktivert. En idé er å lene seg på flexbox for lokalisering liste over elementer når CSS er aktivert. Når CSS er deaktivert, listen elementer bør stabelen vertikalt og vis som liste elementer som standard.

Hvis elementene er tags og bør fortsatt være adskilt, deretter tradisjonell avstand metoder som marger og polstring er fremdeles stor, og vi kan stole på naturlig linjeskift i HTML for å hjelpe til med stil-mindre formatering. For eksempel, her er linjeskift i HTML-koden som brukes til å skille elementer, flexbox å fjerne steder, så stylet opp i CSS for å re-skilt elementer:

Se Penn
Håndtering Lenker i HTML Adskilt med Mellomrom eller linjeskift ved Jon Kantner (@jkantner)
på CodePen.

Bruk bredde og høyde attributter villig

Den største plagen i dette eksperimentet kan ha vært bilder eksploderende på skjermen til det punktet at de dominerer innhold, kan du ta opp en overdreven mengde plass, og resultere i en heftig mengde rulling for alle brukere.

Løsningen her er ganske enkelt fordi vi har HTML-attributter og venter på oss til å definere dem. Både bilder og SVG har metoder for å eksplisitt definere sin bredde og høyde.

<img src=”/path/to-image.jpg” bredde=”40″ height=”40″ />

<svg bredde=”40px” høyde=”40px” viewBox=”0 0 200 200″>
<polygon poeng=”80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80″ />
</svg>

Forberede SVGs for en hvit bakgrunn

Mange av de store hullene på sidene som vi så på som så ut som tomt rom, men de var egentlig hvite SVGs som blåste opp til full størrelse, og blandet i den hvite bakgrunnen.

Så, ja, ved hjelp av riktig bredde og høyde attributter er en god idé å hindre kjempestor ikoner, men vi kan også gjøre noe om at hvitt-på-hvitt situasjon. Ved hjelp av egenskaper som fyll og fyll-regelen som attributter som vil jobbe her.

<!– Ikonet blir rødt etter standard –>
<svg viewBox=”-241 243 16 16″ bredde=”100px” fylle=”#ff0000″>
<bane d=”M-229.2,244 c-1.7,0-3.1,1.4-3.8,2.8 c-0.7-1.4-2.1-2.8-3.8-2.8 c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6 C-225,245.9-226.9,244-229.2,244 L-229.2,244 z”/>
</svg>
/* …og det er fortsatt rødt når CSS er aktivert */
svg {
fill: #ff0000;
}

Se Penn
Angi SVG-Width-Attributt av Geoff Graham (@geoffgraham)
på CodePen.

Merk disse knappene!

Til slutt, hvis knappene er i utgangspunktet tom, de må ha synlige skifte innhold. Hvis de bruker et bakgrunnsbilde og en tittel for hva den gjør, kan du bruke et spenn som inneholder tittel tekst deretter legg til aria-skjult=”true” så det ikke høres ut som skjermleser leser-knappen etikett to ganger (f.eks. VoiceOver sier, “Legg til knappen Legg til” i stedet).

<- knappen class=”btn-ikonet” title=”Legg til”>
<span class=”btn-label” aria-skjult=”true”>Legg til</span>
</button>

Deretter CSS kan være noe sånt som dette:

.btn-ikonet {
bakgrunn: url(sti/til/ikon.svg) 0 0 / 100% 100%;
høyde: 40px;
bredde: 40px;
}

.btn-label {
display: block;
overflow: hidden;
høyde: 0;
}

Hvis det er <li> – elementer fungerer som knapper, kan de fortsatt, men de bør være statisk, og innholdet skal plasseres på en knapp.

Nå, hvis ikonet er en SVG, vi kan sikre tittelen verktøytips kan fortsatt sees ved å bruke aria-labelledby og tildeling av id-en til tittelen.

<- knappen>
<svg bredde=”40px” høyde=”40px” viewBox=”0 0 200 200″ aria-labelledby=”btn-title”>
<title id=”btn-title”>Legg til</title>
<polygon poeng=”80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80″ />
</svg>
</button>

Konklusjon

Det kan være lett å enten glemmer eller være redd for å sjekke hvordan et nettsted vises når CSS ikke er tilgjengelige for å gjøre BRUKERGRENSESNITTET ser så god som forventet. Etter en kort tur over den Ikke-CSS Web™, vi så bare hvor viktig CSS er til den generelle utformingen og opplevelsen av nettsteder, både små og store.

Og i likhet med andre verktøy vi har i vår sett, lener seg også tungt på CSS for å håndtere funksjonalitet og virkemåte til elementer som kan føre til dårlige opplevelser når det ikke rundt for å gjøre sin magi. Vi har sett det samme være tilfelle i områder som lene seg for tungt på JavaScript. Dette er ikke å si at vi ikke bør bruke dem og stole på dem, men husk at de ikke skuddsikkert på egenhånd og trenger riktig fallbacks for å sikre en optimal opplevelse er fortsatt tilgjengelig med eller uten vårt verktøy.

Sett i lys av CSS er virkelig et lag av progressive enhancement. Hierarkiet, skjemakontroller, og andre elementer bør også forbli intakt under deres user agent stiler. Den ser og føler, mens viktig, er andre når det gjelder å sørge for at elementene er funksjonelle på sin kjernevirksomhet.