코드스테이츠 semantic HTML, 웹 접근성 과제

이렇게 div를 많이 쓰는 것보다는 의미있는 semantic요소를 넣는게 좋다.

위 처럼 semantic요소를 넣어준다.h1과 p (문단Paragraph)같은 것도 semantic요소이다.

위와 같이 틀린 것을 

이것처럼 바꿔줍니다.

---

여기서 틀린부분을 styled components로 바꿀 수 있다.

=> CSS를 컴포넌트화 시킴으로써 해결해 주는 라이브러리, CSS in JS 라이브러리를 사용해서 js파일 안에서 컴포넌트 단위로 개발할 수 있게 된다.

간단하게 방법을 정리하면 설치하고

npm install --save styled-components

사용할 파일로 불러오면 된다.

import styled from "styled-components"

컴포넌트를 선언하고 styled.태그종류를 할당하고, 백틱안에 css작성하던 것 처럼 해주면 된다.

그다음 만든 컴포넌트를 리액트 컴포넌트 사용하듯이 리턴문 안에 작성한다!

<li>

                        <h6>요소 종류를 사용하는 것이 아니라</h6>

                    </li>

                    <li>

                        <h4>CSS를 이용해주세요.</h4>

                    </li>

                    <li>

                        <h3>요소의 의미와 맞지 않습니다.</h3>

                    </li>

제목요소로 글씨크기를 조정하는 것이 아니라 css로 조정해야 한다.

const FontSize = styled.span`

    font-size: ${props => props.size || '1rem'};

`

위 처럼 styled components를 사용해서 넣고 싶은 곳에 컴포넌트를 넣을 것이다.

<li>

                        <FontSize size="1.8rem">글씨 크기를 조절하고 싶을 땐</FontSize>

                    </li>

                    <li>

                        <FontSize size="0.67rem">요소 종류를 사용하는 것이 아니라</FontSize>

                    </li>

                    <li>

                        <FontSize>CSS를 이용해주세요.</FontSize>

                    </li>

                    <li>

                        <FontSize size="1.2rem">요소의 의미와 맞지 않습니다.</FontSize>

                    </li>

컴포넌트를 넣어주고 size 값이 있으면 그 값으로 아니면 1rem으로 사이즈가 설정된다.

<li>요소 사이에 간격을 주고 싶을 때에도</li>

                    <br /><br />

                    <li>CSS를 이용해주세요.</li>

                    <br /><br /><br /><br />

                    <li>태그의 존재 의의와 맞지 않습니다.</li>

                    <br />

                    <li>요소 사이의 간격을 조절할 때가 아니라 줄 바꿈을 할 때 사용해주세요.<br />

                    이렇게 사용해주시면 됩니다.</li>

이것도 css속성을 넣어서 간격을 준다.

const MarginBottom = styled.li`

    margin-bottom: ${props => props.br * 20 + 'px'};

`

위와 같이 컴포넌트를 만들고

<MarginBottom br={2}>요소 사이에 간격을 주고 싶을 때에도</MarginBottom>

                   

                    <MarginBottom br={4}>CSS를 이용해주세요.</MarginBottom>

                   

                    <MarginBottom br={2}>태그의 존재 의의와 맞지 않습니다.</MarginBottom>

                 

                    <li>요소 사이의 간격을 조절할 때가 아니라 줄 바꿈을 할 때 사용해주세요.<br />

                    이렇게 사용해주시면 됩니다.</li>

이렇게 컴포넌트를 넣어준다. <br> 태그는 줄바꿈이다.

styled components를 사용하면 위의 동그라미 친 부분처럼 임의의 이름이 붙여져서 class, id 이름을 짓느라 고민할 필요가 없다.

---

<h3>예시 1</h3>

                    <li>적절한 대체 텍스트를 alt 속성을 사용해 작성해주세요.</li>

                    <img src={catImage} alt="고양이가 윙크하는 사진"/>

               

                    <h3>예시 2</h3>

                    <li>alt 속성으로 빈 문자열을 입력하면 요소를 인식하지 않습니다.</li>

                    <img src={dogImage} alt=" " />

alt 를 주지 않으면 Screen Reader에서 이미지라고 읽어주지만 alt = ""  처럼 빈문자열을 줄시 아무것도 읽어주지 않아 이미지 인지 모를 수가 있다. 또한 이미지를 충분히 설명해주는 인접 요소가 있다면 대체 텍스트로 빈 문자열을 작성하는 것이 좋다. 웹 접근성을 위해서는 텍스트가 아닌 콘텐츠를 제공할 땐 alt 속성을 주는 것이 좋다.

---

 <WAI-ARIA>

 

시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.

 WAI-ARIA는 시맨틱 요소로 충분할 땐 사용하지 않고 보조적인 역할로만 사용한다. 즉 시맨티한 HTML을 작성하는 것이 최우선이다.

 

• WAI-ARIA의 역할 속성은 해당 요소가 어떤 역할을 하는지 명시해줍니다.

=> 예) role="button", role="section", role="h1", ...

 

• 요소에 대한 정보를 전혀 알 수 없는 경우, 속성(property) 값을 주어 요소를 설명해줄 수 있습니다.

=>예) aria-label="검색 버튼", aria-label="닫기 버튼", aria-label="뒤로 가기", ...

 

이렇게 하면 추가적으로 스크린리더가 읽어준다.

---