10 วิธีที่ยอดเยี่ยมในการทำให้เนื้อหาของคุณพกพาและเข้าถึงได้

เนื้อหา

• การช่วยการเข้าถึงไม่ใช่ "คุณลักษณะ"
• การกำหนดแพลตฟอร์ม
• ทำให้เนื้อหาพกพาและเข้าถึงได้
• 1. เริ่มต้นด้วย HTML5
• 2. ไว - อาเรีย
• 3. การใช้ Doctype
• 4. แท็กเอกสาร HTML5
• 5. ลิงก์ไม่ถูกต้อง
• 6. รูปภาพ - ALT กับ TITLE
• บอกให้คนอื่นรู้
• สรุป
• กิตติกรรมประกาศ
• ทรัพยากร

เมื่อ Kerie พิมพ์บน iPhone เธอดูเหมือนกำลังเล่นฟลุต เธอถือมันไว้ใกล้ใบหน้าของเธอและนิ้วของเธอก็ขยับอย่างไม่น่าเชื่อ เธอเขียนเสร็จและยื่นโทรศัพท์ให้ฉันอ่านข้อความที่เพิ่งพิมพ์ มีการสะกดและไวยากรณ์ที่สมบูรณ์แบบและพิมพ์ได้เร็วกว่าที่ฉันเคยทำขณะใช้แป้นพิมพ์สัมผัสของ iPhone

Kerie ใช้แอพชื่อ Fleksy เพื่อช่วยให้เธอขยับนิ้วไปมาบนหน้าโทรศัพท์ในรูปแบบที่เปลี่ยนเป็นคำพูด นอกจากนี้เธอยังอ่านข่าวฟังแอปวิทยุตรวจสอบ Twitter และค้นหาเวลารถไฟด้วยโทรศัพท์ของเธอ เธอตาบอดสนิท

"การเผยแพร่" หมายถึงสิ่งที่แตกต่างกันสำหรับผู้คนที่แตกต่างกัน สำหรับบางคนมันหมายถึงการผลิตงานพิมพ์ที่มีอยู่จริง คนอื่น ๆ เชื่อมโยงการเผยแพร่กับความสามารถในการเผยแพร่งานเขียนผ่านอุปกรณ์และแอพ ผู้คนจำนวนมากขึ้นเรื่อย ๆ คิดว่าการเผยแพร่เป็นการทำให้เนื้อหาพร้อมใช้งานเพื่อความเพลิดเพลินในรูปแบบใด ๆ ไม่ว่าจะหมายถึงการส่งบทความไปยังบล็อกหรืออัปเดตโพสต์ Google Plus

ความเป็นจริงคือความคาดหวังที่แตกต่างกันในผู้ใช้และความคาดหวังเหล่านี้จะแปรเปลี่ยนไปตามกาลเวลา ผู้อ่านที่เคยกินโพสต์ล่าสุดในบล็อกอย่างตะกละตะกลามตอนนี้คาดหวังว่าพวกเขาจะสามารถอ่านบทความในบล็อกนั้นหรือบทความหรือหนังสือได้ทุกที่และทุกเวลาที่สะดวกสำหรับพวกเขา เนื้อหาวันนี้ติดตามเราตั้งแต่บล็อกไปจนถึง Reeder ทางโทรศัพท์ไปจนถึง Instapaper บน iPad ไปยังเวอร์ชันอีเมลที่ส่งผ่าน Whispernet ไปยัง Kindle

เวิร์กโฟลว์การอ่านของทุกคนแตกต่างกันและสำหรับผู้ที่ต้องการคุณสมบัติการช่วยสำหรับการเข้าถึงเช่นโปรแกรมอ่านหน้าจอคอนทราสต์สูงหรือข้อความที่ขยายใหญ่เวิร์กโฟลว์นั้นใช้งานไม่ได้และบางครั้งก็ไม่สามารถแก้ไขได้เมื่อผู้เขียนและผู้เผยแพร่ไม่พิจารณารายละเอียดการจัดรูปแบบเล็กน้อย แต่จำเป็น อย่าคิดว่านี่ไม่ใช่การ "ทำเครื่องหมายในช่องการเข้าถึง" แต่ให้ตระหนักว่าคุณกำลังเปลี่ยนเนื้อหาของคุณให้กลายเป็นกล่องดำสำหรับผู้มีโอกาสเป็นลูกค้าจำนวนมาก

