SlideShare ist ein Scribd-Unternehmen logo
1 von 28
원칙  3.  이해의 용이성 2011년 5월 2일 신승식, LG전자
이해의 용이성이란 Perception Cognition Understanding
4개의 지침 3.1  가독성 3.2  예측 가능성 3.3  콘텐츠의 논리성 3.4  입력 도움
6개의 검사 항목 3.4.2( 오류 정정 )  입력 오류를 정정할 수 있는 방법을 제공해야 한다 .  3.4.1( 레이블 제공 )  입력 서식에는 대응하는 레이블을 제공해야 한다 .  3.4( 입력 도움 )  입력 오류를 방지하거나 정정할 수 있어야 한다 .  3.3.2( 표의 구성 )  표는 이해하기 쉽게 구성해야 한다 .  3.3.1( 콘텐츠의 선형화 )  콘텐츠는 논리적인 순서로 제공해야 한다 .  3.3( 콘텐츠의 논리성 )  콘텐츠는 논리적으로 구성해야 한다 .  3.2.1( 사용자 요구에 따른 실행 )  사용자가 의도하지 않은 기능 ( 새 창 ,  초점 변화 등 ) 은 실행되지 않아야 한다 .  3.2( 예측 가능성 )  콘텐츠의 기능과 실행결과는 예측 가능해야 한다 .  3.1.1( 기본 언어 표시 )  주로 사용하는 언어를 명시해야 한다 .  3.1( 가독성 )  콘텐츠는 읽고 이해하기 쉬워야 한다 .   검사항목 (6 개 )  지침 (4 개 )
3.1.1 기본 언어 표시 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],3.1  가독성
인코딩 방식 지정 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],3.1  가독성
언어 변환 ,[object Object],<p> 그는 한국어로  <q lang=&quot;ko&quot;> 웹은 보편적으로 접근 가능한 것입니다 .</q> 라고 말하였다 .</p>  <p> 그는 프랑스어로  <q lang=&quot;fr&quot;> Web est accessible à tous</q> 이라고 말하였다 .</p>  그는 한국어로  “ 웹은 보편적으로 접근 가능한 것입니다 . ” 라고 말하였다 .  그는 프랑스어로  «  Web est accessible à tous  » 이라고 말하였다 .  중국어로는  &quot; 안녕하세요”라고 인사할 때에  니하오 라고 말합니다 . 3.1  가독성
3.2.1 사용자 요구에 따른 실행 3.2  예측 가능성 마우스 롤오버에 의해 하위 메뉴가 생성되는 잘못된 사례 초점 변화나 롤오버 이벤트에 의해 맥락을 변화시키면 안 된다 .
서식 제출(submit) 버튼 제공 ,[object Object],[object Object],[object Object],[object Object],[object Object],3.2  예측 가능성 값을 입력하자마자 서식이 제출되는 잘못된 사례                                                          그림  1).  전화 번호 입력 필드 예
제출(이동) 버튼은 어디로? ,[object Object],3.2  예측 가능성 ?
자동으로 열리는 팝업 창 ,[object Object],3.2  예측 가능성
제출 버튼이 없는 체크 상자 ,[object Object],3.2  예측 가능성                                                                                                                              그림  4).  체크 상자를 선택하는 것만으로 페이지의 내용이 바뀌는 경우
초점 위치를 알 수 있게! ,[object Object],3.2  예측 가능성 <input type=&quot;submit&quot;  onFocus=&quot;this.blur();&quot; >  <a  onFocus=&quot;this.blur()&quot;  href=&quot;Page.html&quot;> <img src=&quot;myImage.gif&quot;> </a>
초점의 시각적 표현 ,[object Object],3.2  예측 가능성 초점이 잘 안 보이는 브라우저들  ( 왼쪽부터 인터넷 익스플로러 ,  파이어폭스 )
약시자를 위한 선명한 초점 ,[object Object],:focus { outline-width: 2px !important; outline-style: solid !important; -moz-outline-radius: 4px; } 3.2  예측 가능성 참고 : http://gregshin.pe.kr/blog/archives/296
내용을 자동으로 업데이트? ,[object Object],3.2  예측 가능성
잠시 후 자동으로 페이지 이동? ,[object Object],<title> 유효하지 않은 페이지 </title>      < meta http-equiv=&quot;refresh&quot; content=&quot;10 ;URL='http://target-page.com/'&quot; />  대신 서버측 리디렉션 기술을 이용한다 . http://gregshin.pe.kr/xe/?mid=board&category=259&page=2&document_srl=505   참고 3.2  예측 가능성
마크업 순서도 논리적으로 ,[object Object],3.3  콘텐츠의 논리성 겉보기 선형화해보면
레이블 붙이기: 라디오 버튼 ,[object Object],3.4  입력 도움 <input type=&quot;radio&quot;  name=&quot;show&quot;  value=&quot;0&quot;  id=&quot;show0&quot;  checked=&quot;checked“ />  <label  for=&quot;show0&quot; >Threads</label>  <input type=&quot;radio&quot;  name=&quot;show&quot;  value=&quot;1&quot;  id=&quot;show1&quot;  />  <label  for=&quot;show1&quot; >Posts</label>
서식을 표 안에서 쓸 때 ,[object Object],3.4  입력 도움 <td> <input type=&quot;radio&quot; name=&quot;no2&quot; id=&quot;no2-2&quot; value=&quot;2&quot;  title=&quot;2.  강사 실력  -  중립 &quot; > </td>
실시간 오류 검사 ,[object Object],3.4  입력 도움 실시간으로 호스트명이 적합한지 검사하는 예제
오류 메시지는 서식보다 위에 3.4  입력 도움 오류로 바로 가는 링크와 함께 !
1)  경고창으로 오류 확인 3.4  입력 도움
2) 오류간 난 곳으로 초점 이동 3.4  입력 도움
반드시 서버측 오류 검사를 병행 ! 3.4  입력 도움 <form action=&quot; javascript:validateform() &quot;>  <form action=&quot; # &quot; onsubmit=&quot;validateform()&quot;>  <form action=&quot; submit.php &quot; onsubmit=&quot; return validateform() &quot;>  잘못된 사례 바른 사례
지나친 친절은 독이 된다! ,[object Object],[object Object],3.4  입력 도움
처음부터 다시 하라고? ,[object Object],[object Object],3.4  입력 도움
최종 제출 전에 확인! ,[object Object],[object Object],3.4  입력 도움

