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

Leave a Reply

Your email address will not be published. Required fields are marked *