접근성 관련 이미지 사용 시에요_
푸헷
사이트에 도표나 도식화 된 이미지가 많습니다.주로 요런 이미지들인데요.
배경이 들어가 있기도 하고, 원형에 부채꼴에 다양한 모양으로 많습니다.
기존에 작업되어 있는걸로는 통이미지 하나로 넣고 alt=OOO도식화 이런식으로 표현해 놨더라구요.
접근성에 있어서는 이렇게 하나의 통이미지로 들어가 있으면 접근하기 어려운걸로 알고 있습니다.
이미지를 하나씩 슬라이스 해서 CSS에서 포지션으로 잡아주는 방법과 이미지맵을 거는 방법 두가지를 생각했는데요.
내용이 많아서 이미지맵을 생각했는데요. 이미지맵으로도 괜찮을까요?
알고 있기론 alt속성에는 이미지 대체텍스트로 짧고 간결하게 이미지를 인식할 수 있는 내용을 적는걸로 알고 있습니다.
나머지 자세한 설명은 title속성에서 세부설명을 적어주는게 좋다고 책에서 봤는데요.
예를들면 alt=OOO기대효과 title=기대효과로 인해 발전 가능성이 있습니다. 이런식으로요.
속성은 이렇게 써주면서
이렇게 많은 내용일 경우 의미있게 마크업 하면서 접근성을 지키는 방법은 어떤게 좋을까요?
-
꽃내
아?! 그런가요?
전 이미지 대체텍스트로 alt 간략하게 설명해준 뒤에 세부적인 설명으로 title을 더 써줬었는데요.
그러면 안되나요?
책에는 그렇게 나와 있길래 바꿔 쓰고 있었는데;;;
alt에는 길게 설명을 쓰면 검사에서 걸리더라구요.
여전히 alt는 알쏭달쏭하네요 ;ㅁ; -
선아
답변 감사합니다. 대부분의 이미지들이 링크가 없는 이미지입니다.
순서도도 있고, 조직화된(?) 구조도 있고 좀 복잡 다양해요. ㅠㅠ
접근성 들어간다더니 이미지부터 먼저 얘기가 나오네요.
자잘하게 텍스트가 많은데 저걸 다 일일이 잘라서 CSS로 잡아주는게 일이 만만치 않을거 같고.
이미지도 워낙 많아서요. 한 페이지에서도 여러개가 됩니다.
몇번 간단한건 마크업을 시도해봤는데 저런 이미지들이 많아지니까 난감해지더라구요.
저런 형태의 이미지들이라면 통으로 해 -
길가온
마지막으로 통이미지를 하느냐 각각 다 잘라야 하느냐의 판단은 저같은경우는
일단 한페이지에 이미지를 한번에 불러들일수 있는 양이 4개의 이미지 입니다. 그렇기때문에 한페이지에 이미지를 잘잘하게 잘라서 로딩을 느리게 할것같으면 적당히 통으로 이용을 합니다.
단, 그렇다고해서 무조건 통을 이용해서는 아니 됩니다...접근성에는 선형화라는 구조도 평가에 들어가기에 잘 판단하여 잘라주시기 바랍니다.
이상 부족한 설명이였습니다~^^
그리고 참고로 alt와 tit -
이퓨리한나
제가 사용하는 방법을 예시로 알려드릴께요..(코딩은 여러분 마음속에 있으니까요~ ^^)
일단 복잡한 형태의 이미지일 경우 alt값에 들어갈 설명이 한글 150자 영문 200자(이건 저만의 기준점)가 넘는지 확인하고 판단을 합니다.
150자안에 간추려 충분히 설명할 수 있으면 통이미지에 alt값.. 그렇지 않을경우
통이미지에 longdesc를 이용하여 연결시켜줍니다.
또한 이미지 맵을 사용할경우아 아닐경우의 판단은 저같은경우는
링크의 요소가 있는냐 없느 -
미련곰팅이
longdesc 속성을 이용하세요-ㅎㅎ