공공기관 프로젝트에 많이 투입되다보니 이런 구조는 정말 매번 짜는 것 같아요그런데 구축을 하면서 접근성 작업도 함께 해야하는 프로젝트를 맡게 돼서 정말 마크업의 중요성을 뼈저리게 느꼈답니당ul li로 짜고 JS로 고치면 되겠지 하며 자만에 빠져 있다가 JS에서 너무 골치가 아파서 이제 마크업을 잘 해놓으면 고생이 덜하다는 것을 깨달았습니다..역시 사수님의 의견은 새겨 들어야 한다는 것.. 리스펙 모든 영역들은 focus가 논리적인 흐름, 순서대로 이동해야 하는데요 .. 마크업을 잘못하면 나중에 고생을 합니당 그래서 이제는 마크업부터 제대로 하려고 합니다? 하하리더님께서 자주 쓰시는 방법인데 정말 꿀팁이예요.. 꿀팁 함께 써보아요.. 줍줍 See the Pen <a ..

See the Pen Untitled by posey (@fwapdhxw-the-animator) on CodePen.  얼마 전에 신규 프로젝트 구축을 맡으면서 접근성 마크까지 취득해야하는 경우가 있었다.구축을 해야하니 처음부터 코드를 잘 짜놔야 접근성 개선 항목이 줄어들기 때문에, 굉장한 부담감이 있었다, 그 중 메인 페이지에서 적용했던 기본적인 예시 코드를 공유해보겠다 ! 내가 받은 시안상으로는 ul li 구조가 아니면 반응형에서 너무 힘들 것 같아서 그냥 ul li로 구조를 짜버렸다.그래서 순서대로 포커싱이 가게 하는 코드를 짜야했다.그리고 접근성 개선을 위해 추가해야 하는 항목들을 정리했다. 필수는 아니지만 미리 잘 구축해놓지 않으면 나중의 내가 고생할 것 같아서 수많은 고민을 했다... ..

Java로 개발한 사이트인데, 개인적으로 역대급으로 접근성 마크 따기 힘들었던 힘들었던 사이트였다... 내가 다음에 이런 문제를 맞닥뜨렸을 때, 잊을까봐 정리해두는 중이다. 쉽게 말하자면, 저기 title 부분을 페이지마다 개별적으로 변경하라는 것이다. '국가수리과학연구소'는 연구소명이고, 그 뒤로는 1depth | 2depth | 탭 메뉴 이런 순서로 나와야 하는 것인데, 사실 이건 개발 영역이라 개발자 분께 해결 요청을 드렸으나, 개발 문제로 인해 페이지 별로 저걸 뿌려줄 수 없다는 답변을 받았다. 사실 잘 알아듣지 못했다. 리더님과 머리를 맞대고 나온 코드가 아래와 같다. 리더님께서 생각해낸 잔머리 코드... 저를 살리셨습니다 +_+ 각 페이지에 공통적으로 있는 요소들을 찾아 변수에 담고, 그걸 t..

구조는 이런 식으로 되어 있고, input에는 display: none;을 준 경우, label에는 focus가 가지 않는다.오래된 사이트를 유지보수 하다 보면 이런 것들이 접근성 심사에서 걸린다.예를 들어 '문의하기' 페이지에서 form 형식을 보면 파일첨부 버튼이 이런 식으로 들어가 있는 경우가 있다.   [해결 방법] 1. label 태그 하위에 input 태그를 넣고, 2. css 변경- display: none;을 줘 버리면 영역 자체가 사라져 버리기 때문에 opacity: 0;으로 주고, 영역은 살리되 눈에는 보이지 않게 만드는 것이 중요 ! 그리고 이 방법은 개발 구조는 유지하면서 시간은 많이 들이지 않는 야매 방법이다...더이상 손 쓸 필요가 없는 오래된 사이트에서만 이 방법을 추천한다 !..