멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 8 (폼 관련 요소, 인터렉티브 요소, 스크립팅 요소, 유저 인터렉션 속성, WAI-ARIA)

 

 

목차

• 폼 관련 요소
• dialog 요소와 popover 속성
• details, summary 요소
• 스크립팅 요소
• 유저 인터렉션 속성
• WAI-ARIA
• 오늘 하루를 돌아보며

 

폼 관련 요소

<form> 요소는 사용자가 입력한 정보를 서버로 전송하기 위한 컨테이너다. 텍스트 필드, 체크박스, 라디오 버튼, 드롭다운 목록 등 다양한 입력 요소를 넣을 수 있다.

form 관련 요소는 1대1로 대응되는 <label>(식별 가능한 이르름표)을 가져야 한다. 폼 관련 요소의 id 또는 name 속성값을 label의 for 속성값에 연결한다. label을 클릭하면 연결된 요소에 포커싱된다.

1. input 요소

<input> 요소는 사용자에게 데이터를 입력받기 위해 사용한다. action 속성은 데이터를 받을 서버 url을 지정하고, method 속성은 테이터를 전송하는 방식(GET/POST)을 지정한다.

input 요소와 연결한 label은 접근성 측면에서 감추지 않는 게 좋다. placeholder(글상자에 표시되는 흐린 텍스트)는 글상자가 포커싱되면 사라지기 때문이다. 뭘 입력하려고 했는지 까먹을 수 있다.

 

input 요소는 type의 속성값에 따라 기능이 달라진다.

• text: 텍스트 상자, 또는 한 줄 글상자.
• search: 검색어 상자. HTML5에 새로 추가된 기능으로, 상자 안에 텍스트를 입력하면 오른쪽 끝에 x 버튼이 생긴다. placeholder 속성을 사용하면 검색어 힌트를 줄 수 있다.
• submit: 전송 버튼
• reset: 초기화 버튼
• button: 일반 버튼
• checkbox: 체크박스
• radio: 라디오 서식. name 속성값을 통일시켜야 여러 목록 중 하나만 선택된다.
• email: 이메일 입력 서식. HTML5에서 새로 추가된 기능
• tel: 전화번호 입력 서식. HTML5에서 새로 추가된 기능으로, 모바일에서 보면 숫자 자판만 보인다.
• password: 비밀번호 입력 서식. 입력하면 *표만 보인다.

form 관련 요소가 가질 수 있는 속성은 다음과 같다.

• name: 같은 카테고리라는 의미로, 서버에 보낼 때 키 값(담을 그릇의 이름)을 지정한다.
• value: 서버에 보내는 정보로, 버튼에 사용하는 value는 버튼 이름으로도 사용한다.
• checked: 논리 속성. 체크박스와 라디오 서식이 가질 수 있는 속성으로, 미리 체크되어있도록 한다.
• required: 논리 속성. 필수 입력 정보임을 알려준다. 입력되지 않으면 서버로 전송되지 않는다.

폼 관련 요소들은 브라우저마다 UI가 다르다.

 

2. button 요소

버튼은 input 요소로도 만들 수 있고 button 요소로도 만들 수 있다. 기능의 차이는 없지만, input 요소로 만든 버튼은 의미 없는 마크업이다.

button 요소는 시작과 끝 태그가 있고, img나 svg 요소를 넣을 수 있다. 다만, img나 svg를 넣을 때는 접근성에서 문제가 있다. 대체 텍스트를 제공하거나 WAI-ARIA를 사용해서 button에 aria-label 속성을 적용해야 한다.

button 요소가 가질 수 있는 속성은 다음과 같다.

• submit: 데이터를 서버로 제출한다.
• rest: 폼에 입력한 모든 값을 초기화한다.
• button: JavaScript와 함께 사용한다.
• disabled: 버튼을 비활성화한다.
• form: 특정 폼과 연결한다.

 

3. select, textarea 요소

select 요소는 드롭다운 / 리스트 박스 / 콤보 박스라고도 부른다. 선택지 목록은 option 요소를 사용한다. 기본 선택값을 설정할 때는 option 요소에 selected 속성을 추가한다.

select 요소가 가질 수 있는 속성은 다음과 같다.

• name: 서버에 보낼 때 키 값 지정
• multiple: 여러 개의 옵션을 선택할 수 있도록 지정
• size: 옵션 개수 지정
• disabled: 비활성화

textarea 요소는 여러 줄 글상자다. 사용자에게 댓글이나 메모처럼 긴 텍스트를 입력받을 때 사용한다. cols와 rows 속성으로 글상자의 사이즈를 정한다.

 

dialog 요소와 popover 속성

diolog 요소는 기존 화면을 딤드(어둡게) 되게 하면서 뜨는 모달 대화 상자(팝업 창이)다. 자바스크립트로 화면을 띄우고 닫는 동작을 하도록 한다.

 

popover 속성은 툴팁과 비슷한 UI 요소로, 추가적인 정보를 제공하거나 사용자와 상호작용할 수 있는 작은 창을 표시할 때 유용하다.

div에 popover 논리 속성을 추가하면 사용할 수 있다. div의 id 값을 button의 popovertarget 속성 값과 일치시키면 버튼을 클릭했을 때 팝오버 창이 뜬다. 팝오버 창을 닫기 위해서는 창 밖을 클릭하면 된다.

