CSS flexbox로 해결한 웹 접근성의 실용 사례

얼마 전에 저는 접근성에 대한 이야기를 하고 있었습니다. 그리고 저는 에서 동료와 함께 일하고 있었습니다.

사용자 경험과 접근성(키보드를 통한 양식 사용)을 결합한 간단한 사용 사례였습니다.

사용 사례에 대한 간략한 설명

우리 중 많은 사람들이 적어도 일주일에 한 번은 가입/로그인하고 저는 개인적으로 키보드만 사용하여 HTML 양식을 채우는 습관이 있습니다. 그리고 거의 모든 가입은 이용 약관에 동의하라는 메시지를 표시합니다.
거의 모든 경우에 다음과 같이 보입니다.



따라서 입력/버튼/확인란 사이를 탐색하려면 탭 키를 사용하여 키보드만 사용하여 탐색하고 양식을 채우려는 경우

다음 gif는 각 탭 누름에서 tabindex가 어떻게 작동하는지 보여줍니다.



이 탭 인덱싱에 문제가 있습니까?

TnC를 읽지 않고 수락하시겠습니까? (지금은 내가 한다고 말하지 않지만 때때로 나도 그렇게 합니다.) 논리적으로/이상적으로는 Tnc를 읽은 후에야 받아들일 것입니다. 즉, 이용약관 링크가 체크박스 앞에 표시되어야 합니다.

그렇다면 이것은 접근성 문제가 맞습니까?
그렇다면 이제 어떻게 해결할 수 있을까요?

가능한 해결책

I accept the terms and conditions 텍스트 뒤에 확인란을 이동합니다. 하지만 그러면 읽는 흐름이 끊어집니다.
LTR 언어

tabindex를 관리하기 위해 javascript를 추가하고 다음을 기반으로 포커스를 맞춥니다.
어떤 입력이 지금 초점을 맞추고 있습니까?
here

간단한 해결책이 있습니까? 네 참 flex order
재산이 우리를 구해줍니다. 하지만 어떻게?

HTML을 먼저 보자

<form class="row" action="https://www.example.com" method="POST">
  <div class="col-12">
    <div class="col-12 form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="col-12 form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="col-12 form-group form-check tncWrapper">
      <input type="checkbox" id="tncCheckBox" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">I accept the <a id="tncLink" href="https://www.example.com">terms and conditions</a></label>
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

이제 체크박스를 I accept the terms and conditions 텍스트 뒤로 옮기고 css를 추가하고 짜잔!! 플렉스의 마법이 시작됩니다.

UI에서 요소의 순서를 동일하게 유지하기 위해 일부 CSS를 추가해야 하지만 코드에서는 다르므로 HTML에서 수행하는 유일한 변경 사항은 다음과 같습니다.

<div class="col-12 form-group form-check tncWrapper">
      <label class="form-check-label" for="exampleCheck1">I accept the <a id="tncLink" href="https://www.example.com">terms and conditions</a></label>
      <input type="checkbox" id="tncCheckBox" id="exampleCheck1">
</div>

다음 CSS 추가

.tncWrapper {
  display: flex;
}

#tncCheckBox {
  order: -1;
}

이를 통해 I accept the terms and conditions 텍스트 앞에 확인란을 렌더링하도록 브라우저에 요청합니다. 그러나 HTML에서는 확인란이 텍스트 뒤에 나타납니다. 그리고 스크린리더/키보드는 HTML을 존중하고 뷰포트에 표시/렌더링되는 것이 아니기 때문에 우리는 끝났습니까?
여기에서 확인하세요


여기에서 시도하십시오

그래서 어떻게 작동 했습니까?

screenreader/keyboard와 같은 모든 접근성 도구는 뷰 포트/렌더링 순서가 아닌 HTML 즉 DOM 순서를 따르기 때문에 Focus는 먼저 링크로 이동한 다음 HTML로 코딩된 확인란으로 이동합니다. 그러나 사용자에게는 경험의 관점에서 볼 때 다른 방식으로 표시됩니다.

제안/질문이 있는 경우 아래에 댓글을 달아주세요.