FCC : Responsive Web Design > (4) Applied Accessibility / (5) Responsive Web Design Principles

정윤호·2022년 5월 23일

FCC_reviw

목록 보기

4/5

Applied Accessibility

<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
  <p>To Come...</p>
</article>

<img src="samuraiSwords.jpeg">

<article>
  <h2>Is Chuck Norris a Cat Person?</h2>
  <p>To Come...</p>
</article>

Add a Text Alternative to Images

alt : 이미지 태그에 이 attribute 을 붙여줌으로써, 이미지의 내용과 대안적 텍스트도 제공한다. 이미지가 로딩이 실패되었을 때, 유저에게 보이지 않을 때 유용하다. 서치엔진도 이미지가 뭘 담는지 이해하기 위해 alt 를 참고하니 이 중요성은 말 다했다. 또한, 시각장애인의 경우 스크린 리더에 의지해서 페이지 내 요소에 대한 정보를 오디오 정보로 받는데, alt 여기에서도 도움이 된다. 이미지에는 의무적으로 alt attribute 을 꾸며보자..!

하지만, 이미 이미지를 설명하는 글이 페이지에 존재하거나, 단지 장식만을 위한 이미지일 경우 alt 로 제공할 수 있는 정보가 딱히 영양가 있지 않다. 이런 경우에도 여전히 alt attribute 은 붙여주지만, 그 안의 텍스트는 비워둘 수 있다.

<h1>Deep Thoughts with Master Camper Cat</h1>
<main>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>

  <img src="samuraiSwords.jpeg" alt="">

  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>

  <img src="samuraiSwords.jpeg" alt="">

  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
</main>

<body>
  <header>
    <h1>Training</h1>
    <nav>
      <ul>
        <li><a href="#stealth">Stealth &amp; Agility</a></li>
        <li><a href="#combat">Combat</a></li>
        <li><a href="#weapons">Weapons</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>

      <!-- Only change code below this line -->
      <figure>
        <!-- Stacked bar chart will go here -->
        <br>
        <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
      </figure>
      <!-- Only change code above this line -->

    </section>
    <section id="stealth">
      <h2>Stealth &amp; Agility Training</h2>
      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
      <article><h3>No training is NP-complete without parkour</h3></article>
    </section>
    <section id="combat">
      <h2>Combat Training</h2>
      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
    </section>
    <section id="weapons">
      <h2>Weapons Training</h2>
      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
    </section>
  </main>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

의미를 붙이는 태그에 대해 알아보자

headings : h1 부터 h6 까지 있는 이 헤딩은 페이지 내 내용의 위계적 관계를 알려준다. 스크린 리더가 헤딩만 읽어서 유저에게 요약본을 제시하는 경우도 있기 때문에, 단지 폰트 크기 때문에 의미와 관계 없이 헤딩을 나누는 것은 지양해야 한다.
또, 정보의 종류를 나누는데 아주 요용하다. 만일 서론 본론 결론이 있는 글 안에서, 결론이 본론의 하위 요소로 위치한다면 이상하지 않겠는가? 때문에 헤딩은 순서대로 쓰여야 하며, 내용의 위계적 관계를 지시해야 한다.

텍스트 사이즈 때문에 헤딩을 임의로 나누는 당신, 그것은 CSS 로 하십쇼..!

main header footer nav article section : HTML5가 제공하는 semantic tags! 이들은 기본적으로 div 랑 다를게 없으나, 당장 눈에 보이지는 않는 추가적인 의미를 제공할 수 있다!

main : 페이지의 중심 내용을 감쌀 때 쓰세요. 한 페이지 당 하나만 쓰여야 하며, 페이지의 중심 주제를 담아야 합니다. 페이지 안에서 반복되어 나타나는 요소를 포함하지 않습니다.

article : 주위 문맥을 다 짤라내더라도, 혼자서 말이 되는 독립적인 글 단락은 article 태그로 묶입니다. 뉴스 기사들이 전부 연결되지 않는 것 같이!

