부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍8. 키보드 사용 보장✅모든 기능은 키보드만으로도 사용할 수 있어야 한다 ✅마우스 오버 시 사용되는 아래 기능들에 대해서도 키보드 접근 시에도 동일한 기능이 수행되게 구현해야 한다- 마우스 오버 시 GNB의 서브메뉴 노출 기능- 자동 롤링 콘텐츠, 레이어를 노출하는 버튼 ✅ 또는 처럼 focus를 받을 수 없는 엘리먼트에 마우스 이벤트를 적용하면 안됨- focus를 받을 수 없으면 키보드로 접근이 불가하기 때문에 나 으로 대체하는 것이 좋다- 그런데, 엘리먼트에 href 어트리뷰트가 없으면 키보드 접근이 불가하므로, 반드시 사용해야 함- href 어트리뷰트가 있어도, onfocus..

부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍2. 자막 제공- 멀티미디어 컨텐츠에 포함된 음성 및 대사와 동등하게 대체 수단 제공 필요- 예) 청각 장애인을 위한 자막 제공 📍3. 색에 무관한 콘텐츠 인식- 콘텐츠는 색에 관계없이 인식될 수 있어야 함- 예를 들어 차트를 표현할 때, 단순한 색으로 범례를 나누면 색약, 색맹 등의 사람들에게 불편을 끼칠 수 있음- 패턴이나 굵기를 활용하여 나타내야 함 - 또한 슬라이드 버튼을 나타날 때도, 색 뿐만 아니라 모양으로 구분해야 한다 - 페이지네이션을 구현할 때에도 단순한 색 이외에 테두리, 굵기 등을 사용  📍4. 명확한 지시 사항 제공- 모양, 위치, 방향, 색, 크기 등으로만 정보..

부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더📍웹 접근성 지침✅WCAG(Web Content Accessibility Guidelines)- W3C에서 발표한 웹 콘텐츠 접근성 지침- 1997년 5월 처음 제정 우리나라는? => 한국형 웹 콘텐츠 접근성 지침✅KWCAG(Korean Web Content Accessibility Guidelines)- 23년 3월 14일 현재, 2.1버전이 최신 (KWCAG 2.1)- 크게 24가지 항목으로 나눌 수 있음📍상세 지침📍1. 적절한 대체 텍스트 제공✅alt 어트리뷰트로 대체 텍스트 제공- 스크린 리더 사용자는 alt 값을 오디오로 들을 수 있다- 텍스트가 있는 이미지의 대체 텍스트를 이미..

부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해2. 웹 접근성 지침3. 웹 접근성 진단도구와 스크린 리더📍웹 접근성이란?모든 사용자가 어떤기술환경(디바이스)에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있는지에 대한 정도- 장애인 차별 금지법에 따라 법으로 정해져 있기 때문에 웹 접근성은 법적 의무임 📍웹  접근성 관련 도구✅스크린 리더- 시각 장애인을 위해 웹 페이지의 이미지, 글씨를 음성으로 읽어주는 프로그램 ✅고대비 모드- 색약, 색맹인 사람을 위해 웹 페이지를 보다 선명하게 보이게 해줌 📍기타 장애 유형✅운영체제 호환 X- Mac OS, Windows... ✅저속 인터넷- 유저의 웹 페이지 이용에 나쁜 영향

📍참고 https://docusaurus.io/docs/markdown-features/react MDX and React | Docusaurus Using the power of React in Docusaurus Markdown documents, thanks to MDX docusaurus.io 📍마크다운에서 JSX 사용하기 - .mdx 확장자는 마크다운에서 jsx를 사용할 수 있게 해준다 - .mdx 내의 jsx는 리액트 컴포넌트처럼 렌더링된다 📍MDX는 JSX이다 - HTML 스타일 대신 JSX 스타일을 사용해야 한다 /* Instead of this: */ Foo /* Use this: */ Foo 📍컴포넌트 import 하기 - mdx에서 다른 파일에서 작성된 컴포넌트 또는 다른 라이브러리의..

📍참고 https://docusaurus.io/docs/installation Installation | Docusaurus How to install Docusaurus locally, and start a Docusaurus site in no time. docusaurus.io 📍설치 npx create-docusaurus@latest my-website classic --typescript 📍프로젝트 구조 개요 ✅/blog/ - 블로그 포스트용 md 파일을 포함 - 블로그 플러그인을 사용하지 않는다면 삭제해도 됨 ✅/docs/ - 문서용 md 파일을 포함 - sidebar.js 파일을 수정하여 문서 순서를 수정 가능 - 문서 플러그인을 사용하지 않는다면 삭제해도 됨 ✅/src/ - md 파일이 아..