M
MLOG
Verkkokomponenttien saavutettavuus: ARIA-toteutus ja ruudunlukijatuki | MLOG | MLOG

Selitys:

Esimerkki 2: Saavutettava haitarikomponentti

            
class AccessibleAccordion extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        .accordion-header {
          cursor: pointer;
          padding: 10px;
          background-color: #eee;
          border: none;
          text-align: left;
          width: 100%;
        }
        .accordion-content {
          padding: 0 10px;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
          max-height: 0;
        }
        .accordion-content.show {
          max-height: 500px; /* Säädä tarpeen mukaan */
        }
      </style>
      <button class="accordion-header" aria-expanded="false" aria-controls="content">
        <slot name="header">Section Header</slot>
      </button>
      <div id="content" class="accordion-content" aria-hidden="true">
        <slot name="content">Section Content</slot>
      </div>
    `;

    const header = this.shadowRoot.querySelector('.accordion-header');
    const content = this.shadowRoot.querySelector('.accordion-content');

    header.addEventListener('click', () => {
      const expanded = header.getAttribute('aria-expanded') === 'true';
      header.setAttribute('aria-expanded', !expanded);
      content.classList.toggle('show');
      content.setAttribute('aria-hidden', expanded);
    });
  }
}

customElements.define('accessible-accordion', AccessibleAccordion);

Selitys:

Kehyskohtaiset huomiot (React, Angular, Vue.js)

Kun käytät verkkokomponentteja JavaScript-kehyksissä, kuten React, Angular tai Vue.js, on tärkeää olla tietoinen siitä, miten nämä kehykset käsittelevät attribuutteja ja tapahtumankäsittelijöitä. Varmista, että ARIA-attribuutit on sidottu ja päivitetty oikein dynaamisesti komponentin tilan muuttuessa.

Esimerkiksi Reactissa voit käyttää `aria-`-etuliitettä ARIA-attribuuteille:

            
<button aria-label="Close dialog" onClick={handleClose}>Close</button>

Angularissa voit käyttää ominaisuussidontaa päivittääksesi ARIA-attribuutteja dynaamisesti:

            
<button [attr.aria-expanded]="isExpanded" (click)="toggleAccordion()">Toggle Accordion</button>

Vue.js tarjoaa samanlaisia mekanismeja attribuuttien sitomiseen ja tapahtumien käsittelyyn.

Yleisiä saavutettavuuden sudenkuoppia, joita tulee välttää

Tässä on joitakin yleisiä saavutettavuusvirheitä, joita tulee välttää verkkokomponentteja kehitettäessä:

Johtopäätös

Saavutettavien verkkokomponenttien luominen on olennainen osa inklusiivisten ja käyttäjäystävällisten verkkosovellusten rakentamista. Ymmärtämällä ja toteuttamalla ARIA-attribuutit oikein, testaamalla ruudunlukijoilla ja noudattamalla saavutettavuuden parhaita käytäntöjä voimme varmistaa, että verkkokomponenttimme ovat kaikkien käyttäjien saavutettavissa heidän kyvyistään riippumatta. Saavutettavuuden omaksuminen ei ole vain oikea teko; se johtaa myös parempiin käyttökokemuksiin, parantuneeseen hakukoneoptimointiin ja inklusiivisempaan verkkoon kaikille.

Verkon kehittyessä verkkokomponenteilla on yhä tärkeämpi rooli verkkokehityksen tulevaisuuden muovaamisessa. Priorisoimalla saavutettavuuden alusta alkaen voimme luoda verkon, joka on todella kaikkien saavutettavissa.

Lisämateriaalia