위젯 속성(Widget Attributes) | WAI-ARIA 상태 및 속성

aria-orientation 속성

요약 설명
aria-orientation 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, UI 요소의 방향(orientation)을 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다. 이 속성은 주로 슬라이더, 탭, 목록 등 방향이 중요한 UI 요소에서 사용됩니다.
aria-orientation 속성은 요소가 수직(vertical) 또는 수평(horizontal) 방향으로 배열되어 있는지를 명확하게 전달합니다.

WAI-ARIA 1.2 Specification (aria-orientation)
MDN Web Docs (aria-orientation)

aria-orientation 속성 값

horizontal
요소가 수평으로 배열되어 있음을 나타냅니다.
vertical
요소가 수직으로 배열되어 있음을 나타냅니다.
기본값 없음
기본적으로 역할에 따라 자동으로 해석됩니다.
예를 들어, role="tablist"는 기본적으로 horizontal로 간주됩니다.

연관된 HTML 태그 및 역할

<div role="slider">
슬라이더 요소.
<div role="tablist">
탭 리스트 요소.
<div role="listbox">
목록 박스 요소.
<div role="toolbar">
툴바 요소.

사용 시 주의사항

적절한 값 설정
aria-orientation 속성은 요소의 실제 배열 방향에 따라 정확하게 설정해야 합니다.
예를 들어, 수직으로 배열된 탭 리스트는 aria-orientation="vertical"로 설정해야 합니다.
역할에 따른 기본값 이해
일부 역할(예: role="tablist", role="toolbar")에는 기본적으로 수평 방향이 적용됩니다. 따라서 이 경우 명시적으로 aria-orientation을 설정하지 않아도 됩니다.
사용자 상호작용 고려
사용자가 방향에 따라 키보드 내비게이션(예: 화살표 키)을 할 때, 올바르게 설정된 aria-orientation은 보조 기술이 사용자 경험을 정확하게 전달하는 데 도움을 줍니다.

예시

잘못된 예시

이 예시는 탭이 실제로는 수평으로 배열되어 있는데도 불구하고 aria-orientation="vertical"로 설정되었습니다. 이는 보조 기술 사용자에게 잘못된 정보를 제공할 수 있습니다.

									<div role="tablist" aria-orientation="vertical">
										<button role="tab" aria-selected="true" id="tab1">Tab 1</button>
										<button role="tab" aria-selected="false" id="tab2">Tab 2</button>
									</div>

올바른 예시

이 예시는 탭이 실제로 수평으로 배열되어 있으며, aria-orientation="horizontal"로 올바르게 설정되어 있습니다.

									<div role="tablist" aria-orientation="horizontal">
										<button role="tab" aria-selected="true" id="tab1">Tab 1</button>
										<button role="tab" aria-selected="false" id="tab2">Tab 2</button>
									</div>

수평 탭 리스트 예시

이 예시는 수평으로 배열된 탭 리스트를 나타냅니다. aria-orientation="horizontal" 속성은 탭이 수평으로 배치되어 있음을 보조 기술에 알립니다.

									<div role="tablist" aria-orientation="horizontal">
										<button role="tab" aria-selected="true" id="tab1">Tab 1</button>
										<button role="tab" aria-selected="false" id="tab2">Tab 2</button>
										<button role="tab" aria-selected="false" id="tab3">Tab 3</button>
									</div>

수직 슬라이더 예시

이 예시는 수직으로 배열된 슬라이더를 나타냅니다. aria-orientation="vertical" 속성은 슬라이더가 수직 방향으로 동작함을 보조 기술에 전달합니다.

									<div role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0" style="height: 200px;">
										<!-- Visual representation of the slider -->
									</div>

수직 목록 박스 예시

이 예시는 수직으로 배열된 목록 박스를 나타냅니다. aria-orientation="vertical" 속성은 옵션이 수직 방향으로 배열되어 있음을 보조 기술에 알립니다.

									<div role="listbox" aria-orientation="vertical">
										<div role="option" aria-selected="false">Option 1</div>
										<div role="option" aria-selected="true">Option 2</div>
										<div role="option" aria-selected="false">Option 3</div>
									</div>

부가 활용 예시 - 툴바에서의 방향 설정

이 예시는 수직으로 배열된 툴바를 나타냅니다. 툴바의 버튼들이 수직으로 배치되어 있으므로, aria-orientation="vertical" 속성을 사용해 보조 기술이 이를 인식하도록 합니다.

									<div role="toolbar" aria-orientation="vertical">
										<button>Bold</button>
										<button>Italic</button>
										<button>Underline</button>
									</div>

aria-placeholder 속성

요약 설명
aria-placeholder 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, 사용자가 입력할 수 있는 필드에 대한 설명 또는 힌트를 보조 기술(예: 스크린 리더)에 전달하는 데 사용됩니다.
이 속성은 일반적으로 사용자가 입력을 시작하기 전에 필드에 표시되는 힌트를 나타내는 텍스트를 지정합니다. 이 속성은 일반적인 placeholder 속성과 함께 또는 특별한 경우에 사용됩니다.

WAI-ARIA 1.2 Specification (aria-placeholder)
MDN Web Docs (aria-placeholder)

aria-placeholder 속성 값

문자열 값(String)
필드에 입력될 예상 값에 대한 설명이나 힌트로 사용됩니다.
예) "Enter your name", "Type your message here".

연관된 HTML 태그

<input>
텍스트 입력 필드 요소.
<textarea>
여러 줄 텍스트 입력 필드 요소.
<div role=”textbox”>
텍스트 입력이 가능한 커스텀 컨테이너.

사용 시 주의사항

일관된 사용자 경험
aria-placeholder 속성은 시각적인 플레이스홀더(placeholder) 텍스트와 일관되게 사용해야 하며, 시각적으로 제공되지 않은 힌트를 보조 기술 사용자에게만 제공할 때 유용합니다.
기본 placeholder 속성과의 차이
HTML5의 placeholder 속성은 시각적으로 필드에 표시되며, aria-placeholder는 보조 기술을 위한 텍스트를 제공합니다. 그러나 placeholder 속성 자체가 이미 보조 기술에서 사용되므로, 보통 aria-placeholder는 특별한 경우에만 사용됩니다.
사용자 상호작용 고려
입력 필드가 활성화될 때 플레이스홀더 텍스트는 일반적으로 사라지므로, aria-placeholder는 필드가 비어 있을 때만 유효한 설명으로 사용됩니다.

예시

잘못된 예시

이 예시는 aria-placeholder 속성에 빈 문자열을 사용하고 있어 보조 기술이 유효한 힌트를 제공할 수 없습니다. aria-placeholder 속성 값은 유용하고 명확한 힌트를 제공해야 합니다.

									<input type="text" aria-placeholder="">

올바른 예시

이 예시는 사용자에게 입력할 내용을 명확히 설명하는 aria-placeholder 속성을 사용합니다. 보조 기술은 이 정보를 사용자에게 전달하여 입력 필드의 용도를 이해하도록 도와줍니다.

									<input type="text" aria-placeholder="Enter your email address">

텍스트 입력 필드에서의 힌트 제공 예시

이 예시는 사용자가 입력해야 할 예상 값을 설명하기 위해 aria-placeholder="Enter your full name"을 추가하여, 보조 기술이 이를 사용자에게 전달하도록 설정합니다.

									<input type="text" aria-placeholder="Enter your full name">

여러 줄 텍스트 입력 필드에서의 힌트 제공 예시

이 예시는 여러 줄 텍스트 입력 필드에서 사용자에게 제공되는 힌트를 설명하기 위해 aria-placeholder 속성을 사용합니다. 이 속성은 보조 기술 사용자에게 입력 필드에 무엇을 입력해야 하는지 설명합니다.

									<textarea aria-placeholder="Type your detailed message here"></textarea>

