웹 접근성 및 웹 표준 준수

웹 접근성 관리 대상 선정 및 개선

웹 접근성 관리 대상

• 보투게더 서비스는 모든 사용자가 웹 어플리케이션을 쉽게 이용할 수 있도록 웹 접근성을 높이고 있습니다.
• 노약자와 장애인이 스크린리더나 보이스오버 등을 이용하여 웹 페이지를 읽을 때, 페이지의 구성 요소를 명확하게 읽을 수 있도록 하고 있습니다.
• 그리고 다양한 디바이스 환경(키보드나 마우스만 사용한 환경, 또는 모바일 환경 등)에서 보투게더 서비스를 불편함 없이 이용할 수 있도록 하고 있습니다.

웹 접근성 개선 방안

• 웹 접근성 지침을 참고하여, 웹 접근성을 개선하기 위해 아래와 같은 항목을 준수하였습니다.

1. html tag 속성(aria-label, aria-live 등)을 이용하였습니다.
2. 특정 요소가 열고 닫히는 경우, 스크린리더에서 '~~가 열렸습니다.' 와 같은 메시지를 읽을 수 있도록 추가로 컴포넌트를 만들었습니다.

export default function SearchBar({ size, isOpen, ...rest }: SearchBarProps) {
  return (
    <S.Form size={size} action={PATH.SEARCH}>
      <S.Input
        aria-label="게시글 제목 및 내용 검색창"
        type="search"
        name={SEARCH_KEYWORD}
        {...rest}
      />
      <S.Button type="submit">
        <img src={searchIcon} alt="검색버튼" />
      </S.Button>
      {isOpen && (
        <S.ScreenReaderDirection aria-live="polite">
          검색창을 닫으려면 검색창 외부를 클릭해주세요.
        </S.ScreenReaderDirection>
      )}
    </S.Form>
  );
}

3. img 태그에는 alt 속성을 필수적으로 사용하고 있습니다.

export default function LogoButton({ content, ...rest }: LogoButtonProps) {
  const src = contentCategory[content].url;
  const ariaLabelText = contentCategory[content].name;

  return (
    <S.Button content={content} aria-label={ariaLabelText} {...rest}>
      <img src={src} alt="보투게더 아이콘" />
    </S.Button>
  );
}

4. Toast와 같은 알림 요소는 일정한 시간(3초) 후에 사라지도록 하였습니다.

• 참고 코드

5. 색상 대비가 모든 텍스트에 대하여 3-4:1 이상이 되도록 색상 코드를 사용하고 있습니다.

6. 마우스 및 키보드 이용을 보장하기 위해 tabIndex 등 html 속성을 사용하고, 마우스 및 키보드에 의한 인터렉션이 원활하도록 하고 있습니다.

• 키보드만을 이용하는 경우에도 html 문서를 순서대로 읽기 위한 예시 코드

export default function Drawer(
  { handleDrawerClose, width, placement, children }: DrawerProps,
) {
  // (...코드 중략)
  return (
    <S.Dialog
      tabIndex={1}
      aria-label={ARIA_MESSAGE}
      aria-modal={true}
      ref={ref}
      $placement={placement}
      $width={width}
      onKeyDown={handleKeyDown}
      onClose={handleCloseClick}
      onClick={handleCloseClick}
    >
      <S.CloseButton onClick={handleDrawerClose}>사이드바 닫기버튼</S.CloseButton>
      {children}
    </S.Dialog>
  );
});

• 마우스만을 이용하는 경우에도 사용자 동작이 원활하도록 한 예시 코드

  const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
    const timeBox = timeBoxRef.current;

    if (!timeBox) return;

    if (event.deltaY > 0) {
      timeBox.scrollTop += TIMEBOX_CHILD_HEIGHT;
    }
    if (event.deltaY < 0) {
      timeBox.scrollTop -= TIMEBOX_CHILD_HEIGHT;
    }
  };

웹 표준 준수 및 시맨틱 태그 사용

• 보투게더에서 웹 표준을 위해 준수한 항목은 아래와 같습니다.

1. 무의미한 태그 대신, header나 section 등과 같이 시맨틱한 태그를 사용하여 html 문서를 구성하기
2. html 태그에 대한 브라우저 호환성을 체크하기

• MDN에서 명시하는 브라우저 종류와 버전을 고려하여 태그를 이용합니다.

3. SEO 최적화하기

• 검색 엔진 최적화를 위해서 <title>과 태그를 이용합니다. 관련 pr

4. 웹 표준 문서 참조하기

• W3C, WCAG, ARIA와 같은 웹 표준 문서와 가이드라인