Weitere ähnliche Inhalte

Empfohlen

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Empfohlen (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

웹 콘텐츠 접근성 지침 2.0에 기반한 콘텐츠 제작 기법: 3. 이해의 용이성

  • 1. 원칙 3. 이해의 용이성 2011년 5월 2일 신승식, LG전자
  • 2. 이해의 용이성이란 Perception Cognition Understanding
  • 3. 4개의 지침 3.1 가독성 3.2 예측 가능성 3.3 콘텐츠의 논리성 3.4 입력 도움
  • 4. 6개의 검사 항목 3.4.2( 오류 정정 ) 입력 오류를 정정할 수 있는 방법을 제공해야 한다 . 3.4.1( 레이블 제공 ) 입력 서식에는 대응하는 레이블을 제공해야 한다 . 3.4( 입력 도움 ) 입력 오류를 방지하거나 정정할 수 있어야 한다 . 3.3.2( 표의 구성 ) 표는 이해하기 쉽게 구성해야 한다 . 3.3.1( 콘텐츠의 선형화 ) 콘텐츠는 논리적인 순서로 제공해야 한다 . 3.3( 콘텐츠의 논리성 ) 콘텐츠는 논리적으로 구성해야 한다 . 3.2.1( 사용자 요구에 따른 실행 ) 사용자가 의도하지 않은 기능 ( 새 창 , 초점 변화 등 ) 은 실행되지 않아야 한다 . 3.2( 예측 가능성 ) 콘텐츠의 기능과 실행결과는 예측 가능해야 한다 . 3.1.1( 기본 언어 표시 ) 주로 사용하는 언어를 명시해야 한다 . 3.1( 가독성 ) 콘텐츠는 읽고 이해하기 쉬워야 한다 . 검사항목 (6 개 ) 지침 (4 개 )
  • 5.
  • 6.
  • 7.
  • 8. 3.2.1 사용자 요구에 따른 실행 3.2 예측 가능성 마우스 롤오버에 의해 하위 메뉴가 생성되는 잘못된 사례 초점 변화나 롤오버 이벤트에 의해 맥락을 변화시키면 안 된다 .
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22. 오류 메시지는 서식보다 위에 3.4 입력 도움 오류로 바로 가는 링크와 함께 !
  • 23. 1) 경고창으로 오류 확인 3.4 입력 도움
  • 24. 2) 오류간 난 곳으로 초점 이동 3.4 입력 도움
  • 25. 반드시 서버측 오류 검사를 병행 ! 3.4 입력 도움 <form action=&quot; javascript:validateform() &quot;> <form action=&quot; # &quot; onsubmit=&quot;validateform()&quot;> <form action=&quot; submit.php &quot; onsubmit=&quot; return validateform() &quot;> 잘못된 사례 바른 사례
  • 26.
  • 27.
  • 28.