웹 표준에 관하여

웹 표준 (Web Standards)

웹에서 표준적으로 사용되는 기술이나 규칙

• standard(표준)보다는 권고안(recomendation)에 가깝다.
• HTML, CSS, JavaScript에 대한 규정을 담고 있다.
• 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.
• 웹 접근성, 웹 호환성, 웹 사용성은 모두 웹 표준을 지키기 위해 생긴 개념들이다.

웹 표준을 따를 때 장점

• 다양한 브라우저나 새로운 기기에서도 올바르게 표시된다.
• 접근성 향상
• 검색 엔진 최적화(SEO)
  • meta 요소를 이용한 정확한 문서 정보의 제공과 적절한 제목(heading)의 사용, 의미에 맞는 마크업은 검색 시 결과에 영향을 미치는 중요한 정보이다.
• 쉬운 유지보수 및 비용 절감
  • 구조와 표현을 분리하여 제작함으로 소스의 경량화로 인해 서버의 트래픽 비용이 감소한다.

---

웹 호환성(Cross Browsing)

• 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법
• 운영체제 및 브라우저 간 동일한 결과가 나오도록 하는 것이다.
• 특정 운영체제와 브라우저에 종속되어 있다면 다양한 운영체제 환경 및 브라우저에서의 사용이 불가능한 문제점이 발생하게 된다.

---

웹 접근성 (Web Accessibility)

모든 사용자가 신체적 · 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것

• 신체적 조건 : 장애를 가진 사람, 고령자 등
• 환경적 조건 : 저사양 기기, 인터넷이 느린 환경 등

웹 접근성을 따를 때 장점

• 사회 공헌 및 복지 기업으로서의 기업 이미지 향상
• 다양한 사용자층 확보 가능

웹 접근성 가이드

1. 인지성
   • 정보와 UI 요소는 그들이 인지할수 있도록 사용자에게 표시될 수 있어야 한다.
   • 모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
2. 운용성
   • 사용자가 모든 기능에 대해 조작이 가능해야 한다.
   • 키보드로 모든 기능을 사용할 수 있도록 해야 한다.
   • 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
   • 사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.
3. 이해성
   • 모든 사용자에게 콘텐츠는 이해돼야한다.
   • 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
   • 웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
   • 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.
4. 견고성
   • 미래의 기술로도 현재의 콘텐츠를 이용할 수 있어야 한다.

구체적인 예시

• img태그 내의 alt에 대체 텍스트를 입력해 스크린 리더기가 읽을 수 있게 해야한다.
  • 이미지에 글 콘텐츠가 포함돼 있다면 똑같이 적어야 한다.
  • 의미 없는 디자인용 이미지 같은 경우는 alt를 빈칸으로 남겨둔다.
  • QR코드와 같은 이미지는 어떤 QR코드인지 명시해야 한다.
  • 버튼도 기능을 명시해야 한다.

  <img src="249287xnlsde.jpg" alt="마샬 스피커 할인">  <!--콘텐츠 이용에 필요한 이미지-->
  <img src="293847lkdjw.jpg" alt="">	<!--디자인 용 의미없는 이미지-->
  <img src="293847lkdjw.jpg" alt="website.co.kr로 가는 qr코드 이미지">	<!--QR코드 이미지-->
  <input type="image" src="button.png" alt= "뒤로가기 버튼">	<!--버튼 이미지-->
  

• 자동재생 배경음 적용 금지
  • 화면 낭독 프로그램을 이용하는 사용자에게 방해가 될 수 있다.
  • 이용자가 소리의 재생을 선택할 수 있는 기회를 제공해야 한다.
• Tab 키를 이용해 콘텐츠 선택 가능
  • tabindex속성을 이용한다.
• 자막 제공
  • 음성을 귀로 듣지 못하는 경우에 자막 또는 수화를 제공해야 한다.
• sementic tag를 적용해야 한다
  • SEO, 스크린 리더기가 식별한다.

웹 사용성

웹 서비스의 사용성을 개선하기 위해 고민해 봤던 부분이 있는지? 

UI, UX적인 측면에서 바라봐야 한다.

직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 함

유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 함

학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함

유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함

나의 경우 

• 인간의 두뇌 특성을 기반으로 애니메이션 속도는 1초를 넘기면 지루해 하기에 200ms~500ms로 함
• placeholder를 사용해 어떤 값을 입력하면 되는지 미리 알려줌
• 지역 입력을 받는다면 사용자가 오타를 낼 수도 있거나 어떤 값을 입력해야 할지 모를 수도 있으니 값들을 미리 제공하면 서로 좋다.
• 성능을 위해서 lazy 로딩 적용
• 내비게이션을 항상 페이지 상단에 띄움으로 페이지 이동 편의성을 고려함
• 시맨틱 태그를 적용하여 SEO, 시각장애인을 위한 스크린 리더기를 고려함

Ref

https://dbdlab.tistory.com/entry/websiteusabilityprinciples

https://seulbinim.github.io/WSA/accessibility.html

http://www.smartebiz.kr/new/subpage02_02.html

https://jae04099.tistory.com/entry/HTML-CSS-웹-접근성-웹-표준-웹-접근성을-위한-규칙들

https://pentath-blog.tumblr.com/post/45393379895/개발자를-위한-웹표준웹접근성-코딩가이드-2

https://accessibility.naver.com/accessibility