M
MLOG
Veebikomponentide ligipääsetavus: ARIA rakendamine ja ekraanilugejate tugi | MLOG | MLOG

Selgitus:

Näide 2: Ligipääsetav akordionikomponent

            
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; /* Adjust as needed */
        }
      </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);

Selgitus:

Raamistikupõhised kaalutlused (React, Angular, Vue.js)

Kasutades veebikomponente JavaScripti raamistikes nagu React, Angular või Vue.js, on oluline olla teadlik, kuidas need raamistikud käsitlevad atribuute ja sündmuste kuulajaid. Veenduge, et ARIA atribuudid oleksid korrektselt seotud ja dünaamiliselt uuendatud vastavalt komponendi oleku muutumisele.

Näiteks Reactis võiksite kasutada `aria-` eesliidet ARIA atribuutide jaoks:

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

Angularis saate kasutada omaduste sidumist (property binding), et dĂĽnaamiliselt uuendada ARIA atribuute:

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

Vue.js pakub sarnaseid mehhanisme atribuutide sidumiseks ja sündmuste käsitlemiseks.

Levinud ligipääsetavuse lõksud, mida vältida

Siin on mõned levinud ligipääsetavuse vead, mida veebikomponentide arendamisel vältida:

Kokkuvõte

Ligipääsetavate veebikomponentide loomine on kaasavate ja kasutajasõbralike veebirakenduste ehitamise oluline osa. Mõistes ja rakendades ARIA atribuute õigesti, testides ekraanilugejatega ja järgides ligipääsetavuse parimaid tavasid, saame tagada, et meie veebikomponendid on ligipääsetavad kõigile kasutajatele, olenemata nende võimetest. Ligipääsetavuse omaksvõtmine pole mitte ainult õige tegu; see viib ka parema kasutajakogemuse, parema SEO ja kaasavama veebini kõigi jaoks.

Kuna veeb areneb edasi, mängivad veebikomponendid veebiarenduse tuleviku kujundamisel üha olulisemat rolli. Seades ligipääsetavuse algusest peale prioriteediks, saame luua veebi, mis on tõeliselt kõigile kättesaadav.

Lisamaterjalid