aria-label은 화면에 텍스트가 표시되지 않는 요소에 대한 텍스트 대안을 제공하는데 사용해야 합니다. 정의 aria-label은 WAI-ARIA 사양에 정의된 속성입니다. 이 사양은 기본 HTML을 확장하여 HTML 요소가 접근성 트리로 "번역"되는 방식을 변경할 수 있도록 합니다. 기본적으로 HTML 요소는 텍스트 콘텐츠를 접근성 레이블로 사용합니다. 요소에 aria-label이 있는 경우 접근성 이름은 속성에 전달된 문자열이 됩니다. 보내기 // 접근 가능한 이름 : 보내기 보내기 // 접근 가능한 이름 : 이메일 보내기 사용법 HTML 요소에 aria-label을 추가하여 사용할 수 있습니다. 보이스오버는 이 버튼을 "메뉴 버튼"으로 읽습니다. aria-label과 함께 사용할 수 있는 요소 ..
폼은 일반적으로 웹사이트와 웹 애플리케이션에서 사용자 상호 작용을 제공하는 데 사용됩니다. 예를 들어 로그인, 등록, 댓글 작성, 구매 등이 이에 해당합니다. 이 튜토리얼에서는 접근성이 높은 폼 양식을 만드는 방법을 보여줍니다. 처리되는 폼이 클라이언트 측이든 서버 측이든 모든 양식에 동일한 개념이 적용됩니다. 기술적인 고려 사항 외에도 사용자는 일반적으로 간단하고 짧은 폼을 선호합니다. 사용자에게 거래 또는 프로세스를 완료하는 데 필요한 최소한의 정보만 입력하도록 요청하세요. 관련성이 없거나 과도한 데이터를 요청하면 사용자가 폼 작성을 포기할 가능성이 높습니다. 레이블 컨트롤 : 요소를 사용하고 특정한 경우에는 각 폼 컨트롤을 식별하기 위해 다른 메커니즘 (예: WAI-ARIA, title 속성 등)을..
데이터 표는 그리드에서 논리적 관계로 데이터를 구성하는 데 사용됩니다. 접근 가능한 표에는 헤더 셀과 데이터 셀을 나타내고 그 관계를 정의하는 HTML 마크업이 필요합니다. 보조 기술은 이 정보를 사용하여 사용자에게 컨텍스트를 제공합니다. 표에 액세스할 수 있도록 하려면 헤더 셀은 로, 데이터 셀은 로 마크업해야 합니다. 보다 복잡한 테이블의 경우 scope, id 및 headers 속성을 사용하여 명시적인 연결이 필요할 수 있습니다. 이 자습서에서는 표에 적절한 구조적 마크업을 적용하는 방법을 보여줍니다. 여기에는 다음 페이지가 포함됩니다. 행 또는 열에 대해 하나의 헤더가 있는 표 구분하기 쉬운 콘텐츠가 있는 표의 경우 헤더 셀은 로, 데이터 셀은 요소로 표시합니다. 헤더가 두 개인 표에는 행 헤더와..
이미지에는 이미지가 나타내는 정보 또는 기능을 설명하는 대체 텍스트가 있어야 합니다. 이렇게 하면 다양한 장애를 가진 사람들이 이미지를 사용할 수 있습니다. 이 튜토리얼에서는 이미지의 목적에 따라 적절한 대체 텍스트를 제공하는 방법을 설명합니다. 정보 제공 이미지 : 개념과 정보를 그래픽으로 표현하는 이미지로, 일반적으로 그림, 사진 및 일러스트레이션이 해당됩니다. 대체 텍스트는 이미지가 제시하는 필수 정보를 전달하는 간단한 설명 정도여야 합니다. 장식 이미지 : 이미지의 유일한 목적이 페이지 이해에 중요한 정보를 전달하는 것이 아니라 페이지에 시각적 장식을 추가하는 것일 경우 빈 값의 대체 텍스트(alt="")를 제공합니다. 기능적 이미지 : 링크 또는 버튼으로 사용되는 이미지의 대체 텍스트는 시각적 ..
메뉴는 네비게이션에 사용되며 웹 페이지 작동의 중요한 부분인 기능을 제공합니다. 구조 : 메뉴의 구조를 반영하고 적절한 레이블을 지정하는 방식으로 메뉴를 마크업합니다. 스타일링 : 일반적으로 인식되는 디자인 패턴을 사용하여 메뉴와 메뉴 항목의 상태를 구분합니다. 플라이아웃 메뉴 : 플라이아웃(드롭다운) 하위 메뉴를 마우스와 키보드로 적절하게 사용할 수 있는지 확인합니다. 애플리케이션 메뉴 : 데스크톱 애플리케이션 메뉴와 유사하도록 특정 마크업 및 키보드 동작을 추가합니다. 이것이 왜 중요한가요? 네비게이션 메뉴는 웹사이트의 기본 구조를 반영합니다. 애플리케이션 메뉴는 애플리케이션의 필수 기능에 대한 액세스를 제공합니다. 따라서 메뉴는 웹 페이지와 애플리케이션의 중요한 부분이며 디자인 및 개발 과정에서 특..
이 튜토리얼 모음에서는 장애인이 액세스할 수 있고 모든 사람에게 더 나은 사용자 경험을 제공하는 웹 콘텐츠를 개발하는 방법을 보여 줍니다. 이 튜토리얼은 다음과 같은 다양한 사람들이 사용할 수 있도록 설계되었습니다. 웹 개발자는 여러 가지 일반적인 코딩 문제에 대한 지침과 상용구 솔루션을 찾을 수 있습니다. 웹 디자이너는 포괄적인 디자인이 내장된 웹 페이지 구성 요소를 만드는 방법을 배울 수 있습니다. 웹 강사는 사람들에게 접근 가능한 웹 디자인 및 개발에 대해 가르칠 수 있는 예제를 찾을 수 있습니다. 콘텐츠 작성자는 접근 가능한 방식으로 콘텐츠를 준비하기 위한 개념과 기술을 배웁니다. 프로젝트 관리자는 프로젝트에 접근성을 통합하는 방법을 이해할 수 있습니다. 이 튜토리얼은 웹 프로젝트의 일반적인 작업..
