[ 1주차 생각 과제 ] 🖤 웹 접근성과 검색엔진 최적화(SEO)

[Yeonseo-Jo]

✨ 구현 기능 명세

• 생각 과제 : md 파일로 첨부하였습니당

💎 PR Point

⭐️ 1. 웹 접근성

1️⃣ 웹 접근성은 무엇일까?

웹 접근성(Web Accessibility)

: 남녀노소, 장애 유무와 상관 없이 웹 사이트에서 제공하는 정보에 동등하게 접근하고 이해할수 있도록 보장하는 것

정보통신접근성(Web 접근성)은 「지능정보화기본법」에 따라 모든 사용자가 신체적·환경적 조건에 관계없이 웹 서비스에서 제공하는 정보를 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다.

• 한국웹접근성인증평가원_
  장애를 가진 사용자들이 사용할 수 있도록 웹 사이트, 도구, 기술이 설계 및 개발된 것 - W3C

또한 웹 접근성은 법적 의무로 보장되어 있다.

• 웹 접근성 법적 의무

: 웹 접근성 보장은 「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명시된 의무사항이다. 특히 장애인차별금지법은 행위자에 대한 단계적 범위를 명확히 하였으며, 불이행시 처벌 등이 구체적으로 성문화된 법입니다. 이에 따라 모든 공공기관은 2009년 4월 11일 부터 웹 접근성을 준수해야 하고, 단계적으로 2015년까지 모든 웹 사이트가 웹 접근성을 준수해야 한다.

웹 접근성 표준의 주요 원칙

• 한국형 웹 콘텐츠 접근성지침(KWCAG, 한국형 웹 접근성 표준) : 웹 컨텐츠 접근성 가이드라인(WCAG)를 인용 표준으로 국내 실정에 맞게 반영한 것. 4가지 원칙, 이들 원칙을 준수하기 위한 14개 지침, 그리고 지침 준수를 확인하기 위한 33가지 검사 항목이 존재한다.

1. 인식의 용이성

   : 사용자는 장애 유무와 관계 없이 웹사이트에서 제공하는 모든 컨텐츠를 인식할 수 있어야 한다.

   • 관련 지침 : 1) 대체 텍스트 제공, 2) 멀티미디어 대체수단 제공, 3) 컨텐츠 적응성, 4) 컨텐츠 명료성

2. 운용의 용이성

   : 사용자는 장애 유무와 관계 없이 웹사이트에서 제공하는 모든 컨텐츠를 운용할 수 있어야 한다.

   • 관련 지침 : 1) 입력장치 접근성, 2) 충분한 시간 제공, 3) 광고민성 발작 예방, 4) 쉬운 내비게이션, 5) 입력 방식

3. 이해의 용이성

   : 사용자는 장애 유무와 관계 없이 웹사이트에서 제공하는 컨텐츠를 이해할 수 있어야 한다.

   • 관련 지침 : 1) 가독성, 2) 예측 가능성, 3) 입력 도움

4. 견고성

   : 사용자는 기술에 영향을 받지 않고 원하는 콘텐츠를 이용할 수 있어야 한다.

   • 관련 지침 : 1) 문법 준수, 2) 웹 어플리케이션 접근성

---

2️⃣ 접근성을 위한 개발은 어떤 것들이 있을까?

접근성을 위한 개발로는 대표적으로 시맨틱 태그를 사용하여 웹 표준을 준수하는 방법이 있다. 시맨틱 태그를 사용한 시맨틱 웹은 웹 브라우징에 쓰이는 스크린 리더, 화면 돋보기, 음성 인식, 키보드 오버레이 등의 기계가 웹을 좀 더 쉽게 이해할 수 있도록 해주기 때문에 접근성을 높이는데 도움이 된다.

또한 시맨틱 웹은 SEO에도 도움이 된다. 시맨틱 태그에 대한 자세한 언급은 검색 엔진 최적화에서 다루고, 시맨틱 태그 외에 웹 접근성을 위해 사용할 수 있는 기법들에 대해 살펴보자.

