웹의 접근성 설계

정보 접근성 네이버 참고 자료

https://accessibility.naver.com/acc/guide_01

alt 사용

대체 텍스트 올바르게 제공하기
웹 접근성_적절한 대체 텍스트 제공(alt)

good reference

시각적으로 콘텐츠 숨기기(장애인만을 위한 태그 등)

접근성을 고려한 css 작성하기

시각적으로만 콘텐츠를 숨기는 것은 그리 어렵지 않다. 숨기더라도 스크린리더에서 접근이 가능하다는 것을 인식하고 있어야 하고, 브라우저 쿼크 모드에 대한 대처와 포커싱 되었을 때의 상태에 대한 고려해야 한다.

.visually-hidden {
  /* Remove the item from normal flow */
  position: absolute;
  
  /* Workaround for falsely pronounced, smushed text */
  white-space: nowrap;
  
  /* Set it to the smallest possible size (some screen readers ignore elements with zero height and width) */
  width: 1px;
  height: 1px;
  
  /* Hide overflowing content after resizing */
  overflow: hidden;
  
  /* Reset any property that may change the elements size */
  border: 0;
  padding: 0;
  
  /* Clipping defines what part of an element should be displayed. */
  /* Deprecated clip property for older browsers */
  clip: rect(0 0 0 0);
  
  /* clip-path for newer browsers. inset(50%) defines an inset rectangle that makes the content disappear. */
  clip-path: inset(50%); 
  
  /* It seems like at the moment nobody is quite sure why margin: -1px is there. On top of that it seems to cause issues (see: https://github.com/h5bp/html5-boilerplate/issues/1985). */
  margin: -1px;
}

aria 활용 (불필요한 태그 숨기기 등)

콘텐츠를 시각적으로 보이게 하는 것이 적절한 경우도 있지만, 아이콘을 사용하는 경우는 스크린 리더로부터 감춰야 힌다. 숨기고 싶은 요소에 area-hidden속성을 추가하고, 값에 true를 추가한다.

<button>
  <span class="icon icon-hamburger" aria-hidden="true"></span>
  <span class="text">Menu</span>
</button>

이외
text-indent에 음수 값을 주거나 font-size나 height의 값을 0으로 주는 것이다. 몇몇은 잘 적용되지만 주의해야 할 사항이 있다.

Techniques for hiding text

WAI-ARIA 의 개념과 role

웹 접근성과 시맨틱 마크업

시멘틱 태그