페이지 성능 개선 후기 ( 3 )

저번에 이어서 후기를 작성해 본다.
이번엔 접근성, 권장사항 파트이다.

접근성

대체로 사이트에 액세스할 수 있다는 것은 말 그대로 누구나 사이트의 콘텐츠를 사용할 수 있고 해당 기능을 운영할 수 있음을 의미 합니다. 접근성은 "일반적인" 사용자의 좁은 범위 밖에 있을 수 있는 사용자의 경험을 의미하며, 사용자는 예상과 다르게 액세스하거나 상호 작용할 수 있습니다.

웹 접근성 콘텐츠 지침

• Perceivable (인지 가능) : 사용자가 콘텐츠를 인지할 수 있습니까? 이는 시각과 같은 한 가지 감각으로 무언가를 인지할 수 있다고 해서 모든 사용자가 인지할 수 있는 것은 아니라는 점을 염두에 두는 데 도움이 됩니다.

  • (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
  • (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
  • (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
  • (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
  • (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
  • (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
  • (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

• Operable (작동 가능) : 사용자가 UI 구성 요소를 사용하고 콘텐츠를 탐색할 수 있습니까? 예를 들어 호버 상호 작용이 필요한 항목은 마우스나 터치 스크린을 사용할 수 없는 사람이 조작할 수 없습니다.

  • (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다. (PC 웹)
  • (누르기 동작 지원) 터치 기반 모바일 기기의 모든 컨트롤은 누르기 동작으로 제어할 수 있어야 한다. (모바일 웹)
  • (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
  • (조작 가능) 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
  • (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
  • (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
  • (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
  • (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
  • (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
  • (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

• Understandable (이해 가능) : 사용자가 콘텐츠를 이해할 수 있습니까? 사용자가 인터페이스를 이해할 수 있고 혼동을 피할 수 있을 만큼 일관성이 있습니까?

  • (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
  • (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능 (새 창, 초점 변화 등)은 실행되지 않아야 한다.
  • (콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
  • (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
  • (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
  • (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

• Robust (견고성) : 다양한 사용자 에이전트(브라우저)에서 콘텐츠를 사용할 수 있습니까? 보조 기술과 함께 작동합니까?

  • (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
  • (웹 어플리케이션 접근성 준수) 콘텐츠에 포함된 웹 어플리케이션은 접근성이 있어야 한다.

  

접근성 점수 개선을 위해..!

• 외부 스타일 라이브러리 사용 시 컴포턴트에 명확한 롤 부여하기
  • mui 를 사용할 때 type, aria-label 명시해주기

    <DrawerButton
        className="drawer-button"
        onClick={toggleDrawer}
        type="button"
        aria-label="drawer-button"
    >
    

• user-scalable을 금지하거나 maximum-scale이 5보다 작으면 접근성 이슈가 있다고 한다. 시력이 낮은 분들이 화면을 확대할 수 없기 때문인데.. 그런데 이걸 허용하면 텍스트를 입력할 때 화면이 확대되고 입력 완료 후에도 확대된 채로 있기 때문에 좀 불편한 옵션이다.
• img 태그에 alt 속성 추가하기
• h 태그들 순차적으로 노출하기
• 백그라운드 및 포그라운드 색상의 대비율 조정하기
  • AA: 최소 조건 대비. 텍스트의 배경과 텍스트의 대비는 4.5:1이어야 한다. 단, 텍스트의 크기가 큰 경우에는 3:1의 대비만 충족되어도 된다. 텍스트가 단순히 페이지를 꾸미기 위한 용도이거나 로고나 브랜드 이름의 일부일 경우에는 대비 조건을 만족하지 않아도 된다.
  • AAA: 최적 조건 대비. 배경과 텍스트가 7:1의 대비를 가져야 좋다. 단, 텍스트의 크기가 클 경우에는 4.5:1의 대비만 가져도 된다. AA와 마찬가지로, 단순 꾸미기 위한 텍스트나 로고나 브랜드 이름의 일부가 되는 텍스트는 대비 조건을 만족하지 않아도 된다.

권장사항

• 이 항목은 보안, 권한 부분입니다. 주로 XSS 공격에 방어를 잘 하는지, https를 사용하는지, 위치정보, 알림 권한을 사용자 요청없이 허용하는지, 이미지의 적절한 사이즈, aspect ratio, 콘솔에 에러 로그가 찍히는지 등을 확인합니다.

사실 이 부분에 대한 부분은 개선한 것이 없다. 프론트에서 할 수 있는 부분은 다 되어 있어서 크게 살펴보진 않았다.

다음 챕터는 SEO로 마지막이다!