따라서 최상의 다중 기기 환경을 제공하려면 반응형으로 설계하는 것이 반응형 디자인이 접근성을 더 우수하게 만듭니다.
Udacity와 같은 사이트를 살펴보겠습니다.
작은 글씨를 읽기 어려운 저시력 사용자가 페이지를 확대하면 400%까지는 늘어날 것입니다. 사이트가 반응형으로 설계되었기 때문에 '더 작은 표시 영역'에 맞게 UI가 자동으로 재정렬됩니다. (실제로는 더 큰 페이지의 경우) 화면 확대가 필요한 데스크톱 사용자에게 유용합니다. 모바일 스크린 리더 사용자에게도 적합합니다. 윈윈이라고 할 수 있죠. 다음은 동일한 페이지를 400%로 확대한 것입니다.
사실, 반응형 디자인을 통해 WebAIM 체크리스트의 1.4.4 규칙을 준수합니다. 는 '... 텍스트 크기가 두 배로 확대될 때 읽을 수 있고 작동해야 한다'고 명시하고 있습니다.
반응형 디자인에 대한 모든 내용은 본 가이드에서 다루지 않습니다. 다음은 반응형 환경에 도움이 될 몇 가지 중요한 사항입니다. 사용자가 콘텐츠에 더 쉽게 접근할 수 있도록 합니다
표시 영역 메타 태그 사용
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width를 설정하면 기기 독립적 픽셀의 화면 너비와 일치합니다.
initial-scale=1를 설정하면 CSS 픽셀과 기기 독립적 픽셀 간에 1:1 관계가 설정됩니다.
이렇게 하면 브라우저에 콘텐츠를 화면 크기에 맞추도록 지시하므로
사용자가 잘리지 않은 텍스트를 볼 수 없도록 합니다.
자세한 내용은 표시 영역에 맞게 콘텐츠 크기 조정을 참고하세요.
사용자가 확대/축소할 수 있도록 허용
표시 영역 메타 태그를 사용하여 확대/축소를 방지할 수 있습니다.
maximum-scale=1 또는 user-scaleable=no를 설정하면 됩니다.
이렇게 하는 것을 피하고, 필요하면 사용자가 확대하도록 하세요.
유연한 디자인
특정 화면 크기를 타겟팅하지 말고 유연한 그리드를 사용하세요. 콘텐츠의 지시에 따라 레이아웃을 변경합니다. 위의 Udacity 예에서 보았듯이 이 접근 방식은 설계가 공간이 줄어든 것이 화면이 작거나 확대/축소 수준이 높기 때문인지에 따라 달라집니다.
이 기법에 대한 자세한 내용은 반응형 웹 디자인 기본사항 도움말을 참조하세요.
텍스트에 상대 단위 사용
유연한 그리드를 최대한 활용하는 방법 텍스트 크기와 같은 항목에 픽셀 값 대신 em 또는 rem과 같은 상대 단위를 사용합니다. 일부 브라우저는 사용자 환경설정에서만 텍스트 크기 조정을 지원하며 텍스트에 픽셀 값을 사용하는 경우 이 설정은 사본에 영향을 미치지 않습니다. 그러나 전체적으로 상대 단위를 사용했다면 사이트 사본이 사용자의 환경설정을 반영하도록 업데이트됩니다.
이렇게 하면 사용자가 확대/축소할 때 전체 사이트가 리플로우될 수 있습니다. 독자들이 사이트를 사용하는 데 필요한 독서 환경을 조성하도록 도우세요.
소스 순서에서 시각적 뷰의 연결 해제 방지
키보드로 사이트를 탭하는 방문자 콘텐츠는 HTML 문서의 콘텐츠 순서를 따릅니다. Flexbox 및 Grid와 같은 최신 레이아웃 메서드를 사용하는 경우 시각적 렌더링이 소스 순서와 일치하지 않게 만들기 쉽습니다. 이렇게 되면 키보드를 사용하여 움직일 때 당황하게 될 수 있습니다.
콘텐츠를 탭 이동하면서 각 중단점에서 디자인을 테스트해야 합니다. 페이지를 통한 흐름이 여전히 타당한가요?
소스와 시각적 디스플레이의 연결 끊김에 관해 자세히 알아보세요.
공간적 단서 관리
마이크로 카피를 작성할 때는 페이지에서 요소의 위치를 나타내는 언어를 사용하지 마세요. 예를 들어 '왼쪽' 탐색이라고 지칭하는 것이 좋습니다. 모바일 버전에서는 의미가 없음 탐색이 화면 상단에 있을 때
터치 스크린 기기에서 탭 타겟이 충분히 커야 합니다.
터치스크린 기기에서는 탭 타겟이 충분히 큰지 확인하세요. 다른 링크를 누르지 않고도 쉽게 활성화할 수 있습니다 탭할 수 있는 요소에 적합한 크기는 48픽셀입니다. 탭 타겟에 관한 자세한 안내를 읽어보세요.