• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

Front-end/Accessibility13

728x90
[웹접근성]aria-lable 속성과 title 속성의 차이점과 쓰임새 웹접근성 고려 시 aria-label와 title를 언제 어떻게 쓰는지 비슷해서 헷갈릴 수 있어 차이점과 쓰임새를 알아보도록 하겠습니다.  aria-label과 title은 추가정보를 제공하지만 사용 방법과 목적성이 다릅니다. title 속성title은 추가 정보를 제공하는 툴팁(도구 설명)이라고 보시면 됩니다.예를 들어 '바로가기'란 버튼이 있을경우 클릭하면 어디로 가는 버튼인지에 대한 추가 설명을 제공할 때 사용합니다.도움말 개념입니다. 홈으로 위처럼 버튼 텍스트에 대한 추가 설명을 제공하기 위해 사용되는것이 title 속성입니다.button 태그에만 해당되는것은 아니고, 이해하기 쉽게 button 태그를 예시로 했습니다.aria-label 속성aria-label은 스크린 리더와 같은 보조 기술을 사..
[웹접근성]웹접근성을 고려한 탭메뉴 만들기 웹 접근성을 고려한 탭 메뉴는 키보드 사용자, 스크린 리더 사용자 등 다양한 사용자들이 접근할 수 있도록 구성해야 합니다.탭 메뉴 구성 요소탭 컨테이너: 탭 메뉴를 감싸는 컨테이너.탭 리스트: 각 탭 버튼을 포함하는 리스트.탭 버튼: 클릭 또는 키보드로 선택할 수 있는 버튼.탭 패널: 각 탭 버튼이 활성화될 때 보여줄 콘텐츠.접근성을 고려한 HTML 구조다음은 웹 접근성을 고려한 탭 메뉴의 기본 HTML 구조입니다. 탭 1 탭 2 탭 3 탭 1의 내용 탭 2의 내용 탭 3의 내용HTML 구조role="tablist": 탭 버튼들을 감싸는 컨테이너로 역할을 지정합니다.role="tab": 각각의 탭 버튼에 역할을 지정합니다.role="tabpanel": 각각의 탭 패널에 역..
[웹접근성]한국웹접근성인증평가원이 인증한 사이트 목록 지능정보화기본법 제 47조(장애인.고령자 등의 정보통신접근성 품질인증 등) 및 동법 시행령 제3조등에 의거하여 과학기술정보통신부로부터 공인된 인증기관인 (사)한국장애인단체총연합회 한국웹접근성인증평가원이 인증한 사이트 목록을 보시려면 아래 링크에서 확인가능합니다. http://www.wa.or.kr/board/list.asp?BoardID=0006 WA : 한국웹접근성인증평가원 (목록)" data-og-description="" data-og-host="www.wa.or.kr" data-og-source-url="http://www.wa.or.kr/board/list.asp?BoardID=0006" data-og-url="http://www.wa.or.kr/board/list.asp?BoardID=0006..
[웹접근성]table 웹접근성 예시와 설명(scope) 웹 접근성은 다양한 사용자, 특히 장애가 있는 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 하는 것을 의미합니다. 표(table)를 사용할 때 웹 접근성을 높이기 위해 다음과 같은 예시와 지침을 따를 수 있습니다.다음 표는 2024년 각 분기별 매출 현황을 보여줍니다. 매출액과 성장률이 포함되어 있습니다. /* 표 설명 */ 2024년도 분기별 매출 현황 /* 표 제목 */ 분기 매출액 (백만 달러) 성장률 (%) 1분기 10 5% 2분기 12 20% 3분기 15 25% 4분기 20 33% ..
[웹접근성]html 기본태그에도 역할 속성 (role)을 사용해야할까? role 속성을 명시적으로 추가해야 하는 경우를 살펴보겠습니다. 기본적으로 HTML 요소들은 자신의 태그에 따라 적절한 역할(role)을 가지고 있기 때문에 대부분의 경우에는 별도로 role 속성을 지정할 필요가 없습니다. 하지만 몇 가지 상황에서는 추가적인 role 속성을 사용하여 요소의 역할을 명확히 할 수 있습니다. 결론을 먼저 말하자면, 기본적인 태그에 똑같이 role 을 지정할 필요는 없습니다.1. button 요소사용 예시: 확인추가 고려 사항: 요소는 기본적으로 버튼 역할을 가지므로 일반적으로 별도의 role="button"을 지정할 필요는 없습니다. 단, 특정 상황에서 role 속성을 사용하여 추가적인 의미를 전달할 필요가 있을 수 있습니다 (예: 사용자 정의 버튼 디자인).2. inpu..
[웹접근성]웹 접근성을 높이기 위한 주요 HTML 속성과 ARIA 속성 주요 HTML 속성alt: 이미지의 대체 텍스트를 제공합니다.title: 요소에 대한 추가 정보나 설명을 제공합니다 (툴팁으로 표시될 수 있음).href: 링크의 목적지 URL을 지정합니다.src: 이미지, 오디오, 비디오 등의 자원의 경로를 지정합니다.id: 요소의 고유 식별자를 제공합니다.class: 요소를 스타일링하기 위한 클래스 이름을 지정합니다.style: 요소에 인라인 스타일을 지정합니다.tabindex: 요소의 탭 순서를 명시적으로 지정합니다.type: input 요소의 타입을 지정합니다 (예: text, checkbox, radio 등).name: input 요소의 이름을 지정합니다.ARIA 속성ARIA (Accessible Rich Internet Applications)는 웹 콘텐츠와 ..
[웹접근성]슬라이더, 프로그레스바에 'aria-valuenow' 속성을 사용하자 aria-valuenow는 ARIA(Accessible Rich Internet Applications) 속성 중 하나로, 접근성 향상을 위해 사용됩니다. 이 속성은 주로 슬라이더, 프로그레스바, 스핀버튼 같은 위젯에서 현재 값을 나타내는 데 사용됩니다. 이는 시각 장애가 있는 사용자들이 화면 읽기 소프트웨어(screen reader)를 통해 위젯의 현재 상태를 이해할 수 있도록 돕습니다. 사용 예제슬라이더 (Slider):프로그레스바 (Progress Bar): 60%관련 ARIA 속성aria-valuemin: 위젯에서 가질 수 있는 최소값을 나타냅니다.aria-valuemax: 위젯에서 가질 수 있는 최대값을 나타냅니다.aria-valuetext: 시각적으로는 값이 아닌 텍스트로 상태를 설명할 ..
[Accessibility]웹접근성 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2" 강화된 항목 한국형 웹 콘텐츠 접근성 지침인 KWCAG (Korean Web Content Accessibility Guidelines)는 시간이 지남에 따라 업데이트되어 개정판이 발표되었습니다. 여기서 "한국형 웹 콘텐츠 접근성 지침 2.1"과 "한국형 웹 콘텐츠 접근성 지침 2.2"의 차이를 요약하면 다음과 같습니다: 최신 웹 표준 및 기술 대응: KWCAG 2.1은 초기 버전으로, 주로 HTML, CSS, JavaScript 등의 기술을 기반으로 합니다. 반면 KWCAG 2.2는 보다 최신의 웹 표준 및 기술에 대응하도록 업데이트되어 있습니다. 예를 들어, 미디어 콘텐츠의 접근성, 동적 콘텐츠의 관리, 사용자 경험의 향상 등에 대한 추가적인 지침이 포함되어 있습니다.기술적 요구사항의 확대: KWCAG 2.2는 ..
[웹접근성]모달창(레이어팝업) 포커스(focus) 회귀하려면? 모바일 스크린 리더 환경에서 활성화된 레이어(모달 창) 닫기 버튼을 실행할 때, 초점을 해당 레이어를 불러온 콘텐츠로 돌리는 방법을 설명하겠습니다. 이를 위해 JavaScript와 ARIA 속성을 사용하여 웹 접근성을 보장할 수 있습니다. 단계별 구현 방법HTML 구조 설정:모달을 열기 위한 버튼모달 레이어모달 닫기 버튼JavaScript로 포커스 관리:모달을 열 때 모달 내의 첫 번째 포커스 가능한 요소에 포커스를 설정모달을 닫을 때 포커스를 모달을 연 버튼으로 복귀HTML 예시모달 열기 모달 타이틀 닫기 모달 내용이 여기에 표시됩니다. CSS 예시.modal { display: none; /* 기본적으로 모달은 보이지 않음 */ positi..
[웹접근성]웹접근성 속성과 예제 웹 접근성을 높이기 위해 HTML과 WAI-ARIA에서 제공하는 다양한 속성을 사용할 수 있습니다. 이 속성들은 장애가 있는 사용자들이 웹 콘텐츠를 더 쉽게 접근하고 상호작용할 수 있도록 돕습니다. 주요 웹 접근성 속성들은 다음과 같습니다.   HTML 접근성 속성alt (대체 텍스트)사용 요소: 설명: 이미지를 설명하는 텍스트를 제공하여 시각 장애인 사용자들이 이미지를 이해할 수 있도록 돕습니다.예시: title (제목)사용 요소: 대부분의 HTML 요소설명: 요소에 대한 추가 정보를 툴팁 형식으로 제공합니다.예시: 💾label (레이블)사용 요소: 설명: 입력 요소에 레이블을 제공하여 입력 필드의 용도를 설명합니다.예시: 이름:role (역할)사용 요소: 대부분의 HTML 요소설명: 요소의 역할을 ..
[웹접근성]aria-disabled 속성 aria-disabled 속성은 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 명세에서 제공하는 속성 중 하나로, 사용자 인터페이스 요소가 현재 비활성화되었음을 나타냅니다. 이는 주로 HTML 요소가 현재 사용 불가능한 상태일 때 시각적 효과뿐만 아니라 스크린 리더를 통해서도 이를 사용자에게 전달하기 위해 사용됩니다. aria-disabled 속성의 사용aria-disabled 속성은 true 또는 false 값을 가질 수 있습니다.aria-disabled="true": 요소가 비활성화되어 있고, 상호작용이 불가능함을 나타냅니다.aria-disabled="false": 요소가 활성화되어 있고, 상호작용이 가능..
[웹접근성]WCAG와 KWCAG의 가장 큰 차이 WCAG(Web Content Accessibility Guidelines)와 KWCAG(Korean Web Content Accessibility Guidelines)는 모두 웹 콘텐츠의 접근성을 보장하기 위한 가이드라인이지만, 적용 범위와 세부 사항에서 차이가 있습니다. KWCAG는 WCAG를 기반으로 한국의 상황에 맞게 조정된 버전입니다. WCAG (Web Content Accessibility Guidelines)국제 표준: WCAG는 W3C(World Wide Web Consortium)에서 개발한 국제 표준입니다.버전: 최신 버전은 WCAG 2.1이며, 과거에 WCAG 1.0과 WCAG 2.0이 있었습니다. WCAG 2.2는 개발 중입니다.구성: 4가지 주요 원칙(인지할 수 있음, 운용할 수 ..
[웹접근성]웹접근성(a11y) 이란? 웹 접근성(Web Accessibility)은 장애가 있는 사람들을 포함한 모든 사용자가 웹사이트와 웹 애플리케이션을 이용할 수 있도록 보장하는 것입니다. 이는 시각, 청각, 신체, 인지, 언어, 학습 등 다양한 장애를 가진 사람들이 웹 콘텐츠에 접근하고 상호작용할 수 있도록 하는 것을 목표로 합니다.  "a11y"는 "accessibility"의 첫 글자 'a'와 마지막 글자 'y' 사이에 있는 11개의 문자를 나타내는 줄임말입니다. 이는 웹 접근성(웹 콘텐츠 접근성)을 지칭하는 약어로서, 모든 사용자가 웹 사이트나 애플리케이션을 이해하고 사용할 수 있도록 하는 개념을 포함합니다. https://www.wa.or.kr/m1/sub1.asp WA : 한국웹접근성인증평가원" data-og-descripti..
반응형