[2023 제주웹컨퍼런스] 주니어 개발자가 생각하는 웹 접근성 - 하하도동팀

2023년 08월 04일 제주웹컨퍼런스
주니어 개발자가 생각하는 웹 접근성 - 김도경 / 강동훈 / 유하은 / 김하연

Transcript

1. ъزള ӣب҃ ӣೞো ਬೞ਷ ઱פয ѐߊ੗о ࢤпೞח ਢ ੽Ӕࢿ
2. Contents ਢ ੽Ӕࢿ੉ۆ? ਢ ੽Ӕࢿ о੉٘ पઁ۽ ੸ਊ೧ࠁח ਢ ੽Ӕࢿ ਋ܻо ࢤпೞח ਢ ੽Ӕࢿ 1 2 3 4
3. ਢ ੽Ӕࢿ੉ۆ?
4. ৵? ਢ ੽Ӕࢿੌө?
5. ࢸޙ: ઱פয ѐߊ੗ٜ੄ ਢ ੽Ӕࢿ ੋध FE5 ࣻܐࢤਸ ؀࢚ਵ۽ ઑࢎ, 43࠙੄ ਽׹
6. ࢸޙ: ઱פয ѐߊ੗ٜ੄ ਢ ੽Ӕࢿ ੋध 본인은 웹 접근성에 대해서 얼마나 지식을 가지고 있다고 생각하십니까? Q1. ੹ഃݽܲ׮ ੜ ঌҊ੓׮ ੜ ݽܲ׮ ੗ࣁ൤ ঌ૑ ޅೞ૑݅ ঌҊ ੓׮ 45.2% 42.9% 7.1% 2.4%
7. ࢸޙ: ઱פয ѐߊ੗ٜ੄ ਢ ੽Ӕࢿ ੋध 프로젝트를 진행할 때 웹 접근성의 우선순위가 뒤로 밀렸다면, 그 이유는? Q2. ઺ਃೞ૑ ঋ׮Ҋ ࢤп೧ࢲ ਋ࢶࣽਤ۽ Ҋ۰೮׮. ੜ ށۄࢲ दр੉ হযࢲ 56.9 % 30.8 % 10.8 % 1.5 %
8. ࢸޙ: ઱פয ѐߊ੗ٜ੄ ਢ ੽Ӕࢿ ੋध 서비스 개발에 있어서 접근성이 얼마나 중요하다고 생각하시나요? Q3. ই઱ ઺ਃೞ׮ 54.8 % ઺ਃೞ׮ 45.2 %
9. 장애는 다양한 형태와 정도가 존재하는, 일상생활에서 기능적인 제약으로 인해 어려움을 겪는 상태를 의미한다. ੢গ
10. Ҵղ੄ ੢গ ࠙ܨ
11. 모든 사람이 공공 장소, 건물, 제품, 서비스 등에 쉽게 접근하고 이용할 수 있도록 설계되어 있는 상태 ੽Ӕࢿ
12. 웹 사이트, 도구, 기술이 장애를 가진 사용자가 사용할 수 있도록 설계 및 개발된 것 ਢ ੽Ӕࢿ ➡ 장애를 가진 사용자가 독립적으로 타인과 동등한 활동에 참여할 수 있도록 하는 것
13. 웹의 힘은 보편성에 있습니다. 장애에 상관없이 모두가 접근할 수 있다는 것이 가장 중요한 부분입니다. 👨 팀 버너스리 ਢ ੽Ӕࢿ, ৵ ೙ਃೡө? t
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    u
14. • 장애인차별금지 및 권리구제 등에 관한 법률 제21조 • 지능정보화 기본법 제46조 ਢ ੽Ӕࢿ, ৵ ೙ਃೡө?
15. ਢ ੽Ӕࢿ, ৵ ೙ਃೡө? https://news.kbs.co.kr/news/view.do?ncd=7668835
16. 2,652,860 2,592,205 ਢ ੽Ӕࢿ, ৵ ೙ਃೡө?
17. https://freevectormaps.com/south-korea/KR-EPS-01-0002?ref=atr ਢ ੽Ӕࢿ, ৵ ೙ਃೡө?
18. ➡ 단순히 장애를 가진 사용자만을 위한 것일까? ਢ ੽Ӕࢿ, ৵ ೙ਃೡө?
19. ➡ 결국, 웹 접근성은 우리 모두를 위한 것 ਢ ੽Ӕࢿ, ৵ ೙ਃೡө? 나이가 들어감에 따라 기능적 능력이 변한 연로한 사람 팔이 부러지거나 안경을 잃어버려서 일시적 장애를 겪는 사람 밝은 햇빛이나 소리를 듣기 힘든 환경에 있어 상황적 제약을 겪는 사람 제한적이거나 느린 인터넷을 사용하는 사람
20. ਢ ੽Ӕࢿ о੉٘ۄੋ
21. KWCAG ? Korean ೠҴഋ, Web ਢ, Content ௑బஎ, Accessibility ੽Ӕࢿ, Guidelines ૑ஜ = = 4ѐ੄ ਗ஗ , 13ѐ੄ ૑ஜ, 24ѐ੄ Ѩࢎ೦ݾ 4ѐ੄ ਗ஗ , 13ѐ੄ ૑ஜ +7, 24ѐ੄ Ѩࢎ೦ݾ +9
22. ੽Ӕࢿ о੉٘ ۄੋ 인식의 용이성 운용의 용이성 이해의 용이성 견고성 “ 4가지 원칙 “
23. ੽Ӕࢿ ૑ஜ ੉೧ೞӝ ੋध੄ ਊ੉ࢿ (Perceivable) ݽٚ ௑బஎח ࢎਊ੗о ੋधೡ ࣻ ੓যঠ ೠ׮. ✅ 적절한 대체 텍스트 제공 ✅ 자막제공 ✅ ࢝ী ޖҙೠ ௑బஎ ੋध ✅ ݺഛೠ ૑द ࢎ೦ ઁҕ ✅ ఫझ౟ ௑బஎ੄ ݺب ؀࠺ ✅ ߓ҃਺ ࢎਊ Ә૑ ✅ ௑బஎ р੄ ҳ࠙ 대체 텍스트 멀티미디어 대체 수단 명료성
24. ؀୓ ఫझ౟ < img src= “299878.jpg” alt=“제주시 카페 정보” ઁ઱द ஠ಕ ੿ࠁ
25. ؀୓ ఫझ౟ < img src= “299878.jpg” alt=“ ” >
26. ؀୓ ఫझ౟ < alt=“ 메뉴 더보기 ” > < alt=“ 항목 열기 ” > < alt=“ 다음 메뉴 ” >
27. ੽Ӕࢿ ૑ஜ ੉೧ೞӝ ਍ਊ੄ ਊ੉ࢿ (Operable) ࢎਊ੗о ੢গ ਬޖ ١ী ҙ҅হ੉ ਢ ࢎ੉౟ীࢲ ઁҕೞח ݽٚ ӝמٜਸ ਍ਊೡ ࣻ ੓ب۾ ઁҕೞ ח Ѫ 입력장치 접근성 충분한 시간 제공 광과민성 발작 예방 쉬운 네비게이션 ✅ 키보드 사용 보장 ✅ 초점 이동 ✅ 조작 이동 ✅ 응답시간 조절 ✅ 정지 기능 제공 ✅ ӯࡆ੐җ ߣ૶੐ ࢎਊ ✅ ߈ࠂ ৔৉ Ѥցڪӝ ✅ ઁݾ ઁҕ ✅ ੸੺ೠ ݂௼ ఫझ౟
28. ୽࠙ೠ दр ઁҕ
29. ୽࠙ೠ दр ઁҕ
30. ੽Ӕࢿ ૑ஜ ੉೧ೞӝ ੉೧੄ ਊ੉ࢿ (Understandable) ࢎਊ੗о ੢গ ਬޖ ١ী ҙ҅হ੉ ਢ ࢎ੉౟ী ࢲ ઁҕೞח ௑బஎܳ ੉೧ೡ ࣻ ੓ب۾ ઁҕ೧ ঠೠ׮. 가독성 예측 가능성 콘텐츠 논리성 입력 도움 ✅ 기본 언어 표시 ✅ 요구에 따른 실행 ✅ 정지 기능 제공 ✅ ஶబஎ੄ ࢶഋ ҳઑ ✅ ಴੄ ҳࢿ ✅ ۨ੉࠶ ઁҕ ✅ য়ܨ ੿੿
31. ੑ۱ب਑ https://namu.wiki/w/%EC%8D%A8%EB%B8%8C%EC%9B%A8%EC%9D%B4
32. ੑ۱ب਑ ݺഛೞѱ! ਤ஖ܳ ࠙ݺೞѱ! ࠛಞೞ૑ ঋѱ! ੘ࢿೠ ղਊ੉ ୡӝച غח ҃਋ য়ܨо ߊࢤೠ ૑੼ਸ ನழय ೞ૑ ঋח ҃਋ য়ܨ উղ ޙҳо ࠛݺഛೠ ҃਋
33. ੽Ӕࢿ ૑ஜ ੉೧ೞӝ ѼҊࢿ (Robust) ࢎਊ੗о ௑బஎܳ ੉ਊೡ ࣻ ੓ب۾ ӝࣿী ৔ೱਸ ߉૑ ঋইঠ ೠ׮. 문법준수 웹 애플리케이션 접근성
34. ޙߨ ળࣻ "end tag for" 오류 "already defined” 오류 “duplicate” 오류 열고 닫음 마크업 오류 중첩관계 마크업 오류 속성 선언 마크업 오류 <div> <p> 웹 접근성 </p> <a href=”#”> <span> 바로가기 </a> </span> <img src=“jeju.jpg” alt=“” class=“img” class=“img_01”>
35. पઁ۽ ੸ਊ೧ ࠁח ਢ ੽Ӕࢿ
36. ҃Ҋ ޙҳ & ನழझ 아이디, 비밀번호를 입력하고 로그인 버튼을 클릭 ҃Ҋ ޙҳо झ௼ܻܽ؊۽ ੍൤૑ ঋ਺ ࣻ੿೧ঠ ೡ ಞ૘ହਸ ଺ইঠ ೣ Before
37. ҃Ҋ ޙҳ & ನழझ 아이디, 비밀번호를 입력하고 로그인 버튼을 클릭 After ߸҃೧ঠ ೡ ੑ۱ହਵ۽ ನழझо ੉زؽ aria-live=‘assertive’ role=‘alert’ ҃Ҋ ޙҳо झ௼ܻܽ؊۽ ੍൤૑ ঋ਺ ࣻ੿೧ঠ ೡ ಞ૘ହਸ ଺ইঠ ೣ
38. ؀୓ ఫझ౟ ந۞ࣄীࢲ ߓցܳ ఐ࢝೧ ࠁݶ? ݽٚ ߓցо ‘ݫੋ ߓց’۽ ੍൨ ੋ٣ா੉ఠо ઁҕೞח ‘ݻ ѐ੄ ठۄ੉٘ ઺ ݻ ߣ
 ੉ۄח ੿ࠁܳ झ௼ܻܽ؊ ࢎਊ੗ח ঌ ࣻ হ਺ Before
