DDODDO LAB

IR(image replacement) 란? 웹 접근성 준수를 위해 이미지 사용 시 대체 텍스트를 제공해야 하며, 단순히 스크린리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필수적입니다. * 의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 text로 기입하는 방법입니다. 간단하게는 아래와 같이 img 태그 내 alt 속성을 넣는 방법이지만 background-image 를 사용하는 경우도 많기 때문에 IR 방법을 알고 계시면 좋을 것 같습니다. IR 작성 방법 1. display:none 2.visibility:hidden 3. overflow:hidden 1. display:none는 센스리더, Jaws, NVDA에서 모두 내용을 읽지 못함 2. visibility: hidd..

버튼 속성 추가 aria-haspopup="dialog" 속성 추가, aria-controls 연결된 팝업의 id값 적용, 팝업 열림 유무에 따라 aria-expanded="false | true" 상태 값 변화 적용해주시면 됩니다. 참고: https://www.w3.org/TR/wai-aria-1.1/#tab Accessible Rich Internet Applications (WAI-ARIA) 1.1 A section of a page that consists of a composition that forms an independent part of a document, page, or site. An article is not a navigational landmark, but may be nest..

디자이너분의 요청으로 포커스 라인을 제거를 하는 경우가 있습니다. 이렇게 a, input, button { outline: 0; } :focus { outline: none; } 이런 경우 브라우저 상에는 라인이 노출 되지 않게 됩니다. 시각장애인 등 키보드만 이용해 웹사이트를 이용 할 경우 키보드 요소를 노출 시켜 주어야 합니다. 크롬에 추가된 :focuis-visible이란 가상 클래스(pseudo class)를 통해 이를 디자인을 해치지 않고 구현할 수 있습니다. /* 키보드로 버튼에 포커스 시 */ button:focus-visible { outline: 3px solid #000; } /* 마우스, 터치로 버튼에 포커스 시 */ button:focus:not(:focus-visible) { ou..

탭 경우 "tab-linker"(탭영역) , "tab-contents" (탭패널) 부분으로 나뉘어 지고, 접근성 작업을 하면서 수정 부분들이 전달 왔습니다. 아래와 같이 코드를 작업했는데 뭐가 잘 못 된건지 모르겠어서자료를 찾아보니 컨텐츠에는 selected 가 아니라 expanded 를 적용해야 한다고 합니다.이유는 role="tabpanel"에는 제공하지 않고 role="tab" 등 초점을 받을 수 있는 요소에 제공하는 것이 원칙이라서 이 와 같은 실수를 하지 않기위해 기록하겠습니다. 탭 버튼 aria-selected="true" tabindex="0"> ..

반응형 웹(RWD, Responsive Web Design)이란? 사용자의 사용환경과 행동패턴에 유기적이고 적절하게 반응하는 웹요소들에 대한 총체적 디자인을 말합니다. ​협의적 관점에서 본다면 Screen Size, Resolution, Orientation 등 사용 단만환경에 반응하여 웹페이지를 제공하는 것이라 할 수있습니다.즉, 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃과 유연한 이미지 그리고 미디어쿼라가 어우러져서 특정 환경에 최적화 된 방법이 아니라 환경에 반응하여 스스로 적응 하는 방법입니다. 반응형 웹은 % 단위를 사용 하여 각 디자인의 폭에 유동적으로 반응하여 컨텐츠의 크기가 줄거나 커지고 오브젝트에 배령이 달라지기도 합니다. 적응형웹(AWD, Adaptive Web Design)이..