접근성 우선: 스위치 전환

내가 시작하기 전에, 나는 이 문장의 영감이
의 게시물입니다.

액세스 가능한 사용자 정의 키보드 만들기 확인란

린세 코파츠・ 2018년 11월 27일・ 5분 읽기

#a11y #frontend #html #webdev

내가 이곳에서 보여준 많은 것들은 그녀의 디자인 모델과 비슷하다. 단지 내가 약간의 변화를 했을 뿐이다. 물론, 최종 결과는 복선상자가 아니라 전환이다.

우리는 무엇을 창조하고 싶습니까?

우리의 목표는 재료 디자인 영감의 전환 스위치를 만드는 것이다. 이것은 키보드와 호환된다. 우리는 자바스크립트를 사용하지 않을 것이다. 왜냐하면 나는 우리가 이렇게 간단한 일을 위해 자바스크립트를 사용할 필요가 없다고 생각하기 때문이다.

표식

우리는 모든 내장된 a11y의 장점을 가지고 있기 때문에 바퀴를 재발명할 필요가 없다는 표준checkbox을 사용할 것이다.우리는 필요에 따라 일부 텍스트와 상호작용을 할 수도 있고, 우리가 진행할 전환과 상호작용을 할 수도 있는 label 라벨로 그것을 둘러싸고 있을 것이다.
나는 더욱 쉽게 경계가 있다는 것을 발견했다. 우리는 우리의 실제 스타일을 전환할 수 있다.이것은 내가 확정한 코드다.

<label class="md_switch">
  <input type="checkbox" />
  <span class="md_switch__toggle"></span>
  Toggle switch
</label>

만약 우리의 CSS에 문제가 있다면, 이것은 표준 체크 상자를 불러오고 완전히 사용할 수 있습니다. 이것은 우리가 계속 노력해야 할 것입니다.

스타일

하나의 스위치는 몇 개의 상태에 있을 수 있으니, 우리는 반드시 모든 상태에 하나의 양식이 있어야 한다.이들 주는 다음과 같습니다.

기본값/선택되지 않음

검사됨

비활성화

초점

약속을 어기다

설치 프로그램

우리 먼저 우리가 원하는 라벨의 외관을 봅시다. 당신은 우리의 라벨에 클래스가 있다는 것을 기억할 것입니다.md_switch.이것은 중요한 프로젝트이기 때문에 우리는 개방식 산스 글씨체를 사용하고 싶을 것이다. 너는 필요 없지만, 나는 할 것이다.우리는 우리의 라벨이 내부적으로 연결되기를 원하지만, 동시에 요소 내부에서flexbox를 사용하기를 원하기 때문에, 디스플레이를 inline-flex 로 설정할 것입니다.이것은 우리가 원소 내의 모든 위치를 align-items: center 와 수직으로 정렬할 수 있다는 것을 의미한다. 이것은 우리에게 승리이다.우리는 또한 위아래 간격을 늘리고 싶다. 왜냐하면 우리의 전환은 표준 복선 상자보다 조금 크기 때문에, 나는 5px를 선택했다.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.md_switch {
  display: inline-flex;
  font-family: "Open Sans";
  align-items: center;
  margin: 5px 0;
}

마우스를 전환 버튼으로 이동할 때 커서가 클릭할 수 있는 내용을 표시하기를 원하기 때문에 커서를 포인터로 변경합니다.

.md_switch .md_switch__toggle {
  cursor: pointer;
}

전환

실질적인 전환을 시작합시다.이러한 전환은 두 가지 부분이 있는데 그것이 바로 배경층과 맨 위의 작은 nob/switch이다.배경은 하나::before이고 nob는 하나::after가 의미가 있기 때문에 간단하다.
컨텐트 값, 배경색, 여백 및 변환 효과가 앞뒤에 있어야 합니다.모든 값이 같기 때문에 우리는 그것들을 함께 놓았다

.md_switch .md_switch__toggle::before,
.md_switch .md_switch__toggle::after {
  content: '';
  background: #BDBDBD;
  margin: 0 3px;
  transition: all 100ms cubic-bezier(0.4, 0.0, 0.2, 1);
  display: block;
}

당신들은 내가 디스플레이 속성을 추가했다는 것을 알게 될 것입니다. 기술적으로 말하자면, 이 두 속성은 모두 필요하지 않지만, 여기에는 아무런 해가 없습니다.
나는 재료 설계 규범here에서 베셀과 시간을 세 번 얻었다.
이제 전환된 배경 부분을 살펴보겠습니다.너는 마음대로 사이즈를 조정할 수 있지만, 나는 왜 내가 이런 설정을 선택했는지 설명할 것이다.

