Interneto dizaino reikalavimai vis dažniau apima patobulintą interneto prieinamumą. Bet ar nepakanka svetainės optimizavimo visoms pagrindinėms naršyklėms, suderinamoms su keliais įrenginiais? Naudodami „Google Lighthouse“ galite lengvai įvertinti savo svetainės našumą, pasiekiamumą, geriausią praktiką ir SEO. Taigi kodėl prieinamumas yra svarbus?

CDC (Ligų kontrolės ir prevencijos centrai) duomenimis, daugiau nei 60 milijonų amerikiečių gyvena su negalia. Vadovaudamiesi žiniatinklio turinio pasiekiamumo gairėmis, galite pateikti keletą preliminarių svarstymų, kurie padės sukurti prieinamą svetainę. Štai viskas, ko jums reikia norint pradėti naudotis žiniatinklio pritaikomumu naudojant HTML ir CSS.

Struktūrizuotas HTML su tinkama semantika

Padarydami svetainę vizualiai patrauklią, pagalbinių technologijų naudotojai neturėtų suklysti. Nors daugelis turinio valdymo sistemų, tokių kaip „WordPress“, taiko HTML, jūsų atsakomybė yra dar kartą patikrinti ir patvirtinti, kad jis pritaikytas teisingai.

Pavyzdžiui, a

Skaityti daugiau: Paprasti HTML kodo pavyzdžiai, kuriuos galite išmokti per 10 minučių

Semantinį HTML lengviau kurti, nes kartu su juo gausite papildomų funkcijų. Tai puikiai veikia mobiliajame telefone. Be to, kai teikiate svarbą vidiniams žodžiams

arba žyma, tai padeda SEO.

Struktūrinis turinys ekrano skaitymo naudotojams

Pateikiame semantinio HTML gero vs. blogai.

Geras semantinis HTML
Mano antraštė

Štai kaip galite sukurti prieinamą svetainę naudodami HTML ir CSS

Antra mano antraštė

Blogas semantinis HTML
Mano antraštė

Štai kaip galite sukurti prieinamą svetainę naudodami HTML ir CSS

Pirmuoju atveju ekrano skaitytojams naršyti yra gana paprasta. Ji perskaitys antraštę, pranešdama apie antraštę ir pastraipą. Po kiekvieno elemento jis sustos sekundei. Galite praleisti kai kurias antraštes arba grįžti prie ankstesnio naudodami „Enter“/„Return“. Taip pat galite sudaryti turinį naudodami antraštės žymą.

Kai rašote prezentacinį HTML, o ne semantinį HTML (antruoju atveju), eilutė be reikalo nutrūksta ir atsiranda bloga patirtis. Tai panašu į milžiniško bloko paruošimą, kurį kaskaduoti ir manipuliuoti yra daug sunkiau, nes nėra potencialių selektorių.

Pasiekiamos svetainės kalba ir išdėstymai

Turėtumėte naudoti tikslią kalbą su išplėstais akronimais ir santrumpomis. Jei įmanoma, stenkitės išvengti brūkšnių rašydami 9-5 -> 9 iki 5. Anksčiau HTML lentelės buvo naudojamos puslapių maketams kurti. Tai trukdė teisingiems rodmenims dėl įdėtų lentelių, kurios sudarė gana sudėtingą išdėstymą. Čia yra moderni svetainės struktūra:

Tai yra antraštė



Pagrindinio puslapio turinys

turintis straipsnį

Straipsnio antraštė

straipsnio turinį



Svetainės poraštė

Taigi, kaip matote, šis išdėstymas yra patogus ekrano skaitytuvui. Žymėjimas suprantamas naudojant aiškų ir glaustą kodą. Be to, jį lengva prižiūrėti ir atsisiunčiant reikia mažiau pralaidumo. Įsitikinkite, kad šaltinio kodą įdėjote logiškai; tai padarys visa kita.

Dar kartą apsvarstykite vartotojo sąsajos valdiklius, lenteles ir alternatyvųjį tekstą

Dažniausiai vartotojo sąsajos valdikliai yra jūsų žiniatinklio dokumento mygtukai, formos ir nuorodų valdikliai. Nykščio taisyklė yra ta, kad jais galima manipuliuoti klaviatūra. Jie turi tam tikrą numatytąjį stilių (skirtingose ​​naršyklėse gali skirtis), kur galite pereiti prie kitų parinkčių naudodami skirtuko klavišą ir paspausti Enter/Return, kad padarytumėte išvadą. Galite valdyti teksto etiketes, o ne „spustelėkite čia“ pridėdami išskirtinių ir prasmingų inkaro tekstų.

Norėdami sukurti prieinamas lenteles, pridėkite lentelių antraščių

ir nurodykite eilutes ar stulpelius naudodami apimties atributą. Be to, galite naudoti arba suvestinės atributą, kad ekrano skaitytojai galėtų greitai peržiūrėti lentelės turinį.

Alternatyvus tekstas pateikia vaizdo ar vaizdo įrašo kontekstinę informaciją žiniatinklio tikrintojams ir ekrano skaitytojams. Jei jūsų vaizdas skirtas dekoratyviniams tikslams, geriau palikti „alt“ žymą tuščią. Priešingu atveju labai padeda išsamus vaizdo aprašymas.

