올바른 방법으로 라디오 버튼을 할 수 있습니까?

그래서 웹 개발 프로젝트에서 라디오 버튼을 피하려고 노력했습니다. 코드를 작성하는 올바른 방법을 이해할 수 없기 때문입니다.올바른 방법으로 라디오 버튼을 할 수 있습니까?

라디오 버튼 레이블을 설정 했습니까? 그렇다면 화면 판독기에서 어떻게 작동합니까?

대부분의 양식을 수행하는 방식은 정렬되지 않은 목록을 사용하는 것입니다. 각 입력은 목록 항목입니다. 라디오 버튼을 할 때 항상 문제가 생깁니다. 모든 브라우저에서 제대로 볼 수는 없습니다.

예를 들어, http://usfultimate.com/index.php/hatter/register을 확인하십시오. 이 구조가 의미가 있습니까?

빠른 구조 샘플 :

은

<ul> 
    <li> 
    <label for='first_name'>First Name:</label> 
    <input type="text" name="first_name" value="" /> 
    </li> 
    <li> 
    <label for='last_name'>Last Name:</label> 
    <input type="text" name="last_name" value="" /> 
    </li> 
    <li> 
    <label for='email'>Email Address:</label> 

    <input type="text" name="email" value="" /> 
    </li> 

    <li class="radio"> 
    <ul> 
     <li> 
     <input type="radio" name="skill" value="Never Played" id="neverPlayed" /> 
     <label for="neverPlayed">Never Played</label> 
     </li> 

     <li> 
     <input type="radio" name="skill" value="Unorganized Pickup" 
      id="unorganizedPickup" /> 
     <label for="unorganizedPickup">Unorganized Pickup</label> 
     </li> 
     <li> 
     <input type="radio" name="skill" value="Organized Pickup/League Play" 
      id="organizedPickup" /> 
     <label for="organizedPickup">Organized Pickup or League Play</label> 
     </li> 
     <li> 
     <input type="radio" name="skill" value="Played on a Competative Team" 
      id="competativeTeam" /> 
     <label for="competativeTeam">Competative Team</label> 
     </li> 

     <li> 
     <input type="radio" name="skill" value="Baller Shot Caller" id="baller" /> 
     <label for="baller">Baller Shot Caller</label> 
     </li> 
    </ul> 
    </li> 
</ul>

은 모든 포인터는 감사하겠습니다!

스크린 리더에 관해서는

출처

2009-09-28 Roeland

하나의 포인터는 수평 스크롤을 피하기 위해 코드 블록을 포맷하는 것을 고려하면 훨씬 쉽게 읽고 응답 할 수 있습니다. 나는 자유를 취하여 당신의 모범을 재구성했습니다. –

는 fieldset로 라디오 버튼을 구성하고 화면 판독기가 라디오 버튼의 각 그룹이 무엇을 의미하는지 이해, 그래서 그것을 legend 속성을 제공합니다.
각 라디오 버튼에 ID를 지정하고 label 요소의 for="" 속성에있는 ID를 사용하십시오. 이것은 접근성 단지 좋지 않다 - 그것은 또한 당신 (라디오 버튼 자체보다 공격하는 것이 훨씬 더 크고 더 쉽다) 레이블을 클릭하여 라디오 버튼을

그런 다음, 사용 CSS 스타일을 선택할 수 있다는 것을 의미하여 fieldset, legend 및 label 속성이 예에서와 같이, 사이트 디자인에 맞게 :

<html> 
    <head> 
     <style> 
     body { 
      font-family: arial; 
      font-size: 15px; 
      line-height: 1.4em; 
     } 
     fieldset.radioGroup { border: none; } 
     fieldset.radioGroup legend { font-weight: bold; } 

     /* Make each radio/label render on a new line */ 
     fieldset.radioGroup label { display: block; } 

     /* add some horizontal spacing between radio buttons and their label text */ 
     fieldset.radioGroup label input { margin-right: 32px; } 
     </style> 
    </head> 
