- Видео 420
- Просмотров 138 245
AOA11Y (Academy Of Accessibility)
Южная Корея
Добавлен 24 мар 2019
정보접근성 인식개선 및 기술기반 확산을 목표로 한국지능정보사회진흥원(NIA)이 운영하는 RUclips 채널
Видео
WCAG 성공기준 1.4.13 Content on Hover or Focus 사례
Просмотров 35День назад
WCAG 성공기준 1.4.13 Content on Hover or Focus (Level AA) 마우스 포인터로 가리키거나(hover) 키보드 초점을 받은 다음 이를 제거했을 때 추가 콘텐츠가 보였다가 사라지도록 하는 경우, 다음을 준수해야 한다. 정보 및 출처 flyasiana.com/C/KR/KO/index?site_preference=NORMAL www.kurly.com/main www.saramin.co.kr/zf_user/careerplus?ctsLclsCd=pcamp&catMclsCd=&ctsSclsCd=&page=1&keyword=&order=recom www.wanted.co.kr/salary www.11st.co.kr/ search.daum.net/search?nil_suggest=bt...
WCAG 성공기준 1.4.13 Content on Hover or Focus
Просмотров 20День назад
WCAG 성공기준 1.4.13 Content on Hover or Focus (Level AA) 마우스 포인터로 가리키거나(hover) 키보드 초점을 받은 다음 이를 제거했을 때 추가 콘텐츠가 보였다가 사라지도록 하는 경우, 다음을 준수해야 한다. 해제 가능 추가 콘텐츠가 입력 오류를 전달하거나 다른 콘텐츠를 숨기거나 바꾸지 않는 한, 마우스 포인터로 가리키거나 키보드 포커스를 이동하지 않고 추가 콘텐츠를 해제할 수 있는 매커니즘을 제공해야 한다. 마우스오버 마우스 포인터로 가리켜 추가 콘텐츠를 보여줄 경우, 포인터는 콘텐츠가 사라지지 않게 하면서 그 콘텐츠 위로 이동할 수 있어야 한다. 지속적인 추가 콘텐츠는 마우스오버, 키보드 초점이 해제되거나, 사용자가 해제하거나, 정보가 더 이상 유효하지 않을 ...
Combobox 패턴 Ⅴ - 날짜 선택기 콤보박스 구현 (3)
Просмотров 1514 дней назад
안녕하세요 멀더끙입니다. 이번 영상에서는 콤보박스 패턴 중 날짜 선택기 콤보박스 패턴을 구현해보면서 접근성을 제공하기 위해 어떤 요구 사항들이 있는지, 어떻게 구현되어야 하는지 살펴봅니다. 지난 영상에 이어서 키보드로 날짜 선택기를 다룰 수 있도록 키보드 인터페이스를 구현해봅니다. #접근성 #A11Y #AOA #datepicker
Combobox 패턴 Ⅴ - 날짜 선택기 콤보박스 구현 (2)
Просмотров 2014 дней назад
안녕하세요 멀더끙입니다. 이번 영상에서는 콤보박스 패턴 중 날짜 선택기 콤보박스 패턴을 구현해보면서 접근성을 제공하기 위해 어떤 요구 사항들이 있는지, 어떻게 구현되어야 하는지 살펴봅니다. 지난 영상에서 만들어둔 마크업을 이용해서 포인터 인터페이스를 구현해 봅니다. #접근성 #A11Y #AOA #datepicker
Combobox 패턴 Ⅴ - 날짜 선택기 콤보박스 구현 (4)
Просмотров 1714 дней назад
안녕하세요 멀더끙입니다. 이번 영상에서는 콤보박스 패턴 중 날짜 선택기 콤보박스 패턴을 구현해보면서 접근성을 제공하기 위해 어떤 요구 사항들이 있는지, 어떻게 구현되어야 하는지 살펴봅니다. 지난 영상에 이어서 날짜 선택기 이용을 더 용이하게 만들기 위한 키보드 인터페이스를 구현해봅니다. #접근성 #A11Y #AOA #datepicker
정보접근성(웹, 앱) 실태조사 개선권고 교육(주요 오류 사례 등)
Просмотров 26121 день назад
#접근성 #A11Y #aoa 2024년 정보접근성 개선권고 교육 동영상 만족도 조사 안내 설문조사에 응답해 주신 분 중 100분을 추첨하여 모바일 쿠폰(1만원권)을 지급하여 드립니다. 설문 기간 : 12월 9일부터 ~ 12월 27일까지 설문 URL : forms.gle/ML4GjmFKkMAHzZEG6 사업주관처 : 한국지능정보사회진흥원(NIA) 문의처(사업자) : 02-6914-6543(주식회사 헤더스) 00:00 웹 접근성 실태조사 주요 오류유형 안내 14:41 앱 접근성 실태조사 주요 오류유형 안내 09:00 부분(22, 23페이지)의 기본 언어 표시에서 lang="ko-KR"은 오류가 아닙니다. 기존에는 ISO 639-1에서 지정한 두 글자로 된 언어 코드를 사용해야 한다고 되어 있어 기준대로 평...
팝오버 툴팁 접근성 (Accessible Popover Tooltip)
Просмотров 672 месяца назад
팝오버 툴팁 접근성 (Accessible Popover Tooltip)
2024년 정보접근성 개선권고 교육 동영상 만족도 조사 안내 설문조사에 응답해 주신 분 중 100분을 추첨하여 모바일 쿠폰(1만원권)을 지급하여 드립니다. 설문 기간 : 12월 9일부터 ~ 12월 27일까지 설문 URL : forms.gle/ML4GjmFKkMAHzZEG6 사업주관처 : 한국지능정보사회진흥원(NIA) 문의처(사업자) : 02-6914-6543(주식회사 헤더스) 00:00 웹 접근성 실태조사 주요 오류유형 안내 14:41 앱 접근성 실태조사 주요 오류유형 안내 09:00 부분(22, 23페이지)의 기본 언어 표시에서 lang="ko-KR"은 오류가 아닙니다. 기존에는 ISO 639-1에서 지정한 두 글자로 된 언어 코드를 사용해야 한다고 되어 있어 기준대로 평가하였으나, lang="ko-KR"를 사용하면 더 구체적으로 국가를 명시하는 방식임을 확인하였습니다.
한국어 사이트에서 lang=ko-KR 이 왜 오류죠??
아... 네 결론적으로 오류가 아닙니다. 해당 영상이 웹 접근성 실태조사 평가 가이드 기준 상에서는 "기본 언어 표시는 ISO 639-1에서 지정한 두 글자로 된 언어 코드를 사용해야 한다"로 되어 있어 기준대로 평가된 부분이나 확인 결과 정확하고 유효한 표기법입니다. lang="ko"만 사용해도 문제가 되지 않지만, lang="ko-KR"을 사용하면 더 구체적으로 국가를 명시하는 방식입니다. 평가가이드 상의 기준이 공공에서는 거의 나타나지 않았다가 민간분야에서는 많이 사용하고 있으며, 언어 코드와 지역 코드를 사용하는 표기법이 W3C HTML 표준과 ISO 639-1 및 ISO 3166-1 alpha-2 표준을 따르기 때문에 향후 평가가이드를 업데이트하여 평가할 예정입니다. 해당 영상의 설명글에 오류 페이지와 내용도 표시하겠습니다. 해당 내용을 알려주셔서 감사합니다.
좋은 내용 공유해 주셔서 감사합니다! 너무 유익했어요! 🍀
편집으로 마이크의 울림을 줄이고 자막이 붙으면 좋을거같아요
남겨주신 의견 참고해서 영상 제작에 반영하겠습니다. 감사합니다. 😃
😊
소리가 너무너무너무 작아요 선생님
아.. 소리가 작게 녹음이 되었네요. 사용에 불편을 드려 죄송합니다.
유용한 정보 감사드려요 !!! 😄😄
접근성 관련 영상 유익하고 좋네요 다만, 아이러니하게도 접근성 설명하는 유튜브의 영상이 소리가 작아서 시청하는게 불편하네요 ㅜ
재생속도 2배만 빠르게 해주세요
덕분에 많이 알아갑니다. 그런데 설명에서 빠진것 같은데, 화면보다 작게 표시될땐 영역 사이즈만 다시 잡아주면 되나요?(다시 들어봐도 영역보다 큰 경우만 설명하신것 같아서요) 예를 들면 width, height나 overflow:hidden으로요.
인트로 소리와 목소리 소리 크기가 너무 차이 납니다. ^^;;; 목소리가 너무 작게 드립니다.
정말 이해가 잘 되는 영상이네요 😊감사합니다!!
와 숨겨진 금같은 채널이네요
"Promo sm"
NVDA on 상태에서 입력서식에 한글이나 숫자 같은 텍스트 입력은 어떻게 하나요??
NVDA on 상태에서 입력서식에 한글이나 숫자 같은 텍스트 입력은 어떻게 하나요??
내용 감사합니다 :D
감사 인사 남겨주셔서 감사합니다. :D
영상 평상시에 잘 보고 있습니다. 그런데 인트로 영상 소리랑 강의 목소리 소리가 너무 차이나서 볼륨 조절하기 애매합니다.
영상 잘 보고 계신다고 말씀주셔서 감사합니다. 😃 향후 사운드 조절에 신경써보겠습니다.
헉 이건 몰랐네요 감사합니다 자연스럽게 스크린리더가 읽고갈줄 알았는데 의미가 사라지게되었군요
도움이 되어 기쁩니다. 감사합니다. 😃
추천
듬직한 접근성의 히어로들.... 보기만 해도 입꼬리가 올라가요. 두시간 꼬박 다시 봐야겠어요.
모달팝업 관련 질문 올렸던 웹퍼블리셔입니다😄 답변주셔서 감사합니다! 추가 질문이 있습니다~ 제가 말씀드렸던 모달팝업은 웹사이트 메인페이지에 진입하자마자 뜨는 배너를 의미했는데요~ 접근성업체에서는 사용자가 의도하지않은 모달팝업을 지양하라는 뜻으로 해석되는데, 모달팝업을 사용하지않는 방향으로 가야할까요??
안녕하세요. 답변이 달려있지 않아서 사견을 섞어 답변드리면, 우선 시스템 팝업과 레이어 팝업을 구분하는 것이 우선입니다. (modal과 non-modal의 구분도 필요할 수 있구요) 아마 받으셨던 피드백은 KWCAG 2.1의 것을 기준으로 할 텐데요, 당시에의 명확한 제한 사항은 사용자가 의도하지 않은 기능으로서의 (시스템) 팝업이었을 겁니다. 사용자가 의도하지 않은 기능을 방지해야 함은 사용자가 컨텍스트를 잃어버리기 쉽기 때문인데요, 시스템 팝업을 사용할 경우 보통 window.open 을 사용하고 이는 새롭게 뜬 창에 초점을 두게 합니다. 즉, 사용자가 사이트에 접근했을 때 사이트 본 창에 머물게 되는 게 아니라 팝업 창에 머물게 되는 거거든요. 그렇게 되니 사용자는 우선 이 팝업 창이 본 페이지인지 확인해야 하고, 아니라는 판단이 들었을 때에서야 본 창을 찾아가야 하니 접근성이 현저하게 떨어지게 됩니다. 여기서 사용자가 의도하지 않은 팝업을 지양해야 한다는 필요가 도출되게 되었다고 생각하시면 좋을 것 같습니다. 그런데 어느 시점부터 window.open 대신 레이어 팝업을 이용한 modal 팝업(이하 DOM modal 팝업)을 띄우기 시작하는데요. 논리적으로 올바른 순서로 작성되었다는 가정 하에, 이는 접근성의 문제라기 보다는 UX의 관점으로 바뀌어야 할 겁니다 (사견입니다) 이는 장애 - 비장애의 문제라기 보다는 둘 모두 최초 진입은 modal 팝업이고, 둘 모두 modal 팝업에 갇혀 콘텐츠 이용을 방해받는 동일한 경험이 발생되기 때문입니다. 그래서인지 점점 페이지 진입 시 전체 화면을 덮는 형태의 UI가 점점 사라지고 있지요. 다만, 이 modal 팝업을 구현함에 있어 구현자의 실수나 미숙함으로 인해 DOM modal 팝업을 제어할 수 있는 기능에 접근하기 어렵다거나, -- 일례로 dimmed 레이어를 마우스로 클릭해야만 닫히게 한다던가 하는 등 -- modal 팝업이 열린 상태로 바닥 페이지에 접근하게 된다거나, DOM modal 팝업이 논리적으로 DOM 마지막에 접근하게 되어 있다거나, 저시력 사용자가 고려되지 않아 확대 화면에서는 dimmed의 일부만 보이고 있다거나 스크롤이 불가하거나 등의 부가적인 문제를 수반하게 되는 경우가 다반사였기 때문에 접근성 상 문제가 되는 경우가 많습니다. DOM modal 팝업을 사용하더라도 사용자가 이것이 부가 정보이고 건너 뛰어도 괜찮은 컨텐츠임을 쉽게 이해할 수 있고, 쉽게 닫거나 건너뛸 수 있으며, 어떤 사용자든 컨텐츠 이용에 방해를 일으키지 않는다면 반드시 사용하지 않는 방향으로 가지 않아도 괜찮다고 생각합니다. (하지만 어렵죠 🤣🤣🤣🤣)
모처럼 접근성 채널이라 정말 좋은 채널인데 영상에 나중에라도 자막을 달아주시면 좋을 것 같아요❤
네 맞습니다. 자막 작업 후 추후에 추가될 예정입니다. 피드백 감사드립니다. 🥰
충격적이네요.. 구독합니다
본 영상에서 보여주신 CSS의 전체 코드를 볼 수 있을까요?
안녕하세요 지성봉입니다. 영상 초반에서 언급한 KWCAG 2.2 변경 사항에 대한 자세한 내용은 블로그에 포스팅 예정입니다. 아무래도 AOA 채널로 소개하기에는 영상 텀이 너무 길기도 하고 영상 제작 시간 때문에 전체가 설명되려면 먼 훗날이 될 것 같아서요 ^^;; 해당 내용도 적지 않은 내용이라 포스팅 하는데 시간이 다소 걸릴 듯 합니다 (하나씩만 잡아도 13개 짜리 시리즈로 나오네요) 현재 개요를 우선 포스팅 해두었고, 나머지 내용들도 최대한 빠른 기간 내 포스팅 완료해보도록 하겠습니다~ 해당 포스팅은 mulder21c.io/understanding-kwcag-22-changes-intro/ 에서 보실 수 있습니다 (혹 제 블로그를 기존에 방문하셨었다면 캐시 정책을 잘못 잡아두어서🤣 올바르게 나오지 않을 수 있으니 강력 새로 고침이나 캐시를 비활성 또는 삭제 후 확인해주세요~)
👋👋👋
감사합니다..
라벨링 부업하시는 분들 많다 하더니 이렇게 결과물이 나오네요. ㅎㅎ 이미지 alt와 잘 혼합되면 좋을 것 같네요. 지금은 alt가 있을 때에 어떻게 읽어주나요?
뽀로로와 크롱이미지로 실험해보니 아래와 같이 음성출력되네요. - alt + 이미지설명 - aria-label + 이미지설명 - aria-labelledby + 이미지 설명 좀 놀라운건... 뽀로로는 이미지 설명으로 인식된 정보가 없고 크롱은 개구리, 장난감으로 이미지 설명이 나오는... 뽀통령의 굴욕 ㅎㅎㅎㅎㅎ
웹접근성 권고안 너무 어려워보여서 공부하기 겁먹었는데 이렇게 좋은 콘텐츠를 무료로 제공해주셔서 정말 감사합니다 ㅠㅠ
설명을 너무 잘해주시네요
aria-disabled를 저렇게 쓰는 거군요. disabled와 동일한 역할이라 보고 사용한 적이 없었는데... 내용 잘 봤습니다. 그리고 하나 질문도 드려요. 공식 문서에서 보니 aria-disabled가 deprecated 예정이라는 내용 - 정확히는 특정 조건에서만 쓰도록 바뀔 수 있다...-이 있어서 다른 대체 방법이 있을지 궁금하네요. aria-labelledby나 describedby를 사용해서 button what unable active등의 텍스트를 참조시키면 될 지, 혹은 aria-roledescription을 사용해 요소의 기능이나 역할을 직접 부연하는 게 좋을까요?
안녕하세요~ 답변이 많이 늦었습니다. 문의주신 내용에 대해 아래와 같이 답변을 드립니다. 먼저 aria-disabled는 WAI-ARIA 1.2에서 deprecated 되는 것이 아니고 1.1에서 모든 태그에 사용 가능한 속성에서 1.2에서는 제한된 태그 내에서 사용 가능한 것으로 변경되었습니다. 자세한 내용은 지난 6월 6일에 Recommendation된 WAI-ARIA 1.2 (www.w3.org/TR/wai-aria-1.2/) 에서 확인가능합니다. aria-disabled를 사용 불가능한 경우라면 말씀하신 aria-labelledby 또는 aria-decribedby로 사용은 가능합니다. 다만, 해당 속성을 사용하는 목적과는 다르므로 aria-disabled를 사용하는 것으로 권장드리며 해당 태그가 <a>와 같이 aria-disabled 를 사용할 수 없는 태그라면 그 태그 자체가 사용 불가능한 상태를 가질 수 없다는 의미이므로 구현방법을 다시 고민해 보는 것이 좋습니다.
안녕하세여 보이스오버 사용시 동영상 10초씩 뒤로, 앞으로 이동 말고 시간별로 이동은 어떻게 하나요? 계속 10초씩만 이동하니 힘들어서요
좋은 영상 감사합니다🙂
봐주셔서 감사합니다😊
??????????? 참쉽죠잉?
고럼요잉~
풀영상 ruclips.net/video/gxsZbn-Ndy8/видео.html
2023-02-12
2023-02-12
국제접근성 검증 방법이 따로 있을까요? 미국 접근성 전문업체에 의뢰하는방법이 궁금합니다.
안녕하세요, BJ입니다. 미국 접근성 검증 방법은 접근성 전문 업체에 의뢰하여 심사 후 어느 정도 준수하고 있는지 확인할 수 있는 statement나 직접 심사 받고 수정하여 certificaiton을 발급받을 수 있습니다. 미국 접근성 업체는 구글 검색을 통하면 TPGi나 Deque 등 수 많은 업체가 있으며 각 업체마다 검증 방법이 상이하니 직접 컨택하여 문의해 보시는 것이 좋습니다.
좋은 영상 공유 감사드립니다!
봐 주셔서 감사합니다!
컴포넌트 내부에 WAI-ARIA를 올바르게 사용하는 것이 중요한 여부 겠네요. 😃
좋은 내용 기대하고 잘 듣고 있는데 다음시간으로 넘어가네요 ㅠㅠ 2/2 빠른 업로드 부탁드립니다!
안돼요
KWCAG 2.2에 대한 시리즈도 부탁드립니다
인트로가 더 깔끔해졌네요
감사합니다~ ^ㅡ^
키보드 누르는 거 화면에 보여서 신박합니다. ^ ^*
19분짜리 영상이라뉘....ㄷㄷㄷ 강의를 한편 찍으신 듯~ 좋은 영상 감사합니다. ^^
안녕하세요, 저는 소규모 디자인 스튜디오에서 개발을 하고 있어요. 매 프로젝트마다 웹접근성을 조금씩이라도 더 개선하고자 노력하고 있고, AOA11Y 채널 영상에서도 많은 도움을 받았습니다. 오픈아카데미 영상도 반가운 마음으로 잘 봤습니다. 업로드해주셔서 감사해요!