📁

[E-AIDT] 웹 접근성 대응 - 필수 사항 대응

Epic Link
Slack Link
SRS
Figma
Link
Link
Link
Link
FE
BE
QA
Data
정성대, 김예은

개요

현황 및 히스토리

•
필수 사항 (2025년에 되어야 하는 항목) : WCAG 기준 A~AA 이상의 요구사항들인데, AA요구사항 중 꽤 많은 부분들이 권장사항으로 빠져있습니다.
•
권장 사항 (2026년 까지 되어야 하는 항목) : WCAG 기준 대부분 AA 이상이거나, 관련 표준이 없지만 교육부에서 제시한 기준들 입니다(A등급도 있긴 합니다). 그냥 권장사항이고 2026년까지 해야 한다는 내용이 없는것들도 전부 권장 사항에 넣어놨습니다. (어떤건 필수 항목이라고 해놓고 2025년에는 안 해도 된다는 식으로 분류되어있기도 합니다.) 난이도가 높지는 않은데 우리가 만족하면 나름 좋은 평가 받을만한 내용들도 있어서 검토는 하되, 꼭 안해도 되는 항목입니다.
•
고수준 요구 사항 (2027년 까지 되어야 하는 항목) : 사실 수어를 제외하고는 2027년까지 적용해도 된다는 언급이 없긴 한데, 실제 WCAG에서 조차 요구하지 않는 접근성 전용 기능을 별도로 개발해야 하는 항목들은 전부 고수준 요구 사항으로 빼놓았습니다. 원래도 AA 수준까지만 요구한다고 했고, 과도한 설정기능들은 제가 보기에 내년에 다시 협의하게 되지 않을까 합니다. 설정 관련된 부분중에는 브라우저나 별다른 접근성 도구 없이 텍스트 크기를 조절가능 해야 한다는 AA등급 요구사항(권장사항에 분류해 두었습니다.) 을 빼고는 따로 명시 되어 있지는 않아서 고수준 요구 사항에 넣어두었습니다.

개선 목적

•
웹 접근성 필수 사항을 만족한다.
•
WCAG 기준 A~AA 이상의 요구사항들을 만족한다.

솔루션

시각장애를 가진 사용자를 위한 접근성 준수

청각장애를 가진 사용자를 위한 접근성 준수

인지장애를 가진 사용자를 위한 접근성 준수

다양한 환경 및 보조 기술과의 호환성

Action Plan

개발팀에서 우선 진행할 아이템

CMS 이미지 Alt 추가 기능 개발 (E32)
디자인 작업 필요
4/9 개발 완료
동영상 - 자막 제공 (E32)
디자인 작업 필요
4/10 시작 예정
백엔드 담당자 배정 필요
완료 일정은 담당자 배정 이후 논의 (2주)
리서치 내용
음성 콘텐츠 - 텍스트 제공
디자인 작업 필요 (4/12일 완료 예정)
영상 논의할 때 조율 예정
수식의 표현, 구조 및 내용 파악을 위해 MathML 적용 개발 → 현재는 수식을 그릴 수 있는데, 읽지 못하고 있음
•
리서치 필요 (4/19일까지 완료 예정)

QA팀에서 우선 진행할 아이템

아이콘 버튼 대체 텍스트 적용
일반 버튼 대체 텍스트 적용

확인 후 진행할 아이템

내비게이션에 대한 전반적인 QA 필요
•
구글 가이드 확인
•
네비게이션으로 도달할 수 없는 곳, 동작 이상, 불필요한 곳 네비게이션 등 무엇을 봐야 하는지 정리 필요
•
확인 범위 : 학생 페이지
테스트 사항
인지장애를 가진 사용자를 위한 접근성 준수 관련
현재 스쿨PT 사이트에서 가이드라인에 미비한 부분과 이를 맞추기 위한 방법에 대한 컨설팅 필요

논의 사항

•
컨설팅 받은 후 변경사항 있는지 체크
•
디자인팀 / FE팀 → 아이콘/ 일반 버튼에 라벨 어떻게 추가할지 가이드 필요
•
자막 에디터를 직접 구현할지? 혹은 자막을 편집하는 기능은 별도 툴에서 할 수 있도록 안내하고, 자막 파일 업로드만 할 수 있도록 처리할지?
•
웹 접근성 컨설팅 진행
•
비디오 접근성 관련해서 캡션이나 자막이나 대본을 넣기 위해서는 비디오 업로드 기능을 CMS로 가져와야 할듯한데 관련해서 작업 범위를 어디까지 가져갈지 논의 필요
•
QA에서도 가이드를 알아야 함 (가이드라인에 대한 스터디 병행 필요)
•
B2C 먼저 대응 → LMS는 이후 대응 (LMS까지 대응 되어야 하는지 확인 필요)
•
서비스 내에 사용된 이미지들(404 등)은 대체 텍스트가 필요한지 확인 필요
•
과거 생성된 이미지는 어떻게 처리할지 논의 필요
◦
과거 이미지는 신경쓰지 않는다.
◦
새로 만드는 콘텐츠에는 모두 캡션을 넣어준다.
◦
과거까지 신경써야 한다면 콘텐츠 팀에서 담당한다.
•
버튼 요소 대체 텍스트 처리되어 있는지 확인 필요

참고자료

웹 접근성은 반드시 신체적인 장애만을 위한 것은 아니다
접근성 가이드 정리
네비게이션 관련 리서치
•
WCAG2.2
Web Content Accessibility Guidelines (WCAG) 2.2
Web Content Accessibility Guidelines (WCAG) 2.2 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.
https://www.w3.org/TR/WCAG22/#non-text-content
[번역] 웹 접근성 마스터하기: 프런트엔드 개발자를 위한 가이드
원문: https://dev.to/bellatrick/mastering-web-accessibility-a-guide-for-frontend-developers-48ad
https://medium.com/@yujso66/번역-웹-접근성-마스터하기-프런트엔드-개발자를-위한-가이드-cdac7a1e2710
◦
시맨틱 HTML을 사용합니다. 
◦
ARIA 속성을 사용합니다
◦
접근성 확인 도구를 활용합니다.
•
웹사이트의 접근성 테스트
◦
웹사이트의 접근성을 검사하고 그 결과에 대한 보고서를 생성하는 무료 도구
◦
자동화된 테스트를 사용하여 웹 접근성을 테스트하고 개선하기 위한 무료 Chrome 확장 프로그램
◦
개발자가 웹사이트의 성능과 접근성을 테스트하는 데 사용하는 인기 있는 오픈 소스 도구
◦
NVDA(NonVisual Desktop Access)는 시각 장애인이 웹은 물론 컴퓨터의 다른 애플리케이션과 소프트웨어에 액세스하고 탐색할 수 있도록 지원하는 무료 오픈 소스 스크린 리더입니다.