Comments (3)
각 섹션(Section)은 섹션을 대표하는 적절한 제목이 요구됩니다.
섹션에 제목이 필요한 이유는 사람 또는 로봇(검색엔진, 스크린리더 등) 등이
콘텐츠를 인식하고 이해할 수 있어야 하기 때문입니다.
UI 디자인에서 항상 섹션마다 제목을 시각적으로 표시하지 않지만,
구조 상으로는 제목을 소유해야 합니다.
이에 대한 근거로는 웹 표준과 접근성 준수 사항에서 찾을 수 있습니다.
먼저 섹션 요소 내부에 제목이 없을 경우, 문법 검사 과정에서 경고합니다.
표준 문법 검사 결과 경고 메시지
접근성 가이드라인 WCAG2
섹션이 시작되는 위치에 적절한 제목을 삽입한 후, UI 디자인 뷰에서
눈에 보여야 하지 않을 경우 다음과 같은 방법을 사용합니다.
HTML 섹션/섹션제목 구조화 코드
<section class="news">
<h1 class="a11y-hidden">News Headline</h1>
<!-- .... -->
</section>
HTML 요소를 화면에서 감추되, 인식이 되도록 하는 CSS 클래스 모듈
.a11y-hidden {
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0); /* IE 6,7 */
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
}
.a11y-hidden.focusable:focus {
overflow: visible;
position: static;
clip: auto;
width: auto;
height: auto;
margin: 0;
}
caption.a11y-hidden { position: static; }
from fdc.
제 질문이 너무 빈약했던 것 같습니다.
다시 적어볼게요 :-)
어제 네이버의 디자인을 벗기셨을 때, 텍스트만 있던 화면을 기준으로 여쭈어 볼게요.
로고가 들어가는 자리, 메뉴가 들어가는 자리 등 그 각각의 자리를 저는 섹션으로 이해했습니다.
그리고 그 각 섹션에 제목을 지어주어야 한다고 이해했습니다.
로고가 들어가는 자리에는 logo, 메뉴가 들어가는 자리에는 menu 이런 식으로요.
위의 첨부 이미지로 '섹션에 대한 이름을 지어주는 방법'을 제가 이해하기로는
h1 ~ h6 을 통해 직접적으로 보여지든 보여지지 않든 css에서 코딩을 해 두어야 한다는 말씀으로 들리는데
이렇게 이해하는 것이 맞는지 궁금합니다.
직관적으로 섹션에 대한 이름을 지어준 예시 코딩의 스크린샷으로 알려주시면 이해하기 쉬울 것 같아요.
이런 코드가 있는데 어떤 부분이 섹션에 대한 '이름'을 지어준 예시이고 이렇게 보이고
장애인들이 실질적으로 사용했을 때 들리는 '그 이름'을 지어준 예시이다 하고요.
from fdc.
넵 직관적인 이해를 위한 이미지 첨부 드려요 ^ㅡ^
시각 장애인의 경우, 웹 사이트 접속 시 제목 간 이동으로 통해 페이지를 탐색합니다.
잡지를 보는 사람들이 목차를 보고 관심 주제 페이지를 넘겨 글을 읽는 것과 마찬가지죠.
그렇기에 각 섹션은 "이 섹션의 주제는 무엇이다" 라고 말해줄 수 있는 적절한 제목이 필요합니다.
from fdc.
Related Issues (20)
- 선생님~~ HOT 1
- 황유정 HOT 1
- 과제 올리는거 질문드려요 HOT 1
- 숙제 업로드합니다. HOT 1
- 포토샵에서 파일만들때 96ppi로 쓰면 어떤변화가 생기나요? HOT 1
- 버전 관리 질문드려요 HOT 1
- 프로그램관련 질문있습니다~~ HOT 3
- 주소설정 질문드립니다. HOT 4
- 선생님 질문있습니다. HOT 1
- sketch 사용에 대한 질문(고민) HOT 1
- 몇가지 질문 드립니다! HOT 1
- 웹에디터 관련 질문드립니다 ^^ HOT 1
- 1.24 배율이 이해가 안되요 ㅠㅠ HOT 1
- 유용한 포토샵 익스텐션이나 스크립트 아시면 소개 부탁드려요~! HOT 1
- 포토샵에 toggle grid js 실행안되는 문제 캡쳐 올립니다~! HOT 1
- 목요일 수업 마지막에 디자인 파일 관련해서 HOT 1
- 단위변환, 웹폰트, 박스에 관하여 HOT 2
- 멤버들과 공유~~ HOT 2
- 그리드 그릴때 스마트오브젝트 한개로 그리는 단축키 알려주세요. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fdc.