728x90 300x250 SMALL Front-end/HTML80 웹 접근성을 위한 aria-live 속성 완벽 정리! aria-livearia-live는 웹접근성(WAI-ARIA)속성 중 하나로, 스크린 리더가 동적으로 변경된 콘텐츠를 자동으로 읽어주도록 설정 하는 역할을 한다.새로운 알림이 있습니다.👉 변경되는 내용을 실시간으로 스크린 리더가 잃도록 설정하는 속성 값설명off기본값, 변경 사항을 읽지 않음polite현재 읽고 있는 내용을 끝낸 후 변경 내용을 읽음assertive즉시 변경 내용을 읽음(긴급한 알림 등에 사용) 언제 사용되나?사용자 입력에 따라 즉시 변경되는 UI요소(예: 알림 메시지, 검색 결과 업데이트, 에러 메시지 등)비동기 데이터 변경(예: 실시간 채팅, 로딩 상태 표시)사용자 액션 없이도 변하는 정보(예: 뉴스 속보, 스포츠 점수 업데이트)aria-live 속성 값 및 예제1. aria-liv.. 2025. 4. 8. ARIA 라벨링 1. aria-label(요소 자체에 레이블 제공)X👉 화면에는 X 아이콘만 보이지만, 스크린 리더는 "닫기"라고 읽음2. aria-labelledby(다른 요소의 내용을 레이블로 사용)회원가입👉 은 title의 내용을 가져와 "회원가입"으로 인식 3. aria-describedby(설명 추가 제공)이메일 형식으로 입력해주세요.👉 사용자가 입력 필드에 초점을 맞추면 "이메일 형식으로 입력해주세요."가 추가로 읽힘 2025. 4. 7. textarea placeholder 안나오는 이유 textarea placeholder 안나오는 이유는 textarea 사이에 공간이 들어가있기 때문이다. 아래예시를 확인해보면 textarea를 붙여서 써준 경우에는 placeholder가 잘 나오는걸 확인할 수 있다. 2024. 1. 20. select 기본값 문구 선택 시에 안 보이도록 하는 방법 셀렉트 박스의 기본값으로 문구가 나타나지만 사용자가 선택을 하면 안내 문구가 셀렉트 박스 내에서 보이지 않도록 하는 코드 Select an option: 선택해 주세요 Option 1 Option 2 Option 3 위에 "선택해 주세요" 옵션은 disabled, selected, hidden 속성을 사용하여 기본값으로 설정되어 있지 않다. 이 옵션이 선택된 경우 display:none 스타일이 적용된다. 2023. 11. 20. 이전 1 2 3 4 ··· 20 다음 728x90 반응형 LIST
