반응형

스크린리더 2

시맨틱 마크업 구조를 자동화하는 GPT 활용법

시맨틱 마크업, 왜 중요할까?시맨틱 마크업(Semantic Markup)은 단순히 웹페이지를 "보이게" 만드는 것이 아닌, 의미를 전달하기 위한 웹 퍼블리싱의 기본입니다. 와 만으로도 화면을 꾸밀 수 있지만, 그것만으로는 콘텐츠의 구조나 의도를 사용자나 보조 기술(스크린리더 등)이 이해하기 어렵습니다.예를 들어, , , , 와 같은 HTML5 시맨틱 태그는 콘텐츠의 역할과 흐름을 명확히 드러냅니다. 특히 접근성(A11y) 관점에서는 시맨틱 마크업이 사용자의 맥락 이해에 큰 도움을 주며, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.하지만 퍼블리싱 실무에서는 시간 제약, 반복적인 구조, 협업 부재로 인해 시맨틱 마크업이 생략되거나 단순화되는 경우가 많습니다. 바로 이 지점에서 GPT와 같은 AI..

커스텀 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..

반응형