커스텀 텍스트 입력 필드에서의 힌트 제공 예시

이 예시는 커스텀 텍스트 입력 필드에 힌트를 제공하기 위해 aria-placeholder 속성을 사용합니다. 시각적으로는 힌트를 제공하지 않지만, 보조 기술은 사용자에게 입력 필드의 목적을 설명합니다.

									<div role="textbox" aria-placeholder="Enter your address" contenteditable="true" style="border: 1px solid #ccc; padding: 8px;">
										<!-- 사용자 입력이 여기에 들어갑니다. -->
									</div>

aria-pressed 상태

요약 설명
aria-pressed 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 상태(state) 속성으로, 버튼 요소가 눌려 있는 상태(즉, 활성화된 상태)인지 여부를 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다.
이 속성은 주로 토글 버튼(toggle button)에서 사용되며, 사용자가 버튼을 누르거나 해제할 때 해당 버튼이 활성화되었는지 또는 비활성화되었는지를 명확히 전달합니다.

WAI-ARIA 1.2 Specification (aria-pressed)
MDN Web Docs (aria-pressed)

aria-pressed 속성 값

true
버튼이 눌려 있는 상태(활성화된 상태)임을 나타냅니다.
false
버튼이 눌려 있지 않은 상태(비활성화된 상태)임을 나타냅니다.
mixed
버튼이 혼합 상태에 있음을 나타냅니다. 이 값은 주로 다중 선택 가능 항목에서 사용됩니다.
undefined (속성이 설정되지 않음)
버튼이 토글 가능하지 않거나 아직 결정되지 않은 상태임을 나타냅니다.

연관된 HTML 태그

<button>
토글 버튼 역할을 하는 버튼 요소.
<div> 또는 <span>
커스텀 버튼 요소(적절한 role="button"과 함께 사용).

사용 시 주의사항

정확한 상태 반영
aria-pressed 속성은 버튼의 실제 상태와 일치해야 합니다. 사용자가 버튼을 누를 때마다 상태를 동적으로 업데이트해야 합니다.
보조 기술에 명확한 정보 제공
aria-pressed는 보조 기술이 버튼의 현재 상태를 명확하게 전달하는 데 도움을 주므로, 올바르게 설정하는 것이 중요합니다.
단일 선택과 다중 선택 구분
단일 선택의 경우에는 true 또는 false로 설정하고, 다중 선택에서 혼합 상태를 나타내려면 mixed 값을 사용할 수 있습니다.

예시

잘못된 예시

이 예시는 aria-pressed="true"로 설정되어 있지만, 버튼의 상태가 동적으로 변경되지 않기 때문에 사용자가 상호작용할 때 버튼의 상태가 업데이트되지 않습니다. 이로 인해 사용자는 버튼의 현재 상태를 잘못 인식할 수 있습니다.

									<button aria-pressed="true">Press me</button>

올바른 예시

이 예시는 버튼이 클릭될 때마다 aria-pressed 속성이 동적으로 업데이트되어, 보조 기술이 버튼의 현재 상태를 정확하게 전달할 수 있도록 합니다.

									<button aria-pressed="true" id="dynamicButton">Press me</button>

									<script>
										document.getElementById('dynamicButton').addEventListener('click', function() {
											var pressed = this.getAttribute('aria-pressed') === 'true';
											this.setAttribute('aria-pressed', !pressed);
										});
									</script>

스타일과 함께 상태 표시 예시

이 예시는 버튼의 상태에 따라 스타일이 변경되는 토글 버튼을 구현한 것입니다. 버튼이 눌리면 배경색과 텍스트 색상이 변경되며, aria-pressed 속성이 업데이트됩니다.

									<button aria-pressed="false" id="styledButton" style="background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px;">
										<span>Subscribe</span>
									</button>

									<script>
										document.getElementById('styledButton').addEventListener('click', function() {
											var pressed = this.getAttribute('aria-pressed') === 'true';
											this.setAttribute('aria-pressed', !pressed);
											this.style.backgroundColor = pressed ? '#f0f0f0' : '#007BFF';
											this.style.color = pressed ? '#000' : '#FFF';
										});
									</script>

기본 토글 버튼 예시

이 예시는 텍스트 서식 설정에서 "Bold" 기능을 위한 토글 버튼을 구현한 것입니다. aria-pressed 속성은 사용자가 버튼을 클릭할 때마다 버튼의 상태를 동적으로 업데이트하여, 버튼이 활성화(눌림) 상태인지 비활성화 상태인지 보조 기술에 알립니다.

									<button aria-pressed="false" id="toggleButton">Bold</button>

									<script>
										document.getElementById('toggleButton').addEventListener('click', function() {
											var pressed = this.getAttribute('aria-pressed') === 'true';
											this.setAttribute('aria-pressed', !pressed);
										});
									</script>

커스텀 토글 버튼 예시

이 예시는 div 요소를 사용한 커스텀 토글 버튼을 구현한 것입니다. aria-pressed 속성은 버튼의 눌림 상태를 나타내며, 사용자가 클릭할 때마다 상태가 변경됩니다.

									<div role="button" aria-pressed="false" tabindex="0" id="customToggleButton" style="padding: 8px; border: 1px solid #ccc;">
										<span>Toggle Option</span>
									</div>

									<script>
										document.getElementById('customToggleButton').addEventListener('click', function() {
											var pressed = this.getAttribute('aria-pressed') === 'true';
											this.setAttribute('aria-pressed', !pressed);
										});
									</script>

혼합 상태(mixed) 토글 버튼 예시

이 예시는 "Toggle All" 버튼에서 사용되는 혼합 상태(mixed) 예시입니다. 초기 상태는 mixed로 설정되어 있으며, 사용자가 클릭할 때마다 상태가 true 또는 false로 전환됩니다.

									<button aria-pressed="mixed" id="mixedStateButton">Toggle All</button>

									<script>
										document.getElementById('mixedStateButton').addEventListener('click', function() {
											var pressed = this.getAttribute('aria-pressed');
											this.setAttribute('aria-pressed', pressed === 'mixed' ? 'true' : 'false');
										});
									</script>

aria-readonly 속성

요약 설명
aria-readonly 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, 특정 UI 요소(예: 입력 필드, 스피너 등)가 읽기 전용 상태임을 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다. 읽기 전용 상태는 사용자가 해당 요소의 내용을 변경할 수 없지만, 여전히 요소의 값을 선택하고 복사할 수 있는 상태를 의미합니다.
기본 HTML 요소에서는 readonly 속성을 사용하는 것이 더 권장되지만, 커스텀 ARIA 요소에서는 aria-readonly 속성을 사용할 수 있습니다.

WAI-ARIA 1.2 Specification (aria-readonly)
MDN Web Docs (aria-readonly)

aria-readonly 속성 값

true
요소가 읽기 전용 상태임을 나타냅니다. 사용자는 값을 수정할 수 없지만, 선택 및 복사는 가능합니다.
false (기본값)
요소가 읽기 전용 상태가 아님을 나타냅니다. 사용자는 값을 자유롭게 수정할 수 있습니다.

연관된 HTML 태그 및 역할

<input>
텍스트 입력 필드 요소.
<textarea>
여러 줄 텍스트 입력 필드 요소.
<div role="textbox">
텍스트 입력이 가능한 커스텀 컨테이너.
<div role="spinbutton">
스피너(숫자 증감) 요소.

사용 시 주의사항