section : article 이 지 혼자 노는 내용이라면, section 은 같은 주제로 묶이는 내용들을 나눠주는 태그에요. like 책의 챕터 같이! article 이랑도 자주 같이 쓰이는데, article 이 책 한권이라면, 그 안의 다수의 section 은 챕터가 되는 것이에요. 만일 각 내용의 집단들 사이의 연결점이 없다면, div 쓰세요. 다시 쉽게 말하면, div 는 내용을 묶고, section 은 연관성 있는 내용을 묶고, article 은 독자적이고 홀로 완결성 있는 내용을 묶어요.

header : 내용의 도입이나 nav 바 등을 감쌀 때, 혹은 페이지 최상단에서 계속 반복되는 내용을 다룰 때 쓰인다. html 태그 중 하나인 head 랑은 다르다!

nav : 위에서 말한 nav 바가 얘여. 사이트 최상단에서, 페이지 내 요소를 찾기 간편하게 만들어 주는 녀석!
맨 아래에도 비슷한 기능을 하는 요소가 있다면, 걔는 nav 로 안 감싸고, footer 로 감쌈.

footer : 보통 저작권 관련 내용이나, 관련 문서들의 링크들이 위치하는 태그!

figure figcaption: 이미지, 다이아그램, 차트와 같이 시각적인 요소들을 감싸는 태그가 figure. 그리고 그 figure 들을 설명하는 글귀는 figcaption 태그 안에.

audio : 오디오 관련 내용을 감싸는 태그. alt attribute 을 포함해햐 한다. 청각장애인들에게도 정보에 접근할 수 있게 하기 위해서..! audio 태그는 controls attribute 를 제공한다. 재생, 정지 같은 기능을 유저가 사용할 수 있게 하는 attribute.

label : form 을 더 읽기 쉽게 하기 위해 input 이랑 자주 묶이는 녀석. for attribute 에서 input 의 id 와 일치시켜서, 완전히 묶어준다.

radio 버튼으로 입력을 받을 때는 각 선택지가 label 로 오는데, 만일 많은 radio 중 하나만 선택하는 과제인 경우 이들 label 들을 묶어야 한다. 이 radio 버튼과 label 들을 fieldset 로 묶는다. 그리고 fieldset 안에는 이게 뭐에 관한 질문인지 명시하는 legend 태그가 위치한다.
ex)
<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>
input : input 태그 안에는 다양한 type attribute 가 올 수 있다. text, submit 을 자주 쓰지만, date attribute 를 쓰면 날짜 정보를 입력할 수 있다. 이러면 유저들이 날짜 입력하기 더 편한 형태.

input 은 아니고, html 에서 시간 관련 요소가 그냥 p 태그 안에 있는 경우가 있다. 이 경우 이 날짜 정보를 time 이라는 인라인 태그 안에 datetime attribute 의 value 로 제공하면, 스크린 리더가 이 숫자가 날짜임을 쉽게 알 수 있다.
ex)
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
a : 링크를 줄 때, click here 같은 텍스트는 도움이 되지 않는다. 더 명시적으로 이 링크가 무엇을 가리키는지 알려주는 텍스트를 a 태그로 감싸야 한다. 그래야 스크린 리더도 링크의 의미를 이해할 수 있다.

CSS 설정으로 접근성 올리기