การช่วยการเข้าถึงไม่ใช่ "คุณลักษณะ"

แม้ว่าจะเป็นเรื่องจริงที่บุคคลที่มีการได้ยินและการมองเห็นลดลงก็ใช้การควบคุมที่เข้าถึงได้จริง แต่ก็มีคนอื่น ๆ อีกมากมายที่ได้รับประโยชน์จากสิ่งเหล่านี้เช่นกัน ผู้ที่มีสายตาเลือนรางจะปรับขนาดตัวอักษรเพื่ออ่านเนื้อหาบนหน้าจอได้ง่ายขึ้น คนตาบอดสีชื่นชมความสามารถในการปรับจานสีเพื่อให้สิ่งต่างๆเช่นข้อความเตือนสีแดงดูโดดเด่น ผู้ที่มีการเดินทางเป็นเวลานานจะใช้โปรแกรมอ่านหน้าจอเพื่อฟังบทความที่กำลังอ่านอยู่ ผู้ที่ไม่ใช่เจ้าของภาษาใช้ภาพและเสียงที่มีคำบรรยายเพื่อช่วยในการทำความเข้าใจภาษาใหม่ สถานการณ์ทั้งหมดนี้แสดงถึงขอบเขตที่กว้างขึ้นสำหรับเนื้อหาของคุณประสบการณ์ของผู้ใช้ที่ดีขึ้นและการเอาใจใส่และอาจมีรายได้เพิ่มขึ้นด้วยซ้ำ

สำหรับภาพรวมที่ชัดเจนเกี่ยวกับความหมายของการช่วยสำหรับการเข้าถึงโปรดดูบทความของ Ian Hamilton

การกำหนดแพลตฟอร์ม

เริ่มจากคำจำกัดความบางประการเกี่ยวกับรูปแบบที่เราสามารถมุ่งเน้นเพื่อให้เนื้อหาของเราอ่านง่ายขึ้น:

• HTML: ด้วย HTML5 เว็บเป็นสถานที่ที่ดียิ่งขึ้นสำหรับนักเขียนและผู้เผยแพร่ในการแสดงผลงานของพวกเขา แท็กใหม่เช่น บทความ, มาตรา, หัวข้อ และ ส่วนท้าย ขณะนี้มีการนำไปใช้ในเบราว์เซอร์จำนวนมากและสามารถใช้กึ่งเชื่อถือได้เพื่อเพิ่มบริบททางความหมายให้กับงานเขียนของคุณ นอกจากนี้โมดูลหน้า CSS3 ที่กำลังจะมาถึงอาจเป็นที่สนใจสำหรับผู้ที่มองหาประสบการณ์การอ่านหน้าคงที่มากขึ้นเพื่อเปิดใช้งาน
• EPUB: EPUB เป็นมาตรฐานอย่างเป็นทางการของ International Digital Publishing Forum (IDPF) EPUB3 ได้รับการอนุมัติในเดือนตุลาคม 2554 และอนุญาตให้สิ่งพิมพ์มีเนื้อหาที่มีสไตล์และปรับแต่งได้มากขึ้นใกล้เคียงกับสิ่งที่สามารถใช้กับ HTML / CSS ได้มากกว่าหลักเกณฑ์ที่เป็นแบบคงที่ก่อนหน้านี้
• MOBI: MOBI ย่อมาจาก Mobipocket เป็นรูปแบบที่ Kindle และโปรแกรมอ่านดิจิทัลอื่น ๆ ใช้ สามารถปรับแต่งได้น้อยกว่า EPUB อีกครั้ง แต่เราครอบคลุมที่นี่เนื่องจากคุณสามารถใช้ในการเผยแพร่เนื้อหาไปยัง Amazon ได้หากคุณเลือก จากข้อมูลของ Robin Christopherson จาก AbilityNet พบว่า Kindle บางรุ่นสามารถเข้าถึงได้สำหรับผู้ใช้ที่ตาบอด อย่างไรก็ตามแอพ Kindle บน iOS ไม่ใช่ KF8 ซึ่งเป็นรูปแบบใหม่ของ Kindle ได้รับการสนับสนุนโดย Kindle Fire และจะเปิดตัวในอุปกรณ์ Kindle e-ink รุ่นล่าสุดและแอปการอ่าน Kindle ในไม่ช้า
• ไฟล์ PDF: PDF กลายเป็นสิ่งที่แพร่หลายบนเว็บ ฉันรวมไว้ที่นี่เพราะแท็บเล็ตส่วนใหญ่มีเทคโนโลยีในตัวที่ดีสำหรับการอ่าน PDF และเปิดใช้งานเทคโนโลยีอำนวยความสะดวกด้วย ด้วย PDF ปัจจัยในการตัดสินใจคือวิธีสร้างไฟล์ ตามที่ Alan Dalton ที่ปรึกษาด้านการพัฒนาความสามารถในการเข้าถึงของ National Disability Authority ของไอร์แลนด์กล่าวว่า "คุณสามารถทำให้ PDF เข้าถึงได้ แต่หลาย ๆ คนทำไม่ได้พวกเขาไม่รู้ว่าเครื่องมือของพวกเขากำลังผลิตผลิตภัณฑ์ที่ไม่ดีถ้าฉันมีทางของฉันทุกอย่างที่เราทำก็จะ เป็น HTML " นอกจากการนำทางและการเข้าถึงแล้ว PDF ยังไม่สามารถปรับให้เข้ากับขนาดต่างๆได้ดีนักและใครก็ตามที่พยายามอ่าน PDF บนสมาร์ทโฟนจะคุ้นเคยกับการบีบนิ้วการซูมและการแพนที่ไม่สะดวก