적절한 역할과 함께 사용
aria-readonly는 텍스트 입력 필드, 스피너, 또는 기타 수정 가능한 요소에서만 사용해야 합니다.
정확한 상태 반영
aria-readonly 속성 값은 요소의 실제 동작과 일치해야 합니다. 읽기 전용인 경우 true, 수정 가능하다면 false로 설정해야 합니다.
기본 HTML 속성과의 차이
aria-readonly 속성은 주로 ARIA 역할을 사용한 커스텀 요소에 사용되며, HTML의 readonly 속성과 유사하지만, HTML5 요소에서는 readonly 속성을 사용하는 것이 권장됩니다.

예시

잘못된 예시

이 예시에서는 aria-readonly="true"가 설정되었지만, 기본적으로 HTML의 readonly 속성을 사용하는 것이 더 적절합니다. HTML 요소에서는 readonly 속성을 사용하는 것이 일반적입니다.

									<input type="text" aria-readonly="true">

올바른 예시

이 예시는 기본 HTML readonly 속성을 사용하여 텍스트 입력 필드를 읽기 전용으로 설정한 예시입니다. HTML 요소에서 readonly 속성을 사용하는 것이 더 권장됩니다.

									<input type="text" readonly value="이 필드는 읽기 전용입니다.">

읽기 전용 텍스트 입력 필드 예시

이 예시는 사용자가 값을 변경할 수 없는 읽기 전용 텍스트 입력 필드를 나타냅니다. aria-readonly="true" 속성은 보조 기술이 이 필드가 읽기 전용임을 인식하도록 합니다.

									<input type="text" aria-readonly="true" value="이 필드는 읽기 전용입니다.">

읽기 전용 텍스트 영역 예시

이 예시는 사용자가 내용을 수정할 수 없는 읽기 전용 텍스트 영역을 나타냅니다. 보조 기술은 aria-readonly="true" 속성을 통해 이 상태를 인식합니다.

									<textarea aria-readonly="true">
										이 텍스트는 사용자가 편집할 수 없습니다.
									</textarea>

읽기 전용 스피너 예시

이 예시는 숫자 증감이 불가능한 읽기 전용 스피너를 나타냅니다. aria-readonly="true" 속성은 사용자가 값을 변경할 수 없음을 보조 기술에 알립니다.

									<div role="spinbutton" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" aria-readonly="true">
										10
									</div>

읽기 전용 커스텀 텍스트 입력 필드 예시

이 예시는 div 요소를 사용한 커스텀 텍스트 입력 필드로, 읽기 전용 상태를 나타냅니다. aria-readonly="true" 속성은 이 필드가 사용자가 수정할 수 없는 상태임을 보조 기술에 전달합니다.

									<div role="textbox" aria-readonly="true" contenteditable="false" style="border: 1px solid #ccc; padding: 8px;">
										이 필드는 읽기 전용입니다.
									</div>

aria-required 속성

요약 설명
aria-required 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, 특정 UI 요소(예: 입력 필드)가 사용자가 반드시 입력해야 하는 필수 항목임을 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다.
이 속성은 주로 폼 필드에서 사용되며, 해당 필드가 제출되기 전에 반드시 값이 입력되어야 함을 나타냅니다. HTML5 required 속성과 함께 사용하여 시각적 사용자와 보조 기술 사용자 모두에게 필수성을 전달하는 것이 권장됩니다.

WAI-ARIA 1.2 Specification (aria-required)
MDN Web Docs (aria-required)

aria-required 속성 값

true
해당 필드가 필수 입력 항목임을 나타냅니다.
false (기본값)
해당 필드가 필수 입력 항목이 아님을 나타냅니다.

연관된 HTML 태그 및 역할

<input>
텍스트 입력 필드 요소.
<textarea>
여러 줄 텍스트 입력 필드 요소.
<select>
드롭다운 선택 필드.
<div role="textbox">
텍스트 입력이 가능한 커스텀 컨테이너.

사용 시 주의사항

정확한 상태 반영
aria-required 속성 값은 필드가 실제로 필수인지 여부에 따라 정확하게 설정해야 합니다. 필수 항목에는 true로, 필수가 아닌 항목에는 설정하지 않거나 false로 설정해야 합니다.
기본 HTML 속성과의 차이
HTML5의 required 속성은 시각적으로 필수 필드를 표시하고, 폼 제출 시 브라우저에서 기본 유효성 검사를 수행합니다. aria-required는 보조 기술에만 영향을 미치며, 시각적인 표현이나 기본 브라우저 유효성 검사에 영향을 주지 않습니다.
일관된 사용자 경험
aria-required와 required 속성을 함께 사용하는 경우, 보조 기술 사용자와 시각적 사용자 모두에게 일관된 경험을 제공할 수 있습니다.

예시

잘못된 예시

이 예시에서는 aria-required="true" 속성이 설정되어 있지만, 사용자에게 필수 입력 항목이라는 시각적 표시가 없습니다. 시각적 표시를 추가해야 사용자 경험이 일관됩니다.

									<input type="text" aria-required="true">

올바른 예시

이 예시는 HTML5 required 속성과 aria-required 속성을 함께 사용하여, 시각적 사용자와 보조 기술 사용자 모두에게 필수 입력 필드임을 명확히 전달합니다.

									<input type="text" aria-required="true" placeholder="Enter your name" required>

필수 입력 텍스트 필드 예시

이 예시는 필수 텍스트 필드를 포함한 폼을 구현한 것입니다. aria-required="true"와 required 속성을 함께 사용하여 필수 필드임을 명확히 하고, 폼 제출 시 필드가 비어 있을 경우 경고 메시지를 표시합니다.

									<form id="exampleForm">
										<label for="name">Name:</label>
										<input type="text" id="name" aria-required="true" placeholder="Enter your name" required>
										<button type="submit">Submit</button>
									</form>

									<script>
										document.getElementById('exampleForm').addEventListener('submit', function(event) {
											var nameField = document.getElementById('name');
											if (nameField.value.trim() === '') {
												event.preventDefault();
												alert('The name field is required.');
												nameField.focus();
											}
										});
									</script>

필수 입력 텍스트 영역 예시

이 예시는 필수 입력이 필요한 텍스트 영역을 나타냅니다. aria-required="true"와 required 속성을 함께 사용하여, 사용자가 입력하지 않으면 폼 제출 시 경고 메시지를 표시합니다.

									<form id="messageForm">
										<label for="message">Message:</label>
										<textarea id="message" aria-required="true" placeholder="Enter your message" required></textarea>
										<button type="submit">Submit</button>
									</form>

									<script>
										document.getElementById('messageForm').addEventListener('submit', function(event) {
											var messageField = document.getElementById('message');
											if (messageField.value.trim() === '') {
												event.preventDefault();
												alert('The message field is required.');
												messageField.focus();
											}
										});
									</script>

필수 선택 드롭다운 메뉴 예시

이 예시는 필수 선택 필드를 포함한 드롭다운 메뉴를 구현한 것입니다. aria-required="true"와 required 속성을 함께 사용하여 필수 선택 필드임을 나타내고, 선택하지 않고 폼을 제출하려고 하면 경고 메시지를 표시합니다.

									<form id="countryForm">
										<label for="country">Country:</label>
										<select id="country" aria-required="true" required>
											<option value="">Select a country</option>
											<option value="usa">United States</option>
											<option value="canada">Canada</option>
										</select>
										<button type="submit">Submit</button>
									</form>

									<script>
										document.getElementById('countryForm').addEventListener('submit', function(event) {
											var countrySelect = document.getElementById('country');
											if (countrySelect.value === '') {
												event.preventDefault();
												alert('Please select a country.');
												countrySelect.focus();
											}
										});
									</script>

커스텀 텍스트 입력 필드에서 필수 입력 설정

