키보드 액세스 가능 라디오 버튼 만들기

a11ywithlindsey.com에 원래 게시됨 .

친구야! 오늘 우리는 사용자 정의 키보드 액세스 라디오 버튼을 만들 것입니다! 이 블로그 게시물은 my accessible checkboxes post의 후속 게시물입니다.

다음을 살펴보겠습니다.

마크업

CSS의 레이블에 유사 요소 생성

CSS에서 "선택한"스타일을 추가합니다

.

포커스 스타일 추가

시작하다

좋아하는 동물이 무엇인지 묻는 간단한 라디오 버튼 그룹을 만들기로 했습니다.

<fieldset>
  <legend>What is your favorite Wild Animal?</legend>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="elephant" />
    <label for="elephant">Elephant</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="monkey" />
    <label for="monkey">Monkey</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="cheetah" />
    <label for="cheetah">Cheetah</label>
  </div>
  <div class="radio-wrapper">
    <input type="radio" name="animal" id="giraffe" />
    <label for="giraffe">Giraffe</label>
  </div>
</fieldset>

fieldset는 모든 라디오 버튼을 논리적으로 그룹화합니다. 라디오 입력은 legend의 질문에 대한 모든 옵션입니다. 또한 해당 양식 레이블을 라디오 버튼과 연결하는 것을 잊지 마십시오!



약간 정리하기 위해 몇 가지 간단한 CSS를 추가하겠습니다.

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

fieldset {
  border: none;
}

나는 여기서 아무것도 하지 않았다. 글꼴을 추가하고 fieldset 에서 테두리를 제거했습니다.



이제 재미있는 부분을 살펴보겠습니다! 이 라디오 버튼 스타일링!

레이블에 의사 요소 만들기

가장 먼저 할 일은 ::before 요소에 label 의사 요소를 추가하는 것입니다. 먼저 기본적인 것부터 시작하겠습니다.

$muted-red: #db3846;

input[type='radio'] {
  + label {
    position: relative;
    cursor: pointer;
    margin-left: 20px; /* This will be adjusted */

    &::before {
      content: '';
      position: absolute;
      left: -22px; /* This will be adjusted */
      width: 20px;
      height: 20px;
      background: $muted-red;
    }
  }
}

지금은 라디오 버튼이 아무 것도 아닌 것처럼 보일 것입니다. 우리는 HTML 기능을 복제하고 있는지 확인하기 위해 라디오 버튼만 보기를 원합니다.


.radio-wrapper 에 소량의 마진을 추가하겠습니다.

$muted-red: #db3846;

+ .radio-wrapper {
+ margin: 0.5rem 0;
+ }

input[type='radio'] {
  + label {
    position: relative;
    cursor: pointer;
    margin-left: 20px; /* This will be adjusted */

    &::before {
      content: '';
      position: absolute;
      left: -24px; /* This will be adjusted */
      width: 18px;
      height: 18px;
      background: $muted-red;
    }
  }
}

이제 배경색을 제거하고 가장자리를 둥글게 만들어 보겠습니다.

input[type='radio'] {
  + label {
    position: relative;
    cursor: pointer;
    margin-left: 20px; /* This will be adjusted */

    &::before {
      content: '';
      position: absolute;
      left: -24px; /* This will be adjusted */
+     border-radius: 50%;
+     border: 1px solid #6f686a;
      width: 18px;
      height: 18px;
+     background: transparent;
    }
  }
}

참고로 디버깅 목적으로 표준 라디오 버튼을 그대로 두겠습니다.

CSS에서 :checked 스타일 추가

keyboard accessible checkboxes에 대한 내 게시물을 읽었다면 :checked 의사 클래스에 대해 알고 있을 것입니다. 먼저 레이블에 의사 요소::after를 추가해야 합니다.

input[type='radio'] {
  + label {
    position: relative;
    cursor: pointer;
    margin-left: 20px; /* This will be adjusted */

    &::before {
      content: '';
      position: absolute;
      left: -24px; /* This will be adjusted */
      border-radius: 50%;
      border: 1px solid #6f686a;
      width: 18px;
      height: 18px;
      background: transparent;
    }

+   &::after {
+     content: '';
+     position: absolute;
+     left: -20px;
+     top: 4px;
+     border-radius: 50%;
+     width: 12px;
+     height: 12px;
+     background: $muted-red;
+   }
  }
}

이제 다음과 같이 표시됩니다.



이제 스타일링이 완료되었습니다. 라디오 입력이 background 일 때 ::after 의사 요소의 :checked 만 추가합시다.

input[type='radio'] {
  + label {
    &::after {
      content: '';
      position: absolute;
      left: -20px;
      top: 4px;
      border-radius: 50%;
      width: 12px;
      height: 12px;
    }
  }

+ &:checked {
+   + label::after {
+     background: $muted-red;
+   }
+ }
}

이제 라디오 버튼을 선택하면 배경색이 지정됩니다!



그러나 눈치 채면 초점 스타일이 없습니다. 다음에 초점을 맞추자(내가 거기서 무엇을 했는지 보라)

포커스 스타일 추가

라디오 버튼을 숨기면 내가 거기에 집중하는지 모를 것입니다.

input[type='radio'] {
  &:focus {
    + label::before {
      box-shadow: 0 0px 8px $muted-red;
    }
  }
}

초점 스타일링을 위해 비슷한 음소거된 빨간색을 추가하기로 결정했습니다.



마무리하기 위해 다음을 수행합니다.

라디오 버튼 자체(입력)에서 opacity 제거

라벨에서 margin-left를 제거하세요!

input[type='radio'] {
  opacity: 0;

  + label {
    position: relative;
    cursor: pointer;
  }
}

그리고 짜잔!

결론

사용자 지정 라디오 버튼을 만들 때 다음 사항을 고려해야 합니다.

연결된 양식 레이블로 적절한 HTML 구조를 생성합니다!

유사 요소를 사용하여 사용자 정의 스타일 요소 생성

회계:checked 의사 클래스

새 라디오 버튼에 집중할 수 있는지 확인

opacity: 0를 사용하여 라디오 버튼

을 숨깁니다.

가지고 놀고 싶다면 여기 완성된 CodePen이 있습니다!



연락을 유지하다! 이 글이 마음에 드셨다면:

이 기사를 친구들과 공유하고 알려주세요! 또한 후속 질문이나 생각이 있으면 언제든지 저에게 트윗해 주세요.

patreon에서 지원해주세요! 내 작업이 마음에 든다면 월 1달러의 서약을 고려해 보세요.\$5 이상을 서약하면 향후 블로그 게시물에 투표할 수 있습니다! 또한 모든 후원자를 위해 월간 Ask Me Anything 세션을 진행합니다!

Be the first to learn about my posts 더 많은 접근성 재미를 위해!

건배! 즐거운 한 주 되세요!