HTML의 accesskey(액세스 키) 속성은 특정 요소를 활성화하거나 포커스를 이동시키기 위한 키보드 단축키를 지정하는 데 사용됩니다. 마우스 없이 키보드만으로 링크나 버튼 등에 빠르게 접근할 수 있어, 접근성(Accessibility) 향상과 사용자 편의성 측면에서 유용한 속성입니다.
accesskey 속성 기본 문법
<element accesskey="char">
여기서 char는 해당 요소를 실행하거나 포커스를 이동시킬 때 사용할 단축키 문자입니다.
브라우저별 단축키 조합 (Windows 기준)
accesskey로 지정한 단축키를 실제로 누를 때는 브라우저마다 조합해야 하는 보조 키가 다릅니다. Windows 운영체제 기준 주요 브라우저의 단축키 조합은 다음과 같습니다.
| 웹 브라우저 | Windows OS |
|---|---|
| Safari | [Alt] + accesskey |
| Chrome | [Alt] + accesskey |
| Firefox | [Alt] + [Shift] + accesskey |
accesskey 속성 예제
다음 예제는 Windows 환경의 Google Chrome 브라우저에서 accesskey 속성을 적용한 모습입니다. 각 링크에 서로 다른 액세스 키를 지정하여 키보드만으로 빠르게 이동할 수 있도록 구성했습니다.
<!DOCTYPE html> <html> <body> <h2>참고 링크</h2> <a href="https://www.tutorialspoint.com/online_dev_tools.htm" accesskey="t">개발 도구</a><br> <a href="https://www.tutorialspoint.com/codingground.htm" accesskey="c">온라인 컴파일러</a><br> <a href="https://www.tutorialspoint.com/whiteboard.htm" accesskey="w">화이트보드</a><br> <p>Chrome에서는 <kbd>ALT</kbd> + <kbd>accesskey</kbd>를 함께 누르세요.</p> </body> </html>
실행 결과
위 코드를 실행하면 세 개의 참고 링크가 화면에 표시됩니다. Chrome에서 Alt 키와 함께 각 링크에 지정된 액세스 키(T, C, W)를 누르면 해당 링크가 즉시 활성화되어 연결된 페이지로 이동합니다.
활용 팁
- 액세스 키는 페이지 내에서 중복되지 않도록 고유한 값을 지정하는 것이 좋습니다.
- 사용자가 단축키를 인지할 수 있도록 화면에 안내 문구를 함께 표시하면 접근성이 더욱 향상됩니다.
- 모바일 환경에서는 물리적 키보드가 없어 accesskey가 동작하지 않을 수 있으므로, 필수 기능은 반드시 일반적인 클릭 방식도 지원해야 합니다.