최고의 멀티 디바이스 환경을 제공하기 위해 반응형으로 설계하는 것이 좋다는 것을 알고 계실 것입니다. 반응형 디자인은 접근성 측면에서도 이점이 있습니다.
Udacity와 같은 사이트를 고려해 보세요.
작은 글씨를 읽기 어려운 저시력 사용자는 페이지를 최대 400%까지 확대할 수 있습니다. 사이트에서 반응형 디자인을 사용하므로 인터페이스가 '더 작은 뷰포트' (실제로는 더 큰 페이지)에 맞게 재정렬됩니다. 이는 화면 확대가 필요한 데스크톱 사용자와 모바일 스크린 리더 사용자에게도 유용합니다. 모두에게 이익이 되는 혜택입니다. 다음은 동일한 페이지를 400%로 확대한 것입니다.
실제로 반응형으로 디자인하기만 해도 WebAIM 체크리스트의 규칙 1.4.4를 충족할 수 있습니다. 이 규칙에서는 '텍스트 크기가 두 배가 되면 페이지를 읽고 사용할 수 있어야 합니다'라고 명시합니다.
반응형 디자인의 모든 내용을 다루는 것은 이 가이드의 범위를 벗어나지만 반응형 환경을 개선하고 사용자에게 콘텐츠에 대한 더 나은 액세스를 제공하는 몇 가지 중요한 사항이 있습니다.
viewport 메타 태그 사용
<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을 설정하여 viewport 메타 태그를 사용해 확대/축소를 방지할 수 있습니다. 이렇게 하지 말고 사용자가 필요한 경우 확대할 수 있도록 하세요.
유연한 설계
특정 화면 크기를 타겟팅하지 말고 유연한 그리드를 사용하여 콘텐츠에 따라 레이아웃을 변경하세요. Udacity 예에서 보았듯이 이 접근 방식을 사용하면 축소된 공간이 작은 화면 때문이든 높은 확대/축소 수준 때문이든 디자인이 반응합니다.
이러한 기법에 관한 자세한 내용은 반응형 웹 디자인 기본사항을 참고하세요.
텍스트에 상대 단위 사용
유연한 그리드를 최대한 활용하려면 텍스트 크기 등에 픽셀 값 대신 em 또는 rem과 같은 상대 단위를 사용하세요. 일부 브라우저는 사용자 환경설정에서만 텍스트 크기 조정을 지원하며 텍스트에 픽셀 값을 사용하는 경우 이 설정은 사본에 영향을 미치지 않습니다. 하지만 사이트 전체에서 상대 단위를 사용한 경우 사이트 사본이 사용자의 환경설정을 반영하도록 업데이트됩니다.
이렇게 하면 사용자가 확대할 때 전체 사이트가 리플로우되어 사용자가 사이트를 사용하는 데 필요한 읽기 환경이 만들어집니다.
시각적 뷰를 소스 순서에서 연결 해제하지 마세요.
키보드 사용자가 사이트를 탭하면 HTML 문서의 콘텐츠 순서를 따릅니다. Flexbox 및 Grid와 같은 레이아웃 메서드를 사용하면 요소의 시각적 순서를 변경할 수 있으며, 이로 인해 소스 순서와 불일치가 발생할 수 있습니다. 이로 인해 사용자가 각 탭을 사용할 때 페이지를 이리저리 이동하게 될 수 있습니다.
콘텐츠를 탭하여 각 중단점에서 디자인을 테스트합니다. '페이지를 통한 흐름이 여전히 합리적인가?'라고 자문해 보세요.
소스와 시각적 디스플레이 간의 연결 해제에 대해 자세히 알아보세요.
공간적 단서에 주의하세요
마이크로카피를 작성할 때는 페이지의 요소 위치를 나타내는 언어를 사용하지 마세요. 시각장애가 있는 사용자는 공유된 맥락이 없을 수 있으며, 검색 가능하도록 정확한 요소 사본을 식별하는 것이 더 유용합니다.
또한 탐색이 다른 위치로 이동할 수 있는 모바일 버전에서는 탐색을 '왼쪽'이라고 언급하는 것이 적절하지 않을 수 있으므로 모든 사용자에게 도움이 됩니다.
터치스크린 기기에서 탭 타겟이 충분히 큰지 확인
터치 스크린 기기에서는 다른 링크를 누르지 않고도 쉽게 활성화할 수 있도록 탭 타겟이 충분히 커야 합니다. 탭할 수 있는 요소의 적절한 크기는 48px입니다. 탭 타겟에 관한 안내를 자세히 알아보세요.