HTML table 테이블 음성인식을 위한 headers, id 개념 및 사용법
지난시간까지 테이블 사용법에 대해서 계속 배워가고 있습니다. 오늘 시간도 그 연장선 입니다. 접근성을 위한 테이블 사용 방법에 대해서 알아가고 있는데, 오늘은 id와 header 요소에 대해서 배웠습니다.
사실 지금까지 접근성만을 고려해봤을때, 제일 이해가 쉬운 요소가 오늘 배운 id와 header 였습니다. 뭔가 체계적이라고 해야 할까요? 이해가 쉬웠습니다. 이 부분은 마치 요소에 class 혹은 id를 별도로 부여해서 스타일이나 스크립트를 주는 방식과 비슷한 원리였습니다.
본문인 body 부분만 캡쳐한 마크업의 상태 입니다. 보시면 th 요소 안쪽으로 headers 와 id 태그가 들어있는것을 확인할 수 있습니다. 이것은 그대로 이해하시면 될 것 같습니다. 예를 들어서, 62열을 보시면 <th headers="product" id="smartphone">스마트폰</th> 라고 마크업이 되어 있습니다. 어떻게 해석하는지 살펴보겠습니다.
headers 는 읽어들이는 것이라고 생각하시면 되고, id는 해당 요소에 대해 말 그대로 이름을 부여한 것 입니다. 즉, 현재 스마트폰에 대한 id를 smartphone 이라고 변수를 지정한 것 입니다. 하지만 음성읽기에서 "스마트폰" 이라고 먼저 읽기 전에 headers 정보를 먼저 읽습니다. headers="product" 라고 되어있었으니, product에 대한 id를 찾으면 됩니다. 요소들을 살펴보니 "상품종류" 가 product 라는걸 알 수 있습니다. 그러니, 이 테이블 표를 음성 프로그램이 인식해서 읽을 때, 상품종류 > 스마트폰 이런식으로 출력하게 되는 것 입니다.
지난시간에 배운 colgroup 과 오늘 알아본 id, headers에 대한 요소들의 결과물 입니다. 육안으로는 차이가 전혀 없습니다. 그러나, 접근성 부분에 있어서 음성 인식에 대한 부분이 달라지기 때문에 둘 중 편하신 방법으로 사용하시면 좋을 것 같습니다.
꼭 이렇게 사용 안 하셔도 됩니다. 그냥 단순히 table, th, tr, td 등으로만 사용하셔도 상관은 없겠으나, 조금이나마 타인을 위한 배려를 하신다면 이 방법대로 코딩을 하시는것도 괜찮지 않을까 싶습니다. 저도 앞으로 테이블을 구성할 때, 한번 이런 방식대로 구현해 보려고 노력하겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