이 예시는 div 요소를 사용한 커스텀 텍스트 입력 필드로, 필수 입력 항목임을 나타냅니다. aria-required="true" 속성은 보조 기술이 이 필드가 필수임을 인식할 수 있도록 하며, 사용자가 입력하지 않으면 폼 제출 시 경고 메시지를 표시합니다.

									<form id="customForm">
										<label for="customTextbox">Custom Textbox:</label>
										<div id="customTextbox" role="textbox" aria-required="true" contenteditable="true" style="border: 1px solid #ccc; padding: 8px;"></div>
										<button type="submit">Submit</button>
									</form>

									<script>
										document.getElementById('customForm').addEventListener('submit', function(event) {
											var customTextbox = document.getElementById('customTextbox');
											if (customTextbox.textContent.trim() === '') {
												event.preventDefault();
												alert('The custom textbox is required.');
												customTextbox.focus();
											}
										});
									</script>

aria-selected 상태

요약 설명
aria-selected 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 상태(state) 속성으로, 특정 UI 요소(예: 목록 항목, 탭, 그리드 셀 등)가 현재 선택된 상태인지 여부를 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다.
이 속성은 주로 사용자가 선택할 수 있는 여러 항목 중 하나가 선택되었음을 나타낼 때 사용됩니다. 모든 선택 가능한 항목에 이 속성을 명시적으로 설정하고, 사용자 상호작용에 따라 동적으로 상태를 업데이트하는 것이 중요합니다.

WAI-ARIA 1.2 Specification (aria-selected)
MDN Web Docs (aria-selected)

aria-selected 속성 값

true
요소가 현재 선택된 상태임을 나타냅니다.
false (기본값)
요소가 선택되지 않은 상태임을 나타냅니다.
기본값 없음
속성이 없으면 보조 기술에서 선택 상태를 알 수 없습니다.

연관된 HTML 태그 및 역할

<div role="listbox">
리스트 박스에서 선택 가능한 항목.
<div role="tablist">
탭 리스트에서 선택된 탭.
<div role="grid">
그리드에서 선택된 셀.
<li role="option">
선택 가능한 리스트 아이템.

사용 시 주의사항

정확한 상태 반영
aria-selected 속성 값은 요소의 실제 선택 상태를 정확하게 반영해야 합니다. 사용자가 항목을 선택하거나 선택 해제할 때 이 상태를 동적으로 업데이트해야 합니다.
연관된 역할과 함께 사용
aria-selected 속성은 role="option", role="tab", role="row" 등 선택 가능한 역할을 가진 요소에 주로 사용됩니다.
단일 선택과 다중 선택 구분
aria-selected는 단일 선택과 다중 선택 모두에 사용할 수 있으며, 이를 통해 보조 기술이 현재 선택된 항목을 명확히 전달할 수 있습니다.

예시

잘못된 예시

이 예시에서는 aria-selected 속성이 일부 옵션에만 설정되어 있어 보조 기술이 정확한 선택 상태를 인식하기 어려울 수 있습니다. 모든 선택 가능한 항목에 aria-selected 속성을 명시적으로 설정해야 합니다.

									<div role="listbox">
										<div role="option" aria-selected="false">Option 1</div>
										<div role="option">Option 2</div> <!-- aria-selected 속성이 누락됨 -->
										<div role="option" aria-selected="true">Option 3</div>
									</div>

올바른 예시

이 예시는 모든 선택 가능한 항목에 aria-selected 속성이 명시적으로 설정되어 있으며, 보조 기술이 각 항목의 선택 상태를 정확하게 인식할 수 있습니다.

									<div role="listbox">
										<div role="option" aria-selected="false">Option 1</div>
										<div role="option" aria-selected="false">Option 2</div>
										<div role="option" aria-selected="true">Option 3</div>
									</div>

단일 선택 리스트 박스 예시

이 예시는 단일 선택이 가능한 리스트 박스를 나타냅니다. aria-selected="true" 속성이 설정된 항목이 현재 선택된 항목임을 나타내며, 클릭 시 선택 상태가 동적으로 업데이트됩니다.

									<div role="listbox" id="singleSelectListbox">
										<div role="option" aria-selected="true" tabindex="0">Option 1</div>
										<div role="option" aria-selected="false" tabindex="-1">Option 2</div>
										<div role="option" aria-selected="false" tabindex="-1">Option 3</div>
									</div>

									<script>
										document.getElementById('singleSelectListbox').addEventListener('click', function(event) {
											if (event.target.getAttribute('role') === 'option') {
												const options = this.querySelectorAll('[role="option"]');
												options.forEach(option => {
													option.setAttribute('aria-selected', 'false');
													option.setAttribute('tabindex', '-1');
												});
												event.target.setAttribute('aria-selected', 'true');
												event.target.setAttribute('tabindex', '0');
												event.target.focus();
											}
										});
									</script>

다중 선택 리스트 박스 예시

이 예시는 다중 선택이 가능한 리스트 박스를 나타냅니다. 사용자는 여러 항목을 선택할 수 있으며, 각 항목의 aria-selected 상태는 클릭 시 동적으로 업데이트됩니다.

									<div role="listbox" id="multiSelectListbox" aria-multiselectable="true">
										<div role="option" aria-selected="true" tabindex="0">Option 1</div>
										<div role="option" aria-selected="true" tabindex="0">Option 2</div>
										<div role="option" aria-selected="false" tabindex="0">Option 3</div>
									</div>

									<script>
										document.getElementById('multiSelectListbox').addEventListener('click', function(event) {
											if (event.target.getAttribute('role') === 'option') {
												const isSelected = event.target.getAttribute('aria-selected') === 'true';
												event.target.setAttribute('aria-selected', !isSelected);
											}
										});
									</script>

탭 리스트에서 선택된 탭 예시

이 예시는 탭 리스트에서 선택된 탭을 나타냅니다. 사용자가 탭을 클릭할 때, 선택된 탭이 동적으로 업데이트되며, 선택된 탭의 콘텐츠가 표시됩니다.

									<div role="tablist" id="tabListExample">
										<button role="tab" aria-selected="false" tabindex="-1">Tab 1</button>
										<button role="tab" aria-selected="true" tabindex="0">Tab 2</button>
										<button role="tab" aria-selected="false" tabindex="-1">Tab 3</button>
									</div>
									<div role="tabpanel">Content for Tab 2</div>

									<script>
										document.getElementById('tabListExample').addEventListener('click', function(event) {
											if (event.target.getAttribute('role') === 'tab') {
												const tabs = this.querySelectorAll('[role="tab"]');
												tabs.forEach(tab => {
													tab.setAttribute('aria-selected', 'false');
													tab.setAttribute('tabindex', '-1');
												});
												event.target.setAttribute('aria-selected', 'true');
												event.target.setAttribute('tabindex', '0');
												event.target.focus();
											}
										});
									</script>

키보드 내비게이션과 함께 사용하는 예시

이 예시는 키보드 내비게이션을 통해 항목 간의 선택 상태를 변경하는 리스트 박스를 구현한 것입니다. 사용자가 ArrowDown 및 ArrowUp 키를 사용하여 항목 간에 이동하며, aria-selected 속성이 동적으로 업데이트됩니다.

									<div role="listbox" id="keyboardListbox" tabindex="0">
										<div role="option" aria-selected="true" tabindex="0">Option 1</div>
										<div role="option" aria-selected="false" tabindex="-1">Option 2</div>
										<div role="option" aria-selected="false" tabindex="-1">Option 3</div>
									</div>

									<script>
										document.getElementById('keyboardListbox').addEventListener('keydown', function(event) {
											const options = this.querySelectorAll('[role="option"]');
											let currentIndex = Array.from(options).findIndex(option => option.getAttribute('aria-selected') === 'true');
											 
											if (event.key === 'ArrowDown') {
												currentIndex = (currentIndex + 1) % options.length;
											} else if (event.key === 'ArrowUp') {
												currentIndex = (currentIndex - 1 + options.length) % options.length;
											}
											 
											options.forEach(option => {
												option.setAttribute('aria-selected', 'false');
												option.setAttribute('tabindex', '-1');
											});
											 
											options[currentIndex].setAttribute('aria-selected', 'true');
											options[currentIndex].setAttribute('tabindex', '0');
											options[currentIndex].focus();
										});
									</script>

