aria-valuenow는 ARIA(Accessible Rich Internet Applications) 속성 중 하나로, 접근성 향상을 위해 사용됩니다. 이 속성은 주로 슬라이더, 프로그레스바, 스핀버튼 같은 위젯에서 현재 값을 나타내는 데 사용됩니다. 이는 시각 장애가 있는 사용자들이 화면 읽기 소프트웨어(screen reader)를 통해 위젯의 현재 상태를 이해할 수 있도록 돕습니다.
사용 예제
- 슬라이더 (Slider):
<input type="range" min="0" max="100" value="50" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">- 프로그레스바 (Progress Bar):
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>관련 ARIA 속성
- aria-valuemin: 위젯에서 가질 수 있는 최소값을 나타냅니다.
- aria-valuemax: 위젯에서 가질 수 있는 최대값을 나타냅니다.
- aria-valuetext: 시각적으로는 값이 아닌 텍스트로 상태를 설명할 때 사용합니다.
설명
- 역할(Role): aria-valuenow는 주로 role="slider", role="progressbar", role="spinbutton" 등의 ARIA 역할을 가진 요소에 사용됩니다.
- 값(Value): aria-valuenow는 현재 값을 나타내며, 숫자로 표현됩니다. 이 값은 aria-valuemin과 aria-valuemax 사이에 있어야 합니다.
- 접근성: 화면 읽기 소프트웨어는 aria-valuenow 속성을 사용하여 사용자가 현재 슬라이더의 위치, 프로그레스바의 진행 상태 등을 알 수 있도록 합니다.
예제와 설명
슬라이더 예제
html
<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">- 역할(Role): input[type="range"]는 암묵적으로 슬라이더 역할을 합니다.
- 속성(Attributes):
- aria-valuenow="50": 현재 슬라이더의 값이 50임을 나타냅니다.
- aria-valuemin="0": 슬라이더의 최소값이 0임을 나타냅니다.
- aria-valuemax="100": 슬라이더의 최대값이 100임을 나타냅니다.
프로그레스바 예제
html
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
70%
</div>- 역할(Role): role="progressbar"는 요소가 프로그레스바임을 나타냅니다.
- 속성(Attributes):
- aria-valuenow="70": 현재 프로그레스바의 값이 70임을 나타냅니다.
- aria-valuemin="0": 프로그레스바의 최소값이 0임을 나타냅니다.
- aria-valuemax="100": 프로그레스바의 최대값이 100임을 나타냅니다.
결론
aria-valuenow는 웹 접근성을 높이기 위해 사용되는 중요한 ARIA 속성입니다. 이를 통해 사용자들은 화면 읽기 소프트웨어를 사용하여 슬라이더, 프로그레스바 등의 현재 상태를 쉽게 파악할 수 있습니다. 다른 관련 속성들과 함께 사용하여 더 나은 접근성을 제공할 수 있습니다.
728x90
