본문 바로가기

HTML & CSS

<button>태그가 iOS에서는 onFocus되지 않는 문제

반응형

{: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가 설정된 경우)에 클릭 시 포커스가 이동해야 한다고 권장합니다.
    • 이를 따르지 않으면 접근성이 저하될 수 있다는 우려가 나옵니다.

  • 해결 방안 제시
    • Safari에서도 표준을 준수하도록 동작을 변경하거나,
      tabindex가 설정된 경우에 한해 동작을 조정하도록 제안

  • 결론: MacOS 설계 철학과 웹 표준 간의 갈등이 핵심
    • MacOS의 고유 동작을 유지해야 한다는 주장과,
    • 개발자 및 웹 접근성을 위해 브라우저 간 일관성을 보장해야 한다는 요구의 대립


3. 결론 및 접근성 영향

Safari의 <button> 클릭 동작은 MacOS 사용자들에게는 의도한 설계로 적합할 수 있습니다.
하지만 브라우저 간 일관성이 부족해 접근성과 개발 편의성이 떨어진다는 비판이 커지고 있습니다.
현재 WebKit 팀은 MacOS의 사용자 경험과 웹 표준 간의 균형을 찾기 위해 논의하고 있습니다.

반응형