OK DDODDO LAB

같은 커스텀 컴포넌트에서는 Vue의 구조 특성상 구조가 잘못되기 쉽습니다. 스크린리더는 이 input이 어떤 필드인지 알 수 없습니다. {{ label }} input과 label 연결을 위한 id 생성 {{ label }} :id="inputId" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> aria-labelledby 대체 방식 시각적으로 라벨을 숨겨야 할 경우:{{ label }} v-model 호환 개선 defineProps(['modelValue', 'label']); defineEmit..

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" 등 초점을 받을 수 있는 요소에 제공하는 것이 원칙이라서 이 와 같은 실수를 하지 않기위해 기록하겠습니다. 탭 버튼 컨텐츠 리스트-1 TAB-1 TAB-2 컨텐츠 리스트-1 컨텐츠 리스트-2 컨텐츠-2 자세한 내용 참고 w3c 공식문서: https://www.w3.org/TR/wai-aria-1.1/#tab https:/..