aria-label은 화면에 텍스트가 표시되지 않는 요소에 대한 텍스트 대안을 제공하는데 사용해야 합니다. 정의 aria-label은 WAI-ARIA 사양에 정의된 속성입니다. 이 사양은 기본 HTML을 확장하여 HTML 요소가 접근성 트리로 "번역"되는 방식을 변경할 수 있도록 합니다. 기본적으로 HTML 요소는 텍스트 콘텐츠를 접근성 레이블로 사용합니다. 요소에 aria-label이 있는 경우 접근성 이름은 속성에 전달된 문자열이 됩니다. 보내기 // 접근 가능한 이름 : 보내기 보내기 // 접근 가능한 이름 : 이메일 보내기 사용법 HTML 요소에 aria-label을 추가하여 사용할 수 있습니다. 보이스오버는 이 버튼을 "메뉴 버튼"으로 읽습니다. aria-label과 함께 사용할 수 있는 요소 ..
강력한 구조와 사용자 제어 기능을 제공하여 접근 가능한 캐러셀 위젯을 구현하세요. 구조 : 캐러셀에 시맨틱 구조를 사용하여 보조 기술의 적절한 기능을 지원합니다. 기능 : 캐러셀 항목을 표시하고 알리는 기능을 추가합니다. 애니메이션 : 항목 간에 전환 애니메이션을 추가하고 사용자가 중단했다가 다시 시작할 수 있도록 하세요. 스타일링 : 캐러셀의 스타일을 지정하여 모든 사람이 쉽게 사용할 수 있고 읽을 수 있도록 하세요. 예제 캐러셀의 전체 작동 예제와 전체 코드도 참조하세요. 캐러셀이란 무엇인가요? 캐러셀은 한 번에 하나씩 항목 모음을 표시합니다. "슬라이드쇼" 및 "슬라이더"라고도 합니다. 캐러셀의 일반적인 용도로는 뉴스 헤드라인 스크롤, 홈 페이지의 추천 기사, 이미지 갤러리 등이 있습니다. 무엇이 ..
폼은 일반적으로 웹사이트와 웹 애플리케이션에서 사용자 상호 작용을 제공하는 데 사용됩니다. 예를 들어 로그인, 등록, 댓글 작성, 구매 등이 이에 해당합니다. 이 튜토리얼에서는 접근성이 높은 폼 양식을 만드는 방법을 보여줍니다. 처리되는 폼이 클라이언트 측이든 서버 측이든 모든 양식에 동일한 개념이 적용됩니다. 기술적인 고려 사항 외에도 사용자는 일반적으로 간단하고 짧은 폼을 선호합니다. 사용자에게 거래 또는 프로세스를 완료하는 데 필요한 최소한의 정보만 입력하도록 요청하세요. 관련성이 없거나 과도한 데이터를 요청하면 사용자가 폼 작성을 포기할 가능성이 높습니다. 레이블 컨트롤 : 요소를 사용하고 특정한 경우에는 각 폼 컨트롤을 식별하기 위해 다른 메커니즘 (예: WAI-ARIA, title 속성 등)을..
데이터 표는 그리드에서 논리적 관계로 데이터를 구성하는 데 사용됩니다. 접근 가능한 표에는 헤더 셀과 데이터 셀을 나타내고 그 관계를 정의하는 HTML 마크업이 필요합니다. 보조 기술은 이 정보를 사용하여 사용자에게 컨텍스트를 제공합니다. 표에 액세스할 수 있도록 하려면 헤더 셀은 로, 데이터 셀은 로 마크업해야 합니다. 보다 복잡한 테이블의 경우 scope, id 및 headers 속성을 사용하여 명시적인 연결이 필요할 수 있습니다. 이 자습서에서는 표에 적절한 구조적 마크업을 적용하는 방법을 보여줍니다. 여기에는 다음 페이지가 포함됩니다. 행 또는 열에 대해 하나의 헤더가 있는 표 구분하기 쉬운 콘텐츠가 있는 표의 경우 헤더 셀은 로, 데이터 셀은 요소로 표시합니다. 헤더가 두 개인 표에는 행 헤더와..
이미지에는 이미지가 나타내는 정보 또는 기능을 설명하는 대체 텍스트가 있어야 합니다. 이렇게 하면 다양한 장애를 가진 사람들이 이미지를 사용할 수 있습니다. 이 튜토리얼에서는 이미지의 목적에 따라 적절한 대체 텍스트를 제공하는 방법을 설명합니다. 정보 제공 이미지 : 개념과 정보를 그래픽으로 표현하는 이미지로, 일반적으로 그림, 사진 및 일러스트레이션이 해당됩니다. 대체 텍스트는 이미지가 제시하는 필수 정보를 전달하는 간단한 설명 정도여야 합니다. 장식 이미지 : 이미지의 유일한 목적이 페이지 이해에 중요한 정보를 전달하는 것이 아니라 페이지에 시각적 장식을 추가하는 것일 경우 빈 값의 대체 텍스트(alt="")를 제공합니다. 기능적 이미지 : 링크 또는 버튼으로 사용되는 이미지의 대체 텍스트는 시각적 ..
메뉴는 네비게이션에 사용되며 웹 페이지 작동의 중요한 부분인 기능을 제공합니다. 구조 : 메뉴의 구조를 반영하고 적절한 레이블을 지정하는 방식으로 메뉴를 마크업합니다. 스타일링 : 일반적으로 인식되는 디자인 패턴을 사용하여 메뉴와 메뉴 항목의 상태를 구분합니다. 플라이아웃 메뉴 : 플라이아웃(드롭다운) 하위 메뉴를 마우스와 키보드로 적절하게 사용할 수 있는지 확인합니다. 애플리케이션 메뉴 : 데스크톱 애플리케이션 메뉴와 유사하도록 특정 마크업 및 키보드 동작을 추가합니다. 이것이 왜 중요한가요? 네비게이션 메뉴는 웹사이트의 기본 구조를 반영합니다. 애플리케이션 메뉴는 애플리케이션의 필수 기능에 대한 액세스를 제공합니다. 따라서 메뉴는 웹 페이지와 애플리케이션의 중요한 부분이며 디자인 및 개발 과정에서 특..
잘 구조화된 콘텐츠는 보다 효율적인 탐색과 처리를 가능하게 합니다. 웹 페이지와 애플리케이션에서 탐색 및 방향성을 개선하려면 HTML과 WAI-ARIA를 사용하세요. 페이지 영역 (Page Regions) : HTML5 및 WAI-ARIA 역할을 사용하여 웹 페이지에서 영역을 식별하고 마크업합니다. 영역 라벨링 (Labeling Regions) : 사용자가 영역을 구분하고 액세스할 수 있도록 영역에 레이블을 지정합니다. 제목 (Headings) : 제목을 추가하고 논리적으로 중첩하여 웹 페이지의 섹션에 관계와 중요도에 따라 레이블을 지정합니다. 콘텐츠 구조 (Content Structure) : 적절하고 의미 있는 요소를 사용하여 페이지의 콘텐츠를 마크업합니다. 왜 중요한가? 예를 들어, 잘 구성된 콘텐..
이 튜토리얼 모음에서는 장애인이 액세스할 수 있고 모든 사람에게 더 나은 사용자 경험을 제공하는 웹 콘텐츠를 개발하는 방법을 보여 줍니다. 이 튜토리얼은 다음과 같은 다양한 사람들이 사용할 수 있도록 설계되었습니다. 웹 개발자는 여러 가지 일반적인 코딩 문제에 대한 지침과 상용구 솔루션을 찾을 수 있습니다. 웹 디자이너는 포괄적인 디자인이 내장된 웹 페이지 구성 요소를 만드는 방법을 배울 수 있습니다. 웹 강사는 사람들에게 접근 가능한 웹 디자인 및 개발에 대해 가르칠 수 있는 예제를 찾을 수 있습니다. 콘텐츠 작성자는 접근 가능한 방식으로 콘텐츠를 준비하기 위한 개념과 기술을 배웁니다. 프로젝트 관리자는 프로젝트에 접근성을 통합하는 방법을 이해할 수 있습니다. 이 튜토리얼은 웹 프로젝트의 일반적인 작업..
WWDC23에서 발표된 사파리 브라우저에서 사용할 수 있는 CSS 최신 사항 소개에 대한 영상 내용을 간단히 요약해 보겠습니다. 원본 영상 링크 : https://developer.apple.com/videos/play/wwdc2023/10121 크게 4개의 범위로 분류하여 소개했네요. 레이아웃 개선 사항 다양한 색상 사용 유용한 선택자 추가 타이포그라피 개선 사항들 이번에 소개한 CSS 최신 사항들이 아직 모든 브라우저에서 지원하지 않아요. 직접 확인 해보고 싶다면, Safari Technology Preview를 설치하시면 됩니다. 1. 레이아웃 개선 사항 Masonry 레이아웃 가장 먼저 소개된 내용은 grid 레이아웃을 적용할 때, 흔히 핀터레스트 UI라고 부르는 메이슨리(Masonry) UI를 ..
