OK DDODDO LAB

  • 홈
  • 태그
  • 방명록

웹접근성 2

커스텀 Input 컴포넌트의 라벨 연결 오류 와 해

같은 커스텀 컴포넌트에서는 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..

작업 일지/웹접근성 2025.06.12

IR(Image Replacement)

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

작업 일지/웹접근성 2024.03.11
이전
1
다음
더보기
프로필사진

OK DDODDO LAB

AI랑 퍼블리싱 하는 실험 블로그

  • 분류 전체보기 (48) N
    • 퍼블리셔 AI (8) N
      • 퍼블리셔 자동화 (2)
      • 접근성(A11y) × 마크업 (3) N
      • ChatGPT 실무 사례 (3) N
      • 디자인 & 시안 연계 (0)
    • 작업 일지 (39)
      • IT (3)
      • HTML CSS (10)
      • JS (11)
      • 기초셋팅 (2)
      • 웹접근성 (6)
      • 이슈기록 (7)

Tag

반복작업줄이기, vuejs, html자동화, ai와이어프레임, tailwindcss, gpt마크업, figma없이디자인, 웹접근성, 웹퍼블리셔, ChatGPT, JS, chatgpt디자인, 디자인자동화, 퍼블리셔자동화, gpt디자인, uiux자동화, CSS, gpt실무활용, jQuery, 프롬프트디자인,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

Calendar

«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

Archives

Copyright ©

티스토리툴바