콘텐츠를 이동 가능하고 액세스 가능하게 만드는 10 가지 방법

콘텐츠

• 접근성은 '기능'이 아닙니다.
• 플랫폼 정의
• 콘텐츠를 이동 가능하고 액세스 가능하게 유지
• 1. HTML5로 시작
• 2. 와이 아리아
• 3. doctype 사용
• 4. HTML5 문서 태그
• 5. 잘못된 링크
• 6. 이미지 – ALT 대 TITLE
• 사람들에게 알리기
• 요약
• 감사의 말
• 자원

Kerie가 iPhone으로 입력하면 플루트를 연주하는 것처럼 보입니다. 그녀는 그것을 얼굴에 가깝게 잡고 손가락이 놀라운 속도로 움직입니다. 그녀는 글쓰기를 마치고 방금 입력 한 메시지를 읽도록 전화를 건네줍니다. 철자와 문법이 완벽하고 iPhone의 터치 키보드를 사용하는 동안 할 수 있었던 것보다 훨씬 더 빨리 입력되었습니다.

Kerie는 Fleksy라는 앱을 사용하여 단어로 바뀌는 패턴으로 휴대 전화 얼굴에서 손가락을 움직입니다. 그녀는 또한 뉴스를 읽고, 라디오 앱을 듣고, 트위터를 확인하고, 휴대 전화로 기차 시간을 검색합니다. 그녀는 완전히 장님입니다.

'출판'은 사람마다 다른 것을 의미합니다. 어떤 사람들에게는 인쇄 된 물리적 인 작업량을 생산하는 것을 의미합니다. 다른 사람들은 출판을 장치 및 앱을 통해 저작물을 배포하는 기능과 연관시킵니다. 사람들은 글을 블로그에 올리거나 Google Plus 게시물을 업데이트하는 등 어떤 형식 으로든 콘텐츠를 즐길 수 있도록 게시하는 것으로 생각하는 경우가 점점 더 많아지고 있습니다.

현실은 기대치가 사용자마다 다르며 이러한 기대치는 시간이 지남에 따라 변합니다. 한때 블로그의 최신 게시물을 탐욕스럽게 소비했던 독자들은 이제 언제 어디서나 편리 할 때마다 해당 블로그 게시물이나 기사 또는 책을 읽을 수 있기를 기대합니다. 오늘 내용은 블로그에서 휴대폰의 Reeder, iPad의 Instapaper, Whispernet을 통해 Kindle로 전송 된 이메일 버전에 이르기까지 우리를 따라갑니다.

모든 사람의 읽기 워크 플로는 다르며, 화면 판독기, 고 대비 또는 확대 된 텍스트와 같은 접근성 기능이 필요한 사람들의 경우 작성자와 게시자가 사소하지만 필요한 서식 세부 정보를 고려하지 않을 때 워크 플로가 깨지는 경우도 있습니다. '접근성 체크 박스를 선택'하는 것이 아니라고 생각하지 마세요. 대신 많은 잠재 고객을 위해 콘텐츠를 블랙 박스로 효과적으로 전환하고 있음을 인식하십시오.

접근성은 '기능'이 아닙니다.

청각 및 시각 장애가있는 개인이 액세스 가능한 컨트롤을 사용하는 것은 사실이지만이 기능을 통해 혜택을받는 다른 사람들도 많이 있습니다. 시력이 약한 사람은 화면의 내용을 더 쉽게 읽을 수 있도록 글꼴 크기를 조정합니다. 색맹 인 사람은 빨간색 경고 텍스트와 같은 것이 실제로 눈에 띄도록 색상 팔레트를 조정할 수있는 기능을 높이 평가합니다. 출퇴근 시간이 긴 사람들은 화면 판독기를 사용하여 기사를 읽는 것을 듣습니다. 모국어가 아닌 사용자는 캡션이있는 비디오 및 오디오를 사용하여 새로운 언어를 이해하는 데 도움을줍니다. 이러한 모든 시나리오는 콘텐츠에 대한 더 넓은 범위, 향상된 사용자 경험 및 공감, 그리고 아마도 더 많은 수익을 나타냅니다.

접근성이 무엇을 의미하는지에 대한 개요는 Ian Hamilton의 기사를 참조하십시오.

플랫폼 정의

콘텐츠를 더 쉽게 읽을 수 있도록 초점을 맞출 수있는 형식에 대한 몇 가지 정의부터 시작하겠습니다.