시멘틱 마크업을 활용한 탭 리스트 예시

이 예시는 시멘틱 마크업을 활용한 탭 리스트를 나타냅니다. 각 탭은 aria-selected 속성을 통해 현재 선택된 상태를 나타내며, 클릭 시 선택된 탭과 연관된 패널의 콘텐츠가 표시됩니다. 이 예시는 시멘틱 HTML 요소인 <ul>와 <li>를 활용하여 더 구조화된 접근성을 제공합니다.

									<ul role="tablist">
										<li role="presentation"><button role="tab" aria-selected="true" id="tab1" aria-controls="panel1">Tab 1</button></li>
										<li role="presentation"><button role="tab" aria-selected="false" id="tab2" aria-controls="panel2">Tab 2</button></li>
										<li role="presentation"><button role="tab" aria-selected="false" id="tab3" aria-controls="panel3">Tab 3</button></li>
									</ul>
									<div id="panel1" role="tabpanel" aria-labelledby="tab1">Content for Tab 1</div>
									<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>Content for Tab 2</div>
									<div id="panel3" role="tabpanel" aria-labelledby="tab3" hidden>Content for Tab 3</div>

									<script>
										document.querySelectorAll('[role="tab"]').forEach(tab => {
											tab.addEventListener('click', function() {
												const tabs = document.querySelectorAll('[role="tab"]');
												const panels = document.querySelectorAll('[role="tabpanel"]');
												 
												tabs.forEach(t => {
													t.setAttribute('aria-selected', 'false');
													t.setAttribute('tabindex', '-1');
												});
												 
												panels.forEach(p => p.hidden = true);
												 
												this.setAttribute('aria-selected', 'true');
												this.setAttribute('tabindex', '0');
												document.getElementById(this.getAttribute('aria-controls')).hidden = false;
												this.focus();
											});
										});
									</script>

aria-sort 속성

요약 설명
aria-sort 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, 테이블이나 그리드 내의 열(column)이 현재 어떤 정렬 상태인지 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다. 이 속성은 열 헤더에 적용되며, 사용자가 데이터를 오름차순 또는 내림차순으로 정렬할 수 있는 상황에서 특히 유용합니다.
aria-sort 속성을 올바르게 사용하면 보조 기술이 정렬 상태를 정확하게 전달할 수 있어 접근성이 향상됩니다. 시멘틱 마크업을 활용하여 구조화된 접근성을 제공하는 것도 좋은 방법입니다.

WAI-ARIA 1.2 Specification (aria-sort)
MDN Web Docs (aria-sort)

aria-sort 속성 값

none (기본값)
정렬되지 않은 상태를 나타냅니다.
ascending
오름차순 정렬 상태임을 나타냅니다.
descending
내림차순 정렬 상태임을 나타냅니다.
other
정렬이 되었지만 오름차순이나 내림차순이 아닌 다른 형태의 정렬 상태임을 나타냅니다.

연관된 HTML 태그 및 역할

<th>
테이블 헤더 셀.
<div role="columnheader">
그리드 또는 테이블 내의 열 헤더.

사용 시 주의사항

정렬 상태 반영
aria-sort 속성은 열이 실제로 정렬된 상태를 정확히 반영해야 합니다. 사용자가 열을 클릭하여 정렬 상태를 변경할 때마다 이 속성을 동적으로 업데이트해야 합니다.
보조 기술 호환성
aria-sort는 스크린 리더와 같은 보조 기술이 현재 정렬 상태를 사용자에게 전달할 수 있도록 돕습니다. 시각적으로도 정렬 상태를 표시하는 것이 중요합니다.
명확한 피드백 제공
사용자가 열을 클릭하여 정렬 상태를 변경할 때, 시각적인 피드백(예: 화살표 아이콘)과 함께 aria-sort 속성을 업데이트하면 사용자가 정렬 상태를 더 쉽게 인식할 수 있습니다.

예시

잘못된 예시

이 예시는 aria-sort 속성이 Age 열에만 설정되어 있으며, 사용자가 실제로 정렬 상태를 변경할 수 없습니다. 모든 열에 aria-sort 속성을 적용하고, 동적으로 상태를 업데이트해야 합니다.

									<table>
										<thead>
											<tr>
												<th id="nameHeader">Name</th>
												<th id="ageHeader" aria-sort="ascending">Age</th>
												<th id="cityHeader">City</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>John</td>
												<td>30</td>
												<td>New York</td>
											</tr>
											<tr>
												<td>Jane</td>
												<td>25</td>
												<td>Los Angeles</td>
											</tr>
										</tbody>
									</table>

올바른 예시

이 예시는 모든 열에 aria-sort 속성이 명시적으로 설정되어 있으며, 보조 기술이 각 열의 정렬 상태를 정확하게 인식할 수 있습니다.

									<table>
										<thead>
											<tr>
												<th id="nameHeader" aria-sort="ascending">Name</th>
												<th id="ageHeader" aria-sort="none">Age</th>
												<th id="cityHeader" aria-sort="none">City</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>John</td>
												<td>30</td>
												<td>New York</td>
											</tr>
											<tr>
												<td>Jane</td>
												<td>25</td>
												<td>Los Angeles</td>
											</tr>
										</tbody>
									</table>

기본 테이블의 열 정렬 상태 예시

이 예시는 기본 테이블의 열 헤더에 aria-sort 속성을 사용하여 현재 "Name" 열이 오름차순으로 정렬된 상태임을 나타냅니다. 다른 열은 정렬되지 않은 상태로 표시됩니다.

									<table>
										<thead>
											<tr>
												<th id="nameHeader" aria-sort="ascending">Name</th>
												<th id="ageHeader" aria-sort="none">Age</th>
												<th id="cityHeader" aria-sort="none">City</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>John</td>
												<td>30</td>
												<td>New York</td>
											</tr>
											<tr>
												<td>Jane</td>
												<td>25</td>
												<td>Los Angeles</td>
											</tr>
										</tbody>
									</table>

동적으로 정렬 상태를 변경하는 테이블 예시

이 예시는 사용자가 열 헤더를 클릭할 때마다 aria-sort 속성이 동적으로 변경되는 테이블을 구현한 것입니다. 사용자가 헤더를 클릭할 때, 열의 정렬 상태가 오름차순, 내림차순, 또는 정렬되지 않은 상태로 순환됩니다.

									<table id="sortableTable">
										<thead>
											<tr>
												<th id="nameHeader" aria-sort="none">Name</th>
												<th id="ageHeader" aria-sort="none">Age</th>
												<th id="cityHeader" aria-sort="none">City</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>John</td>
												<td>30</td>
												<td>New York</td>
											</tr>
											<tr>
												<td>Jane</td>
												<td>25</td>
												<td>Los Angeles</td>
											</tr>
										</tbody>
									</table>

									<script>
										document.querySelectorAll('#sortableTable th').forEach(header => {
											header.addEventListener('click', function() {
												const currentSort = this.getAttribute('aria-sort');
												let newSort;
												 
												// Toggle the sort order
												if (currentSort === 'ascending') {
													newSort = 'descending';
												} else if (currentSort === 'descending') {
													newSort = 'none';
												} else {
													newSort = 'ascending';
												}
												 
												// Update the aria-sort attribute
												document.querySelectorAll('#sortableTable th').forEach(th => th.setAttribute('aria-sort', 'none'));
												this.setAttribute('aria-sort', newSort);
												 
												// Example logic to sort the table data (sorting logic not implemented)
												console.log(`Sorting ${this.textContent} column in ${newSort} order.`);
											});
										});
									</script>

