HTML DOM의 accessKey 속성은 요소의 accessKey 속성값을 설정하거나 가져오는 데 사용됩니다. 반면 HTML의 accesskey 속성은 해당 요소를 활성화하거나 포커스하기 위한 단축키(접근 키)를 지정하는 역할을 합니다.
accessKey 속성 설정 구문
accessKey 속성값을 설정할 때는 다음과 같이 작성합니다.
HTMLElementObject.accessKey = char
여기서 char는 요소에 할당할 단축키 문자입니다.
accessKey 속성 반환 구문
설정된 accessKey 값을 읽어올 때는 다음 구문을 사용합니다.
HTMLElementObject.accessKey
브라우저별 접근 키 조합 (Windows 기준)
Windows 운영체제에서 주요 웹 브라우저별로 접근 키(access key)를 실행하는 단축키 조합은 다음과 같습니다.
| 웹 브라우저 | Windows OS 단축키 |
|---|---|
| Safari | [Alt] + accesskey |
| Chrome | [Alt] + accesskey |
| Firefox | [Alt] + [Shift] + accesskey |
브라우저마다 조합 방식이 다르므로, 실제 서비스에서 accesskey를 활용할 때는 각 브라우저의 동작 방식을 함께 고려하는 것이 좋습니다.
예제: Chrome에서 accessKey 속성 구현하기
다음은 Windows 환경의 Chrome 브라우저에서 accesskey 속성을 구현한 예제입니다. 링크 요소에 단축키 'g'를 지정하고, 버튼 클릭 시 해당 accessKey 값을 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<a id="myid" accesskey="g" href="https://www.google.com/">Google</a>
<p>accessKey 값을 가져옵니다.</p>
<button onclick="display()">클릭하여 accessKey 표시하기</button>
<p id="pid"></p>
<script>
function display() {
var a = document.getElementById("myid").accessKey;
document.getElementById("pid").innerHTML = a;
}
</script>
</body>
</html>실행 결과
페이지가 로드되면 Google 링크와 버튼이 표시됩니다.
위 버튼을 클릭하면 지정된 accessKey 값인 'g'가 아래에 출력됩니다.
또한 Chrome에서 Alt + g 키를 누르면 Google 링크에 포커스가 이동하여 바로 접근할 수 있습니다. 이처럼 accessKey 속성을 활용하면 키보드만으로도 웹 페이지의 특정 요소에 빠르게 접근할 수 있어 접근성 향상에 도움이 됩니다.