사파리 브라우저에서 iOS 음성 문제 발생

내 웹 페이지에서 음성을 사용하려고합니다.사파리 브라우저에서 iOS 음성 문제 발생

<!DOCTYPE html> 
    <html> 
     <body> 
      <form action="demo_form.asp"> 
       First name: <input type="text" name="fname" tabindex="1"><br> 
       Second name: <input type="text" name="sname" tabindex="2"><br> 
       Third name: <input type="text" name="tname" tabindex="3"><br> 
       Last name: <input type="text" name="lhan" tabindex="4"><br> 
       <input type="submit" value="Submit"> 
      </form> 
     </body> 
    </html>

이 페이지를 아이폰에서 열면, 먼저 "이름"이라고 읽습니다.

"fname"텍스트 상자를 클릭하여 텍스트를 입력 한 다음 키패드의 "완료"버튼을 누르십시오. 키패드가 사라지고 자동으로 "제 3의 이름"텍스트 상자에 초점을 맞추고 텍스트를 읽습니다.

이 동작은 일관되지 않습니다.

예상되는 동작입니까? 음성 명령을 어떻게 주문할 수 있습니까? (tabindex)

정말 고마워요.

출처

2013-11-27 Mohammed Imran Khan

이유를 잘 모르시겠습니까 tabindex 속성을 사용하고 계십니까? 대부분의 경우 불필요합니다. 특히 브라우저가 실제로 링크 및 양식 요소가있는 일반 HTML 코드로 정상적으로 작동 할 때 자연스러운 탭 순서로 엉망이되는 엄밀히 말하면 긍정적 인 값입니다.
내 조언 : 코드에서 tabindex 속성을 제거하십시오. 텍스트 영역에 텍스트를 입력하고 1 또는 2 탭, Enter를 누르는 것과 같은 매우 특별한 경우는 예외입니다. 텍스트 영역과 제출 버튼 사이에 배치 할 수있는 bbCode 삽입 버튼
템플릿의 HTML 코드가 조금 변경된 경우 tabindex의 존재를 잊어 버리면 업데이트되지 않으며 탭 순서가 깨집니다.
관련 WCAG 2.0 기술 : 양식 요소의 레이블을해야한다 :

F44: Failure (...) due to using tabindex to create a tab order that does not preserve meaning and operability
H4: Creating a logical tab order through links, form controls, and objects
다른 기술은 코드의 나머지 부분에 대한 지금

위의 것들과 연결되어 있습니다 ... label 요소로 태그되었습니다.

<label for="blah">My label</label><textarea id="blah"></textarea>

JSFiddle of your code corrected : - (- submit, image 및 button 제외한 모든 input 종류도 어떤 select 및 textarea) 각각의 형태의 소자에 각각 label 소자 간을 연결하는 동일 for의 값 id 속성을 통해 이루어진다

각 양식 요소 및 레이블은 자체 단락 요소
레이블이 추가됩니다. 각 양식 요소 주위에 양식 요소 오른쪽 또는 아래에있는 메시지가 계속 표시 될 수 있습니다.
각 양식 요소에 고유 한 ID가 추가되었습니다 (name과 동일한 값을 가졌지 만 어떤 유효한 ID가
for 특성

HTML 코드

<form action="demo_form.asp"> 
    <p> 
     <label for="fname">First name: <input type="text" name="fname" id="fname"></label> 
    </p> 
    <p> 
     <label for="sname">Second name: <input type="text" name="sname" id="sname"></label> 
    </p> 
    <p> 
     <label for="tname">Third name: <input type="text" name="tname" id="tname"></label> 
    </p> 
    <p> 
     <label for="lhan">Last name: <input type="text" name="lhan" id="lhan"></label> 
    </p> 
    <p class="w300p txtright"> 
     <input type="submit" value="Submit"> 
    </p> 
</form>

,174,515 상기 각 ID로서 동일한 값 레이블 첨가)이다 OK 15,

사파리 브라우저에서 iOS 음성 문제 발생

답변

관련 문제