ARIA

• role

  콘텐츠에 의미를 제공하여 사용자 기대와 일치하는 방식으로 기기와 상호 작용할 수 있도록 합니다.

  // 유효성 검사 에러 메시지를 즉시 알릴 수 있도록 접근성 제공
  {errMessage && <strong role="alert">*{errMessage}</strong>}
  

• aria-label

  인터랙티브 요소에 대체 텍스트를 정의합니다.

  // src/components/FeedItem/Carousel/Indicator/Indicator.tsx
  <button aria-label={`${imgUrlList.length}개 중 ${i + 1}번`} />
  
  

• aria-labelledby

  다른 요소를 참조하여 대체 텍스트를 정의합니다.

   <StyledSharingModal aria-labelledby="title">
     <DialogTitle id="title">공유</DialogTitle>
   </StyledSharingModal>
  

Semantic Tag

• dialog
  • ESC를 누르면 모달이 닫히는 기능을 제공합니다.
  • dimmed된 배경 요소에 포커스가 가지 않도록 합니다.
  • overlay를 제공합니다.
• time
  • datetime 속성을 사용하여 기계가 읽을 수 있는 표준 날짜 형식을 제공합니다.
• H1 ~ H6

  • 정보의 계층 구조를 표현합니다.

      // 화면에 제목 텍스트를 표시하지 않는 경우에는 a11y-hidden 클래스를 사용합니다.
      <h1 className="a11y-hidden">MOMOO</h1>