최고의 다중 기기 환경을 제공하려면 반응형 디자인을 사용하는 것이 좋겠지만, 반응형 디자인도 접근성 면에서 유리합니다.
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 및 그리드와 같은 최신 레이아웃 메서드를 사용하면 시각적 렌더링이 소스 순서와 일치하지 않게 되기 쉽습니다. 이렇게 하면 키보드를 사용하는 사용자가 페이지를 당황스럽게 이동할 수 있습니다.
콘텐츠를 탭으로 이동하여 각 중단점에서 디자인을 테스트해야 합니다. 페이지를 통과하는 흐름이 여전히 의미가 있나요?
소스 및 시각적 디스플레이 연결 해제에 관해 자세히 알아보세요.
공간감 있는 정보를 확인하세요
현미경을 작성할 때는 페이지에서 요소의 위치를 나타내는 표현을 사용하지 않습니다. 예를 들어 모바일 버전에서는 화면 상단에 탐색 메뉴가 있을 때 '왼쪽' 내비게이션을 언급하는 것은 의미가 없습니다.
터치 스크린 기기에서 탭 타겟이 충분히 큰지 확인합니다.
터치 스크린 기기에서는 다른 링크에 누르지 않고도 탭 타겟을 쉽게 활성화할 수 있도록 탭 타겟이 충분히 커야 합니다. 탭 가능 요소에 적합한 크기는 48px입니다. 탭 타겟에 관한 자세한 내용을 참고하세요.