CINXE.COM
모바일 앱 접근성 소개 | 모바일 앱 접근성 | WebWatch - 정보 접근성 대한민국 No.1 / Web·App·SW·Kiosk 접근성 인증·컨설팅·시험평가
<!DOCTYPE html> <html lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> --> <meta name="keywords" content="웹 접근성, 모바일 접근성, 모바일앱 접근성, 소프트웨어 접근성, 키오스크 접근성, 무인정보단말기 접근성, 웹 접근성 품질인증, 정보통신 접근성 품질인증, 모바일앱 접근성 인증, 소프트웨어 접근성 인증, 솔루션 접근성 인증, 우선구매제도 지능정보제품 시험평가, 접근성 컨설팅, 접근성 진단 컨설팅"> <meta name="keywords" content="Web accessibility, mobile accessibility, mobile app accessibility, software accessibility, kiosk accessibility, Unattended information terminal accessibility, web accessibility quality certification, information communication accessibility quality certification, mobile app accessibility certification, software accessibility certification, solution accessibility certification, preferential purchase system, intelligent information product testing and evaluation, Accessibility Consulting, Accessibility Diagnosis Consulting"> <meta name="author" content="WebWatch, 웹와치" /> <title>모바일 앱 접근성 소개 | 모바일 앱 접근성 | WebWatch - 정보 접근성 대한민국 No.1 / Web·App·SW·Kiosk 접근성 인증·컨설팅·시험평가</title> <link rel="stylesheet" href="/static/font/NotoSans/notosans.css" /> <link rel="stylesheet" href="/static/font/NanumSquare/nanumsquare.css" /> <link rel="stylesheet" href="/static/font/font-awesome-4.6.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="/static/jslibrary/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/css/portal/layout.css"/> <link rel="stylesheet" href="/static/css/portal/contents.css"/> <script src="/static/jslibrary/jquery/jquery-1.12.2.min.js"></script> <script src="/static/jslibrary/tablesummary.js"></script> <!-- <script src="/static/jslibrary/common.js"></script> --> <script src="/static/js/common.js"></script> <script src="/js/jqcommon.js"></script> <script> subMenuOpenIng=false; // 사내공간에 HTML 태그가 포함되어 삭제처리 $('title').text($('title').text().replace(/<[^>]+>/g,'')) </script> </head> <body> <ul class="skip"> <li><a href="#contents">본문내용 바로가기</a></li> <li><a href="#gnb">주메뉴 바로가기</a></li> </ul> <div id="bgW"></div> <!-- wrapper --> <div id="wrapper"> <!-- 탑메뉴, 주메뉴 영역 --> <div id="headerWrap"> <div id="header"> <div id="logo"><a href="/"><img src="/static/img/portal/common/logo.png" alt="WebWatch" /></a></div> <div id="global"> <ul> <li><a href="/webWatch/070101.html?MenuCD=810">회사소개</a></li> <!-- 230408 사이트 맵 오류 과제 <li><a href="/webWatch/070101.html?MenuCD=810">사이트맵</a></li> --> <!-- 230719 영문 사이트 일시 차단 <li class="eng"><a href="/eng/" target="_blank" title="영어 사이트로 이동">English</a></li> --> </ul> </div> </div> <div class="gnbSet"> <div id="gnb" class="gnb"> <ul> <li><a href="/Situation/WA_Situation.html?MenuCD=110">웹 접근성</a> <ul> <li><a href="/Situation/WA_Situation.html?MenuCD=110">웹 인증현황</a></li> <li><a href="/WA/010201.html?MenuCD=120">국가인증소개</a></li> <li><a href="/WA/010301.html?MenuCD=130">절차 및 기준</a></li> <li><a href="/WA/010401.html?MenuCD=140">인증심사비</a></li> <li><a href="/Req/WA_Req_File.html?MenuCD=150">인증심사신청</a></li> <li><a href="/board/FAQ_WA.asp?MenuCD=160">웹 인증 FAQ</a></li> </ul> </li> <li><a href="/Situation/MA_Situation.html?MenuCD=210">모바일 앱 접근성</a> <ul> <li><a href="/Situation/MA_Situation.html?MenuCD=210">앱 인증현황</a></li> <li><a href="/MA/020201.html?MenuCD=220">모바일 앱 접근성 소개</a></li> <li><a href="/MA/020301.html?MenuCD=230">모바일 앱 인증·컨설팅</a></li> <li><a href="/MA/020401.html?MenuCD=240">절차 및 기준</a></li> <li><a href="/Req/MA_Req_File.html?MenuCD=250">인증·컨설팅 신청</a></li> <li><a href="/board/FAQ_MA.asp?MenuCD=260">모바일 앱 FAQ</a></li> </ul> </li> <li><a href="/Situation/SA_Situation.html?MenuCD=310">소프트웨어 접근성</a> <ul> <li><a href="/Situation/SA_Situation.html?MenuCD=310">소프트웨어 인증현황</a></li> <li><a href="/SA/030201.html?MenuCD=320">소프트웨어 접근성 소개</a></li> <li><a href="/SA/030301.html?MenuCD=330">소프트웨어 인증·컨설팅</a></li> <li><a href="/SA/030401.html?MenuCD=340">절차 및 기준</a></li> <li><a href="/Req/SA_Req_File.html?MenuCD=350">인증·컨설팅 신청</a></li> <li><a href="/board/FAQ_SA.asp?MenuCD=360">소프트웨어 FAQ</a></li> </ul> </li> <li><a href="/KA/KA_Intro.html?MenuCD=410">키오스크 접근성</a> <ul> <li><a href="/KA/KA_Intro.html?MenuCD=410">키오스크 접근성 소개</a></li> <li><a href="/KA/KA_Req.html?MenuCD=420">시험평가 신청</a></li> <li><a href="/Support/Inq_Form.html?ICatNo=3&MenuCD=430">컨설팅 문의</a></li> <li><a href="/Support/Inq_Form.html?ICatNo=1&MenuCD=440">견적 요청</a></li> </ul> </li> <li><a href="/Req/Req_info.html?MenuCD=510">인증 신청</a> <ul> <li><a href="/Req/Req_info.html?MenuCD=510">인증 신청</a></li> </ul> </li> <li><a href="/Support/Inq_Form.html?ICatNo=1&MenuCD=610">견적 & 문의</a> <ul> <li><a href="/Support/Inq_Form.html?ICatNo=1&MenuCD=610">견적 요청</a></li> <li><a href="/Support/Inq_Form.html?ICatNo=2&MenuCD=620">기술 문의</a></li> <li><a href="/Support/Inq_Form.html?ICatNo=3&MenuCD=630">일반 문의</a></li> <li><a href="/Support/Inq_Form.html?ICatNo=4&MenuCD=640">WATCH2.0 문의</a></li> <li><a href="/Board/BoardList.asp?BoardName=%uC790%uB8CC%uC2E4&MenuCD=650">자료실</a></li> </ul> </li> <li><a href="/accessibility/040101.html?MenuCD=710">정보 & 솔루션</a> <ul> <li><a href="/accessibility/040101.html?MenuCD=710">정보 접근성의 이해</a></li> <li><a href="/accessibility/040201.html?MenuCD=720">정보 접근성 관련 법률</a></li> <li><a href="/accessibility/040301.html?MenuCD=730">WATCH2.0</a></li> <li><a href="/accessibility/04030201.html?MenuCD=740">MAARES</a></li> <li><a href="/accessibility/04030202.html?MenuCD=750">WCAMS</a></li> </ul> </li> </ul> </div> </div> </div> <!-- 비주얼 영역 --> <div class="visualW visual2"> <div class="contGroup"> <div class="contTit"> <h1>모바일 앱 접근성</h1> <p>정보통신접근성(WA) 품질인증 No.1 / APP, SW 접근성 인증·컨설팅</p> </div> <div class="location"> <ol> <li class="home"><a href=""><span class="hidden">홈페이지 바로가기</span></a></li> <li>모바일 앱 접근성 > <em class="page">모바일 앱 접근성 소개</em></li> <!-- <li>솔루션</li> <li>Watch2.0 소개</li> --> </ol> </div> </div> </div> <!-- container --> <div id="container" class="clearfix"> <!-- lnbWrap --> <div id="lnbW"> <div class="lnbTit"> <h1>모바일 앱 접근성</h1> <p> 모바일 앱 접근성<br />(Mobile App Accessibility)<br />인증 및 컨설팅 </p> </div> <div id="lnb"> <ul> <li ><a href="/Situation/MA_Situation.html?MenuCD=210">앱 인증현황</a> </li> <li class="on"><a href="/MA/020201.html?MenuCD=220">모바일 앱 접근성 소개</a> </li> <li ><a href="/MA/020301.html?MenuCD=230">모바일 앱 인증·컨설팅</a> </li> <li ><a href="/MA/020401.html?MenuCD=240">절차 및 기준</a> </li> <li ><a href="/Req/MA_Req_File.html?MenuCD=250">인증·컨설팅 신청</a> </li> <li ><a href="/board/FAQ_MA.asp?MenuCD=260">모바일 앱 FAQ</a> </li> </ul> <div class="lnbInfo"> <div class="lnbInfoArea"> <p>정보 접근성 인증<br />신청 및 견적문의</p> <span class="phoneNum">02-2678-0078</span> </div> </div> </div> <!-- lnb --> <!-- <div id="lnb"> <ul> <li><a href="">정보 접근성의 이해</a></li> <li><a href="">정보 접근성 관련 법률</a></li> <li class="on"><a href="">솔루션</a> <ul> <li class="on"><a href="">WATCH2.0</a></li> <li><a href="">MAARES</a></li> <li><a href="">WCAMS</a></li> </ul> </li> </ul> <div class="lnbInfo"> <div class="lnbInfoArea"> <p>정보 접근성 인증<br />신청 및 견적문의</p> <span class="phoneNum">02-2678-0078</span> </div> </div> </div> --> <!-- //lnb --> </div> <!-- //lnbWrap --> <!-- contentsW --> <div id="contentsW"> <div id="contents"> <h1>모바일 앱 접근성 소개</h1> <p class="fcon"><span class="fb">모바일 앱 접근성은(Mobile application Accessibility)</span> 모바일 전화기, 테블릿 기기 등 모바일 기기에서 실행되는 <span class="fb">모든 애플리케이션 콘텐츠의 접근성</span>을 정의합니다.</p> <h2>필요성</h2> <ul class="list1 type"> <li>고령자 및 장애인 사용자의 스마트폰 사용 증가로 인하여 OS 자체에서 지원하는 각종 접근성 기술이 발전되었기 때문에 애플리케이션 콘텐츠를 접근성이 있게 구현한다면 누구나 콘텐츠에 접근하고 이용하는 것이 가능합니다.</li> <li>‘장애인 차별 금지 및 권리구제 등에 관한 법률’ 제정 및 발효로 정보 접근성을 향상하기 위한 국가적인 노력이 계속되고 있으나, 대부분의 노력이 웹 접근성에만 치중되어 있어 모바일 앱 접근성에 대한 확장이 필요한 상황입니다.</li> <li>웹을 넘어선 모든 정보 접근권 분야가 ‘장차법’에 의해 장애인 차별에 대한 진정 및 소송의 대상이 될 수 있습니다.</li> <li>모바일 앱 접근성은 보다 많은 사용자들과 보다 많은 기술 환경에서 적용하기 위해 필요하며, 접근성을 고려한 애플리케이션은 정보 교환 및 호환성에도 큰 도움이 되어 다양한 이용자층의 만족도를 높이고, 장기적으로 앱 이용률이 증대되는 효과도 기대할 수 있습니다.</li> </ul> <h2>특징</h2> <h3>준용지침</h3> <div class="table tac"> <table> <caption>모바일 앱 접근성 대상 및 기준</caption> <tbody> <tr> <th scope="row" class="w16p">대상</th> <td class="w42p">모바일 앱 접근성</td> <td class="w42p">웹 접근성</td> </tr> <tr> <th scope="row">기준</th> <td>MACAG 2.0 </td> <td>KWCAG 2.1 </td> </tr> </tbody> </table> </div> <p>모바일 앱 접근성은 <span class="fb">'Mobile Application Content Accessibility Guideline 2.0'의 기준</span>을 준용합니다.</p> <div class="btnType type1"> <a href="/include/fileDown.asp?filename=%28KS%20X%203253%29%uBAA8%uBC14%uC77C%20%uC560%uD50C%uB9AC%uCF00%uC774%uC158%20%uCF58%uD150%uCE20%20%uC811%uADFC%uC131%20%20%uC9C0%uCE68%202.0.pdf">KS X 3253 모바일 애플리케이션 콘텐츠 접근성 지침 2.0<span class="ico_down"></span></a> </div> <div class="imgArea1"> <img src="/static/img/portal/contents/020201_1.jpg" alt="준용지침(플랫폼, iOS, Android)" /> </div> <div class="hidden"> <table> <caption>준용지침</caption> <thead> <tr> <th scope="col" class="w26p">플랫폼</th> <th scope="col" class="w37p">iOS</th> <th scope="col" class="w37p">Android</th> </tr> </thead> <tbody> <tr> <td>콘텐츠 개발언어 </td> <td>Native : Objective-C, C, Swift<br />Web : HTML5 </td> <td>Native : java, C, kotlin <br />Web : HTML5 </td> </tr> <tr> <td>스크린리더 </td> <td>VoiceOver </td> <td>TalkBack </td> </tr> </tbody> </table> </div> <h3>지능정보화 기본법</h3> <p>2018년 2월 22일 ‘국가정보화 기본법’ 일부개정안에 모바일 애플리케이션 접근성 준수 및 인증에 대한 내용을 최초 포함하였고, 이후 2020년 6월 9일 '지능정보화 기본법'으로 전부개정하며 접근성 준수 대상에 '지능정보기술 관련 기기 및 소프트웨어(지능정보제품)'가 포함되었습니다.</p> <h4 class="bu3">지능정보화 기본법 개정안 주요내용</h4> <div class="box2"> <ul class="list1 type"> <li><strong>제46조(장애인·고령자 등의 정보 접근 및 이용 보장)</strong> ① 국가기관 등은 정보통신망을 통하여 정보나 서비스를 제공할 때 장애인·고령자 등이 쉽게 웹사이트와 <strong>이동통신단말장치</strong>(「전파법」에 따라 할당받은 주파수를 사용하는 기간통신역무를 이용하기 위하여 필요한 단말장치를 말한다. 이하 같다)에 설치되는 <strong>응용 소프트웨어</strong>등 대통령령으로 정하는 유·무선 정보통신을 쉽게 이용할 수 있도록 접근성을 보장하여야 한다.</li> <li><strong>제46조(장애인·고령자 등의 정보 접근 및 이용보장)</strong> ③ 정보통신 또는 지능정보기술 관련 제조업자는 <strong>정보통신 또는 지능정보기술 관련 기기 및 소프트웨어</strong>(이하 “지능정보제품”이라 한다)를 설계, 제작, 가공할 때 장애인·고령자 등이 쉽게 접근하고 이용할 수 있도록 노력하여야 한다. 이 경우 장애인·고령자 등이 별도의 보조기구 없이 지능정보제품을 이용할 수 없는 경우에는 <strong>지능정보제품이 보조기구와 호환될 수 있게</strong> 노력하여야 한다. <li><strong>제47조(장애인·고령자 등의 정보통신접근성 품질인증 등)</strong> ① 과학기술정보통신부장관은 장애인·고령자 등의 정보 접근 및 이용 편의를 증진하기 위하여 제46조제1항에 따라 대통령령으로 정하는 <strong>유·무선 정보통신</strong>에 대한 접근성 품질인증(이하 “정보통신접근성 품질인증” 이라 한다)을 할 수 있다.</li> </ul> </div> <div class="btnType"> <a href="/include/fileDown.asp?filename=지능정보화 기본법 모바일앱 접근성 관련 주요 내용.pdf" title="지능정보화 기본법 주요내용 파일 다운로드받기">자세히보기 <span class="ico_file"></span></a> </div> <h3>콘텐츠 개발 환경</h3> <p>모바일 애플리케이션 콘텐츠는 다양한 OS플랫폼에 따라 콘텐츠 개발 기반부터 다르게 구현되고 있습니다. 대표적으로 OS플랫폼은 <span class="fb">iOS와 Android</span> 등으로 구분되며 OS에 따라서 개발언어(native)가 다르고 그에 따라 접근성 구현 방식도 전혀 다릅니다.<br />또한 각 OS에서 지원하는 <span class="fb">모바일 스크린리더(iOS-VoiceOver, Android-TalkBack)</span>의 동작/인식도 상이하기 때문에 동일한 웹소스 페이지도 접근성 구현 방식에 따라서 사용자에게 전혀 다른 결과로서 제공이 될 수 있습니다.</p> <h3>사용자 입력 방식</h3> <p>모바일 기기는 일반적인 컴퓨터 사용환경과 다르게 키보드와 마우스를 사용하는 것이 아닌 화면에 전용 펜이나 손가락 등으로 직접 <span class="fb">터치하여 입력 및 조작</span>을 하게 됩니다. 때문에 시각장애인 사용자의 모바일 기기 사용 방식도 다르며 콘텐츠의 접근성 구현에 앞서 <span class="fb">필수적으로 그 사용 방식에 대한 이해</span>가 필요합니다. <p class="mt20">다음 표는 시각장애인 사용자의 가장 기본적인 콘텐츠 탐색 방법입니다.</p> <div class="table"> <table> <caption>콘텐츠 탐색 방법</caption> <thead> <tr> <th scope="col" class="w20p">탐색 방법</th> <th scope="col" class="w40p">순차 탐색</th> <th scope="col" class="w40p">임의 탐색(터치 탐색)</th> </tr> </thead> <tbody> <tr> <th scope="row">설명 </th> <td>한 손가락으로 왼쪽이나 오른쪽으로 스와이프하여 화면의 항목 사이를 이동합니다. <br />다음 항목으로 이동하려면 오른쪽으로 스와이프하고 이전 항목으로 이동하려면 왼쪽으로 스와이프하는 방식입니다. </td> <td>한 손가락을 사용하여 화면을 터치한 상태로 천천히 드래그하여 화면의 각 항목에 이동합니다. <br />콘텐츠 위에 손가락이 위치할 때 콘텐츠에 대한 정보를 스크린리더가 음성 피드백 해주게 되는 방식입니다.</td> </tr> </tbody> </table> </div> <p>모바일 스크린리더의 사용방법에 대한 자세한 내용은 다음 링크를 참조해주세요.</p> <div class="btnType"> <a href="https://help.apple.com/iphone/11/?lang=ko#/iph3e2e2329" target="_blank" title="애플의 보이스오버 사용방법 안내페이지가 새 창으로 열립니다.">VoiceOver 사용 방법 <span class="ico_file"></span></a> <a href="https://support.google.com/accessibility/android/topic/10601571?hl=ko&ref_topic=3529932" target="_blank" title="구글의 안드로이드 Talkback 사용방법 안내페이지가 새 창으로 열립니다.">TalkBack 사용 방법 <span class="ico_file"></span></a> </div> <!-- binBox --> <div id="binBox"></div> <!-- //binBox --> <script> var Hgt_win = window.innerHeight; var Hgt_dcm = $(document).height(); var Top_contents = $('#contents').offset().top; var Hgt_contents = $('#contents').height(); var Hgt_Scroll = $(window).scrollTop() now_url = document.location.href; if (now_url.indexOf('#contents') != -1) { binBox_reSize=true } else { binBox_reSize=false } var Hgt_binBox = Hgt_win - Hgt_contents + Top_contents //var Hgt_binBox = Hgt_win - (Hgt_dcm - Top_contents) if (Hgt_binBox > 0 && binBox_reSize) { $('#binBox').height(Hgt_binBox + 'px'); } </script> </div> <!-- //contents --> </div> <!-- //contentsW --> </div> <!-- //container --> </div> <!-- //wrapper --> <!-- banner --> <div class="bannerW"> <div class="banner"> <ul> <li><a href="https://www.msit.go.kr" target="_blank" title="과학기술정보통신부 사이트 바로가기(새창열림)"><img src="/static/img/portal/common/ban1.png" alt="과학기술정보통신부"/></a></li> <li><a href="http://www.nia.or.kr/" target="_blank" title="NIA 한국지능정보사회진흥원 사이트 바로가기(새창열림)"><img src="/static/img/portal/common/ban2.png" alt="NIA 한국지능정보사회진흥원"/></a></li> <li><a href="http://www.ableforum.com/" target="_blank" title="한국장애인인권포럼 사이트 바로가기(새창열림)"><img src="/static/img/portal/common/ban3.png" alt="사단법인 한국장애인인권포럼"/></a></li> <li><a href="http://www.socialenterprise.or.kr" target="_blank" title="한국사회적기업진흥원 사이트 바로가기(새창열림)"><img src="/static/img/portal/common/ban4.png" alt="한국사회적기업진흥원(새창열림)"/></a></li> <li><a href="https://www.w3.org/" target="_blank" title="W3C 사이트 바로가기(새창열림)"><img src="/static/img/portal/common/ban5.png" alt="W3C"/></a></li> </ul> </div> </div> <!-- //banner --> <!-- footer --> <div id="footerW"> <div id="footer" > <ul class="foot_tab"> <li><a href="/user_info/info_1.html?MenuCD=800">개인정보처리방침</a></li> <li><a href="/user_info/info_2_1.html?MenuCD=800">이용약관 </a></li> <li><a href="/user_info/info_3.html?MenuCD=800">이메일무단수집거부</a></li> </ul> <div style="width:100%; margin:0 auto;"> <div class="address"> <p>전화 : (02) 2678-0078 | 팩스 : (02) 2069-0091 | 이메일 : <a href="mailto:webwatch@hanmail.net" title="관리자에게 메일 보내기(새창열림)">webwatch@webwatch.or.kr</a></p> <address> 주소 : (07266) 서울특별시 영등포구 영등포로 143(당산동1가 53-4) ABLEHUB 6층 </address> <p>Copyright 2018 <em>WebWatch Corp.</em> All Rights Reserved.</p> </div> <div class="marks"> <img src="/static/img/portal/common/mark_family.png" alt="가족친화기업" /> <img src="/static/img/portal/common/mark_seoul.png" alt="서울시 사회적경제 우수기업" /> <img src="/static/img/portal/common/mark3.png" alt="Venture for Tomorrow" /> <img src="/static/img/portal/common/mark4.png" alt="innobiz 기술혁신형중소기업" /> </div> </div> </div> </div> <!-- //footer --> <!-- ModalLayer --> <div id="ModalLayer" ></div> <img id="WaitImg" style="display:none;z-index:2000;" src="/static/img/portal/common/wait5.gif" alt="처리중 입니다. 잠시만 기다려 주세요." /> <!-- //ModalLayer --> <!-- 리포트2.0 로그분석코드 시작 --> <script type="text/javascript"> var JsHost = (("https:" == document.location.protocol) ? "https://" : "http://"); var uname = escape("웹와치사업단"); document.write(unescape("%3Cscript id='log_script' src='" + JsHost + "ableforum.weblog.cafe24.com/weblog.js?uid=ableforum_5&uname="+uname+"' type='text/javascript'%3E%3C/script%3E")); </script> <!-- 리포트2.0 로그분석코드 완료 --> </body> </html>