OK 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..

컴퓨터 포멧을 수시로 하기때문에 잊지 않기위해서 공유 합니다. 제가 작업 할때 사용하는 vscode 확장 프로그램 입니다.

스크롤 시 특정 지점에서 요소(element)를 고정 하기위해서는 position: sticky 값을 사용하면 되는데, sticky가 제대로 고정 되지 않을 경우 아래 사항을 확인 하시기 바랍니다. 1. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right) 2. 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우 부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다. 이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다. 사용예시 .container..

HTML chk1 chk2 chk3 chk4 radio1 radio2 radio3 radio4 CSS input[type="checkbox"], input[type="radio"] { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-appearance: none; -webkit-border-radius: 0; outline: none; } .list-btn { list-style: none; display: flex; flex-wrap: wrap; margin: -0.375rem -0.1875rem; } .list-btn > li { position: re..

버튼 속성 추가 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..