[javascript] 웹 컴포넌트의 접근성에 대한 고려 사항

07 Dec 2023

javascript

웹 컴포넌트는 재사용 가능한 컴포넌트를 만들기 위한 표준입니다. 하지만 웹 컴포넌트를 개발할 때 접근성을 고려하는 것은 매우 중요합니다. 접근성이 좋지 않은 웹 컴포넌트는 시각 장애인이나 저시력자 등 마음껏 사용할 수 없는 사람들에게 불편을 초래할 수 있습니다. 따라서 이번 블로그에서는 웹 컴포넌트의 접근성에 대한 고려 사항을 살펴보겠습니다.

1. 키보드 접근성

웹 컴포넌트는 키보드로 접근 가능해야 합니다. 마우스나 터치 패드를 사용하지 못하는 사람들은 키보드만으로 웹 컴포넌트를 조작해야 합니다. 따라서 웹 컴포넌트의 각 기능은 키보드로 접근할 수 있어야 합니다. 이를 위해 tabindex 속성을 사용하거나 키보드 이벤트를 처리할 수 있도록 코드를 작성해야 합니다.

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.setAttribute('tabindex', '0');
    this.addEventListener('keydown', this.handleKeyDown);
  }

  handleKeyDown(event) {
    // Handle keyboard events here
  }
}

customElements.define('my-component', MyComponent);

2. 스크린 리더 접근성

시각 장애인이 웹 컴포넌트를 사용할 때는 스크린 리더가 웹 컴포넌트의 내용을 읽어주어야 합니다. 따라서 웹 컴포넌트에서는 스크린 리더가 내용을 올바르게 인식할 수 있도록 읽기 순서를 지정해야 합니다. 이를 위해 aria-label이나 aria-labelledby 속성을 사용하면 됩니다.

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.setAttribute('role', 'button');
    this.setAttribute('aria-label', 'Click me');
  }
}

customElements.define('my-component', MyComponent);

3. 명료한 텍스트 내용

웹 컴포넌트의 내용은 명확하고 이해하기 쉬워야 합니다. 텍스트 컨텐츠가 포함된 웹 컴포넌트라면 시각 장애인이나 저시력자도 내용을 쉽게 이해할 수 있어야 합니다. 따라서 적절한 텍스트를 제공하거나 aria-describedby 속성을 사용하여 설명을 제공해야 합니다.

const template = document.createElement('template');
template.innerHTML = `
  <style>
    :host {
      display: block;
      padding: 1rem;
      border: 1px solid black;
    }
  </style>
  <slot></slot>
`;

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-component', MyComponent);

4. 대체 수단 제공

웹 컴포넌트가 이미지나 동영상 등의 미디어를 포함할 경우 대체 수단을 제공해야 합니다. 시각 장애인이나 이미지를 로드할 수 없는 경우를 대비하여 alt 속성이나 aria-label 속성을 사용하면 됩니다.

class MyComponent extends HTMLElement {
  connectedCallback() {
    const image = document.createElement('img');
    image.src = 'example.jpg';
    image.alt = 'Example image';
    this.appendChild(image);
  }
}

customElements.define('my-component', MyComponent);

결론

웹 컴포넌트를 개발할 때는 접근성을 고려하는 것이 매우 중요합니다. 키보드 접근성, 스크린 리더 접근성, 명료한 텍스트 내용, 대체 수단 제공을 고려하여 웹 컴포넌트를 개발하면 보다 많은 사용자들이 불편 없이 사용할 수 있습니다.