최상의 멀티스크린 환경을 제공하려면 반응형으로 설계하는 것이 좋다는 점을 잘 알고 있지만, 반응형 디자인은 접근성 측면에서도 유리합니다.
Udacity와 같은 사이트를 생각해 보세요.
작은 글자를 읽는 데 어려움을 겪는 저시력 사용자는 페이지를 최대 400%까지 확대할 수 있습니다. 사이트가 반응형으로 설계되었기 때문에 UI가 '더 작은 표시 영역'(실제로는 큰 페이지에 맞춰)에 맞게 재정렬됩니다. 이는 화면 확대가 필요한 데스크톱 사용자와 모바일 스크린 리더 사용자에게도 유용합니다. 모두에게 이익이 됩니다. 다음은 같은 페이지를 400%의 배율로 조정한 화면입니다.
사실, 반응적으로 디자인하는 것만으로도 페이지가 '…텍스트 크기를 2배로 확대할 때 올바로 작동하고 읽을 수 있어야 한다'는 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와 같은 최신 레이아웃 메서드를 사용하면 시각적 렌더링이 소스 순서와 일치하지 않도록 쉽게 만들 수 있습니다. 이로 인해 키보드를 사용하여 이동하는 사용자에게 불편을 끼치는 페이지 점프가 발생할 수 있습니다.
탭하여 콘텐츠를 이동하면서 각 시점에서 디자인을 테스트합니다. 페이지의 흐름이 여전히 적절한가요?
소스 및 시각적 디스플레이 연결 해제에 대해 자세히 알아보세요.
공간적 단서 관리
마이크로코피를 작성할 때 페이지에서 요소의 위치를 나타내는 표현은 사용하지 마세요. 예를 들어 탐색이 화면 상단에 있는 모바일 버전에서는 '왼쪽에 있는' 탐색을 언급하는 것이 적절하지 않습니다.
터치 스크린 기기에서 탭 타겟이 충분히 큰지 확인
터치 스크린 기기에서는 탭 영역이 다른 링크를 누르지 않고도 쉽게 활성화할 수 있을 만큼 충분히 커야 합니다. 탭 가능한 요소의 적절한 크기는 48px입니다. 탭 타겟에 관한 자세한 안내는