Navigation

  • Navigation은 접근성의 중요한 측면이다.
  • 페이지에서 올바른 방향을 잡는다.
    • Banner
    • Search box
    • Main navigation box
    • Content well
  • low-vision 유저는 방향을 위한 페이지의 적절한 코딩에 의존한다.

당신이 볼 수 없다면?

  • 페이지 title은 페이지를 불러올 때 어떤 페이지에 있는 지 알려준다.
  • 적절한 head 배치와 계층 구조는 페이지의 조직을 전달하고 유저가 skip navigation해서 바로 갈 수 있게 한다.
  • link 설명은 페이지의 content와 site의 조직을 전달한다.

적절한 head 계층

  • head는 페이지의 조직을 전달하는 중첩이 적절하게 필요하다
    • h1 -> h2 로 , h2 -> h4(x)

Off-page heading

  • 혼란스러운 발표 없이 Screen Reader 유저에게 방향 도움을 줄 때 유용
  • display:none 이나 visibilty:hidden 을 사용하지 마라
.offpage {
    position: absolute;
    left: -1000px;
}

의미 있는 link text

  • Screen reader는 link를 찾고 list한다.
  • link 설명은 표로 표시하거나 목록에 표시하여 문맥상 의미가 있어야 한다.
  • “here”, “click here” 와 같은거는 사용하지 마라.
  • link 설명으로 URL 을 사용하지 마라.

Review

  • 페이지에서 항해하는게 얼마나 쉬운가?
  • color가 거기에 없다면 무슨 일이 일어나나?
  • mouse를 사용할 수 없으면 무슨 일이 일어나나?
  • 모두를 위한 계획

공부 위치 – https://www.coursera.org/learn/introcss/lecture/WWU0K/04-03-accessible-navigation