<button type="button" popovertarget="pop">
<div popover id="pop">
 <p>popover 속성이 있는 요소의 id 값과 button의 popovertarget 속성 값을 일치시키면
 버튼을 눌렸을 때 팝오버 창이 뜬다.</p>
</div>

 

모달 대화 상자의 접근성에 대한 영상

 

details, summary 요소

details 요소는 토글 버튼을 생성해서 긴 설명을 접었다 펼 수 있게 한다. details 요소 안에 summary 요소는 토글 전에 보이는 내용이다. summary 밑에 추가하는 요소들이 토글 버튼을 활성화했을 때 뜨는 정보다.

open 논리 속성을 details에 사용하면 처음부터 열려있도록 할 수 있다. 기본 값은 closed다.

 

 

스크립팅 요소

script 요소는 자바스크립트 코드를 문서에 포함하거나 외부 자바스크립트 파일을 불러오기 위해 사용한다.

 

script가 head에 있을 때는 동작하지 않다가 body로 옮기면 동작하는 이유:

html이 head를 먼저 파싱(parsing)하고 script를 다운로드하고 실행한 후에 body를 파싱한다. 이때 defer 논리 속성을 사용하면 html이 파싱하면서 script를 다운로드하고, 파싱을 완료하면 script를 실행한다.

type 속성 값을 module로 주면 기본으로 defer 속성을 갖는다.

 

 

유저 인터랙션 속성

• accesskey: 단축키를 생성하는 속성
• hidden: css의 display: none처럼 존재하지 않는 것처럼 숨기는 속성
• tabindex: 포커스를 받는 순서를 임의로 정하는 속성. 0, 1, 2 순으로 0이 가장 먼저, -1은 포커스를 받지 않는다.
• contenteditable: content editable. 내용을 수정할 수 있도록 하는 속성

WAI-ARIA

WAI-ARIA란?

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications, ARIA)는 스크린 리더나 보조 기기 등에서 접근성과 상호 운용성을 향상시키기 위해 탄생했다. 마크업에 역할(role), 속성(property), 상태(state) 정보를 추가하여 보다 나은 사용자 경험(UX)을 제공한다.

 

ARIA의 3가지 기능

역할(Role)

역할(Role)은 특정 요소에 기능을 정의한다. 역할을 부여하여 사용자에게 정보를 제공하며, 동적으로 변경할 수 없다.

시맨틱 마크업을 한다면 각 요소가 어떤 동작을 하는지 알려주지만, div와 같은 컨테이너(그룹화) 요소를 쓰면 추가 정보를 줘야 한다. 예를 들어, 버튼을 만들 때 div를 쓰면 role="button"을 추가해야 스크린 리더가 버튼이라고 알려주지만, button 요소를 사용하면 role을 할당하지 않아도 버튼이라고 알려준다.

 

속성(Properties) & 상태(States)

속성(Property)은 요소가 기본적으로 갖고 있는 특징이나 상황을 정의하고, 상태(State)는 요소의 상태 정보(상황의 변화에 따른 값)를 정의한다. aria-*라는 접두어를 가진다.

상태는 요소의 상황을 나타내므로 애플리케이션이 실행 중에 자주 바뀌는 반면, 속성은 상대적으로 바뀌는 경우가 드물다.

• 속성 예) aria-describedby에 id 값을 주면 긴 설명을 읽어준다.
• 속성 예) aria-label은 상호작용하는 상황에 사용한다.
• 상태 예) aria-invalid="true"는 오류가 발생한 상태를 알려준다.
• 상태 예) aria-pressed="true"는 버튼이 눌린 상태를 알려준다.

WAI-ARIA의 작성 규칙

ARIA 역할(role)과 HTML5 섹션 요소를 중복해서 주지 말고, 의미가 없는 요소에 role을 줘야 한다. 또한, HTML 요소의 기능을 변경하면 안 된다. 키보드 사용을 보장해야 하며, 레이블을 제공해야 한다.

 

ARIA 예제

ARIA Authoring Practices Guide

 

오늘 하루를 돌아보며

폼 요소를 배우면서, 드롭다운에 '...선택'이라는 option을 추가하는 이유에 대해 고민해 볼 필요가 있다는 말이 가장 기억에 남는다. 굳이 선택지를 하나 더 늘릴 필요가 있을까? 이미 드롭다운을 보면 선택지 중 하나를 골라야 한다는 것은 바로 보이지 않나?

 

프론트엔드 개발자를 꿈꾸면서 나는 어떤 개발자가 될 것인지 고민해야겠다. 생각 없이 남들이 시키는 대로만 하는 개발자가 아니라, 고민하는 개발자가 되고 싶다. 사용자에게 직관적으로 이해시킬 수 있는 방법을 고민하고, 접근성에 대해 고민하고, 여러 환경과 다양한 사람들의 상황을 고려하는 개발자 말이다. 남들이 하는 대로 따라가는 것이 아니라, 왜 그렇게 하는지, 왜 그렇게 하지 않는지 고민하고, 아닌 건 아니라고, 맞는 건 맞다고 말할 수 있는 용기 있는 개발자가 되고 싶다.