시각적으로 드러나지 않지만, 스크린 리더에게 잡히길 바라는 내용이 있다면 CSS 를 건드림을 통해 요소를 숨기는 방법이 있다
ex)
.sr-only {
	display: none;
    visibility: hidden;
    width: 0px; height: 0px;
전경과 배경의 대비가 작은 경우에는 텍스트를 읽기 어려울 수 있다. 웹 표준에서 대비가 적어도 4.5 대 1은 되어야 한다고 말한다. 대비를 확인하는 웹 서비스를 이용하자.

충분한 대비로 색약 이슈를 해결하자. 우선 색 만으로 중요한 정보를 전달할 속셈은 그만 두자. 스크린리더가 어차피 못 읽는다. 만일 색 대비가 충분치 않다면, 광도를 조절하자. 어두운 종류의 색은 파란색, 보라색, 남색, 적색이 있다. 이들과 대비될 밝은 색상은 오렌지, 노랑, 녹색, 청록색 등이 있다. 같은 류의 색의 조합은 피하자. 색약인들은 이들을 구분하기 어렵기에.

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>


    <h2><a id="first" href="#" accesskey = "g">The Garfield Files: Lasagna as Training Fuel?</a></h2>


    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <article>


    <h2><a id="second" href="#" accesskey = "c">Is Chuck Norris a Cat Person?</a></h2>


    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

내가 키보드 만으로 웹 요소에 접근한다면

accesskey : 링크나 버튼, form controls 와 같이 상호작용이 있는 요소에서 접근성을 올리는 방법으로 accesskey="" attribute 를 넣어줄 수 있다. 이러면 마우스로 클릭을 하지 않아도 키보드로 링크에 접근할 수 있다.

tableindex : 키보드만을 사용하는 유저는 페이지 내 요소를 탭을 통해 탐색할 수 있다. 그리고 그 탐색되는 순서는 tableindex attribute 을 조작함을 통해 설정할 수 있다. 만일 값으로 -1 을 준다면, 키보드로는 접근할 수 없지만 중요한 요소임을 표지하는 것이다.
이렇게 tableindex 값을 준 요소들은 CSS 가짜 클래스인 :focus 로 접근가능하다.
1부터 2, 3 순서로 접근하고, 0을 마지막으로 찾아간다.
ex)
      <p tabindex=0 >Instructions: Fill in ALL your information then click <b>Submit</b></p>

Responsive Web Design Principles

<style>
  p {
    font-size: 20px;
  }
@media (max-height: 800px) {
  p {
    font-size: 10px
  }
}
</style>

(height > 800px)

(height <= 800px)

Media Query

문서가 전시되는 기기 화면 크기를 고려해서, 미디아 쿼리를 세분화해서 작성해야 한다.

<style>
.responsive-img {
max-width: 100%;
height: auto;
}
img {
  width: 600px;
}
</style>

Image Responsive

max-width: 100%; : 이러면 이미지가 부모 컨테이너 보다 더 커질 수 없음을 의미한다. 대신에 그 밑으로는 줄어들 수 있다.
height: auto; : 이러면 이미지의 너비가 아무리 변해도, 높이는 원래의 너비-높이 비율을 따르게 된다.

Retina Image for Higher Resolution Displays

인터넷을 사용하는 기기는 정말 다양하고, 그 화면의 크기도 천차만별이다. 때문에, 픽셀이라는 값이 고정된 값이 아닌, 기기마다 다르게 보일 수 있다. 이런 와중에 개발자가 삽입한 이미지의 해상도가 깨지는 경우가 왕왕 있다. 이 경우에는 이미지의 크기를 원본 이미지의 절반으로 설정한다. 이러면, 해상도가 항상 뚜렷하게 보일 것이다.

Typography Responsive

em 이나 px 같은 값을 폰트 크기에 주기 보다, viewport 와 상호작용이 되는 퍼센트, vh 등을 사용하자. viewport 단위들은 사용자가 사용하는 기기 화면 크기에 기반을 두고, 퍼센트는 부모 컨테이너에 기반을 두는 차이가 있다.

vw : 10vw 은 전체 viewpoint 의 10% 먹는다.
vh : 3vh 은 전체 viewpoint 의 3% 먹는다.
vmin : 70vmin 은 viewpoint 의 너비와 높이 중에서 작은거의 70%를 먹음.
vmax : 100vmax 은 viewpoint 의 너비와 높이 중에서 큰거의 100%를 먹음.