• HTML : HTML5를 사용하면 웹은 작가와 게시자가 자신의 작업을 보여줄 수있는 훨씬 더 좋은 곳입니다. 다음과 같은 새 태그 조, 부분, 머리글 과 보행인 이제 많은 브라우저에서 구현되며 반 신뢰 적으로 사용하여 글에 의미 적 컨텍스트를 추가 할 수 있습니다. 또한 곧 출시 될 CSS3 페이지 모듈은보다 고정 된 페이지 읽기 환경을 사용하려는 사람들에게도 흥미로울 수 있습니다.
• EPUB : EPUB는 국제 디지털 출판 포럼 (IDPF)의 공식 표준입니다. EPUB3는 2011 년 10 월에 승인되었으며, 출판물은 이전의보다 정적 인 가이드 라인이 아닌 HTML / CSS로 가능한 것에 더 가까운 스타일과 사용자 정의 가능한 컨텐츠를 가질 수 있습니다.
• MOBI : Mobipocket의 약자 인 MOBI는 Kindle 및 기타 디지털 리더에서 사용하는 형식입니다. EPUB보다 사용자 정의가 덜 가능하지만 원하는 경우 Amazon에 콘텐츠를 게시하는 데 사용할 수 있기 때문에 여기에서 다룹니다. AbilityNet의 Robin Christopherson에 따르면 일부 Kindle 모델은 시각 장애인이 액세스 할 수 있습니다. 그러나 iOS의 Kindle 앱은 그렇지 않습니다. Kindle의 새로운 형식 인 KF8은 현재 Kindle Fire에서 지원되며 곧 최신 세대 Kindle 전자 잉크 기기 및 Kindle 읽기 앱에 출시 될 예정입니다.
• PDF : PDF는 웹에서 유비쿼터스 엔티티가되었습니다. 대부분의 태블릿에는 PDF를 읽고 보조 기술을 사용할 수있는 좋은 내장 기술이 있기 때문에 여기에 포함합니다. PDF에서 결정적인 요소는 생성 방법입니다. 아일랜드 국립 장애인 청의 접근성 개발 고문 인 Alan Dalton에 따르면 "PDF를 액세스 가능하게 만들 수 있지만 많은 사람들이 액세스 할 수 없습니다. 그들은 자신의 도구가 나쁜 제품을 생산하고 있다는 사실을 인식하지 못합니다. HTML이어야합니다. " 탐색 및 접근성을 제외하고 PDF는 다양한 크기에 잘 적응하지 못하며 스마트 폰에서 PDF를 읽으려고 시도한 사람은 그렇게하는 데 필요한 어색한 손가락 모으기, 확대 / 축소 및 이동에 익숙합니다.

이 카테고리에 속하지 않는 것은 콘텐츠를 큰 이미지로 변환하는 앱입니다. 이렇게하면 플랫폼간에 모양과 스타일이 동일 할 수 있지만 많은 청중을 차단하는 동시에 매우 많은 다운로드를 생성하게됩니다. 이 문제는 Retina 디스플레이 및 두 배 크기의 이미지에 대해 이야기하기 시작할 때 더욱 악화됩니다. 읽고 싶은 내용을 거부당하는 느낌을 받으려면 (그래도 여전히 비용을 지불해야 함) iOS에서 VoiceOver를 통해 대부분 액세스 할 수없는 뉴스 스탠드 앱에 대한 댓글을 참조하세요.

액세스 가능한 기술 사용자에게 이러한 유형의 잡지가 어떻게 보이는지 확인하려면 내 동영상 삽입을 참조하세요.이 잡지를 읽으려고 시도하는 실망스러운 경험을
VoiceOver와 같은 손쉬운 사용 도구 :

콘텐츠를 이동 가능하고 액세스 가능하게 유지

휴대용 형식에 중점을두면 더 많은 브라우저, 휴대폰, 디지털 리더 장치 및 읽기 응용 프로그램에서 행복하게 살 수 있도록 콘텐츠를 처리 할 수 ​​있습니다. 사용자 정의 스타일과 훌륭한 경험을 유지하면서 이러한 다양한 형식간에 잘 번역 될 수 있도록 콘텐츠에 무엇을해야합니까?

잠재 고객이 최대한 넓어지기를 원하고 콘텐츠를 많은 사용자를 위해 블랙 박스에 묶고 싶지 않은 사람들을 위해 아래에 몇 가지 지침을 작성했습니다. 이러한 기술은 블로그 게시물에서 긴 형식의 저널리즘, 자체 게시를 고려중인 다른 모든 작업에 적용 할 수 있습니다.

1. HTML5로 시작

처음에 HTML5로 문서를 작성하면 향후 걱정할 필요가 없습니다. HTML5 마크 업은 문서를 쉽게 탐색하고 다른 형식으로 번역하는 데 도움이됩니다. 처음부터 의미 론적 정보가있는 경우 출판물을 다른 형식으로 '개조'하는 작업을 크게 줄일 수 있습니다.

2. 와이 아리아

