여러분 안녕하세요!!!!!
티까쮸~~~~~~♥에용~~~
제가 연말이라고 일이 바빠서 글을 오랫동안 못 썼네요
웹 접근성에 대해서는 더더욱 오랜만이죠??
원래 순서로 가자면 지금 멀티미디어 대체수단으로 가야 하지만.............
일단 제가 동영상을 제작하고 삽입하고 설명드려야 할 것 같아서 준비되는 대로 바로 올리겠습니다.
그다음 걸 먼저 올리는 점 죄송합니다ㅜㅜㅜ
오늘 설명드릴 아이들은
1 인식의 용이성
1.3 명료성
1.3.1 색에 무관한 콘텐츠 인식+1.3.2 명확한 지시사항 제공
입니다.
두 가지를 한 번에 설명드리는 이유는
비슷한 내용이기 때문에 같이 설명드리면 더욱 이해하기 쉬울 거라는 (저만의) 생각입니다.
그 그럼 시작해볼까욤??
#1. 3.1색에 무관한 콘텐츠 인식
색에 무관한 콘텐츠 인식 뭘까요??
뭘~~~~ 까요????
시각장애인 분들을 위한 색약 색맹 분들을 위한 지침이죠~
그 외에도 고대비 모드를 사용하시는 분들과 혹시 모를 흑백 모니터를 사용하시는 분들도 원활한 사이트 이용을 위해 지켜야 하는 부분입니다~
보통은 색에 관련된 콘텐츠는 그래프, 서식이 있습니다.
#그래프
노랑, 빨강, 파랑, 초록 동그란 그래프, 빨강, 파랑, 노랑, 초록 막대그래프, 파랑 선그래프
이미지설명: 노랑, 빨강, 파랑, 초록 동그란 그래프, 빨강, 파랑, 노랑, 초록 막대그래프, 파랑 선그래프
예를 들면 빨간색은 어린이, 파란색은 청소년, 초록색은 성인, 노란색은 노인 등
이런 식으로 나타내죠??
하지만 시각장애인들은 이건 뭐야?? 이게 뭐야??라는 반응이겠죠??
이럴 경우 어떻게 대체해줄까요??
이미지 대체 텍스트와 비슷합니다.
그래프 자체에도 색과 텍스트를 함께 제공하는 것입니다.
빨간색 부분에 텍스트로 어린이 110명
파란색 부분에는 청소년 200명
초록색 부분에는 성인 189명
노란색 부분에는 노인 200명
과 같이 제공해주면 큰 문제없겠쥬??
#서식
기본정보 헤딩3 테이블설명: 아이디, 비밀번호, 비밀번호확인, 비밀번호확인질문, 비밀번호확인답변, 이름, 주소, 일반전화, 휴대전화, 이매일, 평생회원에 대한 표가 있는 회원가입테이블
이미지설명: 기본정보 헤딩3 테이블설명: 아이디, 비밀번호, 비밀번호확인, 비밀번호확인질문, 비밀번호확인답변, 이름, 주소, 일반전화, 휴대전화, 이매일, 평생회원에 대한 표가 있는 회원가입테이블
서식에서의 색 관련 콘텐츠는 무엇일까요??
서식 글쓰기 서식인데요
예를 들면 빨간 글씨는 필수 입력사항입니다라고 적혀 있으면
......... 정말 할 말이 없어져요ㅜㅜㅜ
(요즘에는 그런 사이트가 거의 없죠?? 없다고 봐야죠??)
그래서 요즘에는 *표시는 필수 입력 사항입니다를 쓰죠??
이런 것들이 색에 무관한 콘텐츠 인식입니다.
색으로 무언가를 판단하고 인식하고 이해하는 것이 아니라
색과 관계없이 스크린리더 사용자들도 충분히 인식하고 이해할 수 있게
콘텐츠를 만들어 주는 것이라고 생각하면 좋을 것 같아요
#1. 3.2 명확한 지시사항 제공
명확한 지시사항 제공은 누굴 위한 걸까요??
발달장애인과 시각장애인을 위한 지침입니다.
명확한 지시사항 뭘까요??
무슨 명확한 지시사항??
웹페이지가 우리에게 지시도 하나요??
다들 웹페이지에서 하라는 대로 하고 있을 거예요~~
예를 들면 입력 서식 작성 후 회원가입 버튼을 누르세요라던가
궁금하시다면 물음표를 클릭하세요 와 같은 지시사항입니다.
검은 동그라미 안 하얀 물음표
이미지설명: 검은 동그라미 안 하얀 물음표
그렇다면 명확하지 않은 지시사항은 무엇일까요??
예를 들면 다운로드하시려면 여기를 클릭하세요라던가
왼쪽 위에 있는 버튼을 누르세요 와 같이 무슨 버튼 무슨 링크가 아닌
어느 위치에 있는 링크 어느 위치에 있는 버튼으로 출력하는 것입니다.
위치와 방향으로 지시사항을 주면 스크린리더를 사용하는 시각장애인들은 이용하기가 어렵습니다.
왜냐하면 스크린리더를 이용할 때 보통 탭키와 아래 방향키를 이용하여 웹페이지를 보기 때문에 정확한 위치나 방향을 인지하기가 어렵습니다 쉽게 말해 모든 콘텐츠가 세로로 나열되어있는 것으로 인지되기 때문입니다.
그렇기 때문에 명확한 지시사항을 위해서는
버튼의 레이블과 링크 텍스트를 분명히 적어주셔야 합니다.
궁금하시다면 물음표 아이콘 링크를 실행하세요
와 같이 출력될 수 있게 ㅎㅎㅎ
물론 물음표 아이콘 이미지에 물음표 아이콘이라고 대체 텍스트를 꼭 달아주셔야 하구요~
어렵지 않쥬??
명확한 지시사항은 시각적인 부분 말고 청각적인 부분에도 해당됩니다.
예를 들어 문제를 푸는 콘텐츠라고 합시다.
그런데 정답과 오답 표시를 소리로만 제공한다면
청각 장애인 분들이나 스피커나 이어폰을 사용하지 않는 사람들은 그 콘텐츠를 이용하기 지 못하게 되기 때문에
시각적인 부분도 함께 나타내 주시면 접근성을 준수한 사이트가 되겠죠??
그렇다면 색에 무관한 콘텐츠와 명확한 지시사항이 왜 비슷할까요??
만약 지시사항에 오른쪽 위에 있는 빨간 세모를 클릭하세요라고 적혀있으면???
빨간세모, 초록네모, 노란동그라미, 파란홈 모양, 보라색 오각형 도형이 겹쳐져 있는이미지
이미지설명: 빨간세모, 초록네모, 노란동그라미, 파란홈 모양, 보라색 오각형 도형이 겹쳐져 있는이미지
이게 바로 색에 무관한 콘텐츠와 명확한 지시사항에 걸리는 부분이죠
웹페이지를 만들면서 난 꼭 왼쪽 위 빨간 세모라는 글을 넣고 싶다면
왼쪽 위 빨간 세모(시작 버튼)와 같이 버튼 또는 링크의 용도를 함께 적어주면
그 누구도 차별받지 않고 웹페이지를 이용할 수 있지 않을까요???
색에 무관한 콘텐츠 인식과 명확한 지시사항
꼭 지켜주세요~~~
#마지막 인사
오늘은 글이 그다지 길지 않았어요
어떻게 보면 그리 복잡하고 어려운 문제가 아니라는 생각이 들었는지
설명이 많지가 않네요
혹시라도 제 글을 보고 질문사항이 생긴다면
꼭!!!
말씀해주세요 내용에 추가하거나 답변 꼭 드릴게요
저 티까쮸는 약속드릴 수 있어요
그럼 다음에 또 찾아올게요~~
#요약
1. 색에 무관한 콘텐츠는 색과 관계없이 콘텐츠를 인식, 이해할 수 있어야 한다.
2. 색에 무관한 콘텐츠 인식의 대체수단은 특수 기호나 텍스트로 제공한다.
3. 명확한 지시사항은 어느 쪽 방향에 무슨 모양을 알려주는 것이 아니라 정확한 버튼, 링크 텍스트를 알려주는 것이다.
4. 또 명확한 지시사항에는 콘텐츠를 소리로만 인지할 수 있게 만드는 것이 아니라 시각적으로도 인지 될 수 있게 만들어야 한다.
5. 꼭 위치와 모양을 설명해주고 싶다면 버튼, 링크 텍스트를 함께 제공해준다(예: 오른쪽 위에 있는 빨간 세모(확인) 버튼을 눌러주세요)
꼭 기억해주세요~~~
댓글 영역