지표별 전문가심사 평가 기준 웹접근성 가이드내에서 가져옴원칙 1. 인식의 용이성(Perceivable): 모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 검사항목 1. (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.지표번호1지표명적절한 대체텍스트 제공준수기준◉ 이미지 등 텍스트가 아닌 콘텐츠를 이용할 경우, 해당 이미지가 제공하는 의미나 용도를 동일하게 인식할 수 있는 적절한 대체 텍스트를 제공한 경우 준수한 것으로 인정오류유형1-1◎ , 등 이미지 요소에 대해 alt 속성을 제공하지 않거나 매우 불충분하거나 오타로 표기된 경우예) 배너 등에 행사명만 적고 행사기간, 장소 등을 기입하지 않은 경우예) 찾아오는 길” 등 지도 이미지에서 찾..

input & label 웹 접근성에 맞는 코딩법 1. input 과 label을 동시에 쓰는 경우 --> label의 for와 input 아이디를 연동 시켜줘야함. 1 2 3 4 이름 2. input만 쓰는 경우 --> 디자인 상 label을 사용하지 않을 경우 title만 적어줘도 문제없음 1 2 3 3. input type="image"를 쓸 경우 --> 웹 접근성 연구소에서는 이 경우 alt와 title을 둘다 명시에 줄것을 권고함. 1 2 3 참조 : http://www.wah.or.kr/Example/wcag_valu.asp?cate=60

type="file 인풋이 아마 가장 html에서 스타일 하기 어려운 태그일겁니다. 보안 문제로 브라우저에서 변경하는데에 제약을 두기 때문입니다. 물론, 트릭이 있기야 하지만, 브라우저마다 고유의 컨트롤을 하기 때문에 다르게 표현되며 게다가 보기 안좋은 많은 코드를 써야된다는 겁니다. 가장 까닭스러운 부분이 바로 모든 브라우저에서 작동하는 것을 찾는것이죠. 만약 이 문제를 구글링해보시면, 이해하기 어려운 javascript, jquery 그리고 css를 너무 많이 사용한 튜토리얼을 구하게 될겁니다. 전 상대적으로 이 문제를 간단히 해결해주는 방법을 찾았고, 이해하기 쉽도록 노력했씁니다. 4단계로 나눠서 다뤄 보도록 하겠습니다. 첫째 - 텍스트상자와 file타입인 input을 만든다 div 와 input ..

가끔 IE9와 크롬에서 테이블 선이 제대로 안보이는 때가있다 예로 아래의 이미지를 보자 위에 세개의 테이블은 각각 크롬/Ie9/파폭에서 봤을때의 모습이다. 속성으로는 border-collapse:collapse와 boder:1px solid #000을 주었다. 하지만 각각의 브라우저에서 나오는 모습은 다르다. 속성의 에러로 인한 문제인데 이럴때 border-collapse에 속성을 collapse로 주지말고 separate 로 주면 크롬과 ie9 브라우저에서도 정상적으로 출력이 된다.