39. ؀୓ ఫझ౟ IR ӝߨਸ ࢎਊೞৈ, दп੸ ੿ࠁ৬ ز١ೠ ࣻળ੄ ؀୓ ఫझ౟۽ ߸҃ ߂ ୶о After
40. ನழझ ߓցীࢲ చఃܳ ־ܰݶ? Before ऀӟ ߓցী ੽Ӕغয, ߡౡҗ ੋ٣ா੉ఠо ࢎۄ૗
41. ನழझ ߓցীࢲ చఃܳ ־ܰݶ? Before ఐ࢝ ઺ী ನழझ ࢎۄ૗ ऀӟ ߓցী ੽Ӕغয, ߡౡҗ ੋ٣ா੉ఠо ࢎۄ૗ TAB
42. য়ܲଃ ച࢓಴ ನழझ After aria-hidden + tabIndex അ੤ ചݶী ࠁ੉ח ೠ ѐ੄ ߓց݅ ੽Ӕ оמೞب۾ ࣻ੿ؽ
43. ز੘ ೖ٘ߔ ߓց੄ ׮਺ ߡౡ ௿ܼೞݶ? दпਵ۽݅ ߓցо ߸ೣਸ ঌ ࣻ ੓׮ Before
44. ز੘ ೖ٘ߔ aria-live=‘polite’ܳ ୶о ੉੹/׮਺ ߡౡ ௿ܼਵ۽ ߓցо ߸҃غ঻ਸ ٸ, ߸҃ػ ߓցܳ ੍যષ After
45. ੗ز ठۄ੉٘ - ঌܿ ੗ز ठۄ੉٘ী aria-live=‘poilte’ чਸ ࢎਊೞݶ? aria-live ࣘࢿਸ ࢎਊೞ૑ ঋӝ ੗ز ੤ࢤ ઺ূ чਸ off۽ ߄Բӝ
46. ੗ز ठۄ੉٘ - ੿૑ 배너 내용을 파악하기도 전에 자동으로 넘어가서, 이전 버튼을 누른 적이 있지 않으신가요? ੿૑ ӝמ ೙ࣻ
47. ݺب ؀࠺ 콘텐츠의 디자인에 따라 인디케이터와 
 이전, 다음 버튼 구별이 어려움 ٣੗੉ց৬੄ ࣗా ೙ࣻ
