Nedideli HTML patobulinimai gali atnešti daug naudos skaitytojams.
Key Takeaways
- ARIA (Accessible Rich Internet Applications) yra HTML ir CSS įrankių rinkinys, pagerinantis žiniatinklio prieinamumą žmonėms su negalia.
- Integruodami ARIA vaidmenis, būsenas ir ypatybes į HTML, galite pagerinti naudotojo patirtį ir padaryti žiniatinklio turinį labiau įtraukiantį.
- ARIA atributai, pvz., aria-label ir aria-describedby, suteikia papildomo konteksto ir pakeičia elementų tekstą, užtikrinant, kad ekrano skaitytuvo naudotojai gautų tokį patį informacijos lygį kaip ir regintys vartotojai.
Kuriant žiniatinklio sferą labai svarbu užtikrinti, kad jūsų darbas būtų prieinamas visiems vartotojams. ARIA (Accessible Rich Internet Applications) siūlo išsamų HTML ir CSS įrankių rinkinį, kad žiniatinklio sąsajos būtų įtraukesnės žmonėms su negalia.
Pažiūrėkite, kaip galite naudoti ARIA kurdami žiniatinklio turinį, kurį visi vartotojai galėtų lengvai naršyti ir suprasti.
ARIA diegimas HTML
ARIA yra standartas, kurį galite naudoti norėdami padaryti žiniatinklio programas ir turinį labiau prieinamus. Kai integruojate ARIA į HTML dokumentą, tai padeda pagerinti neįgaliųjų prieinamumą.
Tai ypač svarbu dinamiškam ir interaktyviam žiniatinklio turiniui, nes tokio tipo turinys gali būti nepakankamai aprašytas naudojant vien tradicinius HTML elementus. Pridėję ARIA vaidmenų, būsenų ir ypatybių galite pagerinti naudotojo patirtį ir padaryti žiniatinklį prieinamą platesnei auditorijai.
Įvadas į ARIA vaidmenis ir kaip juos pritaikyti HTML elementams
ARIA pristato daugybę vaidmenų, kurie apibrėžia įvairių tinklalapio elementų funkcionalumą ir paskirtį. Šie vaidmenys viršija tradicinius HTML elementus ir suteikia patobulinimų pagalbinių technologijų semantika.
Pavyzdžiui, naudojant vaidmenį atributą, elementą galite priskirti kaip a mygtuką, a nuoroda, ar net a navigacija orientyras. Pažvelkite į keletą pavyzdžių:
<buttonrole="button">Click Mebutton><arole="link"href="#">Visit our websitea>
<navrole="navigation">
<ul>
<li><ahref="#">Homea>li>
<li><ahref="#">Abouta>li>
<li><ahref="#">Contacta>li>
ul>
nav>
ARIA etikečių ir aprašymų taikymas ekrano skaitytuvams
Ekrano skaitytuvai remiasi tekstu pagrįsta informacija, kad perteiktų elementų turinį ir funkcionalumą regos negalią turintiems vartotojams.
ARIA siūlo atributus, pvz., aria-label ir aria-describedby, kad pateiktų papildomą kontekstą arba pakeistų tekstą elementams, kurių matomo turinio nepakanka. Taip užtikrinama, kad ekrano skaitytuvo naudotojai gautų tokį patį informacijos lygį kaip ir regintys:
<buttonaria-label="Close"class="close-button">×button><imgsrc="image.jpg"alt="A beautiful sunset"
aria-describedby="image-description">
<pid="image-description">A serene sunset over the ocean, painting the sky
with warm hues.p>
ARIA CSS
ARIA atributai dažnai sąveikauja su CSS, kad pateiktų vaizdinius įvairių elementų būsenų nurodymus. Sujungę ARIA vaidmenis su atitinkamomis CSS klasėmis, galite pasiekti nuoseklesnę ir prieinamesnę sąsają. Apsvarstykite šį mygtuko, kuriame naudojamas arija prispaustas atributas:
<buttonrole="button"class="interactive-button"aria-pressed="false">
Click Me
button>
Naudodami šį CSS, galite pakeisti mygtuko stilių pagal šio atributo būseną ir pakeisti mygtuko išvaizdą, kai jis paspaudžiamas:
.interactive-button[aria-pressed="true"] {
background-color: #e74c3c;
}Sukurkite ARIA orientyrus geresniam vizualiniam vaizdavimui
ARIA žymės padeda naršyti ir suprasti, nes padeda padalinti tinklalapį į reikšmingas dalis. Galite formuoti šias žymes, kad būtų aiškesnis vizualinis atskyrimas ir pagerintumėte naudotojo patirtį. Štai keletas pagrindinės struktūros žymėjimo pavyzdžių:
<headerrole="banner"class="page-header">
<h1>My Websiteh1>
header><mainrole="main"class="content">
<sectionrole="region"class="section">
<h2>Styling ARIA Landmarks for Improved Visual Representationh2>
<p>ARIA landmarks help organize a webpage into sections that have
a specific purpose. These landmarks improve both accessibility and
user experience. You can style ARIA landmarks to create a visually
pleasing layout.p>
<p>In this example, we'll style ARIA landmarks using CSS:p>
section>
main>
Kurį galite formuoti taip:
[role="banner"] {
background-color: #333;
color: #fff;
padding: 10px;
}[role="main"] {
background-color: #f5f5f5;
padding: 20px;
}
[role="region"] {
border: 1pxsolid#ddd;
padding: 10px;
background-color: #fff;
}
CSS taip pat leidžia pagerinti elementų matomumą, kai jie sufokusuojami, užtikrinant, kad klaviatūra būtų patogi. Naudodami su ARIA susijusias CSS savybes galite pasiekti šį efektą:
/* Apply styles when an element receives focus */
:focus {
outline: 2pxsolid#007bff;
}
ARIA diegimo testavimas ir patvirtinimas
Norint veiksmingai įdiegti ARIA, labai svarbu atlikti išsamų testavimą. Sąveikoms su pagalbinėmis technologijomis imituoti galite naudoti įvairius įrankius. Šis testavimas padeda nustatyti pritaikymo neįgaliesiems problemas ir pagerina ARIA įtraukimą.
Įvairūs specializuoti įrankiai gali palengvinti šį testavimą, imituojant, kaip neįgalūs vartotojai sąveikauja su turiniu. Nustačius tokias problemas kaip neteisingi ARIA atributai ar trūkstami vaidmenys, galima aktyviai spręsti problemas.
Šiuolaikinėse žiniatinklio naršyklėse yra kūrėjo įrankių, skirtų ARIA atributams ir būsenoms patikrinti. Tai padeda užtikrinti tinkamą įgyvendinimą, suderintą su prieinamumo gairėmis. Realaus laiko įvertinimas nustato galimas problemas ir patobulina ARIA įtraukimą.
Įprasti ARIA modeliai ir geriausia praktika
Galite ištirti įvairius ARIA modelius (pvz., vaidmenį, valstybė, ir nuosavybė) ir į ką turėtumėte atkreipti dėmesį naudodami šiuos modelius. Tokiu būdu galite padaryti svetaines ir programas labiau prieinamas ir patogesnes vartotojui.
Prieinamų naršymo meniu ir fokusavimo valdymas
ARIA atributų įtraukimas į naršymo meniu gali žymiai pagerinti naudotojo patirtį, ypač tiems, kurie naudojasi ekrano skaitytuvais. Šios savybės atlieka labai svarbų vaidmenį, kad klaviatūros navigacija būtų sklandi ir suprantama. Naudodami vaidmens atributą kartu su „JavaScript“ galia, turite galimybę kurti dinaminius meniu, kurie sklandžiai koreguojami atsižvelgiant į vartotojo sąveiką.
Pavyzdžiui, apsvarstykite naršymo meniu kuris išplečia ir sutraukia antrinius meniu, kai vartotojas su juo sąveikauja. Galite naudoti ARIA vaidmenis Meniu, meniu punktas, ir meniuitem žymės langelis Norėdami sukurti meniu struktūrą, pasiekiamą ekrano skaitytuvams. Štai supaprastintas HTML ir „JavaScript“ fragmentas, iliustruojantis šią koncepciją:
<navrole="menu">
<buttonrole="menuitem"aria-haspopup="true"aria-expanded="false"
id="menuButton">Menubutton><ulrole="menu"aria-labelledby="menuButton">
<lirole="menuitem">
<ahref="#">Homea>
li><lirole="menuitem"aria-haspopup="true"aria-expanded="false">
Services<ulrole="menu"aria-label="Services Submenu">
<lirole="menuitemcheckbox">
<inputtype="checkbox"id="service1" />
<labelfor="service1">Service 1label>
li><lirole="menuitemcheckbox">
<inputtype="checkbox"id="service2" />
<labelfor="service2">Service 2label>
li>
ul>
li><lirole="menuitem">
<ahref="#">Contacta>
li>
ul>
nav><script>
const menuButton = document.getElementById('menuButton');
const subMenu = menuButton.nextElementSibling;
menuButton.addEventListener('click', () => {
const expanded = menuButton.getAttribute('aria-expanded') 'true';
menuButton.setAttribute('aria-expanded', !expanded);
subMenu.hidden = !subMenu.hidden;
});
script>
Dinaminio turinio ir ARIA tiesioginių regionų tvarkymas
Kuriant dinamišką turinį, kuris sklandžiai atnaujinamas, nereikalaujant viso puslapio įkėlimo iš naujo, gali kilti pritaikymo neįgaliesiems problemų. Tokie turinio naujiniai gali būti ne iš karto matomi naudotojams, kurie naudojasi ekrano skaitytuvais.
Norėdami tai išspręsti, galite naudoti arija-gyvai atributas, kad tinklalapio dalis būtų nustatyta kaip tiesioginiai regionai. Šie tiesioginiai regionai, tinkamai įgyvendinami, dinamiškai praneša apie pakeitimus ekrano skaitytuvo vartotojui, užtikrindami, kad jie gautų informaciją realiuoju laiku, nereikalaujant rankinio atnaujinimo.
Apsvarstykite galimybę komentuoti realiuoju laiku socialinės žiniasklaidos platformoje. Štai pavyzdys, kaip galite įdiegti aria-live atributą HTML:
<divaria-live="polite"class="live-region">
New comment: MUO: "Just posted an amazing photo from my trip!"
div>
Šiame pavyzdyje nustatytas atributas aria-live mandagus, nurodant, kad ekrano skaitytuvas turi pranešti apie turinio atnaujinimą, kai vartotojas neveikia. Gyvo regiono klasė apibrėžia sritį kaip gyvą regioną. Kai bus paskelbti nauji komentarai, šis tiesioginis regionas automatiškai praneš ekrano skaitytuvų naudotojams apie naują turinį, suteikdamas jiems prieinamą ir atnaujintą patirtį.
Formų prieinamumo gerinimas naudojant ARIA atributus ir patvirtinimą
Formos yra labai svarbi sąveikos su žiniatinkliu dalis, todėl galite naudoti ARIA atributus, kad pateiktumėte geresnes instrukcijas, klaidų pranešimus ir patarimus naudotojams, kurie pildo formas:
<form>
<labelfor="name">Name:label><inputtype="text"id="name"aria-required="true"
aria-label="Enter your full name" /><labelfor="email">Email:label>
<inputtype="email"id="email"aria-required="true"
aria-label="Enter your email address" /><labelfor="affiliation">Affiliation:label>
<inputtype="text"id="affiliation"
aria-label="Enter your affiliation, if any" />
<buttontype="submit">Registerbutton>
form>
Kruopščiai integruodami ARIA atributus į formas, galite sukurti įtraukesnę skaitmeninę aplinką. Tai gali suteikti visiems naudotojams galimybę sklandžiai naudotis žiniatinklio turiniu, taip skatinant geresnę ir patogesnę naudotojų patirtį.
Prieinamų modalų ir dialogų diegimas
Modalai ir dialogai yra įprasti vartotojo sąsajos elementai, tačiau jie gali kelti pasiekiamumo problemų. ARIA atributai kaip aria-modalinis ir vaidmens atributai padeda šiuos komponentus padaryti patogesnius:
<divrole="dialog"aria-modal="true"aria-labelledby="modal-title"
aria-describedby="modal-description"
>
<h2id="modal-title">Sign Uph2><pid="modal-description">Please fill in the form below to create an
account.p>
<form>
<buttontype="submit">Sign Upbutton>
<buttontype="button"onclick="closeModal()">Cancelbutton>
form>
div>
The arija pažymėta atributas susieja modalinį pavadinimą su jo turiniu, pagerina ekrano skaitytuvo supratimą ir arija-aprašyta atributas daro tą patį trumpam aprašymui. Šie ARIA atributai kartu su tinkamu semantiniu HTML prisideda prie labiau įtraukiančios ir prieinamesnės modalinės ar dialogo patirties visiems vartotojams.
ARIA svarstymai ir apribojimai
ARIA siūlo itin svarbias galimybes, tačiau vietiniai HTML elementai dažnai turi būdingų pritaikymo neįgaliesiems funkcijų, kurios turi pirmenybę. ARIA tampa būtina, kai šios įgimtos funkcijos neatitinka norimų prieinamumo standartų.
Nors ARIA pagerina žiniatinklio turinio prieinamumą, jos naudojimas gali turėti įtakos našumui dėl pridėto kodo ir sąveikų. Norėdami sumažinti galimas kliūtis, atidžiai išbandykite ir optimizuokite ARIA diegimą. Tai užtikrina greitį ir suderinamumą tarp įrenginių ir naršyklių.
Norint išvengti painiavos ar prieinamumo problemų, dirbant su ARIA reikia visapusiškai suprasti jos sudėtingumą. Geriausios praktikos ir gairių laikymasis yra labai svarbus norint įveikti ARIA sudėtingumą. Būdami informuoti apie pramonės standartus, užtikrinamas platus prieinamumas ir išvengiama nereikalingų iššūkių.
Stebėkite ARIA naujinius ir standartus
Prieinamumo aplinka nuolat tobulėja ir nuolat tobulėja. Norint pasiekti žiniatinklio turinį, labai svarbu nuolat atnaujinti naujausias ARIA specifikacijas.
Pabandykite prisijungti prie internetinių bendruomenių, siūlančių pritaikytus ARIA iššūkių sprendimus. Šiose erdvėse siūlomos praktinės strategijos ir ekspertų patarimai, kaip padidinti jūsų skaitmeninę įtrauktį. Pasinaudoję kolektyvinėmis žiniomis galite praturtinti savo supratimą apie tai, kaip pagerinti naudotojų patirtį.
