Kas ir Ārija?

ARIA, kas nozīmē pieejamas bagātīgas interneta lietojumprogrammas, ir specifikācija, ko izstrādājusi W3C (globālā tīmekļa konsorcija), kuras mērķis ir uzlabot tīmekļa lietojumprogrammu pieejamību cilvēkiem ar invaliditāti. ARIA nodrošina atribūtu un īpašību kopumu, ko var pievienot HTML elementiem, lai sniegtu papildu informāciju un uzlabotu lietotāju pieredzi lietotājiem ar vizuāliem, dzirdes, fiziskiem vai kognitīviem traucējumiem.

Aria izmantošanas priekšrocības

ARIA izmantošana dod vairākas priekšrocības tīmekļa lietojumprogrammu pieejamībai. Daži no galvenajiem ieguvumiem ir:

Labākā izpratne ekrāna lasītājiem: aria ļauj izstrādātājiem sniegt papildu informāciju par lapas elementu struktūru un funkcionalitāti, padarot ekrāna lasītāju vieglāk interpretēt un paziņot šo informāciju lietotājiem ar invaliditāti vizuāli.

Labākā tastatūras navigācija: aria ļauj izstrādātājiem pievienot marķējumus lapas interaktīvajiem elementiem, piemēram, pogas un izvēlnes, lai lietotāji, kuri pārvietojas tikai ar tastatūru, varētu saprast un mijiedarboties ar šiem elementiem efektīvāka formā.

Labākā atgriezeniskā saite lietotājiem: ARIA ļauj izstrādātājiem lapas elementiem pievienot vizuālā stāvokļa un atgriezeniskās saites informāciju, padarot lietotājiem ar vizuālu vai kognitīvu traucējumu vieglāku izprast lietojumprogrammas pašreizējo stāvokli un darbības var veikt.

Aria izmantošanas piemēri

Ir vairāki ARIA atribūti un īpašības, kuras var izmantot, lai uzlabotu tīmekļa lietojumprogrammu pieejamību. Daži piemēri ir:

atribūts/īpašums
apraksts

ARIA specifikācijas oficiālā atsauce

</div> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="margin-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"> <div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"> </div> <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background is-style-wide" style="margin-bottom:var(--wp--preset--spacing--40)"/> <nav class="wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-10 wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)" aria-label="Posts"> <div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="https://dirtylinda.com/kas-ir-argonio/" rel="prev" data-wpel-link="internal"><span class="post-navigation-link__label">Previous: </span> <span class="post-navigation-link__title">Kas ir argonio</span></a></div> <div class="post-navigation-link-next wp-block-post-navigation-link"><a href="https://dirtylinda.com/kas-ir-arisco/" rel="next" data-wpel-link="internal"><span class="post-navigation-link__label">Next: </span> <span class="post-navigation-link__title">Kas ir ARISCO</span></a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div> </nav> </div> </div> </main> <footer class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"> <div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex"> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"> <div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-14 wp-block-group-is-layout-flex"> <p class="wp-block-site-title has-medium-font-size"><a href="https://dirtylinda.com" target="_self" rel="home" data-wpel-link="internal">Praise The Sun</a></p> </div> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:20%"> </div> <div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:50%"> <div class="wp-block-group is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-21 wp-block-group-is-layout-flex"> <div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-16 wp-block-group-is-layout-flex"> <h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">About</h2> <div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-15 wp-block-group-is-layout-flex"> <nav style="font-style:normal;font-weight:400;" class="has-small-font-size is-vertical wp-block-navigation has-small-font-size is-layout-flex wp-container-core-navigation-is-layout-2 wp-block-navigation-is-layout-flex" aria-label="About"><ul style="font-style:normal;font-weight:400;" class="wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation has-small-font-size"><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Team</span></a></li><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">History</span></a></li><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Careers</span></a></li></ul></nav> </div> </div> <div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-18 wp-block-group-is-layout-flex"> <h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Privacy</h2> <div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-17 wp-block-group-is-layout-flex"> <nav style="font-style:normal;font-weight:400;" class="has-small-font-size is-vertical wp-block-navigation has-small-font-size is-layout-flex wp-container-core-navigation-is-layout-3 wp-block-navigation-is-layout-flex" aria-label="Privacy"><ul style="font-style:normal;font-weight:400;" class="wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation has-small-font-size"><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Privacy Policy</span></a></li><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Terms and Conditions</span></a></li><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Contact Us</span></a></li></ul></nav> </div> </div> <div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-20 wp-block-group-is-layout-flex"> <h2 class="wp-block-heading has-medium-font-size has-body-font-family" style="font-style:normal;font-weight:600">Social</h2> <div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-19 wp-block-group-is-layout-flex"> <nav style="font-style:normal;font-weight:400;" class="has-small-font-size is-vertical wp-block-navigation has-small-font-size is-layout-flex wp-container-core-navigation-is-layout-4 wp-block-navigation-is-layout-flex" aria-label="Social Media"><ul style="font-style:normal;font-weight:400;" class="wp-block-navigation__container has-small-font-size is-vertical wp-block-navigation has-small-font-size"><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Facebook</span></a></li><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Instagram</span></a></li><li class="has-small-font-size wp-block-navigation-item wp-block-navigation-link"><a class="wp-block-navigation-item__content" href="#"><span class="wp-block-navigation-item__label">Twitter/X</span></a></li></ul></nav> </div> </div> </div> </div> </div> <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:0"> <p class="has-contrast-2-color has-text-color has-link-color has-small-font-size wp-elements-69a005592d8de9c85f5c3744bd9a4e03"> Designed with <a href="https://wordpress.org" rel="nofollow" data-wpel-link="external" target="_blank">WordPress</a> </p> </div> </div> </footer> </div> <script id="wp-block-template-skip-link-js-after"> ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.href = '#' + skipLinkTargetID; skipLink.innerHTML = 'Skip to content'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); </script> </body> </html>

`aria-ebagel`	nodrošina pieņemamu elementu etiķeti, aizstājot redzamo tekstu.
`Aria-DesricedBy`	elementu saista ar pieejamu aprakstu, sniedzot vairāk informācijas par elementu.
`Aria-Expanded`	norāda, vai paplašināms elements pašlaik tiek paplašināts vai savākts.
`ARIA HIDEND`	norāda, vai ekrāna lasītājiem vajadzētu paslēpt elementu.