<body> 
    <fieldset class="radioGroup"> 
     <legend>Skill Level</legend> 
     <label for="neverPlayedRadioButton"> 
      <input type="radio" name="skill" value="neverPlayed" id="neverPlayedRadioButton" /> 
      Never Played 
     </label> 
     <label for="unorganizedPickupRadioButton"> 
       <input type="radio" name="skill" value="unorganizedPickup" id="unorganizedPickupRadioButton" /> 
       Unorganized Pickup 
     </label> 
     <label for="organizedPickupRadioButton"> 
      <input type="radio" name="skill" value="organizedPickup" id="organizedPickupRadioButton" /> 
      Organized Pickup/League Play 
     </label> 
    </fieldset> 
</body> 
</html>

출처

2009-09-28 22:35:23

필드 세트를 필드 세트 안에 넣어도 괜찮습니까? 왜냐하면 나는 더 큰 입력 그룹을 위해 필드 세트를 사용하기를 원하기 때문이다. 2 개의 텍스트 입력과 2 개의 라디오 입력 영역이있을 수있다. 그래서 나는 fieldset 안에 fieldset을 가질 것이다. – Roeland

예 - W3C 유효성 검사기에 따르면 중첩 된 필드 집합은 HTML 4.01 Transitional과 XHTML 1.0 모두에서 유효한 마크 업입니다. –

위대한 대답, 딜란! 레이블을 클릭하면 작동하도록 레이블과 단추를 연결하는 방법을 항상 잊어 버렸습니다. 이제는 항상 여기에 올 수 있습니다. –

<label for="baller">Baller Shot Caller</label> 
<input type="radio" name="skill" value="Baller Shot Caller" id="baller" />

는, 그것의 단지 텍스트를 제외한 따라 달라집니다.

출처

2009-09-28 21:48:41

나는 라디오 필드 뒤에 레이블을 붙여서 더 좋아 보일 것입니다. 여기에서 볼 수있는 유일한 변화는 당신이 그것을 뒤집 었다는 것입니다. 그래서 나는 그것을 올바른 방법으로하고있다. 단지 역 라벨인가? – Roeland

+1 레이블의 for는 입력의 ID와 일치합니다. 모든 브라우저에서 텍스트를 클릭 할 수 있습니다. 되돌아 오는 변수는 기술이고 라디오 버튼에 따라 달라지는 값입니다. 이것은 라디오 버튼을 수행하는 올바른 방법입니다. –

또한 텍스트는 대개 라디오 버튼 다음에옵니다. –

'fieldset'태그를 사용하여 화면을 구성 할 수도 있습니다. 여러 개의 라디오 버튼 세트를 멋지게 묶을 것입니다.

출처

2009-09-28 21:53:34 Anax

for 속성을 사용하면 예제에 표시된대로 label에 확인란이나 라디오 버튼과 같은 양식 요소를 명시 적으로 연결할 수 있습니다.

또한

, HTML 4.01에 당신은 또한 암시 적 (연결 W3C 페이지에서 예) 다음을 수행하여 양식 요소와 label를 연결할 수 있습니다

<FORM action="..." method="post"> 
<P> 
<LABEL> 
    First Name 
    <INPUT type="text" name="firstname"> 
</LABEL> 
<LABEL> 
    <INPUT type="text" name="lastname"> 
    Last Name 
</LABEL> 
</P> 
</FORM>

이 때로는 더 편리하지만 항상 적절한 등이다 label이 HTML의 양식 요소에 인접하지 않은 경우 (예 : 테이블에서). 접근성

출처

2009-09-28 22:07:00

귀하의 코드가 입력 태그 레이블 요소 안에있는 점에서 올바르지 않습니다. 이상적으로 레이블에는 텍스트 만 포함되어야합니다. 그렇지 않으면 코드가 완전히 정확합니다.

