웹접근성 검사기능을 이용해서 누구나 접근할 수 있는 웹 콘텐츠를 제작해보세요.
체험하기
| HTML |
|---|
<link href='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'> <script src="https://code.jquery.com/jquery-3.3.1<!-- Synap Editor --> <!-- code mirror --> <script type="text/javascript" src='/se/resource/synapeditor/externals/codeMirror/codemirror.min.js'></script> <script type="text/javascript" src="/se/resource/synapeditor/externals/codeMirror/xml.min.js"></script> <script src='http://www.synapeditor.com/resource/synapeditor/synapeditor.min.js'></script> <div style="background-color: #ffffff; width:99%; height:500px;"> <div id="synapEditor"> <p> <span class="se-drawing-object-wrapper se-image" data-drawing-object-id="se_49f38f9a-888f-425b-b069-257134736430" style="display: inline-block; text-indent: 0px; vertical-align: baseline;"> <img src="http://www.synapeditor.com/resource/images/editor/desktop/editor_logo.png" style="vertical-align: bottom; width: 329px; height: 81px;"> </span> </p> <p><span></span></p> <table data-drawing-object-id="se_b884ed3f-11ac-4510-8462-6f74f89ad6c5" data-template-id="0" data-paragraph-id="se_297a6bc1-34b4-4cb1-af7c-39e63f95cb67" style="border-collapse: collapse; word-break: break-all; white-space: normal; line-height: normal; width: 100%; table-layout: fixed; margin: 0px; vertical-align: text-bottom;"> <colgroup> <col style="width: 49.9373%;"> <col style="width: 50.0627%;"> </colgroup> <tbody> <tr> <th scope="col" data-table-row-index="0" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; background: rgb(242, 242, 242); font-weight: bold; font-family: Nanum; font-size: 13px; text-align: center; padding: 7px 0px; margin: 0px; width: calc(49.9373% - 0px); border: 1px solid <link rel='stylesheet' href='/se/resource/synapeditor/externals/codeMirror/codemirror.min.css'> <!-- external modules --> <script type="text/javascript" src='/se/resource/synapeditor/externals/formulaParser/formula-parser.min.js'></script> <script type="text/javascript" src='/se/resource/synapeditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script> <script type="text/javascript" src='/se/resource/synapeditor/externals/SEShapeManager/SEShapeManager.min.js'></script> <!-- Synap Editor --> <script src='/se/resource/synapeditor/synapeditor.config.js'></script> <script src='/se/resource/synapeditor/synapeditor.min.js'></script> <link href='/se/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'> <!-- plugins --> <script type="text/javascript" src='/se/resource/synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.js'></script> <link rel='stylesheet' href='/se/resource/synapeditor/plugins/webAccessibilityChecker/webAccessibilityChecker.min.css'> <div style="background-color: #ffffff; width:99%; height:500px;"> <div id="synapEditor"> <p style="margin:14px 0;"> <span class="se-drawing-object-wrapper se-image" data-drawing-object-id="se_49f38f9a-888f-425b-b069-257134736430" style="display: inline-block; text-indent: 0px; vertical-align: baseline;"> <img src="https://synapeditor.com/se/resource/images/editor/desktop/editor_logo.png" style="vertical-align: bottom; width: 329px; height: 81px;"> </span> </p> <table data-template-id="0" style="border-collapse: collapse; width: 100%; margin: 0px;"> <colgroup> <col style="width: 30%;"> <col style="width: 70%;"> </colgroup> <tbody> <tr> <td style="background: rgb(242, 242, 242); font-weight: bold; font-family: Nanum; font-size: 13px; text-align: center; padding: 7px 0px; margin: 0px; border: 1px solid rgb(0, 0, 0);"> <p style="margin: 0px;"> <span>구분</span> </p> </th> <td style="background: rgb(242, 242, 242); font-weight: bold; font-family: Nanum; font-size: 13px; text-align: center; padding: 7px 0px; margin: 0px; border: 1px solid rgb(0, 0, 0);"> <p style="margin: 0px;"> <span>정의</span> </p> </th> </tr> <tr> <td style="padding: 7px 15px 7px 10px; margin: 0px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="margin: 0px;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">장애인- 노인 등의 정보통신</span> <br> <span style="font-weight: bold; color: rgb(61, 127, 18);">접근성 향상을 위한 권장지침</span> </p> </td> <td style="padding: 7px 15px 7px 10px; margin: 0px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="margin: 0px;"> <span>정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것</span> </p> </td> </tr> <tr> <td style="padding: 7px 15px 7px 10px; margin: 0px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="margin: 0px;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">웹 접근성 이니셔티브</span> <br> <span>(</span> <a data-hyperlink-id="758e3650-5ba7-4a9b-919a-ca038b343f35" data-href="http://www.w3.org/WAI/intro/accessibility.php" title="WAI: Web Accessibility Initiative 사이트로 이동" target="_blank" href="http://www.w3.org/WAI/intro/accessibility.php" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;"> <span>WAI: Web Accessibility Initiative</span> </a> <span>)</span> </p> </td> <td style="padding: 7px 15px 7px 10px; margin: 0px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="margin: 0px;"> <span>장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를</span> <span> </span> <span style="color: rgb(197, 67, 4); padding: 0px; margin: 0px;">인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable)</span> <span>, 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것</span> </p> </td> </tr> <tr> <td style="padding: 7px 15px 7px 10px; margin: 0px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="margin: 0px;"> <a data-hyperlink-id="3b662b73-3896-4c3a-a79c-e718f9768a6b" data-href="http://en.wikipedia.org/wiki/Web_accessibility" title="Wikipedia 사이트로 이동" target="_blank" href="http://en.wikipedia.org/wiki/Web_accessibility" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">Wikipedia</span> </a> </p> </td> <td style="padding: 7px 15px 7px 10px; margin: 0px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="word-wrap: break-word; <p style="margin: 0px; white-space: pre-wrap;"> <span>구분</span> </p> </th> <th scope="col" data-table-row-index="0" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; background: rgb(242, 242, 242); font-weight: bold; font-family: Nanum; font-size: 13px; text-align: center; padding: 7px 0px; margin: 0px; width: calc(50.0627% - 0px); border: 1px solid rgb(0, 0, 0);"> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <span>정의</span> </p> </th> </tr> <tr> <td data-table-row-index="1" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">장애인- 노인 등의 정보통신</span> <br> <span style="font-weight: bold; color: rgb(61, 127, 18);">접근성 향상을 위한 권장지침</span> </p> </td> <td data-table-row-index="1" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <span>정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것</span> </p> </td> </tr> <tr> <td data-table-row-index="2" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; "> <span>표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것</span> </p> </td> </tr> <tr> <td style="padding: 7px 15px 7px 10px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">웹 접근성 이니셔티브</span> <br> <span>(</span> <a data-hyperlink-id="758e3650-5ba7-4a9b-919a-ca038b343f35" data-href="http://www.w3.org/WAI/intro/accessibility.php" title="WAI: Web Accessibility Initiative 사이트로 이동" target="_blank" href="http://www.w3.org/WAI/intro/accessibility.php" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;"> <span>WAI: Web Accessibility Initiative</span> </a> <span>)</span> </p> </td> <td data-table-row-index="2" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <span>장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를</span> <span> </span> <span style="color: rgb(197, 67, 4); padding: 0px; margin: 0px;">인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable)</span> <span>, 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것</span> </p> </td> </tr> <tr> <td data-table-row-index="3" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <a data-hyperlink-id="3b662b73-3896-4c3a-a79c-e718f9768a6b" data-href="http://en.wikipedia.org/wiki/Web_accessibility" title="Wikipedia 사이트로 이동" target="_blank" href="http://en.wikipedia.org/wiki/Web_accessibility" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">Wikipedia</span> </a> </p> </td> <td data-table-row-index="3" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; <p style="margin: 0px;"> <a data-hyperlink-id="73ecb492-327a-4c88-acd3-0156491bf5cb" data-href="http://www.nia.or.kr/" title="한국정보화진흥원 사이트로 이동" target="_blank" href="http://www.nia.or.kr/" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">한국정보화진흥원</span> </a> </p> </td> <td style="padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" class=""> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <span>표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것</span> </p> </td> </tr> <tr> <td data-table-row-index="4" data-table-col-index="0" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px <p style="margin: 0px;"> <span style="color: rgb(197, 67, 4); padding: 0px; margin: 0px; width: calc(49.9373% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);"> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <a data-hyperlink-id="73ecb492-327a-4c88-acd3-0156491bf5cb" data-href="http://www.nia.or.kr/" title="한국정보화진흥원 사이트로 이동" target="_blank" href="http://www.nia.or.kr/" style="text-decoration: underline !important; color: rgb(29, 158, 160) !important;"> <span style="font-weight: bold; color: rgb(61, 127, 18);">한국정보화진흥원</span> </a> </p> </td> <td data-table-row-index="4" data-table-col-index="1" style="word-break: break-word; border-collapse: collapse; padding: 7px 15px 7px 10px; margin: 0px; width: calc(50.0627% - 25px); border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" class=""> <p style="word-wrap: break-word; margin: 0px; white-space: pre-wrap;"> <span style="color: rgb(197, 67, 4); padding: 0px; margin: 0px;">어떠한 사용자(장애인, 노인 등)</span> <span>, 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것</span> </p> </td> </tr> </tbody> </table> <p><span></span></p>">어떠한 사용자(장애인, 노인 등)</span> <span>, 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것</span> </p> </td> </tr> </tbody> </table> </div> </div> <script> window.editorconst config = new SynapEditor("synapEditor"Object.assign(synapEditorConfig, { "editor.license":"/se/resource/license.json", "editor.toolbar": [ "new","|", "accessibilityWebAccessibilityChecker" ], "editor.menu.show": false }); window.editor = new SynapEditor("synapEditor", config, document.getElementById('synapEditor').innerHTML); </script> |
...