'접근 가능한 웹사이트는 아름답지 않을 것이다' 라는 말을 직접 들어봤습니다. 2023년. 회의 중. 컨설턴트와 함께. 디자이너. 나는 그 말을 한 사람이 생생한 색상 팔레트, 비표준 요소, 과도한 애니메이션 및 상호 작용 등에 대한 제안이 없다는 점을 분명히 하기 위한 것일 뿐이라는 의미였기를 바랍니다. 그러나 회의에 참석한 일부 사람들은 여전히 ​​찬성하는 고개를 끄덕였습니다. 등골이 오싹해지고, 생각을 공유하는 것이 좋은 일이라는 인식이 생겼습니다. (이론적으로 쓸모없는) 몇 가지 전제부터 시작해 보겠습니다. 1- 시각 장애가 있는 사용자도 문제 없이 사용할 수 있을 뿐만 아니라 웹 사이트에 액세스할 수 있습니다* . 접근 가능한 장소가 필요한 사람들은 청각 장애가 있거나 특정 움직임이나 행동을 수행할 수 없거나 인지 장애가 있을 수 있습니다 . 따라서 접근성은 자막, 오디오 전사, 작업을 완료하기 위한 적절한 시간, 기술적 전문 용어가 없는 짧은 문장으로 된 명확하고 설명적인 텍스트, 사용자가 애니메이션을 제어할 수 있는 기능, 작업에 대한 피드백의 존재 및 기타 여러 세부 사항을 통해 제공됩니다. 사이트의 미적 측면과는 거의 관련이 없습니다 . *시각 장애의 범위는 완전 실명부터 부분 시력(예: 터널 시력, 황반 변성 또는 보다 일반적인 백내장)까지 다양합니다. 성인의 약 75%가 시력 교정을 사용한다는 점을 고려하는 것도 중요합니다(출처: 시력에 관한 세계 보고서, WHO ). 2- 접근 가능한 웹사이트는 특정 형태의 장애가 있는 사람에게만 "더 나은" 것이 아니라 사용자의 일시적인 장애 (눈 수술 후 회복 중, 손에 붕대를 감은 상태)와 불리한 상황을 모두 고려하여 사이트를 사용하는 모든 사람에게도 유익합니다. (시끄럽거나 지나치게 햇볕이 잘 드는 환경, 연결 불량). 그러나 일반적으로 액세스 가능한 사이트는 모든 개인이 더 유용하고 탐색하기 쉽습니다 (더 명확한 텍스트, 계층적으로 구성된 정보, 더 구체적인 피드백 등으로 인해). 3- 웹 사이트에 대한 액세스 권한을 보장하는 것은 선택 사항 이 아니라 사용자에 대한 공감과 존중의 문제 입니다 (그리고 많은 부문에서 이는 법적으로 의무화되어 있습니다). 이는 좋은 마케팅 전략이기도 합니다. 사이트에 액세스할 수 없으면 액세스 가능한 사이트를 보유한 경쟁업체가 이득을 얻게 됩니다! 4- '아름답다'는 무슨 뜻인가요? 아름다움을 어떻게 측정하나요 ? 우리의 미적 선택은 반드시 보편적이지 않으며 모든 사용자가 공유할 수는 없습니다. 그렇다면 접근 가능한 웹사이트가 흥미롭고 시각적으로도 즐거울 수 있을까요? 대답은 확실히 그렇습니다 . 그리고 어떤 특별한 제약이나 타협도 없습니다(만약 설사 그것이 있더라도 창의성에 대한 장애물이 되어서는 안 되며 단지 창의력을 표현하는 경계에 불과해야 합니다!). '아름답고 접근하기 쉬운' 웹사이트를 디자인할 때 중점을 두어야 할 몇 가지 측면은 다음과 같습니다. 색상 ; 타이포그래피 ; 제목 ; 이미지 , 아이콘 및 멀티미디어 ; 집중하다 ; 위치와 근접성 . 어떤 측면은 분명하고 다른 측면은 덜 그렇습니다. 아래에서는 몇 가지 유용한 도구나 자료와 함께 이러한 각 측면에 대한 통찰력을 찾을 수 있습니다. 어떤 경우에도 주제가 몇 마디 말로 끝나지는 않지만, 이것이 도움이 되는 출발점이 될 수 있기를 바랍니다. 가장 흥미로워 보이는 항목을 선호하는 순서대로 읽어보시기 바랍니다 (각 섹션의 끝에서 목록으로 돌아갈 수 있는 방법을 찾을 수 있습니다). 아름답고 접근하기 쉬운 Stephanie Walter 에 대해 잘 모르신다면 문제를 해결할 기회를 가지십시오. 그녀는 그녀의 웹사이트에서 접근성에 대한 흥미로운 통찰력을 지속적으로 공유하고 있으며 그녀의 사이트는 '아름답고 접근하기 쉬운' 사이트의 진정한 예입니다. Un piacevole sito con illustrazioni chiare e pulite e una Palette giallo-viola piacevole a vedersi. Stephanie Walter 의 웹사이트 스크린샷 충분하지 않다면 다음과 같은 접근 가능한 웹사이트 모음을 참조하세요. https://blog.hubspot.com/website/accessible-website-examples https://blog.usablenet.com/accessible-web-design-examples-to-model-your-site-after 1. 색상 물론. 웹 사이트의 미적 측면과 접근성을 생각할 때 가장 먼저 떠오르는 것은 접근 가능한 색상 팔레트 입니다 . 이는 텍스트(또는 기타 그래픽 요소)와 배경 간의 충분한 대비를 보장하고 색상 요구에도 적합합니다. - 맹인 . 대비와 관련하여 공식 지침( WCAG 2.2 ) 에 따른 목표는 배경과의 최소 대비(AA)를 달성하는 것입니다. 즉, 24px 미만 텍스트 의 경우 4.5:1 , 24px보다 큰 텍스트 의 경우 3:1 , 19px 이상의 굵은 텍스트, 아이콘, 및 기타 UI 요소 . 충분한 대비가 있는 조합을 선택하는 데 도움이 되거나(아래 참조) 웹 페이지의 요소 간에 대비가 유지되는지 이해하는 데 도움이 되는 (예: Wave ) 도구가 있습니다. 위의 요약 표: 24px 미만 텍스트의 경우 4.5:1 대비, 24px보다 큰 텍스트의 경우 3:1, 19px 이상의 굵은 텍스트, 아이콘 및 기타 UI 요소입니다. 이 기사에서 Oliver Schöndorfer가 공유한 이미지: https://pimpmytype.com/color-contrast/ 단순한? 실제로는 그렇지 않습니다. WCAG 2.2 대비는 인간 시각 의 복잡성을 고려하지 않고 텍스트 색상의 휘도(즉, 방출된 빛의 강도)와 배경 색상 간의 비율을 분석하는 수학적 모델을 사용하여 계산됩니다 . 결과적으로 이 모델을 기반으로 하는 도구에서 '접근 가능'하다고 간주되는 일부 조합은 실제로 접근할 수 없습니다. 새로운 지침 업데이트(WCAG 3.0?)가 나올 때까지 Andrew Somers가 제안한 APCA ( Accessible Perceptual Contrast Algorithm )를 포함한 다른 모델이 논의되고 있습니다. 다음은 두 모델의 차이점에 대한 몇 가지 예입니다. 일부 텍스트-배경 대비가 비교되었습니다. 식별하기 쉬운 일부는 WCAG를 통과하지 못하는 반면, 읽기 어려운 일부는 통과합니다. 기사에서 가져온 예: https://blog.datawrapper.de/color-contrast-check-data-vis-wcag-apca/ 요컨대 초기 점검을 넘어 사용자를 대상으로 테스트하는 것이 좋습니다. 즉각적이지는 않을 수도 있지만, 마음에 들고 접근하기 쉬운 색상 팔레트를 찾는 것은 그리 어렵지 않습니다(또한 각 색상이 어떻게 사용되는지에 따라 다르기 때문입니다!). 각각 5가지 색상으로 구성된 3가지 팔레트입니다. Venngage 도구 로 생성된 임의의 팔레트 예입니다 . 유용한 도구 Randoma11y는 접근 가능한 색상 쌍(WCAG)을 생성합니다. 대비 그리드를 사용 하면 좋은 대비(WCAG)를 보장하는 팔레트의 가능한 모든 교차점을 볼 수 있습니다. Figma 에 사용할 수 있는 플러그인도 있습니다 . 대비 찾기는 초기에 접근할 수 없는 색상(WCAG)이 주어지면 접근 가능한 대안을 찾습니다. Colorsafe를 사용하면 배경색과 텍스트 스타일을 선택한 후 좋은 대비(WCAG)를 보장하는 텍스트 색상을 선택할 수 있습니다. Venngage는 시작 색상(WCAG)에서 생성된 액세스 가능한 팔레트를 생성할 수 있는 도구를 제공합니다 .” Whocanuse Whocanuse는 색맹이 있는 사람들이 텍스트-배경 조합을 어떻게 보는지 보여줍니다. 동일한 확인을 위해 Chrome 웹 장애 시뮬레이터 확장 프로그램도 매우 편리합니다. . APCA 대비 계산기는 인간의 시각적 인식을 고려하여 색상 쌍에 접근할 수 있는지 결정합니다. 흥미로운 것 주황색 배경의 역설. 집중할 측면으로 돌아가기 → 2. 타이포그래피 신중한 타이포그래피 사용으로 가장 큰 혜택을 받는 사람들 중에는 시력이 낮은 사람 뿐만 아니라 특정 학습 관련 인지 장애 (예: 난독증)가 있는 사람도 있습니다. 몇 가지 고려 사항은 다음과 같습니다. 텍스트 크기를 이상적으로 16px (12px 이상)로 설정합니다. 최소 줄 높이는 텍스트 크기의 1.5배를 선택합니다 . 좁은 열과 너무 긴 텍스트 줄은 피하세요 ( 한 줄당 약 70~80자 정도가 이상적). 정렬된 텍스트를 피합니다 . 짧은 문단 쓰기 . 기울임꼴, 밑줄, 모두 대문자 텍스트를 피하세요. 텍스트 가독성을 높이기 위해 사용자가 페이지를 확대 (최대 200%)할 수 있습니다. 본질적으로 이는 모든 유형의 사용자에 대해 웹 페이지의 텍스트 가독성을 향상시키는 모범 사례 와 다르지 않습니다 . 또 다른 조언은 서로 쉽게 혼동되지 않는 명확한 문자의 글꼴을 사용하라는 것입니다. 확인하고 확인할 몇 가지 글꼴 쌍은 다음과 같습니다. qp 디비 0O il1I rn, m 텍스트: "지각적 오독을 방지하는 글꼴을 사용하십시오. 글리프가 다른 글리프와 유사하게 나타나면 모호함이 생겨 읽기 속도에 영향을 줄 수 있습니다." 두 가지 다른 글꼴로 작성된 문자 C와 O, I, l, 1을 비교하여 기호가 문자 인식에 미치는 영향을 보여줍니다. 텍스트: "지각적으로 가까운 글자 쌍을 확인하세요." 너무 가까운 글자로 쓰여진 Cool은 대구로 읽을 수 있습니다. 내 # 100ThoughtsOnInclusiveDesign 에서 가져온 예 이러한 특성을 지닌 일부 글꼴은 다음과 같습니다. 산세리프 : Arial, Helvetica, Lucida Sans, Verdana, Tahoma, Comic Sans, Andika , Atkinson-Hyperlegible , Lexend ; 세리프: Times New Roman, Georgia, Book Antiqua; 난독증 사용자를 위해 특별히 제작된 하이브리드 : 난독증 글꼴 , EasyReading , Read Regula r. 몇 가지 통찰력: 글꼴의 접근성 및 가독성 영국 난독증 협회의 스타일 가이드 이 경우에도 '완벽한 레시피'는 없지만, 모범 사례 작성이나 글꼴 유형이 시각적으로 즐거운 디자인에 장애가 되어서는 안 됩니다. 집중할 측면으로 돌아가기 → 3. 제목 제목은 페이지 구조를 이해하는 데 도움이 됩니다. 다양한 제목 유형의 시각적 모양은 정보의 계층 구조를 이해하는 데 도움이 되며 동시에 의미 론적 수준(H1~H6)에서 화면 판독기를 사용하는 사용자가 페이지에 있는 정보의 논리적 순서를 이해하는 데 도움이 됩니다 . 그러나 약간의 혼란과 몇 가지 신화 가 있습니다 . 예를 들어, 좋은 관행임에도 불구하고 WCAG는 항상 H1이 있어야 하며 하나만 있어야 한다고 명시적으로 제안하지 않습니다 . 이는 WCAG 실패를 나타냅니다. 제목으로 나타나는 텍스트에는 태그가 지정되지 않았습니다. 제목의 논리적 순서가 존중되지 않습니다. 제목은 섹션을 설명하지 않습니다. 더 잘 이해할 수 있는 것 이 기사에서는 몇 가지 명확성을 제공합니다. 집중할 측면으로 돌아가기 → 4a. 이미지 페이지의 시각적 매력을 높이는 또 다른 중요한 요소는 이미지 입니다 . 이는 시각 장애가 있는 사용자는 접근할 수 없지만 연결 속도가 느린 페이지를 탐색하는 사용자에게는 매우 중요합니다. 여기서의 기술적 솔루션은 간단합니다. an : 이미지에 대한 설명(이미지가 완전히 로드되기 전에 화면 판독기로 읽거나 볼 수 있음)입니다. 이 경우 복잡한 부분은 좋은 설명을 작성하는 것 입니다 . 다음은 몇 가지 간단한 제안 사항입니다. 이미지가 순전히 장식용 이고 중요한 정보를 전달하지 않는 경우 대체 텍스트를 비워 두세요 . 간결하게 설명하세요. 묘사된 주제 , 무슨 일이 일어나고 있는지, 어떤 맥락 에서 일어나는지 설명하세요 . 심미적인 정보가 아닌 기능적인 정보를 제공하십시오 . 예를 들어 이미지가 로고인 경우 이를 표시해야 하며, 로고라는 사실을 생략하고 자세한 설명은 지양해야 합니다. 설명 시작 부분에 '이미지'를 생략할 수 있습니다 ( 스크린 리더 자체가 코드를 해석하여 사용자에게 알립니다). 상황에 맞는 설명을 작성하세요 (로마의 성 베드로 광장 사진은 관점이 종교적이거나 건축적인 경우 다르게 설명해야 할 수도 있습니다!). 기타 유용한 제안: 대체 텍스트 작성 여부와 작성 방법을 결정하는 방법: 대체 결정 트리 이미지 설명을 작성하는 방법 이미지 접근성을 위한 대체 텍스트 설명을 작성하는 방법 4b. 아이콘 좋은 대체 텍스트는 아이콘 에도 중요합니다 . 그러나 아이콘은 시각적인 관점 (너무 작거나 얇은 선이 아닌 배경과 적절한 대비)뿐만 아니라 특히 의사소통의 관점 에서도 접근 가능해야 합니다 . 일부 사용자 유형(인지 장애가 있는 사용자 또는 매우 어리거나 노인 사용자)의 경우 아이콘이 명확하지 않거나 쉽게 이해되지 않을 수 있습니다. 이 경우에도 정해진 규칙은 없으며(그러나 기능을 나타내는 레이블을 함께 첨부하는 것이 좋습니다) 이상적인 접근 방식은 사용자로부터 피드백을 수집하는 것입니다. 물고기처럼 보이도록 세부 묘사가 포함된 카메라 아이콘을 그립니다. 그 옆에는 '카메라인가, 물고기인가?'라는 문구가 적혀 있다. 내 # 100ThoughtsOnInclusiveDesign 에서 가져온 예 4c. 멀티미디어 접근성이 뛰어난 디자인에는 비디오, 오디오 및 차트나 지도와 같은 복잡한 개체가 포함될 수 있습니다. 일반적으로 이러한 개체를 자동으로 재생하지 않도록 주의하십시오(사용자가 항상 중지 및 재생을 제어할 수 있는지 확인 ). 이 경우에도 WCAG 2.2 지침이 도움이 됩니다. 매우 대략적으로 요약하려면 비디오의 캡션 과 오디오 설명 , 오디오 콘텐츠의 필사본을 기억하세요 . 복잡한 이미지(차트, 다이어그램, 순서도, 지도)를 다루는 경우 대체 텍스트를 작성해야 합니다( 이를 수행하는 방법에 대한 몇 가지 유용한 제안은 다음과 같습니다 ). 집중할 측면으로 돌아가기 → 5. 집중 키보드를 통해 사이트를 탐색하는 경우 현재 위치를 이해하는 것이 중요합니다. 상태는 :focus표시기 역할을 합니다. 시각적 개입을 디자인할 수 있는 덜 분명한 작은 것 중 하나입니다. 테두리, 배경, 그림자 또는 밑줄은 사이트 스타일 (또는 디자인 시스템) 에 맞춰 생성될 수 있습니다 . 요소의 초점이 표시되는 방식에 대한 지침은 AAA 수준(가장 포괄적)이며, 초점이 맞지 않는 요소보다 최소 2 CSS 픽셀 더 두꺼운 테두리를 사용하고 대비가 최소 3이어야 한다고 제안합니다. 1 초점이 맞춰진 것과 초점이 ​​맞지 않은 것 사이. 별 5개, 주황색 3개, 주황색 윤곽선만 있는 2개. 중앙 별은 진한 파란색 테두리가 있는 주황색입니다. WCAG 2.2에서 가져온 예 - 성공 기준 2.4.13 초점 모양(별 3개 초점이 기준을 통과함) 자세한 내용은 다음을 참조하세요. 이 문서에서는 포커스 상태를 디자인하는 방법을 설명합니다. 키보드 상호 작용 디자인 시각적이지는 않지만 디자인 측면에서 매우 관련성이 높은 측면에는 키보드를 사용하는 사용자의 경험이 어떻게 되어야 하는지 , 요소가 어떤 순서로 초점을 맞춰야 하는지 에 대한 계획이 포함됩니다 . 실제 구현은 개발자의 몫이지만 이를 수행하는 방법에 대한 지침이 제공될 수 있습니다. 정보가 포함된 카드는 각 섹션 옆에 순서를 나타내는 점진적인 숫자와 화살표가 있습니다. A11y 주석 키트 의 예 Figma의 두 가지 주석 키트는 요소 순서 설계에 이미 준비되어 있고 사용할 수 있습니다. A11y 주석 키트 ( Indeed 및 Stephanie Hagadorn 제작) Intopia의 접근성 주석 키트 , By Intopia 집중할 측면으로 돌아가기 → 6. 위치와 근접성 이 측면은 미학 자체보다 사이트의 명확성을 더 많이 고려합니다. 어떤 사람들은 화면을 매우 제한적으로 볼 수 있습니다. 터널 시력이 있어서 시야의 작은 부분만 볼 수 있거나 페이지를 더 잘 보기 위해 돋보기를 사용하기 때문입니다. 두 경우 모두 전체적인 시각이 부족합니다 . 페이지에서 마이크로인터랙션을 디자인하는 경우 사용자가 현재 보고 있는 섹션 내에서 상황에 맞게 발생하도록 하는 것이 좋습니다 . 예를 들어 장바구니에 항목을 추가하면 오른쪽 상단의 장바구니 아이콘뿐만 아니라 방금 사용한 버튼의 상태도 변경되어야 합니다.