📍ARIA장애가 있는 사용자가 웹 콘텐츠 및 웹 앱(특히 JavaScript 웹 앱)에 더 쉽게 접근할 수 있도록 하는 방법을 정의- HTML, JavaScript 를 보완 기본적으로 ARIA 대신 기존의 HTML element 또는 semantic element 를 우선하는 것이 좋다- 웹 접근성을 고려하여 ARIA element를 우선적으로 사용하면, 이를 보충하기 위해 구현해야 할 코드 또는 에러가 많아질 수 있음- 따라서 ARIA element는 꼭 필요한 순간에만 사용해야 한다 (No ARIA is better than bad ARIA) 📍예제HTML 어트리뷰트 설명role : aria-role- 브라우저에게 해당 element가 JavaSript로 구동되는 진행상태 위젯이라는 것을 알린다a..

부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍18. 사용자 요구에 따른 실행유저가 의도치 않은 기능이 실행되면 안된다 ✅새 창을 열 때, 스크린 리더 사용자에게 새 창이 열림을 알려줘야 한다- 아래와 같은 방법을 사용할 수 있다이용약관새 창또는이용약관또는이용약관 - target="_blank" 어트리뷰트 방식이 가장 간편하다- 이 밖에 window.open() 방식도 있지만, 스크린 리더가 인지 불가- 센스리더 외의 스크린 리더에서는 title, target 방식을 읽어주지 않으므로 주의 ✅컨트롤 선택 시 바로 기능이 실행되면 안됨- 유저가 콤보 상자, 라디오 버튼, 체크 박스 등의 컨트롤을 선택했을 때 기능이 실행되면 안된다- 예..

부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍13. 깜빡임과 번쩍임 사용 제한✅광과민성 발작- 1997년 일본에서 포켓몬스터 애니메이션의 특정 에피소드를 보고 750명의 어린이들이 구토, 어지럼증, 경련 등을 일으킴- 이는 밝은 빛의 화면 점멸이 연속되는 장면을 보고 일어난 광과민성 발작 때문으로 밝혀짐 ✅과도한 깜빡임과 번쩍임 방지- 점멸 컨텐츠가 차지하는 면적이 화면 전체 면접의 10% 미만이 되게 조정- 시간을 3초 미만으로 제한- 사전에 경고하며, 중단 가능한 수단을 제공 ✅PEAT- 컨텐츠가 초당 3~50회 깜빡이는지를 확인할 수 있는 프로그램https://trace.umd.edu/peat/ Photosensitive Ep..

부스트코스 웹 접근성 이해더보기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... ✅저속 인터넷- 유저의 웹 페이지 이용에 나쁜 영향

작동 원리1. 클라이언트에서 유저가 credentials(아이디, 비밀번호) 로 서비스에 로그인2. 서버는 서명된 JWT를 생성하고 response에 넣어 반환3. 클라이언트에서 서버에 추가적인 요청을 보낼 때, JWT를 HTTP header에 첨부4. 서버는 클라이언트에서 온 JWT를 검증하고 데이터 반 로그인 성공 -> JWT 반환- 인증(authentication) 과정에서 유저가 로그인에 성공하면, JWT가 반환된다- 이때, 토큰은 보안 문제를 방지하기 위한 세심한 주의가 필요하다 토큰 관련 주의사항- 토큰은 가능한 짧게 보관하는 것이 좋다 (탈취당하는 것을 막기 위해)- 토큰을 브라우저 저장소(로컬 스토리지 or 세션 스토리지 등) 에 저장하면 안된다 토큰 형태- 유저가 보호되는 경로 (prot..