반응형
{:toc}
1. <button>
태그의 Click과 Focus 동작
일반적인 동작
<button>
요소를 클릭할 때, 브라우저와 운영체제에 따라 포커스가 해당 버튼으로 이동할지 여부가 결정됩니다.
브라우저 별 동작
(출처: https://en.spec-zone.ru/html/element/button)
Spec-Zone.ru
en.spec-zone.ru
- 데스크톱 브라우저
- Windows: 클릭 시 버튼에 포커스가 이동합니다.
- Mac(Firefox, Safari): 클릭해도 버튼에 포커스가 이동하지 않습니다.
- 모바일 브라우저
- Android: 클릭 시 버튼에 포커스가 이동합니다.
- iOS: 클릭해도 버튼에 포커스가 이동하지 않습니다.
2. Safari와 WebKit의 포커스 동작 논쟁 (WebKit 버그 #22261)
(출처: https://bugs.webkit.org/show_bug.cgi?id=22261#c68)
22261 – Clicking on a non-text input element does not give it focus
51 users Show 04-punch-pinyons aaron adele akeerthi alex.wayfer anantha andrzej.doyle andy.blum.01 ap arne aroben arv browserbugs2 bugs.webkit.org bugzilla bweinstein darin dave.batiste dawagner dieter dsuchkov511 emilio eric giovanni.piller hausmann hedge
bugs.webkit.org
MacOS 설계 원칙
- MacOS에서는 텍스트 필드에 포커스가 있는 상태에서 버튼을 클릭하더라도, 텍스트 필드에 포커스가 유지됩니다. 이는 MacOS의 다른 애플리케이션 동작과 일관성을 맞추기 위한 설계입니다.
문제 제기
- Safari와 Chrome(WebKit 기반)의 동작이 Windows와 Linux의 다른 브라우저들과 다릅니다.
- 웹 개발자들이 이런 차이 때문에 브라우저 별로 다른 동작을 처리하기 위한 별도의 코드를 작성해야 하며, 이는 유지 보수를 어렵게 만듭니다.
토론 내용 요약
- MacOS 사용자 입장
MacOS 생태계와의 일관성을 유지하기 위해 현재 동작 방식을 지켜야 한다고 주장. - 웹 표준과 접근성 관점
- HTML5 웹 표준에서는 포커스가 가능한 요소(예:
tabindex
가 설정된 경우)에 클릭 시 포커스가 이동해야 한다고 권장합니다. - 이를 따르지 않으면 접근성이 저하될 수 있다는 우려가 나옵니다.
- HTML5 웹 표준에서는 포커스가 가능한 요소(예:
- 해결 방안 제시
- Safari에서도 표준을 준수하도록 동작을 변경하거나,
tabindex
가 설정된 경우에 한해 동작을 조정하도록 제안
- Safari에서도 표준을 준수하도록 동작을 변경하거나,
- 결론: MacOS 설계 철학과 웹 표준 간의 갈등이 핵심
- MacOS의 고유 동작을 유지해야 한다는 주장과,
- 개발자 및 웹 접근성을 위해 브라우저 간 일관성을 보장해야 한다는 요구의 대립
3. 결론 및 접근성 영향
Safari의 <button>
클릭 동작은 MacOS 사용자들에게는 의도한 설계로 적합할 수 있습니다.
하지만 브라우저 간 일관성이 부족해 접근성과 개발 편의성이 떨어진다는 비판이 커지고 있습니다.
현재 WebKit 팀은 MacOS의 사용자 경험과 웹 표준 간의 균형을 찾기 위해 논의하고 있습니다.
반응형
'HTML & CSS' 카테고리의 다른 글
[다크모드] light-dark 함수로 쉽게 구현 (0) | 2025.02.02 |
---|---|
[HTML] iOS에서 키보드 활성화 시 Viewport 문제 정리 (0) | 2024.11.27 |
[CSHTML][카드 게임] 2. JS ajax, 컨트롤러 만들기 (0) | 2023.06.14 |
[CSHTML][카드 게임] 1. 간단한 CRUD, CSHTML 만들기 (0) | 2023.06.14 |
[HTML] 태그별 주의사항 (0) | 2023.06.13 |