라디오 버튼 키보드 트랩

Question

객관식 질문 연습을 만들고 키보드 접근성에 문제가 있습니다. 기본적으로 사용자는 키보드를 통해 라디오 버튼 목록을 순환 할 수 없습니다. "포커스"커서가 라디오 버튼 위에 있고 화살표 키를 눌러 다음 라디오 버튼으로 이동하면 키보드 트랩이 발생합니다. 단순히 초점을 맞추는 대신 라디오 버튼이 대신 선택되므로 대답이 표시됩니다. 키보드를 통해 라디오 버튼을 선택할 때 라디오 버튼을 선택하지 않으려면 어떻게합니까?

HTML 태그 : 그들이 작동해야하는 방법

<div id="contentWrapper"> 
<p class="instructions">Click on the correct answer.</p> 

<ol start="49"> 
    <!-- Start of multiple choice question --> 
    <li class="multipleChoice gradedQuestion"> 
     <p class="question">If you receive a request for an extension from a trader, you should:</p> 
     <input type="hidden" name="questionNumber" value="49"> 
     <ul> 
      <li> 
       <div class="answerOption"><label for="question49A">Refer to IP 13; if the original requirements are still being met, approve the extension.</label></div> 
       <div class="inputAndIdContainer"><input type="radio" name="question49" value="0" id="question49A"> A.</div> 
      </li> 
      <li> 
       <div class="answerOption"><label for="question49B">Refer to IP 20; if the original requirements are still being met, approve the extension.</label></div> 


     <div class="inputAndIdContainer"><input type="radio" name="question49" value="0" id="question49B"> B.</div> 
     </li> 
     <li> 
      <div class="answerOption"><label for="question49C">Refer to FW1; if the original requirements are still being met, approve the extension.</label></div> 
      <div class="inputAndIdContainer"><input type="radio" name="question49" value="1" id="question49C"> C.</div> 
     </li> 
    </ul> 
    <div class="feedback"> 
     <div class="answeredCorrectly">Correct</div> 
     <div class="answeredIncorrectly">Incorrect</div> 
     <div class="answer"> 
      <strong>Answer:</strong> C - Refer to FW1. 
     </div> 
    </div> 
</li> 
<!-- End of multiple choice question --> 

Answer 1

짧은 대답은 할 수 없으며 이것은 키보드 함정이 아닙니다. 그것은 라디오의 특성입니다.

함께 그룹화 된 경우 (이름 속성) 탭으로 탭합니다. 첫 번째 항목을 선택한 공간을 누르면 화살표 키를 사용하여 다음 항목을 선택합니다. 그룹에 들어가기 위해 초점을 맞추기 위해 JS를 작성한 다음 떠나야합니다. 떠난 후 <div id="feedback">을 표시하거나 표시하려면 버튼을 만드십시오.

다른 게시물에 대해서는 .click()과 유사한 .focus() 함수를 추가해야 할 수 있습니다.

Answer 2

는 this 문서를 살펴! 라디오 버튼 그룹 탭 이동을 통해 도달

IE에

은, 처음에 선택 버튼에 초점을 맞추고, 그리고 점선 사각형이 나타냅니다

는 기본적으로이입니다. 화살표 키를 사용하여 그룹 내의 버튼 사이를 이동할 수 있습니다. "아래쪽"및 "오른쪽"화살표가 그룹 내에서 앞으로 이동하고 "위"및 "왼쪽"화살표가 모두 뒤로 이동합니다. 버튼으로 이동하면 해당 버튼이 선택되고 체크 된 그룹의 버튼은 선택 취소됩니다.

Netscape에서는 사물이 다릅니다. 탭을 사용하여 라디오 버튼 집합에 도달하면 첫 번째 버튼이 포커스를받습니다. 탭으로 그룹 내에서 앞으로 이동할 수 있습니다. 그런 식으로 단추로 이동해도 설정이 변경되지 않습니다. 스페이스 바 또는 Enter 키를 사용하여 버튼을 확인하십시오.

Answer 3

클릭 한 후 입력을 흐리게 처리하여이 문제를 해결했습니다.

적어도 탭/스페이스/화살표 키를 사용하여 탐색하는 경우 사용자에게 혼란을주지는 않습니다. 그들이 클릭하면 매우 가능성은 화살표 키를 사용하여 다음 옵션을 선택합니다.

JQuery와 : 우리와

$('.quiz input:radio').click(function(){ $(this).blur()})