WAI-ARIA는 Web Accessibility Initiative-Accessible Rich Internet Applications 제품군입니다. 이는 프로토콜 및 형식 작업 그룹 (PFWG)에서 만든 일련의 가이드 라인입니다.
W3C. WAI-ARIA는 장애가있는 사람들이 웹 콘텐츠 및 애플리케이션에 더 쉽게 액세스 할 수 있도록하는 방법을 정의하며 Ajax, HTML, JavaScript 및 관련 기술로 개발 된 동적 콘텐츠 및 고급 사용자 인터페이스 컨트롤을 지원합니다. 이 기사의 일부 기술은 WAI-ARIA 지침에서 비롯되었으며이 기사는 모든 사양을 다루기에 충분하지 않지만 이러한 기술이 권장되는 이유와 모범 사례에 대한 자세한 내용을 확인하는 것이 좋습니다. 구현합니다.

3. doctype 사용

특정 doctype 자체를 사용하는 것은 관련 HTML 코드의 액세스 가능성에 영향을주지 않지만 doctype을 사용하는 중요한 이유는 브라우저의 쿼크 모드가 트리거되지 않도록하기위한 것입니다. 간단히 사용 ! DOCTYPE html> 그런 일이 일어나지 않도록합니다.

4. HTML5 문서 태그

문서의 적절한 탐색은 접근성 지수에 높은 요인이됩니다. 내가 인터뷰 한 접근성 기술의 많은 사용자는 콘텐츠 제공 업체와 개발자가 내비게이션 기능을 위해 문서를 올바르게 표시하지 않는 것에 대해 불만을 표명했습니다. 이러한 태그는 많은 div를 사용하는 것보다 문서 섹션에 더 많은 컨텍스트를 제공합니다.

• 머리글 과 보행인 둘 다 한 페이지에서 여러 번 사용할 수 있습니다. 문서의 각 기본 머리글 또는 바닥 글을 나타내거나 기사 또는 섹션 내의 머리글 / 바닥 글 정보에 사용할 수 있습니다.
• 곁에 문서를 보완하지만 이해에 절대적으로 중요하지 않은 책의 사이드 바와 같은 섹션에 사용하기에 좋은 태그입니다.
• 섹션 의미있는 아이디어를 나누거나 콘텐츠를 그룹화하는 방법입니다.
• 조항 나머지 콘텐츠없이 존재할 수있는 독립적 인 독립형 조각입니다. 이러한 태그를 적절하게 사용하면 콘텐츠 구조가 올바르게 해석되는지 확인하는 데 도움이됩니다.

5. 잘못된 링크

CSS를 사용하면 링크와 버튼에 배경 이미지를 사용할 수 있습니다. 이것은 타이포그래피를 더 잘 제어 할 수 있기 때문에 웹 디자이너에게 좋은 효과입니다. 그러나 사람들은 텍스트 설명을 포함하는 것을 잊었습니다. 이미지 내에서 텍스트를 사용하는 경우에도 액세스 가능한 상태로 유지되도록하십시오. 이것은 또한 SEO 및
국제화.

예:

a href = "/ contact"> / a>

이것은 나쁘다.

a href = "/ contact"> 문의 / a>

훨씬 낫다.

6. 이미지 – ALT 대 TITLE

사람들은 종종 다음 중 하나를 포함합니다. alt 또는 표제 이미지의 속성이지만 종종 오해를 받아 중복되는 것처럼 보이기 때문에 둘다는 아닙니다. 혼란을 해소하기 위해 표제 툴팁에 나타날 수있는 것과 같은 권고 정보를 나타낼 수 있습니다. 이것은 또한 많은 사람들이 블로그에서 사용하는 기술인 이미지 위에 마우스를 올려 놓을 때 추가 정보를 제공 할 수 있습니다. 그러나 터치 장치의 성장으로 이러한 종류의 정보는 유용하지 않게됩니다.

Alt 반면에 보조 기술에서 사용되며 요소에 컨텍스트를 제공합니다. 당신은 사용해야합니다 alt 이미지에 유용한 정보인지 확인하세요. 사용 img alt = ""src = "1348.webp">

사람들에게 알리기

콘텐츠가 여러 형식으로 제공되는 경우 사이트에서이를 발견 할 수있는 방법이 있는지 확인하십시오. "이 이메일을 보는 데 문제가있는 경우 온라인에서
여러 이메일 뉴스 레터의 상단에 "버전"메시지가 표시됩니다. 콘텐츠에 대해 동일한 작업을 수행하는 것이 좋습니다. 액세스 가능한 PDF 또는 오디오 버전과 ePub가있는 경우 사용자가 해당 정보를 찾을 수 있는지 확인하십시오. 콘텐츠를 찾고 읽을 수 있는지 테스트합니다.