, tilgængelighed, del 3: aria,,,,, 61,,,,,,,,, 17,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet tilgængelighed. tilgængelighed, del 2: perceivableaccessibility, del 4: betjenes i den tidligere artikel i denne række, så vi på det første princip: at sikre adgang til indhold, der skal være til rådighed i et format, som er let af brugeren opfattede.hvis brugeren anvender hjælpeteknologier, en måde at gøre det muligt at gøre det nemmere for disse teknologier til at analysere og forstå din hjemmeside, og dens indhold.i denne artikel, skal vi fokusere på en særlig måde at gøre dette på: aria.,, wai-aria (web accessibility initiative tilgængelige rige internet applikationer), eller - er et w3c protokol, som forbedrer din hjemmeside er interaktion med hjælpeteknologier.det gør det på en række forskellige måder:,, er en måde at side 's struktur (f.eks. mærkning med det formål eller den rolle, en del af side navigation, søgning, vigtigste indhold,   osv.), øger tilgængeligheden af interaktive kontrol (f.eks. træ menuer, trække og smid, kiks, kontrol osv.) ved at erklære deres "stat", (f.eks. aktiveret /deaktiveret, skjult, krævede områder), er en måde, hvorved de regioner, hvor indholdet kan opdateres dynamisk (kaldet  , levende regioner), således at opdateringer kan meddeles brugeren, browsere ikke arv. et problem her: aria er støttet af de fleste moderne browsere og skærm læsere, og resten er der ingen forenelighed spørgsmål. i denne serie vil vi fokusere på first i ovennævnte led, om, at et element er  , rolle,   som en del af den side struktur.,, roller, hvis side er struktur kan være programmatically bestemmes, og hver enkelt region af webstedet identificeres (f.eks. stedet er navigation, det vigtigste indhold, kom her.), hjælpeteknologier kan udføre et bedre stykke arbejde med denne struktur for brugeren.f.eks. "- indhold" forbindelser (som dækker vi i næste artikel) kan blive forældede, hvis en skærm, læser  , vidste,  , hvor de væsentligste indhold.html, er imidlertid på ingen måde, at formålet med en region på den side.det er aria roller skridt.,,,,, en arie rolle blot er en attribut værdi, som angiver  , formål,   af dette element.den mest enkle eksempel ville være en søgning form:,, < form rolle = "leder" >...< /form >,, den rolle at finde ", identificerer denne  , < form >,   som en form for søgning pladsens indhold, og en skærm, læser, der er i stand til at erkende, at ved at tage brugeren, hvis de ønsker at søge på indhold.en skærm læsere, f.eks. være en genvej til at finde nøglen til at springe.ligeledes kendskab til strukturen af side gør det muligt at skabe en fornuftig hjælpeteknologier "træ" på siden.- screenreader, f.eks. anvender semikolon nøgle til at springe mellem de roller, som giver brugeren mulighed for hurtigt at hoppe mellem områdets regioner (overskriften, navigation, vigtigste indhold osv.), er denne form for attributten kaldes  , dokument skelsættende roller, og blandt de værdier, der er til rådighed.,, banner, indhold i forbindelse med websted, f.eks. webstedet navn og /eller firmalogo.i de fleste områder er disse oplysninger i  , header. php, og etiketter, et element, der var stedet titel, beskrivelse og logo med denne rolle:,, < div id = "mærkning" rolle = "banner" > < p - klassen = "område" > og lt; en href = "<?php echo esc_url (home_url (» /«)?> "> <?php echo get_bloginfo ('name)?> < /a > < /p > < p - klassen = "beskrivelse af lokaliteten" > <?php echo get_bloginfo ("beskrivelse").> < /p > < /div >,, navigation, denne rolle, angiver den del af den side, der indeholder sejlads forbindelser til dokument eller hjemmeside.et emne kan have flere navigation steder, og de kan være pakket ind i et element med navigation rolle:,, < nav rolle = "navigation" > <?folkesundhedsprogrammet aspektet wp_nav_menu (array ('theme_location = > "primær").> < /nav >, i henhold til html5 specifikationer,   rolle = "navigation",   skulle være underforstået i anvendelsen af  , < nav >,, og så ikke påkrævet.men der er noget galt i at være eksplicit, vigtigste,, hovedindholdet af den side.det  , skal   kun anføres én gang på en side.for hvert tema vil variere, men den relevante skabelon filer, vil typisk være:,, index.php, single. php, page.php, din store loop ", f.eks. kan se noget, der ligner:,, < div id =" primære "klasse =" hfeed "rolle =" primære "> <?folkesundhedsprogrammet (have_posts()):?> <?folkesundhedsprogrammet, mens (have_posts()): the_post();?> //løkken på <?folkesundhedsprogrammet aspektet endwhile;?> <?folkesundhedsprogrammet aspektet endif;?> < /div >,, og du kan se noget, der ligner side skabeloner:,, < div id = "primære" rolle = "primære" > < div id = "post - <?folkesundhedsprogrammet aspektet the_id();?> "<?folkesundhedsprogrammet aspektet post_class();?> > < h1 klasse = "titel" > <?folkesundhedsprogrammet aspektet the_title();?> < /h1 > < div klasse = "indhold" > <?folkesundhedsprogrammet aspektet the_content();?> < /div > < /div > < /div >,, søgning, det identificerer de lede form (r) på deres område, og det kan anvendes mere end én gang.de fleste emner ikke hardcode 'en søgning form i deres område, men i stedet basere sig på widgetised regioner, hvor brugeren kan tilføje - dims.i dette tilfælde (og hvis du løber wp 3.6 eller højere), behøver du ikke at gøre noget. wordpress misligholdelse søgning form allerede tilføjer eftersøgningen rolle på passende vis.desuden tager form af etiketter og forelægge knap i en tilgængelig måde  .,, hvis du gør hardcode en søgning i form af temaet, skal du bruge  , get_search_form(),   (se   codex).endelig, hvis du har brug for din tema for at ændre systemet søger form, du kan skabe en skabelon filen  , searchform. php, - men husk at tilføje eftersøgningen rolle.systemet søger form model:,, < form rolle = "search metode =" får "klasse =" søg form "action =" <?php echo home_url (» /«)?> "> < etiket > < over klasse =" skærm læser teksten "> <?php echo _x (efter: "," mærkning ").> < /span > < input type = "leder" klasse = "søgningen" indikation af en art = "søger & hellip;" værdi = "<?php echo get_search_query();?> "navn =" s "afsnit =" <?php echo esc_attr_x (efter: "," mærkning ").> "/> < /etiketten > < input type =" stille "klasse =" leder forelægge "værdi =" <?php echo esc_attr_x ("leder", "stille knap").> "/> < /form >,, artikel, det indeholder en del af selvstændigt indhold, som giver mening i isolation.et godt eksempel herpå ville være en blog, som anføres på deres stillinger 'side.lige så hver bemærkning kan anses for at være en "artikel".det kan indføjes: for eksempel en bemærkning (artikel) kan sidde inde i postede (artikel).,, <?folkesundhedsprogrammet, mens (have_posts()): the_post();?> < artikel id = "post - <?folkesundhedsprogrammet aspektet the_id();?> "<?folkesundhedsprogrammet aspektet post_class();?> rolle = "artikel" > //efter afsnit /uddrag.< /artikel > <?folkesundhedsprogrammet aspektet endwhile;?>,, supplerende, der identificerer en region, der er blevet beskrevet som "supplerende indhold til de vigtigste indhold".i en wordpress sammenhæng, kan det forstås enhver sidebars.din  , kom her.   folkesundhedsprogrammet, model kan derfor se sådan:,, < div klasse = "aftale" rolle = "supplerende" > <?folkesundhedsprogrammet (is_active_sidebar ("aftale") (dynamic_sidebar ("aftale");}?> < /div >,, contentinfo, det er typisk anvendes til at identificere den fod.officielt er det beskrives som:,, en stor mærkbart region, der indeholder oplysninger om den oprindelige dokument, f.eks. den kan omfatte fodnoter, ophavsrettigheder, forbindelser til erklæringer om beskyttelse af privatlivets fred osv. det er dog generelt anvendes til at mærke den fod på denne side, uanset dens indhold.firefox, safari og krom automatisk tildele contentinfo rolle at  , < fod >,   mærker:,, < krop >...< fod rolle = "contentinfo" > //- fods < /fod > <?folkesundhedsprogrammet aspektet wp_footer();?> < /organ >, aria og html5,, selv om det er stigende,   støtte til html5 ved skærmen læsere varierer.på den anden side støtte til aria landmærker typisk er meget bedre.så selv om flere og flere browsere automatisk kortlægning semantiske html5 mærkater til deres rolle, er det stadig en god idé at udtrykkeligt den rolle.men de skal passe på ikke at ændre den oprindelige rolle i en semantisk element.for eksempel, du bør undgå at gøre:,, < h1 rolle = "knap" > klik!</h1>,,Below is a list of some of the HTML5 elements, together with their implicit ARIA roles., ,HTML5 element,Implied ARIA landmark role,Other notes, ,<header>,role="banner", There should be only one instance of banner ,<nav>,role="navigation", ,<main>,role="main", There should be only one instance of main ,<article>,role="article", ,<aside>,role="complementary", ,<footer>,role="contentinfo", There should be only one instance of contentinfo ,<button>,role="button", ,When using HTML5, you should use a script like HTML5 Shiv v3.6, as used in the Twenty* themes, to provide support for legacy browsers.,,,Conclusion,,Declaring ARIA roles is an incredibly easy way to aid users af tekniske hjælpemidler til at fortolke din hjemmeside er layout og finde det indhold, de er efter.i næste del af denne række, vi kigger på det princip, at temaet er  , anvendelige.som taler her står der, at brugerne kan være let og sikkert finde på din hjemmeside.