สิ่งที่ไม่อยู่ในหมวดหมู่นี้คือแอปที่นำเนื้อหาของคุณและเปลี่ยนเป็นรูปภาพขนาดใหญ่ แม้ว่าวิธีนี้จะช่วยให้มั่นใจได้ว่ารูปลักษณ์และสไตล์จะเหมือนกันในทุกแพลตฟอร์ม แต่คุณก็บล็อกผู้ชมจำนวนมากในขณะเดียวกันก็สร้างการดาวน์โหลดที่หนักมาก ปัญหานี้รุนแรงขึ้นเมื่อเราเริ่มพูดถึงจอภาพ Retina และภาพขนาดสองเท่า หากต้องการทราบว่าการถูกปฏิเสธสิ่งที่คุณต้องการอ่านเป็นอย่างไร (แต่ก็ยังต้องจ่ายเงินอยู่ดี) โปรดดูความคิดเห็นเกี่ยวกับแอป Newsstand ที่ส่วนใหญ่ไม่สามารถเข้าถึงได้ผ่าน VoiceOver ใน iOS

หากต้องการดูว่านิตยสารประเภทนี้มีลักษณะอย่างไรสำหรับผู้ใช้เทคโนโลยีที่สามารถเข้าถึงได้โปรดดูวิดีโอของฉันที่ฝังไว้ซึ่งแสดงให้เห็นถึงประสบการณ์ที่น่าผิดหวังในการพยายามอ่านนิตยสารเหล่านี้ด้วย
เครื่องมือการเข้าถึงเช่น VoiceOver:

ทำให้เนื้อหาพกพาและเข้าถึงได้

การมุ่งเน้นไปที่รูปแบบพกพาช่วยให้เราจัดการเนื้อหาของเราให้ใช้ชีวิตได้อย่างมีความสุขบนเบราว์เซอร์โทรศัพท์อุปกรณ์อ่านดิจิทัลและแอปพลิเคชันการอ่านมากขึ้น เราต้องทำอย่างไรกับเนื้อหาของเราเพื่อให้แน่ใจว่าสามารถแปลได้ดีระหว่างรูปแบบต่างๆเหล่านี้ในขณะที่ยังคงรักษารูปแบบที่กำหนดเองและประสบการณ์ที่ยอดเยี่ยมไว้