aria-valuemax 속성

요약 설명
aria-valuemax 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, UI 요소(예: 슬라이더, 스피너 등)에서 허용되는 최대 값을 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다.
이 속성은 주로 사용자가 값을 조정할 수 있는 컨트롤에서 사용되며, 해당 컨트롤의 범위를 명확하게 정의합니다. 시멘틱 마크업을 활용하여 구조화된 접근성을 제공하는 것도 중요한 접근 방법입니다.

WAI-ARIA 1.2 Specification (aria-valuemax)
MDN Web Docs (aria-valuemax)

aria-valuemax 속성 값

숫자 값
요소가 허용하는 최대 값을 나타냅니다. 이 값은 사용자에게 전달되며, 해당 요소에서 설정할 수 있는 최대 한도를 정의합니다.

연관된 HTML 태그 및 역할

<input type="range">
슬라이더.
<div role="slider">
커스텀 슬라이더.
<div role="spinbutton">
스피너(숫자 증감) 요소.
<progress>
진행률 표시 요소.

사용 시 주의사항

일관성 유지
aria-valuemax 속성은 UI 요소의 실제 동작과 일치해야 하며, 사용자가 설정할 수 있는 최대 값보다 높거나 낮게 설정하면 안 됩니다.
기본 HTML 속성과의 조화
HTML5 요소(예: <input type="range">)는 이미 최대 값을 정의할 수 있는 속성(max)을 제공합니다. 이 경우, aria-valuemax 속성은 주로 커스텀 컨트롤에 사용되며, 이러한 속성과 함께 사용하면 보조 기술 사용자에게 일관된 정보를 전달할 수 있습니다.
보조 기술과의 호환성
이 속성은 보조 기술이 요소의 범위를 인식하도록 돕기 때문에, 특히 시각적으로 요소의 범위를 이해하기 어려운 사용자에게 유용합니다.

예시

잘못된 예시

이 예시에서는 aria-valuemax="50"으로 설정되어 있지만, aria-valuenow 값이 50을 초과하고 있습니다. 이는 사용자가 최대 값보다 높은 값을 설정할 수 있음을 잘못 전달할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="50" aria-valuenow="60" tabindex="0">
										60
									</div>

올바른 예시

이 예시는 aria-valuemax 값이 슬라이더의 실제 최대 값과 일치하며, 현재 값이 최대 값을 초과하지 않습니다. 보조 기술은 이 정보를 사용하여 올바른 범위를 전달할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">
										50
									</div>

기본 슬라이더 예시

이 예시는 HTML5 슬라이더 요소를 사용하여 볼륨을 조정하는 슬라이더를 나타냅니다. aria-valuemax="100" 속성은 슬라이더의 최대 값이 100임을 보조 기술에 알립니다.

									<label for="volumeSlider">Volume</label>
									<input type="range" id="volumeSlider" min="0" max="100" value="50" aria-valuemax="100">

커스텀 슬라이더 예시

이 예시는 커스텀 슬라이더를 구현한 것으로, aria-valuemax="200" 속성을 사용하여 슬라이더의 최대 값을 보조 기술에 전달합니다. 사용자는 키보드 화살표 키를 사용하여 슬라이더 값을 조정할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="200" aria-valuenow="100" tabindex="0" style="width: 200px; background: lightgray; height: 10px; position: relative;">
										<div id="sliderThumb" style="width: 10px; height: 20px; background: blue; position: absolute; left: 50%;"></div>
									</div>

									<script>
										document.getElementById('sliderThumb').addEventListener('keydown', function(event) {
											const slider = this.parentElement;
											let currentValue = parseInt(slider.getAttribute('aria-valuenow'));
											const minValue = parseInt(slider.getAttribute('aria-valuemin'));
											const maxValue = parseInt(slider.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowRight') {
												currentValue = Math.min(maxValue, currentValue + 10);
											} else if (event.key === 'ArrowLeft') {
												currentValue = Math.max(minValue, currentValue - 10);
											}
											 
											slider.setAttribute('aria-valuenow', currentValue);
											this.style.left = `${(currentValue / maxValue) * 100}%`;
										});
									</script>

스피너 예시

이 예시는 스피너 컨트롤을 구현한 것으로, aria-valuemax="10" 속성을 사용하여 스피너가 허용하는 최대 값이 10임을 나타냅니다. 사용자는 화살표 키를 사용하여 값을 증감할 수 있습니다.

									<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="5" tabindex="0">
										5
									</div>

									<script>
										document.querySelector('[role="spinbutton"]').addEventListener('keydown', function(event) {
											let currentValue = parseInt(this.getAttribute('aria-valuenow'));
											const minValue = parseInt(this.getAttribute('aria-valuemin'));
											const maxValue = parseInt(this.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowUp') {
												currentValue = Math.min(maxValue, currentValue + 1);
											} else if (event.key === 'ArrowDown') {
												currentValue = Math.max(minValue, currentValue - 1);
											}
											 
											this.setAttribute('aria-valuenow', currentValue);
											this.textContent = currentValue;
										});
									</script>

시멘틱 마크업을 활용한 진행률 표시 예시

이 예시는 파일 업로드 진행률을 나타내는 progress 요소를 사용하여 시멘틱 마크업을 구현한 것입니다. aria-valuemax="100" 속성은 진행률의 최대 값이 100임을 보조 기술에 전달합니다.

									<progress id="fileProgress" max="100" value="50" aria-valuemax="100"></progress>
									<label for="fileProgress">File Upload Progress</label>

aria-valuemin 속성

요약 설명
aria-valuemin 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, UI 요소(예: 슬라이더, 스피너 등)에서 허용되는 최소 값을 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다.
이 속성은 주로 사용자가 값을 조정할 수 있는 컨트롤에서 사용되며, 해당 컨트롤의 범위를 명확하게 정의합니다. 시멘틱 마크업을 활용하여 구조화된 접근성을 제공하는 것도 중요한 접근 방법입니다.

WAI-ARIA 1.2 Specification (aria-valuemin)
MDN Web Docs (aria-valuemin)

aria-valuemin 속성 값

숫자 값
요소가 허용하는 최소 값을 나타냅니다. 이 값은 사용자에게 전달되며, 해당 요소에서 설정할 수 있는 최대 한도를 정의합니다.

연관된 HTML 태그 및 역할

<input type="range">
슬라이더.
<div role="slider">
커스텀 슬라이더.
<div role="spinbutton">
스피너(숫자 증감) 요소.
<progress>
진행률 표시 요소.

사용 시 주의사항

일관성 유지
aria-valuemin 속성은 UI 요소의 실제 동작과 일치해야 하며, 사용자가 설정할 수 있는 최소 값보다 높거나 낮게 설정하면 안 됩니다.
기본 HTML 속성과의 조화
HTML5 요소(예: <input type="range">)는 이미 최소 값을 정의할 수 있는 속성(min)을 제공합니다. 이 경우, aria-valuemin 속성은 주로 커스텀 컨트롤에 사용되며, 이러한 속성과 함께 사용하면 보조 기술 사용자에게 일관된 정보를 전달할 수 있습니다.
보조 기술과의 호환성
이 속성은 보조 기술이 요소의 범위를 인식하도록 돕기 때문에, 특히 시각적으로 요소의 범위를 이해하기 어려운 사용자에게 유용합니다.

예시

잘못된 예시

이 예시에서는 aria-valuemin="10"으로 설정되어 있지만, aria-valuenow 값이 10보다 작습니다. 이는 사용자가 최소 값보다 낮은 값을 설정할 수 있음을 잘못 전달할 수 있습니다.

									<div role="slider" aria-valuemin="10" aria-valuemax="50" aria-valuenow="5" tabindex="0">
										5
									</div>

