액세스할 수 있는 웹 애플리케이션 디자인은 긍정적인 사용자 환경과 전반적인 애플리케이션 사용자 만족도를 제공하는 핵심 구성요소입니다. 액세스 가능한 웹 애플리케이션은 다양한 능력을 가진 사람들과 다양한 지리적 위치에 있는 사람들이 평등하게 액세스할 수 있도록 보장합니다. 청각, 인지, 언어 또는 시각 능력과 관련된 한계가 있는 사용자 및 단기적인 장애, 느린 인터넷 연결, 심지어 밝은 햇빛과 관련된 일시적인 제한까지 있는 사용자도 웹 애플리케이션에 액세스할 수 있어야 합니다. 웹 애플리케이션의 프런트엔드를 빌드할 때 처음부터 접근성 솔루션을 활용하여 접근성 문제를 방지하고 빌드 프로세스 후반에 작업을 다시 실행할 필요가 없습니다. 웹 크롤러와 스크린 리더가 애플리케이션 콘텐츠를 순회할 수 있는 동시에 사용자에게 긍정적인 사용자 환경을 제공해야 합니다.
접근성은 많은 국가와 산업에서 법적 의무입니다. 따라서 이러한 가이드라인을 숙지하고 접근성 솔루션을 프런트엔드 설계에 통합해야 합니다. 다양한 비즈니스 사례에서도 웹 콘텐츠에 대한 접근성의 중요성이 강조됩니다.
MDN 및 WCAG와 같은 리소스는 웹 애플리케이션의 접근성을 높이기 위한 필수 가이드라인과 제안을 제공합니다. web.dev에서 접근성 알아보기 과정을 이수할 수도 있습니다.
다양한 구성요소 간의 상호 의존성은 다양한 사용자가 웹 애플리케이션에 액세스할 수 있도록 하는 데 있어 필수적인 측면입니다.
색상 및 대비
색상 사용은 웹 애플리케이션의 접근성을 평가하는 주요 요소입니다. 프런트엔드 사용자가 페이지의 콘텐츠를 인식할 수 있어야 하며 색상과 대비는 콘텐츠에 대한 사용자의 인식에 상당한 영향을 미칩니다. 시청 조건과 시력 관련 장애는 일시적이거나 상황에 따라 또는 영구적일 수 있지만 웹 애플리케이션의 프런트엔드를 빌드할 때는 이를 고려해야 합니다. 사용자 대상 인터페이스에 사용되는 색상 간의 올바른 대비나 밝기 차이를 만들면 다양한 사용자가 웹 애플리케이션에 더 쉽게 액세스할 수 있습니다. 대비율은 배경과 텍스트의 밝기 차이를 나타냅니다.
대비를 측정하려면 대비율 공식을 사용하여 배경의 텍스트 또는 아이콘에 최소 대비가 있는지 확인하세요. 고려해야 할 다양한 형태의 색상 인식 장애가 있지만 새로운 색상 모델을 사용하면 콘텐츠를 그레이 스케일로 표시하더라도 올바르게 인식되도록 할 수 있습니다.
접근성을 위해 색상과 대비를 지원하려면 어두운 테마를 사용하는 것이 좋습니다. 어두운 테마는 흰색 조명과 읽기 어려움으로 인해 시각적 입력에 선호되는 경우가 많습니다. 콘텐츠 기반 애플리케이션에는 많은 양의 텍스트와 이미지가 포함되므로 사용자의 다양한 요구를 충족하려면 색상과 대비율을 현명하게 사용하는 것이 중요합니다.
서체
서체는 다양한 사용자가 읽고 읽을 수 있도록 텍스트를 선택하고 배열하는 것을 의미합니다. 가장 많이 변경된 접근성 설정 중 하나는 기기의 기본 글꼴 크기입니다. 일부 사용자는 화면에 더 작은 글꼴 크기로 더 많은 텍스트를 맞추거나 텍스트를 최대한 크게 만들 수 있습니다. 따라서 서체 크기를 유연하고 읽기 쉽게 만드는 것이 매우 중요합니다. 개별 텍스트 문자도 독자가 구별할 수 있어야 하고 전체 텍스트를 읽을 수 있어야 합니다. 애플리케이션의 프런트엔드를 디자인하는 동안 가독성과 가독성을 모두 포함하는 서체를 선택해야 합니다.
글꼴
웹 애플리케이션용으로 선택하는 서체 또는 글꼴 모음은 다양한 독자가 시각적으로 액세스할 수 있어야 합니다. 글꼴은 애플리케이션의 텍스트에 사용되는 문자의 시각적 디자인입니다. 많은 연구에서 웹 콘텐츠의 접근성을 평가할 때 글꼴의 중요성이 설명되어 있습니다. 브랜드와 사용자 인터페이스 디자인 목표, 읽기 용이성 간의 균형을 찾으면 더 많은 사용자가 애플리케이션을 더 즐겁게 사용할 수 있습니다. 프런트엔드를 빌드할 때 글꼴 옵션과 그 안의 글꼴 옵션이 애플리케이션의 접근성 및 전반적인 디자인에 어떻게 기여하는지 고려하세요.
글꼴 크기
시력이 나쁘거나 색 인식 장애가 있는 사용자를 위해 브라우저 확대/축소를 허용하는 것이 좋습니다. 웹 애플리케이션의 텍스트 글꼴은 다양한 독자에게 표시되어야 합니다. 글꼴 크기를 변경하려면 px에서 rem로 전환하세요. 렘 단위는 Wep 애플리케이션의 루트 요소를 기준으로 한 글꼴 크기를 허용합니다. 이는 웹 애플리케이션의 전반적인 접근성을 높일 수 있는 다목적 옵션입니다.
구조 및 레이아웃
다양한 구조 및 레이아웃 속성은 인터페이스의 접근성에 영향을 미칩니다. 고려해야 할 레이아웃 기능에는 텍스트 블록 간격 및 정렬은 물론 텍스트 줄과 개별 문자 사이의 간격 등이 있습니다. 그리드를 활용하고 디자인에 포함할 구성요소를 시각화합니다. 콘텐츠의 레이아웃과 구조는 사용자가 흥미롭고 재미있게 사용할 수 있어야 합니다. 텍스트 블록이 여러 개 있는 복잡한 레이아웃이나 복잡한 배경은 ADHD를 사용하는 사용자와 같이 일부 사용자에게 사용하기 어려울 수 있습니다. 프런트엔드 설계 프로세스 중에는 포용성을 우선시해야 합니다.
ARIA 및 HTML
ARIA (Accessible Rich Internet Applications)에는 사용자가 웹 애플리케이션의 접근성을 높이는 데 도움이 되는 가이드라인과 속성 집합이 포함되어 있습니다. ARIA는 HTML을 보완하며 액세스 가능한 JavaScript 위젯, 실시간 콘텐츠 업데이트, 오류 메시지 등을 지원합니다. 웹 애플리케이션의 접근성을 높이려면 ARIA를 올바르게 사용해야 합니다. ARIA를 잘못 사용하면 오류가 발생할 수 있으며 실제로 사용자의 애플리케이션 액세스가 어려워질 수 있습니다.
가능하면 ARIA 라벨을 사용하여 점자 및 텍스트 음성 변환 (TTS)과 호환되는 대체 형식을 도입합니다. ARIA 역할 및 라벨을 사용하면 접근성 트리가 DOM 트리와 다른 경우 이를 변경할 수 있습니다. 이러한 라벨은 클릭 가능한 버튼으로 사용되는 div와 같은 비표준 태그를 사용할 때도 중요합니다. ARIA는 HTML 요소에 접근성이 지원되지 않는 경우에 필요합니다. 콘텐츠 기반 애플리케이션을 설계할 때는 애플리케이션이 최대한 많은 사용자에게 도달하는 데 도움이 되도록 스크린 리더와 기타 보조 기기가 잘 지원되는지 확인하세요.
web.dev에서 ARIA 및 HTML에 관해 자세히 알아보기
다국어 지원
국제화는 다양한 언어 및 문화적 배경을 가진 사용자가 액세스할 수 있도록 웹 애플리케이션을 설계하는 것을 의미합니다. 웹 애플리케이션은 코드를 크게 변경하지 않고도 다양한 언어, 지역, 문화적 선호도에 맞게 조정될 수 있어야 합니다. 국제화의 주요 구성요소에는 다국어 지원, 현지화, 콘텐츠 분리, 날짜 및 시간 형식 지정, 텍스트 방향, 언어 협상 등이 있습니다.
웹 애플리케이션을 국제화하면 광범위한 전 세계 잠재고객을 위한 포용적이고 사용자 친화적인 환경을 만들 수 있습니다. 국제화는 사용자층이 다양하거나 해외 확장을 목표로 하는 모든 웹 애플리케이션에서 필수적입니다.
논리 특성
CSS에서 스타일을 빌드할 때는 top / down / left/ right와 같은 속성 대신
start/ end를 사용해야 합니다. 이렇게 하면 메뉴와 사이트 레이아웃이 RTL 언어에 맞게 적절히 변경됩니다.
대체 콘텐츠
콘텐츠에 맞춤 마크업을 제공하려면 헤더에 대체 문서 링크와 함께 lang 속성을 HTML 태그에 포함합니다. 이렇게 하면 정의된 언어가 기본 브라우저 언어와 다른 경우 브라우저에서 올바른 페이지를 선택할 수 있습니다. 웹브라우저와 검색엔진이 페이지의 언어를 이해하는 데 도움이 되며, 이는 콘텐츠를 올바르게 렌더링하고 효과적인 검색엔진 최적화를 위해 중요합니다.
국제
JavaScript의 Intl 객체는 다국어 및 문화를 인식하는 웹 애플리케이션을 만드는 데 중요한 도구입니다. 웹 애플리케이션에서 국제화 및 현지화 기능을 제공하고 전 세계 사용자가 인터페이스와 콘텐츠를 이해하고 문화적으로 적합하도록 합니다. Intl 객체에서 제공하는 기능에는 날짜 및 시간 형식 지정, 숫자 형식 지정, 문자열 콜레이션이 포함됩니다.
양식
HTML 양식은 콘텐츠 기반 웹 애플리케이션의 중요한 부분입니다. 사용자 상호작용을 지원하고 사용자 정보를 수집하는 구조화된 방법을 제공합니다. 많은 사용자가 HTML 양식에 액세스할 수 없는 경우 사용자가 실망할 수 있습니다.
HTML 양식에 액세스할 수 있도록 하려면 모든 양식 입력란에 시맨틱 HTML 요소를 사용합니다. 이렇게 하면 보조 기술이 각 필드의 목적을 이해하고 사용자가 더 쉽게 작성할 수 있도록 할 수 있습니다. 또한 모든 양식 필드에 라벨을 명확하게 지정해야 합니다. 이렇게 하면 사용자가 정확하고 유용한 정보를 제공할 수 있습니다. 또한 HTML 양식의 접근성을 테스트하는 것도 중요합니다. 보조 기술을 사용하여 애플리케이션 콘텐츠를 사용하기 위해 이러한 기술이 필요한 사용자의 환경을 시뮬레이션하면 됩니다.