1. 이미지 <img>

   • 이미지는 텍스트가 아니라 콘텐츠 요소이기 때문에 그 의미나 용도를 스크린 리더가 인식할수 있도록 대체 텍스트를 제공해야 한다.
   • alt : 이미지에 대한 텍스트 설명을 제공, 스크린 리더는 이 alt의 값을 읽어 사용자에게 이미지를 설명하여 접근성 측면에서 매우 유용하다.

2. 버튼 <button>

   • 브라우저는 코드를 스크린 리더가 읽을 수 잇는 접근성 트리(Accesibility Tree)로 만드는데, 스크린 리더는 접근성 트리에 표시되는 요소의 Name (Accessible name)을 기반으로 해석한다.
     • Accessible Name : 스크린 리더가 요소를 포커스 했을 때 읽는 값
       • (1) author : aria-label, aria-labelledby, title, alt, desc
       • (2) contents : text 노드
   • 버튼은 author가 설정되지 않은 경우 자식 요소의 Accesible Name을 모아 contents로 사용하는 ******************************************Children Presentational******************************************이라는 ******************특징을 갖는다.******************
   • 따라서 버튼을 사용할 때 서비스를 정확히 이해하고 사용할 수 있는 Accesible Name을 제공하는 마크업 작업이 중요하다.

   <button type="button">
     <!-- <img src="/img/img_common_question.png" alt="물음표" />: 구체적이지 않으며 추상적 -->
     <img src="/img/img_common_question.png" alt="내 대출 승인율이란" />
   </button>