.md_switch .md_switch__toggle::before {
  height: 1.3em;
  width: 3em;
  border-radius: 0.65em;
  opacity: 0.6;
}

내가 설정한 높이는 선의 높이를 마침 초과했기 때문에 전체 선을 채운 것 같다. 너비는 높이의 두 배로 길어 보이지만 너무 길지 않다. 경계 반경은 반높이로 알약 모양을 형성하고 불투명도는 0.6으로 스위치보다 멀어 보이고 스위치의 불투명도는 1이다.이것들은 모두 내가 옳다고 생각하는 가치관이다. 너는 마음대로 그것들을 바꿀 수 있다.
마지막으로, 이 절에서, 우리는 스위치를 맨 위에 놓을 것이다.이 절대값을 지정하려면 부모 대상의 위치를 상대적으로 설정해야 합니다. 아버지 대상은 .md_switch .md_switch__toggle 뿐이기 때문에 문제없습니다.
우리는 스위치가 둥글고 배경보다 약간 높으며 수직으로 가운데에 있기를 바란다. 약간의 깊이를 위해 우리는 장방형의 음영을 추가한다.

.md_switch .md_switch__toggle::after {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  height: 1.7em;
  width: 1.7em;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.4);
}

나는 transform 이런 방식을 사용하여 앞으로의 애니메이션 제작을 더욱 쉽게 했다.

선택했어

다음 몇 가지는 훨씬 간단하다. 대부분의 다리 작업은 기본 보기에서 이루어진다.
선택한 경우 두 자리의 배경색을 active 색상으로 변경하고자 합니다.

.md_switch [type=checkbox]:checked+.md_switch__toggle::before,
.md_switch [type=checkbox]:checked+.md_switch__toggle::after{
  background: #00897B;
}

하지만 우리도 우리의 스위치를 배경 알약 반대편으로 옮기고 싶다.만약 우리가 알약의 전체 길이에서 nob를 이동하고 그 자체의 너비에 따라 뒤로 이동한다면 우리는 오른쪽 가장자리를 마주하고 calc(3em - 100%) 같은 변환을 이렇게 해야 한다.확실히 그렇다.

.md_switch [type=checkbox]:checked+.md_switch__toggle::after {
  transform: translate(calc(3em - 100%), -50%);
}

불구자

만약 요소가 비활성화된다면, 우리는 어떤 방식으로 사용자에게 그들이 상호작용할 수 없다는 것을 보여 주기를 바란다.내가 좋아하는 것은 그레이스케일 필터를 추가하여 불투명도를 낮추지만, 뒷원소에서 음영을 삭제하여 평탄하게 보이는 것이다.
마우스 사용자가 메시지를 얻을 수 있도록 커서를 not-allowed 로 설정할 수도 있습니다.

.md_switch [type=checkbox]:disabled+.md_switch__toggle {
  cursor: not-allowed;
  filter: grayscale(100%);
  opacity: 0.6;
}

.md_switch [type=checkbox]:disabled+.md_switch__toggle::after {
  box-shadow: none;
}

집중

이것은 우리가 고려해야 할 마지막 상태입니다. 복선상자가 선택되었을 때, 우리는 사용자에게 그들이 우리의 요소를 선택했음을 표시하기를 희망합니다.이것과
왜냐하면 그것은 일을 매우 잘하기 때문이다.

.md_switch [type=checkbox]:focus+.md_switch__toggle {
  outline: #5d9dd5 solid 1px;
  box-shadow: 0 0 8px #5e9ed6;
}

완료 중

우리는 이미 전환을 했다. 그것은 일할 수 있고, 보기에는 매우 아름답지만, 우리는 여전히 숨겨야 할 원시적인 복선상자가 있다.과거에는 많은 사람들이 없는 것을 보여 주었지만, 이것은 무서운 생각이었다. 원소를 완전히 숨기고 옵션 카드 인덱스에서 삭제하는 것은 키보드 사용자가 원소를 완전히 잃었다는 것을 의미한다.그럼 저희가 뭘 할 수 있을까요?
요소를 숨기고 탭 인덱스에 보관하는 방법은 매우 많다.개인적으로 더 좋아하는 방법은 공간을 차지하지 않고 투명도를 낮추고 바늘 이벤트를 닫는 것이다. 그러나 당신이 좋아하는 모든 방법을 사용할 수 있다.

.md_switch [type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

아래의 평론에서 당신이 어떻게 달라질지 알려주세요. 저는 당신들의 생각을 듣기를 기대합니다.