48. ਃࣗ ੉ܴ Before 상세페이지를 오른쪽 화살표로 탐색 ߡౡ੉ ޖट ৉ೡਸ ೞח૑ ঌ ࣻ হ਺
49. ਃࣗ ੉ܴ 상세페이지를 오른쪽 화살표로 탐색 ߡౡ੉ ޖट ৉ೡਸ ೞח૑ ঌ ࣻ হ਺ After aria-label 추가 title 속성은 읽히지 않는 스크린리더 있음
50. ٘܂ ׮਍ ݫ׏ ݃਋झ য়ߡ द ಟ୛૑ח ٘܂ ׮਍ ݫ׏ ݃਋झܳ ࢎਊೞ૑ ޅೞח ҃਋ܳ ਤ೧ࢲ
 ఃࠁ٘ ੽Ӕ दীب ٘܂ ׮਍ ӝמ੉ ੘ز೧ঠ ೣ
51. ݽ׳ Before 장바구니 버튼을 클릭하면 뜨는 모달 탐색 모달 안에서 포커스가 순환되지 않음 닫기 버튼을 누르려면 이전 요소를 다시 탐색해야 함 esc키를 눌러도 닫히지 않음
52. ݽ׳ After 장바구니 버튼을 클릭하면 뜨는 모달 탐색 모달 안에서 포커스가 순환되지 않음 닫기 버튼을 누르려면 이전 요소를 다시 탐색해야 함 esc키를 눌러도 닫히지 않음 div -> dialog కӒ۽ ࣻ੿ ײӝ ߡౡ੄ ݃௼স ࣽࢲܳ ֤ܻ੸ਵ۽ ߸҃
53. ఃࠁ٘ ࢎਊ੗੄ ੑ੢ীࢲ ੽Ӕࢿ ѐࢶ
54. ఃࠁ٘ ࢎਊ ࠁ੢ 결제 예정 금액 확인 후 주문하기 버튼으로 이동 -> Tab 이용으로 접근할 수 있게 tabindex 추가
55. ݃௼স ࣽࢲ 상품 정보를 모른채 체크 박스를 먼저 접근할 수 있다. 1 2 Before
56. ݃௼স ࣽࢲ 상품 정보를 모른채 체크 박스를 먼저 접근할 수 있다. 시각적 순서가 아닌 논리적인 순서에 맞게 마크업 1 2 After
57. ழझథ ୓௼ ߅झ input type checkbox 와 동일한 접근성 제공을 위해 ARIA role checkbox 추가
58. 접근성? 사용자의 입장에서 생각한다면 시작은 생각보다 어렵지 않다.
59. 우리가 생각하는 웹 접근성
60. 고령자분들의 사용 편의성 향상 등은 개발 파트와 함께 UX / UI 파트에서도 함께 노력해야 하지 않을까? ࠗݽש੄ ࠛಞೣ
61. 기획 디자인 개발 접근성 접근성 접근성 যו ౵౟ীࢲ ੽Ӕࢿਸ Ҋ۰೧ঠ ೞחо?
62. 주니어 시니어 회사 + + ੽Ӕࢿ ೱ࢚ਸ যڌѱ ੉ܞյ ࣻ ੓ਸө
63. ੕૑ ঋইঠ ೡ Ѫ
64. ੕૑ ঋইঠ ೡ Ѫ
65. ੕૑ ঋইঠ ೡ Ѫ
66. ੕૑ ঋইঠ ೡ Ѫ
67. 2023.08.04 ъزള ӣب҃ ӣೞো ਬೞ਷ | d.charlie.kim@gmail.com