[S3U5] 웹 표준 & 접근성 개선

투명 요소 <a>

원래 인자인 요소인 <a>가 블록 요소인 <div>를 감싸면 안 되지만, HTML5에서 부터는 <a>가 투명한 요소로 취급되서 가능하다.

투명한 요소란,
부모 요소에 영향을 받는 요소이다.
부모가 블록 요소면 블록 요소로
부모가 인라인 요소면 인라인 요소로 행동한다.
이러한 투명한 요소로는 a 외에도 ins, del, object, video, audio, map, noscript, canvas가 있다.

즉, a요소의 부모 요소가 블록 요소 -> a 블록 요소(블록 요소 자식으로 가능)
a요소의 부모 요소가 인라인 요소 -> a 인라인 요소(블록 요소 자식으로 불가능)

<article>과 <section> 과 <div>

• <article>은 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
• <section>은 논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.
• <div>은 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 때, 요소들을 정렬할 때 사용한다.
  -> 결국 상황에 따라 적절히 판단해서 사용해야한다..

<img>의 alt

• alt 속성으로 빈 문자열을 입력하면 요소를 인식하지 않는다. 그러므로 이미지를 충분히 성명해주는 다른 요소가 있다면 빈 문자열을 주어 반복을 방지할 수 있다.
• alt는 너무 길지도 너무 짧지도 않게 작성한다.

표의 접근성 개선

• caption으로 표 제목 입력하기
• 표의 셀은 제목 셀과 데이터 셀이 구분되도록 제목 셀은 , 데이터 셀은 를 사용하기
• 표의 구조가 복잡할 경우, 최대한 간소화하거나 scope 혹은 id와 headers 속성을 사용하기

         <li>
         	scope 속성 사용
                    <table>
                        <caption>바밤바 시리즈 정리</caption>
                        <thead>
                            <tr>
                                <th scope="col">이름</th>
                                <th scope="col">당류</th>
                                <th scope="col">내용량</th>
                                <th scope="col">칼로리</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td scope="row">바밤바</td>
                                <td>13g</td>
                                <td>70ml</td>
                                <td>100kcal</td>
                            </tr>
                            <tr>
                                <td scope="row">배뱀배</td>
                                <td>14g</td>
                                <td>70ml</td>
                                <td>75kcal</td>
                            </tr>
                            <tr>
                                <td scope="row">바밤바샌드</td>
                                <td>24g</td>
                                <td>180ml</td>
                                <td>240kcal</td>
                            </tr>
                        </tbody>
                    </table>
                </li>
  
                <li>
                    id, headers 속성 사용
                    <table>
                        <caption>바밤바 시리즈 정리</caption>
                        <thead>
                            <tr>
                                <th id="A">이름</th>
                                <th id="B">당류</th>
                                <th id="C">내용량</th>
                                <th id="D">칼로리</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td id="a">바밤바</td>
                            <td headers="B a">13g</td>
                            <td headers="C a">70ml</td>
                            <td headers="D a">100kcal</td>
                        </tr>
                        <tr>
                            <td id="b">배뱀배</td>
                            <td headers="B b">14g</td>
                            <td headers="C b">70ml</td>
                            <td headers="D b">75kcal</td>
                        </tr>
                        <tr>
                            <td id="c">바밤바샌드</td>
                            <td headers="B c">24g</td>
                            <td headers="C c">180ml</td>
                            <td headers="D c">240kcal</td>
                        </tr>
                        </tbody>
                    </table>
                </li>

<input>의 접근성 개선

• title 속성 작성하기
  title 속성 작성해주면 hover시 title로 작성해둔 글자가 나타난다

  <input title="아이디" type="text" placeholder="아이디" />
  <input title="비밀번호" type="text" placeholder="비밀번호" />

• label 요소의 for 속성으로 연결 해주기
  for는 js에서 반복문 사용시 사용되므로 htmlFor으로 대체 해주는게 좋다.
  그리고 label이랑 input 매칭 해두면 label만 클릭해도 input으로 넘어가진다.

  <label htmlFor="아이디">아이디</label>
  <input id="아이디" type="text" />
  <label htmlfor="비밀번호">비밀번호</label>
  <input id="비밀번호" type="text" />

• aria-label 속성을 사용할 수도 있지만 다른 html 속성이나 요소로 대체 가능한 경우에는 해당 속성이나 요소를 우선적으로 사용하는 것이 좋다

<hr></hr>

가로줄 <hr></hr> 시멘틱요소이므로 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리할 때 사용해야한다. 의미가 없이 사용할 경우 css로 표현하기

천 단위로 콤마(,) 찍기

스크린 리더가 숫자 읽어 줄 때 만단위 이상부터는 숫자를 하나하나 읽는다. 이러한 문제를 방지하기 위해서는 숫자에 천단위로 ,를 찍어주면 된다.
숫자.toLocalString() 사용하면 컴마가 찍힌 숫자가 된다.

role 속성 작성할 때 참고

https://mui.com/material-ui/react-tabs/
이미 완성된 컴포넌트들이 있으므로 그 컴포넌트들의 role 속성을 확인하고 실제 만들 컴포넌트 role 속성에 참고하면 좋다. (예시를 개발자 도구로 확인하면 볼 수 있음)