CSS, HTML – 웹 접근성(Web Accessibility)을 고려한 웹 개발

Learn Accessibility by Building a Quiz

• CSS: > 선택자
  • The child combinator selector > is used between selectors to target only elements that match the second selector and are a direct child of the first selector.
  • 자식 선택자는 공백으로 구분되는 하위 선택자와 다르게 바로 아래 자식 요소만 선택

      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info"><h2 id="student-info">Student Info</h2></section>
        <section role="region" aria-labelledby="html-questions"><h2 id="html-questions">HTML Questions</h2></section>
        <section role="region" aria-labelledby="css-questions"><h2 id="css-questions">CSS Questions</h2></section>
      </form>

• HTML: role 속성
  • To increase the page accessibility, the role attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The role attribute is a part of the Web Accessibility Initiative (WAI), and accepts preset values.
  • aria-labelledby 속성
    • role requires a label which helps screen reader users understand the purpose
• HTML: form 속성 다시 정리!
  • <label>의 for 속성 – <input>의 id 속성
    • 서로 연결되어 있음을 표시
  • <input>의 name 속성
    • 이름을 명시
    • 폼(form)이 제출된 후 서버에서 폼 데이터(form data)를 참조하기 위해 사용
    • radio에서는 동시 선택 불가능하게하는 역할
  • <input>의 value 속성
    • 초깃값 명시
    • – “button”, “reset”, “submit” : 버튼 내의 텍스트를 정의
    • – “hidden”, “password”, “text” : 입력 필드의 초깃값을 정의
    • – “checkbox”, “image”, “radio” : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

• CSS: 미디어 쿼리 prefers-reduced-motion
  • 저사양 디바이스와 웹 접근성을 위한 feature

       <ul>
          <li><a href="#student-info" accesskey="s">INFO</a></li>
          <li><a href="#html-questions" accesskey="h">HTML</a></li>
          <li><a href="#css-questions" accesskey="c">CSS</a></li>
        </ul>

• HTML: accesskey
  • 현재 요소에 대한 키보드 단축키를 생성할 때 사용할 힌트를 제공
  • 속성의 값은 반드시 출력 가능한 단일 문자(키보드로 입력할 수 있는 글자)