조직도 코딩하려는데 어떻게 해야하나요?
로와
위 파일과 같은 가족 조직도를 코딩하려고 하는데
조직도는 통이미지로만 사용하면 웹접근성에 안된다고 하더라구요,
그래서 이미지 하나씩 잘라서 마크업해야 하는데
지금 제가 쓴 태그가 맞는지 한번 확인 부탁드릴께요.
그리고 ,제가 딸1,딸2,딸3 쪽에 ul태그를 썼는데
ul태그와 dl태그를 썼을때 차이가 어떤게 있는지도 설명 부탁드려요
[질문]
조직도의 경우 스크린리더기를 읽을때 많은 조직을 다 읽게되면 사용자가 이해하기 쉽지 않아
그부분을 쉽게 처리하고자 합니다.
그래서 h태그를 써서 제목영역만 또는 중요한 부분만 읽히고 점프하게끔
하기위해 h태그를 아래 코딩과 같이 사용했습니다.
가족로고 조직도 증조할아버지, 할아버지, 할머니, 첫째아들, 둘째아들, 셋째아들.. 이것만 h태그를 써서
나중에 읽힐때 저 h태그 영역만 읽고 빨리 넘어가도록 코딩하려했습니다.
아래와 같이 코딩을 해도 웹접근성에 위배되는건지 궁금합니다.
괜찮은건지 궁금합니다.
=====================웹표준화를 위한 코딩=====================
h1우리가족/h1
h2조직도/h2
!--조직도 시작--
div class=organi
h3증조할아버지/h3
h4할아버지/h4
h4할머니/h4
h5첫째아들/h5
div class=”one”
ul
li딸1/li
li class=sub
ul
li손자1/li
li손자2/li
/ul
/li
/ul
/div
h5둘째아들/h5
div class=”two”
ul
li딸1/li
li class=sub
ul
li손자1/li
li손자2/li
li손자3/li
/ul
/li
/ul
/div
div class=”two”
ul
li딸1/li
li class=sub
ul
li손자1/li
li손자2/li
li손자3/li
/ul
/li
/ul
/div
h5셋째아들/h5
div class=”two”
ul
li딸1/li
li딸2/li
li딸3/li
/ul
/div
/div
h2조직도 관련링크/h2
-
머즌일 2023-11-16
저번에 백남수다님 세미나에 갔었는데요 저런건 이미지로 하고 logndesc 로 하는게 제일 좋은거 같아요.
증조할아버지 밑에 할아버지, 할머니가 있고 그 밑에 첫째아들, 둘째아들, 셋째아들이 있다. 첫째아들 밑에 .... 있고, 둘째아들 밑에 .... 있고, 셋째아들밑에 .... 있다.
이런식으로 그냥 쭉 읽혀지는게 좋다고 들었습니다. -
매1혹 2023-11-16
의미에 맞는 마크업이란, 의미를 전달할 수 있는 마크업이란거라 봐요.. 의미를 전달하지도 못하게 복잡하게 마크업한다면 차라리 안하느니만 못하겠죠.. 의미 전달을 우선으로 생각하심이 좋을듯해요..
조직도를 제공하는 이유(의미)는 조직의 구조를 잘 설명하기 위함입니다. 설명이 우선이라는거죠..
조직의 구조를 먼저 설명하고 이를 잘 전달하기 위해 이미지라는 도구를 사용한다고 생각하세요 -
키클 2023-11-16
여러가지 방법이 있겠네요..위에 처럼 할 수도 있고, 통 이미지로 박아 놓고 대체 텍스트로 알아듣기 쉽게 설명하는 방법도 있겠고요.~ 상황에 맞게 좋은 방법을 찾아보세요.. :)
-
마법 2023-11-16
대체텍스트를 위쪽 마크업과 같이 해주고 통이미지로 해서 작업을 효율적으로 하는게 좋지 않나요?
굳이 일일이 컷팅하면서 코딩한다고해서 그게 좋은건가요?
코딩으로 할 수 없는게 없지 않지만, 작업을 효율을 생각한다면 통코딩이 좋다고 보는데요... -
영미 2023-11-16
position: absolute; 로 작업하세요