Promise와 함께 사용하는 웹사이트의 접근성 개선 기능 개발

13 Sep 2023

Promise

웹사이트의 접근성은 모든 사용자들이 웹 콘텐츠에 접근하고 사용할 수 있는 능력을 의미합니다. 하지만 시각, 청각, 운동 능력 등 특정 집중력이나 장애를 가진 사용자들을 고려하지 않으면 접근성이 떨어질 수 있습니다. 이러한 사용자들을 위해 접근성을 개선하는 기능을 개발할 때 Promise를 활용할 수 있습니다. Promise는 비동기 작업의 결과를 처리하기 위해 사용되는 JavaScript 객체입니다. 접근성 개선 기능을 개발할 때 Promise를 사용하면 비동기 작업을 효율적으로 처리하고 사용자 경험을 향상시킬 수 있습니다.

1. 숨김 콘텐츠 접근 기능

청각 장애가 있는 사용자는 비디오나 오디오 콘텐츠를 듣지 못하거나 제대로 이해할 수 없습니다. 이를 위해 웹사이트에서는 비디오나 오디오 콘텐츠의 대체 텍스트를 제공해야 합니다. 개발자는 이러한 대체 텍스트를 화면에 보이지 않게 하고, 접근성이 있는 사용자들이 웹사이트에 방해받지 않도록 처리해야 합니다. Promise를 사용하면 HTML 요소의 숨김 콘텐츠 접근 기능을 구현할 수 있습니다.

const hideElement = (element) => {
  return new Promise((resolve, reject) => {
    element.style.visibility = "hidden";
    resolve();
  });
};

const showElement = (element) => {
  return new Promise((resolve, reject) => {
    element.style.visibility = "visible";
    resolve();
  });
};

const videoElement = document.getElementById("video");

hideElement(videoElement)
  .then(() => {
    console.log("비디오 요소 숨김");
    // 텍스트 대체 기능 구현
  })
  .then(() => showElement(videoElement)
  .then(() => {
    console.log("비디오 요소 표시");
    // 접근성 복구 기능 구현
  });

2. 키보드 탐색 기능 개선

운동 능력이 제한된 사용자들은 마우스 대신 키보드만을 사용해 웹사이트를 탐색해야 합니다. 하지만 일부 웹사이트는 키보드로 이동하기 어려운 구조를 가지고 있습니다. 이를 개선하기 위해 Promise를 활용할 수 있습니다. Promise를 사용하면 사용자의 키보드 입력에 따라 웹사이트의 포커스를 관리하고, 편리한 키보드 탐색 경험을 제공할 수 있습니다.

const moveFocus = (element) => {
  return new Promise((resolve, reject) => {
    element.focus();
    resolve();
  });
};

const nextElement = document.getElementById("next");
const previousElement = document.getElementById("previous");

nextElement.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    event.preventDefault();
    // 다음 요소로 포커스 이동
    moveFocus(nextElement)
      .then(() => {
        console.log("다음 요소로 포커스 이동 완료");
      });
  }
});

previousElement.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    event.preventDefault();
    // 이전 요소로 포커스 이동
    moveFocus(previousElement)
      .then(() => {
        console.log("이전 요소로 포커스 이동 완료");
      });
  }
});

#접근성 #Promise #웹개발