웹표준/웹접근성

이 가이드는 웹표준과 웹접근성의 기본 개념을 이해하고, 실제 퍼블리싱과 개발 업무에 적용할 수 있도록 돕기 위해 제작되었습니다. 모든 사용자에게 최적의 경험을 제공하기 위한 필수 요소들을 소개합니다.

웹표준은 웹 페이지와 애플리케이션이 다양한 브라우저와 기기에서 일관된 동작과 디자인을 유지할 수 있도록 만드는 규칙입니다. 올바른 HTML, CSS, JavaScript 코드를 작성하면 유지보수성과 접근성이 향상됩니다.
지키지 않을 시 제대로 작동이 되지 않습니다.

주요 웹표준 규격:

• HTML5
• CSS3
• ECMAScript (JavaScript)
• ARIA (Accessible Rich Internet Applications)

자주하는 실수

• HTML 표준에 따르면, void 요소(예: <img>, <br>, <hr> 등)만 self-closing으로 사용할 수 있으며, <span>과 같은 요소는 반드시 <span></span>처럼 명시적으로 닫아주어야 합니다.
  React의 JSX에서는 Babel이 이를 변환해주기 때문에 <span />과 같은 형태가 허용되지만, 이는 JSX 전용 문법일 뿐이며 표준 HTML에서는 권장되지 않습니다.
  일반적으로 브라우저의 HTML 파서를 그대로 사용하기 때문에, self-closing 태그 사용은 피하는 것이 좋습니다.

• <textarea>는 self-closing에 해당하지 않는다. 반드시 닫는 태그를 넣어라, 값은 닫는 태그 앞에 넣어야 한다.

• <input>는 self-closing에 해당합니다. 값은 value 에 넣어주세요. 그리고 type은 반드시 정해주세요.

되도록이면 이클립스 외 "vs코드" 또는 "인텔리제이"로 작업을 하는걸 추천합니다.(프론트는 괜찮은데, 백은 통일성 있어야 되서 안될지도...)
이클립스를 사용하시더라도 꼭! 반드시 열고 닫힘을 잘 지켜주세요.

웹접근성은 장애를 가진 사용자를 포함한 모든 사용자가 웹 콘텐츠를 접근하고 이용할 수 있도록 보장하는 원칙입니다. 접근성이 높은 웹사이트는 다양한 사용환경과 디바이스에서 최적의 사용자 경험을 제공합니다.

웹접근성을 위한 주요 고려사항:

• 이미지 및 미디어에 대한 대체 텍스트 제공
• 명확한 색 대비와 글자 크기 조정
• 키보드로만 네비게이션 가능하도록 설계
• 구조적 마크업과 명확한 내비게이션 제공

모바일은 기기, ios 버전, 브라우저 등 여러 요건에 따라서 이슈가 발생 할 수 있습니다.
아무리 최신기기라도 이슈가 생길 수 있습니다.

• 모바일 앱에서 input padding 값이 넘치면 역순으로 값이 매겨짐
• ios click event 이슈
  OS만의 이슈로 iPhone이나 iPad의 경우,
  a 태그나 input 태그가 아닌 경우 클릭 이벤트 리스너를 붙여놔도 제대로 동작하지 않는 경우가 있다.
  이때는 click 이벤트 리스너를 붙인 태그에 스타일로 cursor: pointer;를 넣어주면 해소된다.
  이유는 iOS가 dom이 로딩된 후 클릭 이벤트 리스너가 추가된 dom을 클릭해도 클릭 이벤트를 fire 시켜주지 않기 때문이다. (mouseover, touchstart 등은 정상작동) 스타일로 curosr: pointer를 추가해주면 iOS가 해당 dom이 클릭 대상이라고 인지하고 클릭시 클릭 이벤트를 fire 시켜주게 되어 문제가 해소된다.
  참고자료

웹표준과 웹접근성을 적용한 퍼블리싱 및 개발 작업을 위한 가이드라인입니다. 아래의 항목들을 준수하면 보다 일관되고 접근성 높은 웹사이트를 만들 수 있습니다.

1. 코드의 가독성을 위해 주석을 충분히 작성한다.
2. HTML, CSS, JavaScript의 올바른 문법과 구조를 준수한다.
3. 모든 이미지와 미디어에 대해 대체 텍스트를 제공한다.
4. 키보드 및 스크린 리더 사용자에 대한 접근성을 고려한다.
5. 반응형 디자인을 적용해 다양한 디바이스에서 최적의 화면을 제공한다.

• W3C - World Wide Web Consortium
• MDN 웹 문서
• WebAIM (웹접근성 관련 자료)