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

웹접근성12

728x90
[웹접근성]aria-lable 속성과 title 속성의 차이점과 쓰임새 웹접근성 고려 시 aria-label와 title를 언제 어떻게 쓰는지 비슷해서 헷갈릴 수 있어 차이점과 쓰임새를 알아보도록 하겠습니다.  aria-label과 title은 추가정보를 제공하지만 사용 방법과 목적성이 다릅니다. title 속성title은 추가 정보를 제공하는 툴팁(도구 설명)이라고 보시면 됩니다.예를 들어 '바로가기'란 버튼이 있을경우 클릭하면 어디로 가는 버튼인지에 대한 추가 설명을 제공할 때 사용합니다.도움말 개념입니다. 홈으로 위처럼 버튼 텍스트에 대한 추가 설명을 제공하기 위해 사용되는것이 title 속성입니다.button 태그에만 해당되는것은 아니고, 이해하기 쉽게 button 태그를 예시로 했습니다.aria-label 속성aria-label은 스크린 리더와 같은 보조 기술을 사..
[운영일지]웹미니 라이프 스킨 1.0.1 (웹접근성,권장사항,SEO) 웹미니 라이프 스킨 1.0.1업데이트 내역 웹접근성1. 색상 명도대비 수정 (다크모드 포함) 2. 백그라운드 이미지 대체 문구 삽입 (스킨 외 코드 : 티스토리-댓글,방명록,블로그소개 영역) 3. 이미지 alt 강제 삽입 4. 메인 슬라이드 페이징 포커스 영역 수정 5. 티스토리 코드(iframe 'title' 누락 부분 강제 삽입) 6. 최근/인기/댓글 웹접근성 코드 추가 및 마크업 변경 7. a링크 target 없는 경우 _self 자동 삽입 8. 링크 및 버튼 포커스영역 미흡사항 반영권장사항1. 페이징 이전,다음,... herf 없는경우 강제로 span 태그로 변경 2. 다크모드에서 이메일(링크) 색상 구분SEO1. canonical 동적으로 URL변경그 밖에 업데이트1. 메인 슬라이드 자동/정지 ..
[웹접근성]웹접근성을 고려한 탭메뉴 만들기 웹 접근성을 고려한 탭 메뉴는 키보드 사용자, 스크린 리더 사용자 등 다양한 사용자들이 접근할 수 있도록 구성해야 합니다.탭 메뉴 구성 요소탭 컨테이너: 탭 메뉴를 감싸는 컨테이너.탭 리스트: 각 탭 버튼을 포함하는 리스트.탭 버튼: 클릭 또는 키보드로 선택할 수 있는 버튼.탭 패널: 각 탭 버튼이 활성화될 때 보여줄 콘텐츠.접근성을 고려한 HTML 구조다음은 웹 접근성을 고려한 탭 메뉴의 기본 HTML 구조입니다. 탭 1 탭 2 탭 3 탭 1의 내용 탭 2의 내용 탭 3의 내용HTML 구조role="tablist": 탭 버튼들을 감싸는 컨테이너로 역할을 지정합니다.role="tab": 각각의 탭 버튼에 역할을 지정합니다.role="tabpanel": 각각의 탭 패널에 역..
[운영일지]웹미니 블로그 Ver10.6 웹접근성,SEO,권장사항 보완 웹미니 블로그 Ver10.6로 업데이트 완료.업데이트 내역1. 코드 정리 및 CSS수정 (레드 포인트 컬러 변경)2. 웹접근성 보완3. 블로그 권장사항 및 SEO 강화웹접근성 보완- 웹접근성 체크- 권장사항 보완- SEO 보완티스토리 기본 코드 접근 제한으로 성능 최적화는 불가능
[웹접근성]table 웹접근성 예시와 설명(scope) 웹 접근성은 다양한 사용자, 특히 장애가 있는 사용자가 웹 콘텐츠에 접근하고 사용할 수 있도록 하는 것을 의미합니다. 표(table)를 사용할 때 웹 접근성을 높이기 위해 다음과 같은 예시와 지침을 따를 수 있습니다.다음 표는 2024년 각 분기별 매출 현황을 보여줍니다. 매출액과 성장률이 포함되어 있습니다. /* 표 설명 */ 2024년도 분기별 매출 현황 /* 표 제목 */ 분기 매출액 (백만 달러) 성장률 (%) 1분기 10 5% 2분기 12 20% 3분기 15 25% 4분기 20 33% ..
[웹접근성]웹 접근성을 높이기 위한 주요 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..
[웹접근성]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..
반응형