4. Responsive Web Design - Applied Accessibility

web accessibility

전반적으로 HTML5의 Accessibility에 관련하여 추가된 tag들에 대한 설명으로 이루어져 있습니다. 단순히 접근성이 필요한 사람 들에 대한 것 뿐만 아니라 일반적인 사람 들에게도 필요한 내용이 상당히 많으니 주의 깊게 꼼꼼히 볼 필요가 있습니다. 이번 Chapter는 총 22개의 Subject로 이루어져 있지만 주의 깊게 봐줄 것이 많아 시간은 꽤 걸립니다.

Accesibility는 접근성을 의미합니다. 여기서 말하는 접근은 html document에 접근하는 모든 존재로부터 접근을 쉽게 한다는 광범위한 의미를 갖습니다. 이 모든 존재는 사람 뿐만 아니라 기계도 포함합니다. 사람 중에서는 색맹, 시청각 장애, 거동 문제 등의 장애를 가진 사람도 해당 장애가 없는 사람에 최대한 근접하게 정보에 접근할 수 있도록 하는 것이 목적입니다. 기계의 경우에는 검색 엔진이 해당 document의 정보를 잘 획득하여 다른 사람들의 검색 목록에 보여질 수 있도록 하는 일이 접근성에 포함됩니다.

---

• Add a Text Alternative to Images for Visually Impaired Accessibility
  • 1번째 글에서 언급한 적이 있던 alt attribute에 대한 내용입니다.
  • 시각 장애인 분들에게 그림 대신 읽어주는 글의 역할도 하고, 검색 엔진에서도 alt를 이용한다고 합니다.
• Know When Alt Text Should be Left Blank
  • caption을 넣는다면 alt를 안 넣어도 될지 모르지만 검색 엔진을 위해서는 alt를 넣어두는게 맞다고 하여 사실상 의미가 없는 주제입니다. alt에는 그림을 설명하는 글을 꼭 넣어주시기 바랍니다.
• Use Headings to Show Hierarchical Relationships of Content
  • 1번째 글에서 언급했듯이 <h1~6> 은 의미가 있는 tag입니다. 따라서 이에 맞게 잘 써야 합니다.
• Jump Straight to the Content Using the main Element
  • HTML5의 semantic tag에 대해 설명하는 주제입니다.
  • main tag는 page당 1개가 와야 되고 이 안에는 navigation이나 banner같은 것이 들어가면 안된다고 합니다.
• Wrap Content in the article Element
  • article tag는 독립적인 하나의 글을 나타냅니다. 블로그 글이나 신문 기사를 예로 들 수 있습니다.
  • section tag는 반대로 서로 연관이 있는 경우 사용합니다.
• Make Screen Reader Navigation Easier with the header Landmark
  • header는 body내에 들어가는 tag입니다. head와는 잘 구분해야 합니다. head는 meta 데이터 등이 들어가는 tag입니다.
  • header는 여러 페이지 간에 동일한 내용, 대체로 navigation의 container 역할을 합니다.
• Make Screen Reader Navigation Easier with the nav Landmark
  • nav tag는 navigation이 들어가는 부분을 의미합니다. 앞서 설명한 것과 같이 header의 child로 들어와 있습니다.
  • 본문에서는 list를 이용하여 nav 내용물을 넣어주고 있는데 굳이 넣을 필요는 없어 보입니다. w3schools nav를 보셔도 그냥 a tag를 연속해서 놓는 방식을 쓰고 있습니다. react를 사용할 것을 감안하면 굳이 depth를 깊게 만들어 성능에 안좋은 영향을 줄 필요는 없어 보입니다.
• Make Screen Reader Navigation Easier with the footer Landmark
  • footer는 보통 copyright 또는 page owner에 대한 정보를 담고 있습니다.
• Improve Accessibility of Audio Content with the audio Element
  • 본문에서 audio tag의 child로 source tag 2개를 넣고 있는데, 하나의 source만 넣는다면 audio tag의 attribute로 넣어 주어도 됩니다.
  • 2개를 넣은 이유는 브라우저 호환상 하나가 되지 않을 때 다른 하나를 쓰기 위함입니다.
  • controls attribute를 넣는 경우에는 audio를 control할 ui를 보여주게 됩니다. 넣지 않는 경우에는 화면상 보이는 것이 없습니다. 따라서 이 경우 DOM method를 통해 audio element에 접근을 하여 control 해주어야 합니다.
  • 자세한 내용이 궁금하시다면 HTML <audio> 태그 문서를 참고 바랍니다.