Daugeliu atvejų ekrano skaitytuvas skaito alternatyvųjį tekstą, failo pavadinimą ir pavadinimo atributą (galite jį praleisti). Be to, jei nenorite naudoti alternatyvaus teksto arba norite pridėti tą pačią etiketę prie kelių vaizdų, čia yra greitas patarimas:

Raudona gėlė ...

Nuorodai į tą ID naudojote atributą aria-labeledby. Tai leis ekrano skaitytojams naudoti alternatyvų tekstą tos pastraipos pavidalu.

Standartinis CSS geresniam prieinamumui

Prieinamų puslapio funkcijų stilius reiškia, kad jūsų dizainas turėtų veikti pagal pagrindinį puslapio turinį. Pavyzdžiui, už a

,

, ir

elementas, tipiškas CSS turėtų būti:

h1 {
šrifto dydis: 4rem;
}
p, li {
šrifto dydis: 1,5rem;
spalva: mėlyna;
}

Šrifto dydis, tarpai tarp raidžių, šriftų šeima ir kt. Turėtų padėti patogiai skaityti. Antraštės turėtų išsiskirti iš pagrindinio teksto (numatytasis stilius taip pat yra geras). Be to, teksto spalva turėtų būti kontrastinga fone, kurį pasirenkate naudodami CSS.

Teksto, nuorodų ir etikečių stilizavimas

Mikro sąveika yra įmanoma naudojant prieinamą CSS. Tai gali būti tiek maža, kiek teksto pabrėžimas, kad tinkamai paryškintumėte nuorodas. Galite naudoti ir žymėti išskirtinai. Taškuotą pabraukimą galite pridėti naudodami elementas.

Standartinė nuoroda turėtų būti pabraukta naudojant numatytąją spalvą: mėlyną ir anksčiau aplankytą nuorodą su numatytąja spalva: violetinė (galite ją pritaikyti).

a {
spalva: #ff0000;
}
a: aktyvus {
spalva: #000000;
fono spalva: #a60000;
}
a: hover, a: aplankytas, a: focus {
spalva: #a60000;
teksto dekoravimas: nėra;
}

Taigi, pakeitus pelės žymeklį, turėtumėte paryškinti sutelktą tekstą. Žymeklio žymeklis ir kontūrai vaidina svarbų vaidmenį pasiekiant žiniatinklį.

Naudokite CSS, kad formos elementai ir etiketės būtų švarios. Taip pat nuspręskite apie fokusavimo/užvedimo būsenas, kurios yra vienodos daugelyje naršyklių. Atminkite, kad šie nedideli patarimai padeda žmonėms suprasti jūsų tinklalapį.

Spalvų kontrastas ir slėpimo vertės

Sureguliuokite svetainės spalvų schemą taip, kad pirmojo plano (teksto/vaizdo) spalva kontrastų su fono spalva visų pirma dėl to, kad žmonėms, turintiems regos sutrikimų (pvz., daltonizmą), sunkiau skaityti turinį tinkamai. Tu gali naudoti Spalvų kontrasto tikrintuvas gauti tinkamą spalvų schemą pagal WCAG kriterijus. Taip pat pabandykite pridėti žymėjimo ženklų (pvz., Žvaigždutę) kartu su įspėjimais ar taisyklėmis ir nuostatomis (ne tik raudonu įspėjimu).

Ekrano skaitytuvams nėra ko nerimauti, kol šaltinio kodo tvarka nėra tinkamai parašyta. Stenkitės nenaudoti ekrano: nėra arba matomumas: paslėptos savybės, nes jos slepia turinį nuo ekrano skaitytuvų.

Padėkite lengvai nepaisyti stiliaus

Svarbiausia, kad nesvarbu, kaip gerai kuriate svetainę, vartotojai turi įvairių priežasčių nepaisyti stiliaus. Pavyzdžiui, galbūt kai kurie nori didesnio teksto dydžio arba nori pakeisti teksto ir fono spalvas, kad būtų lengviau skaityti. Taigi jūsų turinio sritis turėtų sugebėti ją visiškai tvarkyti.

Apvyniojimas: sujunkite HTML ir CSS

Dabar jūs žinote pagrindus, kaip pradėti naudotis semantiniu HTML ir parašyti protingą šaltinio kodą tinkama tvarka, kad būtų pasiekiama svetainė. Sutelkite dėmesį į HTML ir pradėkite kurti prieinamą CSS, kai tai bus padaryta.

Naudodami aukščiau išvardintus metodus, galite pagerinti naudotojų patirtį ir aptarnauti gražią auditoriją. Taigi, pradėkite kurti reaguojančias ir prieinamas svetaines.

Kaip sukurti svetainę: pradedantiesiems

Šiandien aš jums padėsiu sukurti visą svetainę nuo nulio. Nesijaudinkite, jei tai skamba sunku. Aš jums tai padėsiu kiekviename žingsnyje.

Skaityti toliau

Apie autorių

Išplėskite, kad perskaitytumėte visą istoriją