Round Figure

페이지 제목이 없다면 페이지 내용을 일일이 탐색해가며 찾아야한다 그렇기때문에 페이지의 제목을 읽고 어떤 내용일지 유추 할 수 있도록 페이지의 목적을 설명하는 title 을 제공하여야 한다 페이지 title 태그를 작성하거나 스크립트로 값을 넣어준다 title 태그 작성 페이지 제목 스크립트로 title 값 변경

텍스트가 아닌 콘테츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다 1. img태그 등의 이미지 요소에 대해 alt속성을 제공하지않거나 alt속성을 선언되어있으나 그 내용이 img 내용을 대체할수 없으면 안된다 2. img태그 에 title만으로 대체 텍스트를 제공해서는 안된다 3. 이미지맵을 사용할 경우 대체 텍스트로 설명하고 순서가 잘 맞도록 작성하여야한다 4. 게시판에 콘텐츠를 등록 하는 것처럼 사용자가 직접 대체 텍스트가 필요한 콘텐츠를 등록할 때 해당 컨텐츠의 대체 텍스트를 제공해야 한다

스크린리더와 같은 통신 기기는 label 태그를 통해 input 태그를 인식한다 label 태그는 양식 입력 창의 요소들을 위한 캡션 명시적, 암시적 코드 작성 방법이 있다 주로 input 태그와 함께 사용 텍스트 label의 for 속성을 input의 id 속성으로 연결 명시적 작성 방식 텍스트 암시적 작성 방식 텍스트 두 방식 모두 사용하더라도 문제가 없는 것이 표준이지만 일부 통신 기기에서 암시적 방식을 지원하지 않기 때문에 명시적 방식을 사용하는 것이 좋다 디자인 상 label이 제공되기 어려운 경우는 input 태그에 title 속성을 사용 input의 placeholder의 경우 스크린리더에서 읽혀지는것을 보장할수 없으므로 title 속성도 사용

tabindex? 키보드의 Tab키를 눌렀을 때 포커스의 이동 순서를 임의로 조정할 수 있는 HTML의 속성 마크업 순서가 논리적으로 잘 구성되어 있다면 대체로 사용할 필요가 없지만 웹페이지를 구성할 때 디자인 요소 등 때문에 순서대로 배치되어 있지 않을 때 사용해 자연스럽게 페이지를 탐색할 수 있도록 구성한다 1. tabindex="1" 문서 안에서 가장 먼저 초점을 받을 수 있다 먼저 초점을 받기 때문에 사용 시 주의가 필요하다 2. tabindex="0" 키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 준다 초점 받는 순서는 마크업 순서를 따른다 2. tabindex="-1" 키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 한다