<HTML> input required 속성, img role 속성

·2023년 10월 1일
0

HTML5

목록 보기
1/2

input의 속성 중, required에 관하여

<input required>
자바스크립트의 도움 없이 해당 속성을 input 태그 안에 기입해주면, 경고창을 띄워줍니다.

예를 들어, 회원가입을 진행하는데 "비밀번호" input 영역에 작성하지 않고 가입 버튼을 누른다면, required가 기입된 해당 input을 작성하라고 경고창을 띄웁니다.
이후의 가입 동작은 처리되지 않습니다.

<input text="password" id="password" required>
즉, 패스워드 입력창은 필수 입력 창이다.


Html5 태그의 속성 중, role="presentation"

mdn, what's presentation

presentation의 동의어는 none입니다. (mdn 출처)

<img src"image/sunset" role="presentation">
<h2 role="presentation">Hell'o' World</h2> 
... 등등 수많은 html 태그에 적용 가능

내가 이해하기로는 role="presentation"을 적용하는 순간, 해당 태그의 냄새를 지운다. 라고 이해했다.

예시로 <h2>는 제목, <img>는 이미지를 넣을 수 있는 태그, <ul>은 리스트 구성에 필수적인 상단 태그라고 하자.

하지만 해당 태그들에 role="presentation"를 적용하는 순간에 해당 태그의 의미를 지워버린다고 이해했다.
(기존에 어떤 sementic한 의미를 가진 태그의 냄새를 지워버리고, 나의 존재를 숨긴다.)

사용 예시로 <img>에 사용가능 할 것 같다.
시각장애인을 위한 스크린 리더 같은 곳에 img 태그가 이미지라는 사실을 숨기는 용도로 사용할 수 있을 것 같다.
만약 role="presentation"이 없는 <img>를 스크린 리더가 인식하고, 시각 장애인에게 이미지가 있다는 사운드를 알려준다 해도 그들은 보지 못하기 때문에 뜻하지 않은 혼란스러운 경험을 사용자에게 제공할 수도 있기 때문이다.

profile
- 배움에는 끝이 없다.

0개의 댓글