3. 표 <table>

   • 표는 알아보기 쉽도록 표의 형태가 데이터 표인지, 레이아웃 표인지 구분하여 서로 다른 방식으로 마크업 해야 한다.
   • 표를 레이아웃 용도로 생각해 <table> 태그를 함부로 남용하면 스크린 리더는 데이터 추출의 어려움을 겪게 되고 사용자도 정보 탐색의 어려움을 느끼게 된다.
   • 스크린 리더는 레이아웃 표와 데이터 표를 다르게 취급한다. - 레이아웃 표 : 소스 코드 순서에 따라 표의 내용을 간단히 읽는다. - 레이아웃 테이블은 표의 의미를 갖지 않고 단순 모양을 잡기 위한 목적으로 사용해야 한다.
     → 따라서 태그를 사용하지 않고 CSS로 테이블 형태를 만들어 사용하는 것을 권장
     → 태그를 사용해야 하는 경우면 summary 속성, <caption>, <thead>, <tbody>, <tfoot>, <th> 요소 등 의미 있는 요소를 사용하지 않아야 함. - 데이터 표 : 열 및 행 수를 포함하여 데이터의 존재를 식별하고, 표 탐색 기능을 제공해 행 및 열 머리글 읽기 등을 수행한다. - 표를 볼 수 없는 사람은 표의 행과 열을 구분할 수 없기 때문에 테이블 내 요소간 구조에 대한 정보를 제공해야 한다. → ex. <caption>, scope 속성 추가
     

     ---

     3️⃣ 접근성을 위한 개발을 꼭 해야 할까?

     웹 접근성을 위한 개발은 다음과 같은 기대효과가 있다.

     웹 접근성의 효과

     1. 사용자층 확대 : 서비스 이용에 장애를 가진 사용자를 배려한 서비스는 이들을 신규 고객으로 서비스와 함께 성장하는 대상으로 바라볼 수 있다.
     2. 규정과 법적 요구사항에 대한 준수: 장애인 차별 금지법 등, 접근성을 고려하여 서비스를 제공한다면 법적 요구사항을 준수할 수 있다.
     3. 서비스를 이용하는 모든 사용자에게 이로움 : 장애를 가진 사람 뿐만 아니라, 써비스를 이용하며 겪는 불편함을 웹 접근성을 준수하며 개선시키면 모든 사용자에게 편리함을 제공할 수 있다.
     4. 사회 공헌 기업으로서의 기업 이미지 향상 : 웹 접근성을 준수하기 위한 노력은 사회 정보취약계층이 인터넷상에서 차별 없이 동등하게 정보 접근 및 이용 가능하도록 하기 위한 사회 공헌적 노력이며 이를 통해 기업 이미지도 향상 될 수 있다.

     따라서, 웹 접근성을 고려한 개발을 통해 모든 사용자에게 동일한 정보를 제공하는 서비스를 만들어야 한다고 생각한다.

     ---

     
     
     

     ⭐️ 2. 검색엔진 최적화(SEO)

     1️⃣ 검색엔진 최적화 하는 방법에는 무엇이 있을까?

     1) 검색엔진 최적화란?

     : 검색엔진 최적화란 검색 엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발 해 검색 결과 상위에 노출될수 있도록 하는 작업이다.

     • 검색 엔진이 하는 일 : 고객의 검색어(Query)에 제일 가까운 답을 제공해준다. 즉, 컨텐츠의 랭킹을 매겨 상단 노출시켜주는 기능을 수행한다.

     2) 검색엔진 최적화를 위한 방법

     1. **시맨틱 태그 사용**
     • 시맨틱 태그를 사용한 시맨틱 웹은 페이지의 다른 섹션과 레이아웃을 더 잘 정의하여 어떤 종류의 컨텐츠를 포함하고 있는지 알려주는 역할을 하여, HTML을 보다 이해하기 쉽게 만든다.
     • 의미에 맞는 태그를 사용하여 사용자 뿐만 아니라 기계 입장에서도 컨텐츠를 더 쉽게 이해하도록 만들 수 있으며, 이를 통해 SEO 성능을 향상시킬 수 있다.
     • 시맨틱 태그를 사용해야 하는 이유는, 기계가 태그의 기본 역할을 암묵적으로 자동 결정하여 사용자에게 전달하기 때문이다.
     • 시맨틱 태그 예시
       • 페이지 제목 또는 글 제목에는 <header> 사용
       • 콘텐츠 작성자, 저작권 정보, 관련 문서 등의 내용을 포함할 때는 <footer> 사용
       • 문서의 핵심 주제를 포함하는 메인 콘텐츠에 <main> 사용
       • 독립적으로 구분해야 하는 콘텐츠에 <article> 사용
       • 페이지의 가장 중요한 제목으로 <h1> 사용
       • 순서가 없는 목록으로 <ul>과 <li> 사용
     1. **메타 태그 사용**

     • 메타 태그(Meta Tag) : 웹페이지가 담고 있는 컨테츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그

     • 메타 태그는 요소 아래에 배치 되어 일반 유저가 보게 되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않으나, 검색 엔진과 같은 기계들이 웹페이지를 읽어야 할 때는 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 중요한 요소가 된디.

     • 메타 태그 예시

       • <title> : 웹 페이지의 제목을 명시
       • <description> : 웹 페이지의 설명을 요약한 한 두줄의 문장을 명시
       • <robots> : 웹 페이지 별 검색 로봇의 접근 여부를 설정할 때 활용할 수 있는 태그
       • <canonical> : 여러 URL을 가진 웹페이지가 있을 때, 해당 페이지의 대표 URL을 설정할 수 있는 태그. 검색 로봇이 웹페이지를 크롤링할 때 중복 URL로 인한 페널티가 적용되게 하지 않게끔 도와주는 역할을 한다.
       • 오픈 그래프 태그 (og) : 웹 페이지의 링크가 카카오톡이나 기타 SNS에서 공유될 때 어떻게 노출될지를 정의 해 주는 역할.
     
     
     • 참고 자료
       https://yozm.wishket.com/magazine/detail/1942/
       https://tech.kakaopay.com/post/accessibility-stories-for-everyone/
       https://yozm.wishket.com/magazine/detail/1540/
     
     

     🥺 소요 시간, 어려웠던 점

     • 1h
     • 웹 접근성을 지키는게 중요하면서도 어려운것 같네용
     
     

[SooY2]

깔끔하게 정리 잘했다..✨ 참고자료까지!!!

[nayujin-dev]

자세하고 깔끔하당 💟

[nayujin-dev]

마크다운 문법인가??

[Yeonseo-Jo]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ헉 이거 노션에 쓰고 복붙에 왔더니 이런게 생겼넹 수정하께 !!!