• Improve Chart Accessibility with the figure Element
• Improve Form Field Accessibility with the label Element
  • label의 for를 input의 id로 해야만 두 element가 결합이 됩니다. 이 경우에만 checkbox나 radio type을 사용하는 경우에 label의 content(글 또는 그림)을 누를 시에 for에 해당하는 id를 가진 input이 checked 되도록 합니다.
• Wrap Radio Buttons in a fieldset Element for Better Accessibility
  • fieldset은 form 내에서 input을 하나로 묶어 보여줍니다. radio 와 같이 여러개 중에 하나를 선택해야 하는 경우에 적합합니다.
  • 여기서 legend는 (지도·도표 등의) 범례 의 의미입니다.
• Add an Accessible Date Picker
  • input에는 다양한 type이 있습니다. date 뿐만 아니라, email, file, password 등 다양한 종류의 type을 받고 각각에 대한 validation을 해주는 효과를 가지므로 잘 알아두시는 게 좋습니다.
  • 전체 목록을 보시려면 HTML <input> 태그 문서를 참고하시길 바랍니다.
• Standardize Times with the HTML5 datetime Attribute
  • time tag에 datetime attribute를 주면 기계가 날짜를 읽도록 해준다고 합니다. 직접 써본 적은 없지만 이 걸 통해 todo나 calander 등에 날짜를 추가하도록 할 수 있다고 합니다. 검색에도 사용될 수 있다고 합니다.
• Make Elements Only Visible to a Screen Reader by Using Custom CSS
  • screen reader 사용자들을 위한 element를 넣기 위한 기술을 보여주고 있습니다.
  • position: absolute와 left: -10000px을 통해 해당 기능을 구현하고 있는데, 개인적인 생각으로는 position: fixed를 주어서 어떤 상황에서도 확실히 밖에 나가도록 하는게 좋을 것 같습니다.
• Improve Readability with High Contrast Text
  • WCAG에 대한 언급이 있는데 원문을 보고 싶으시다면 여기를 참고 바랍니다.
• Avoid Colorblindness Issues by Using Sufficient Contrast
  • contrast checker를 사용할 수 있습니다. 이 걸 사용해서 contrast가 4.5 이상이 되는지 확인해보시면 되겠습니다.
• Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
• Give Links Meaning by Using Descriptive Link Text
• Make Links Navigable with HTML Access Keys
  • accessKey는 global attribute, 즉 모든 tag에서 사용가능한 attribute입니다. 숫자나 키보드 한 글자만 넣을 수 있고, 각 브라우저와 OS마다 정해진 키와 함께 눌릴때 focus 또는 activate가 됩니다.
  • button에 accessKey를 넣는 경우에는 onClick event를 수행하게 됩니다. event listener 사용 없이 html tag만 가지고 단축키를 만들 수 있어 아주 편리하게 사용할 수 있습니다.
• Use tabindex to Add Keyboard Focus to an Element
  • tab을 눌렀을 때 focus가 이동되는 순서를 정해주는 attribute입니다. accessKey와 마찬가지로 global attribute 입니다.
• Use tabindex to Specify the Order of Keyboard Focus for Several Elements

---

4번째 글도 끝났습니다. 1번째 글에서도 말했지만, 학습 방법은 먼저 freecodecamp 과정을 모두 끝내고 나서 복습할 때 이 글을 보면서 제가 짚은 포인트 들도 알고 있는지 확인해보는 방식으로 하는 것을 추천합니다. 그냥 한 번 하기만 하고 넘어가면 잘 기억이 나질 않습니다. html tag 및 css property가 상당히 많아 다 외울 수는 없지만 어떤 게 있다는 기억 정도는 해야 검색으로 찾을 수 있기 때문입니다. 그럼 앞으로도 잘 부탁드립니다!