화면 판독기를 사용하는 사용자는 일련의 라디오 단추에 공통된 컨텍스트와 해당 공통 컨텍스트를 설정하는 텍스트를 설정할 수 없다는 점을 명심해야합니다.다른 사람들은 라디오 버튼을 필드 세트에 넣고 범례 요소를 사용하여이 컨텍스트를 설정하는 방법을 지적했습니다. 그러나 접근성을위한 이상적인 솔루션은 텍스트 값과 레이블이 완전히 독자적으로 이해 될 수있을만큼 명확해야한다는 것입니다. 당신의 예에서 시각 장애인은 "unorganized pickup"이 기술 수준과 관련하여 선택이라는 것을 아는 것이 어려울 것입니다. "조직되지 않은 픽업 기술 수준"과 같은 말을하기 위해 더 쉽게 접근 할 수 있습니다. 그렇다면 라디오 버튼이 무엇인지 혼란스럽지 않습니다.

정렬되지 않은 목록을 사용하여 라디오 버튼을 구성했습니다. 괜찮습니다. fieldset 또는 div 컨테이너 아래에 그룹화 된 단락을 사용할 수도 있습니다. 중요한 것은 전달하려는 요소의 구조를 어떻게 바라는 지입니다. 순서가없는 목록은 일련의 열거 형이 관련이없는 일련의 항목을 제안하지만 일련의 요소가 전체 계열의 가치를 나타 내기 위해 필요합니다. 한 단락의 그룹은 각 단락이 개별적으로 소비되는 한 그룹의 다른 유사한 요소, 그러한 요소의 순서 또는 그러한 요소의 수량을 즉시 고려하지 않고 각 단락이 명시 적으로 소비되도록 의도 된 내용의 공식 선언을 제안합니다. 시맨틱 구조가 중요하지만 더 중요한 것은 그러한 구조가 코드를 분석하고 구문 분석해야하는 기술을 지원하기 위해 의사 소통하기를 원하는 것입니다.

귀하의 코드는 XHTML의보다 엄격한 요구 사항과 일치합니다. 좋은. 그러한 무능력이 일반적으로 허용되기 때문에 유연성이없는 무능함에 대한 일관된 엄격함에서 벗어나지 마십시오.

출처

2009-09-29 02:18:13

기다려라, 내가 혼란스러워 .. 내 코드에서 입력 태그가 내 레이블 요소 밖에있다. 저스틴이 게시 한 코드를 언급하고 있는가? 레이블을 너무 서술 적으로 사용하는 유일한 문제는 반복을 만듭니다 (단어 기술 수준이 반복해서 반복 될 것입니다.) 전설이있는 필드 세트를 사용하여 스크린 리더에서 라디오 버튼 그룹을 구분하면 화면 판독기와 라디오 버튼 그룹을 연관 지을 수 없습니까? 내가 할 수있는 다른 일은 "스킬 레벨"부분을 일반 브라우저에서 숨겨져 있지만 화면 판독기에서 작동한다는 것입니다. – Roeland

당신이 옳습니다. Dylan Beattie가 게시 한 코드를보고있었습니다. 세부 사양이 반복적으로 들릴 수 있다는 것에 동의합니다. 화면 판독기를 사용하는 사용자를보다 효과적으로 지원할 필요가 있습니다. 정확하게 반복되지 않도록 레이블 텍스트를 정리할 수도 있습니다. 스크린 리더는 범례를 발표하고 라디오 버튼이 필드 세트에 있음을 알리지 만 추가 관계를 명시 적으로 알리지 않습니다. 이것이 SGML 형식의 HTML의 제한 사항입니다. 브라우저에서 숨겨진 특정 텍스트를 넣는 것이 강력하게 제안 된 접근성 트릭입니다. –

인라인 스타일을 사용하여 텍스트를 숨기지 마십시오. 화면 판독기는 표시를 읽을 수 있습니다. 표시 안 함 및 표시 여부 : 표시가 인라인 인 경우 숨김 :시각적 사용자가 경험하는 것과 같은 방식으로 텍스트를 숨기거나 표시 할 수있는 JavaScript를 준수하기 위해 이러한 작업을 수행합니다. –

올바른 방법으로 라디오 버튼을 할 수 있습니까?

답변

관련 문제