올바른 예시

이 예시는 aria-valuemin 값이 슬라이더의 실제 최소 값과 일치하며, 현재 값이 최소 값을 초과하지 않습니다. 보조 기술은 이 정보를 사용하여 올바른 범위를 전달할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">
										50
									</div>

기본 슬라이더 예시

이 예시는 HTML5 슬라이더 요소를 사용하여 볼륨을 조정하는 슬라이더를 나타냅니다. aria-valuemin="0" 속성은 슬라이더의 최소 값이 0임을 보조 기술에 알립니다.

									<!-- 기본 슬라이더 예시 -->
									<label for="volumeSlider">Volume</label>
									<input type="range" id="volumeSlider" min="0" max="100" value="50" aria-valuemax="100">

커스텀 슬라이더 예시

이 예시는 커스텀 슬라이더를 구현한 것으로, aria-valuemin="0" 속성을 사용하여 슬라이더의 최소 값을 보조 기술에 전달합니다. 사용자는 키보드 화살표 키를 사용하여 슬라이더 값을 조정할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="200" aria-valuenow="100" tabindex="0" style="width: 200px; background: lightgray; height: 10px; position: relative;">
										<div id="sliderThumb" style="width: 10px; height: 20px; background: blue; position: absolute; left: 50%;"></div>
									</div>

									<script>
										document.getElementById('sliderThumb').addEventListener('keydown', function(event) {
											const slider = this.parentElement;
											let currentValue = parseInt(slider.getAttribute('aria-valuenow'));
											const minValue = parseInt(slider.getAttribute('aria-valuemin'));
											const maxValue = parseInt(slider.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowRight') {
												currentValue = Math.min(maxValue, currentValue + 10);
											} else if (event.key === 'ArrowLeft') {
												currentValue = Math.max(minValue, currentValue - 10);
											}
											 
											slider.setAttribute('aria-valuenow', currentValue);
											this.style.left = `${(currentValue / maxValue) * 100}%`;
										});
									</script>

스피너 예시

이 예시는 스피너 컨트롤을 구현한 것으로, aria-valuemin="1" 속성을 사용하여 스피너가 허용하는 최소 값이 1임을 나타냅니다. 사용자는 화살표 키를 사용하여 값을 증감할 수 있습니다.

									<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="5" tabindex="0">
										5
									</div>

									<script>
										document.querySelector('[role="spinbutton"]').addEventListener('keydown', function(event) {
											let currentValue = parseInt(this.getAttribute('aria-valuenow'));
											const minValue = parseInt(this.getAttribute('aria-valuemin'));
											const maxValue = parseInt(this.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowUp') {
												currentValue = Math.min(maxValue, currentValue + 1);
											} else if (event.key === 'ArrowDown') {
												currentValue = Math.max(minValue, currentValue - 1);
											}
											 
											this.setAttribute('aria-valuenow', currentValue);
											this.textContent = currentValue;
										});
									</script>

시멘틱 마크업을 활용한 진행률 표시 예시

이 예시는 파일 업로드 진행률을 나타내는 progress 요소를 사용하여 시멘틱 마크업을 구현한 것입니다. aria-valuemin="0" 속성은 진행률의 최소 값이 0임을 보조 기술에 전달합니다.

									<progress id="fileProgress" max="100" value="50" aria-valuemax="100"></progress>
									<label for="fileProgress">File Upload Progress</label>

aria-valuenow 속성

요약 설명
aria-valuenow 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, UI 요소(예: 슬라이더, 스피너 등)에서 현재 선택된 값 또는 상태를 보조 기술(예: 스크린 리더)에 알리는 데 사용됩니다.
이 속성은 사용자가 값을 조정할 수 있는 컨트롤에서 사용되며, 해당 컨트롤의 현재 값을 명확하게 전달합니다. 시멘틱 마크업을 활용하여 구조화된 접근성을 제공하는 것도 중요한 접근 방법입니다.

WAI-ARIA 1.2 Specification (aria-valuenow)
MDN Web Docs (aria-valuenow)

aria-valuenow 속성 값

숫자 값
요소의 현재 값을 나타냅니다. 이 값은 보조 기술을 통해 사용자에게 전달되며, 해당 요소의 현재 상태를 명확하게 정의합니다.

연관된 HTML 태그 및 역할

<input type="range">
슬라이더.
<div role="slider">
커스텀 슬라이더.
<div role="spinbutton">
스피너(숫자 증감) 요소.
<progress>
진행률 표시 요소.

사용 시 주의사항

정확한 값 반영
aria-valuenow 속성은 요소의 실제 상태와 일치해야 하며, 사용자 상호작용에 따라 동적으로 업데이트되어야 합니다.
기본 HTML 속성과의 조화
HTML5 요소(예: <input type="range">)는 이미 현재 값을 정의할 수 있는 속성(value)을 제공합니다. 이 경우, aria-valuenow 속성은 주로 커스텀 컨트롤에 사용되며, 이러한 속성과 함께 사용하면 보조 기술 사용자에게 일관된 정보를 전달할 수 있습니다.
보조 기술과의 호환성
이 속성은 보조 기술이 요소의 범위를 인식하도록 돕기 때문에, 특히 시각적으로 요소의 범위를 이해하기 어려운 사용자에게 유용합니다.

예시

잘못된 예시

이 예시에서는 aria-valuenow="150"으로 설정되어 있지만, 이는 aria-valuemax="100"을 초과하는 값입니다. 이는 사용자가 최대 값보다 높은 값을 설정할 수 있음을 잘못 전달할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="150" tabindex="0">
										150
									</div>

올바른 예시

이 예시는 aria-valuenow 값이 슬라이더의 현재 값과 일치하며, 최대 값 또는 최소 값을 초과하지 않습니다. 보조 기술은 이 정보를 사용하여 올바른 상태를 전달할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0">
										50
									</div>

기본 슬라이더 예시

이 예시는 HTML5 슬라이더 요소를 사용하여 볼륨을 조정하는 슬라이더를 나타냅니다. aria-valuenow="50" 속성은 슬라이더의 현재 값이 50임을 보조 기술에 알립니다.

									<!-- 기본 슬라이더 예시 -->
									<label for="volumeSlider">Volume</label>
									<input type="range" id="volumeSlider" min="0" max="100" value="50" aria-valuenow="50">

커스텀 슬라이더 예시

이 예시는 커스텀 슬라이더를 구현한 것으로, aria-valuenow="100" 속성을 사용하여 슬라이더의 현재 값을 보조 기술에 전달합니다. 사용자는 키보드 화살표 키를 사용하여 슬라이더 값을 조정할 수 있습니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="200" aria-valuenow="100" tabindex="0" style="width: 200px; background: lightgray; height: 10px; position: relative;">
										<div id="sliderThumb" style="width: 10px; height: 20px; background: blue; position: absolute; left: 50%;"></div>
									</div>

									<script>
										document.getElementById('sliderThumb').addEventListener('keydown', function(event) {
											const slider = this.parentElement;
											let currentValue = parseInt(slider.getAttribute('aria-valuenow'));
											const minValue = parseInt(slider.getAttribute('aria-valuemin'));
											const maxValue = parseInt(slider.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowRight') {
												currentValue = Math.min(maxValue, currentValue + 10);
											} else if (event.key === 'ArrowLeft') {
												currentValue = Math.max(minValue, currentValue - 10);
											}
											 
											slider.setAttribute('aria-valuenow', currentValue);
											this.style.left = `${(currentValue / maxValue) * 100}%`;
										});
									</script>

스피너 예시