ฉันได้รวบรวมหลักเกณฑ์บางประการไว้ด้านล่างสำหรับผู้ที่ต้องการให้กลุ่มเป้าหมายกว้างที่สุดเท่าที่จะเป็นไปได้และผู้ที่ไม่ต้องการล็อกเนื้อหาของตนไว้ในกล่องดำสำหรับผู้ใช้จำนวนมาก เทคนิคเหล่านี้สามารถใช้ได้กับทุกอย่างตั้งแต่บล็อกโพสต์ไปจนถึงการทำข่าวในรูปแบบยาวไปจนถึงงานอื่น ๆ ที่คุณกำลังพิจารณาเผยแพร่ด้วยตนเอง:

1. เริ่มต้นด้วย HTML5

ด้วยการสร้างเอกสารของคุณในตอนแรกด้วย HTML5 คุณจะไม่ต้องกังวลในอนาคต มาร์กอัป HTML5 จะช่วยให้เอกสารของคุณง่ายต่อการนำทางและแปลเป็นรูปแบบอื่น ๆ คุณจะทำสิ่งตีพิมพ์แบบ "ย้อนยุค" ให้เป็นรูปแบบอื่น ๆ น้อยลงอย่างมากหากคุณมีข้อมูลเชิงความหมายตั้งแต่เริ่มต้น

2. ไว - อาเรีย

WAI-ARIA คือ Web Accessibility Initiative - Accessible Rich Internet Applications Suite เป็นชุดแนวทางที่สร้างขึ้นโดย Protocols and Formats Working Group (PFWG) ของ
W3C WAI-ARIA กำหนดวิธีทำให้เนื้อหาเว็บและแอปพลิเคชันสามารถเข้าถึงได้มากขึ้นสำหรับผู้ทุพพลภาพและช่วยให้มีเนื้อหาแบบไดนามิกและการควบคุมอินเทอร์เฟซผู้ใช้ขั้นสูงที่พัฒนาด้วย Ajax, HTML, JavaScript และเทคโนโลยีที่เกี่ยวข้อง เทคนิคบางอย่างในบทความนี้มาจากแนวทาง WAI-ARIA และแม้ว่าบทความนี้จะไม่ยาวพอที่จะครอบคลุมข้อมูลจำเพาะทั้งหมด แต่เราขอแนะนำให้คุณตรวจสอบเพื่อดูรายละเอียดเพิ่มเติมว่าเหตุใดจึงแนะนำและแนวทางปฏิบัติที่ดีที่สุดสำหรับ การนำไปใช้

3. การใช้ Doctype

แม้ว่าการใช้ประเภทหลักที่เฉพาะเจาะจงจะไม่ส่งผลต่อความสามารถในการเข้าถึงของโค้ด HTML ที่เกี่ยวข้อง แต่เหตุผลสำคัญในการใช้ประเภทหลักคือเพื่อให้แน่ใจว่าโหมดนิสัยใจคอของเบราว์เซอร์ไม่ได้ถูกเรียกใช้ เพียงแค่ใช้ ! 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">

บอกให้คนอื่นรู้

หากเนื้อหาของคุณมีให้เลือกหลายรูปแบบตรวจสอบให้แน่ใจว่ามีวิธีที่จะค้นพบสิ่งนี้ในไซต์ของคุณ คุณคงเคยเห็นข้อความ "หากคุณมีปัญหาในการดูอีเมลนี้โปรดอ่านทางออนไลน์
version "ที่ด้านบนของจดหมายข่าวทางอีเมลจำนวนมากทำให้เป็นแนวทางปฏิบัติในการทำเช่นเดียวกันสำหรับเนื้อหาของคุณหากคุณมี PDF ที่สามารถเข้าถึงได้หรือเวอร์ชันเสียงรวมทั้ง ePub ตรวจสอบให้แน่ใจว่าผู้ใช้สามารถค้นหาข้อมูลดังกล่าวได้ การทดสอบเพื่อให้แน่ใจว่าเนื้อหาสามารถค้นหาและอ่านได้