이 예시는 스피너 컨트롤을 구현한 것으로, aria-valuenow="5" 속성을 사용하여 스피너의 현재 값이 5임을 나타냅니다. 사용자는 화살표 키를 사용하여 값을 증감할 수 있으며, aria-valuenow 속성이 동적으로 업데이트됩니다.

									<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="5" tabindex="0">
										5
									</div>

									<script>
										document.querySelector('[role="spinbutton"]').addEventListener('keydown', function(event) {
											let currentValue = parseInt(this.getAttribute('aria-valuenow'));
											const minValue = parseInt(this.getAttribute('aria-valuemin'));
											const maxValue = parseInt(this.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowUp') {
												currentValue = Math.min(maxValue, currentValue + 1);
											} else if (event.key === 'ArrowDown') {
												currentValue = Math.max(minValue, currentValue - 1);
											}
											 
											this.setAttribute('aria-valuenow', currentValue);
											this.textContent = currentValue;
										});
									</script>

시멘틱 마크업을 활용한 진행률 표시 예시

이 예시는 파일 업로드 진행률을 나타내는 progress 요소를 사용하여 시멘틱 마크업을 구현한 것입니다. aria-valuenow="50" 속성은 진행률의 현재 값이 50%임을 보조 기술에 전달합니다.

									<progress id="fileProgress" max="100" value="50" aria-valuenow="50"></progress>
									<label for="fileProgress">File Upload Progress</label>

aria-valuetext 속성

요약 설명
aria-valuetext 속성은 ARIA(Accessible Rich Internet Applications)에서 사용하는 속성(Property)으로, UI 요소(예: 슬라이더, 스피너 등)에서 현재 선택된 값의 의미를 텍스트로 보조 기술(예: 스크린 리더)에 전달하는 데 사용됩니다. 이 속성은 숫자 값(aria-valuenow)을 보다 의미 있는 텍스트로 변환해 사용자에게 제공할 수 있게 합니다.
예를 들어, 슬라이더가 "50"이라는 숫자를 나타내고 있을 때, aria-valuetext를 통해 "중간"이라는 텍스트를 제공할 수 있습니다. 시멘틱 마크업을 활용하여 구조화된 접근성을 제공하는 것도 중요한 접근 방법입니다.

WAI-ARIA 1.2 Specification (aria-valuetext)
MDN Web Docs (aria-valuetext)

aria-valuetext 속성 값

문자열 값
요소의 현재 값을 텍스트로 표현한 문자열. 이 문자열은 보조 기술을 통해 사용자에게 제공됩니다.

연관된 HTML 태그 및 역할

<input type="range">
슬라이더.
<div role="slider">
커스텀 슬라이더.
<div role="spinbutton">
스피너(숫자 증감) 요소.
<progress>
진행률 표시 요소.

사용 시 주의사항

숫자 값과 의미의 조화
aria-valuetext는 aria-valuenow 속성으로 전달되는 숫자 값을 보다 의미 있는 텍스트로 변환하는 데 사용됩니다. 숫자가 직관적이지 않거나 추가 설명이 필요할 때 사용됩니다.
일관된 정보 제공
aria-valuetext를 설정할 때, 이 텍스트는 요소의 현재 값을 잘 설명해야 하며, 보조 기술 사용자에게 혼동을 주지 않도록 해야 합니다.
보조 기술과의 호환성
이 속성은 보조 기술이 요소의 범위를 인식하도록 돕기 때문에, 특히 시각적으로 요소의 범위를 이해하기 어려운 사용자에게 유용합니다.

예시

잘못된 예시

이 예시에서는 aria-valuenow="50"과 aria-valuetext="150"이 일치하지 않습니다. 이로 인해 보조 기술 사용자가 혼란을 겪을 수 있습니다. aria-valuetext는 aria-valuenow와 의미가 일치하는 텍스트로 설정해야 합니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="150" tabindex="0">
										50
									</div>

올바른 예시

이 예시는 aria-valuenow 값이 50이고, aria-valuetext가 이를 설명하는 "Medium"으로 설정되어 있으며, 보조 기술 사용자에게 일관된 정보를 제공합니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="Medium" tabindex="0">
										50
									</div>

기본 슬라이더 예시

이 예시는 HTML5 슬라이더 요소를 사용하여 볼륨을 조정하는 슬라이더를 나타냅니다. aria-valuetext="Medium" 속성은 슬라이더의 현재 값이 50일 때, 이를 "Medium"이라는 텍스트로 설명합니다.

									<!-- 기본 슬라이더 예시 -->
									<label for="volumeSlider">Volume</label>
									<input type="range" id="volumeSlider" min="0" max="100" value="50" aria-valuenow="50" aria-valuetext="Medium">

커스텀 슬라이더 예시

이 예시는 커스텀 슬라이더를 구현한 것으로, aria-valuenow="100"과 함께 aria-valuetext="Halfway" 속성을 사용하여 슬라이더의 현재 값을 보조 기술에 전달합니다. 사용자가 슬라이더 값을 변경할 때, 해당 값에 대한 텍스트 설명도 동적으로 업데이트됩니다.

									<div role="slider" aria-valuemin="0" aria-valuemax="200" aria-valuenow="100" aria-valuetext="Halfway" tabindex="0" style="width: 200px; background: lightgray; height: 10px; position: relative;">
										<div id="sliderThumb" style="width: 10px; height: 20px; background: blue; position: absolute; left: 50%;"></div>
									</div>

									<script>
										document.getElementById('sliderThumb').addEventListener('keydown', function(event) {
											const slider = this.parentElement;
											let currentValue = parseInt(slider.getAttribute('aria-valuenow'));
											const minValue = parseInt(slider.getAttribute('aria-valuemin'));
											const maxValue = parseInt(slider.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowRight') {
												currentValue = Math.min(maxValue, currentValue + 10);
											} else if (event.key === 'ArrowLeft') {
												currentValue = Math.max(minValue, currentValue - 10);
											}
											 
											slider.setAttribute('aria-valuenow', currentValue);
											slider.setAttribute('aria-valuetext', currentValue === 100 ? "Halfway" : currentValue);
											this.style.left = `${(currentValue / maxValue) * 100}%`;
										});
									</script>

스피너 예시

이 예시는 스피너 컨트롤을 구현한 것으로, aria-valuenow="5"와 함께 aria-valuetext="Five" 속성을 사용하여 현재 값을 텍스트로 표현합니다. 사용자가 값을 변경할 때, aria-valuetext가 동적으로 업데이트됩니다.

									<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="5" aria-valuetext="Five" tabindex="0">
										5
									</div>

									<script>
										document.querySelector('[role="spinbutton"]').addEventListener('keydown', function(event) {
											let currentValue = parseInt(this.getAttribute('aria-valuenow'));
											const minValue = parseInt(this.getAttribute('aria-valuemin'));
											const maxValue = parseInt(this.getAttribute('aria-valuemax'));
											 
											if (event.key === 'ArrowUp') {
												currentValue = Math.min(maxValue, currentValue + 1);
											} else if (event.key === 'ArrowDown') {
												currentValue = Math.max(minValue, currentValue - 1);
											}
											 
											this.setAttribute('aria-valuenow', currentValue);
											this.setAttribute('aria-valuetext', currentValue);
											this.textContent = currentValue;
										});
									</script>

시멘틱 마크업을 활용한 진행률 표시 예시

이 예시는 파일 업로드 진행률을 나타내는 progress 요소를 사용하여 시멘틱 마크업을 구현한 것입니다. aria-valuetext="50 percent completed" 속성은 진행률의 현재 값을 텍스트로 설명하며, 보조 기술 사용자에게 보다 명확한 정보를 제공합니다.

									<progress id="fileProgress" max="100" value="50" aria-valuenow="50" aria-valuetext="50 percent completed"></progress>
									<label for="fileProgress">File Upload Progress</label>