ดึงดูดผู้อ่านมากขึ้นด้วยไซต์ที่เหมาะกับความต้องการของทุกคน
การทำให้เว็บไซต์ของคุณสามารถเข้าถึงได้สำหรับคนพิการคุณจะสามารถเข้าถึงได้ทุกคน ในความเป็นจริงการเข้าถึงเว็บไซต์ของคุณได้ง่ายขึ้นอาจช่วยให้ผู้คนค้นพบเว็บไซต์ของคุณในเครื่องมือค้นหา ทำไม? เนื่องจากเครื่องมือค้นหาใช้สัญญาณบางอย่างที่ผู้อ่านหน้าจอทำเพื่อหาและทำความเข้าใจเนื้อหาในเว็บไซต์ของคุณ
แต่คุณจะทำอย่างไรให้เว็บไซต์ที่เข้าถึงได้โดยไม่ต้องเป็นผู้เชี่ยวชาญด้านการเขียนโค้ด
ต่อไปนี้เป็นเคล็ดลับและเทคนิคที่เกือบทุกคนที่มี ความรู้พื้นฐาน HTML สามารถใช้เพื่อปรับปรุงการเข้าถึงได้ของเว็บไซต์
เครื่องมือการเข้าถึงเว็บ
W3C มีรายการเครื่องมือการเข้าถึงเว็บที่ยอดเยี่ยมซึ่งคุณสามารถใช้เป็นเครื่องมือตรวจสอบเพื่อระบุปัญหาที่อาจเกิดขึ้นกับเว็บไซต์ของคุณ ที่กล่าวว่าฉันยังคงแนะนำให้ทำสำรวจบางอย่างกับโปรแกรมอ่านหน้าจอและประสบปัญหาด้วยตัวคุณเอง
การอ่านที่เกี่ยวข้อง: เทคโนโลยีการสนับสนุนคืออะไรและทำงานอย่างไร?
ทำความเข้าใจผู้อ่านหน้าจอ
หนึ่งในวิธีที่สำคัญที่สุดที่คุณสามารถปรับปรุงการเข้าถึงเว็บไซต์ของคุณคือเพื่อให้แน่ใจว่าผู้อ่านสามารถอ่านได้ เครื่องอ่านหน้าจอใช้เสียงสังเคราะห์เพื่ออ่านข้อความบนหน้าจอ ฟังดูตรงไปตรงมา; อย่างไรก็ตามผู้อ่านหน้าจออาจไม่เข้าใจเว็บไซต์ของคุณในแบบที่คุณตั้งค่าไว้ในขณะนี้
สิ่งแรกที่คุณอาจต้องการทำคือลองใช้โปรแกรมอ่านหน้าจอและดูว่าจะทำอย่างไร ถ้าคุณอยู่ในเครื่อง Mac ลองใช้ VoiceOver
- ไปที่ System Preferences
- เลือกผู้ พิการ
- เลือก VoiceOver
- ทำเครื่องหมายที่ช่อง Enable VoiceOver
คุณสามารถเปิดและปิดได้โดยใช้คำสั่ง F5
หากคุณใช้เครื่อง Windows คุณอาจต้องการดาวน์โหลด NVDA คุณสามารถตั้งค่าเพื่อเปิดหรือปิดด้วยปุ่มลัด + alt + n
โปรแกรมอ่านหน้าจอทั้งสองทำงานได้โดยการให้ผู้ใช้สามารถนำทางด้วยแป้นพิมพ์ (ซึ่งจะทำให้รู้สึก - ถ้าคุณมองไม่เห็นการใช้เมาส์จะเป็นเรื่องท้าทาย) และสร้างพื้นที่โฟกัสสำหรับการนำทาง โฟกัสเป็นหลักที่แป้นพิมพ์เป็น "แหลม" แต่มักจะแสดงเป็นกล่องเน้นรอบวัตถุโฟกัสแทนเคอร์เซอร์
คุณสามารถเปลี่ยนระดับเสียงและความเร็วของเสียงที่อ่านได้หากการตั้งค่าเริ่มต้นเป็นที่น่ารำคาญ (และหลังจากฟังเพลงอ่านช้าประมาณ 5 นาทีเท่านั้น) คนตาบอดมักอ่านเว็บไซต์ที่ผู้อ่านหน้าจอตั้งไว้ด้วยความเร็วสูง
อาจช่วยปิดตาของคุณเมื่อคุณทำเช่นนี้ แต่ก็อาจช่วยให้พวกเขาเปิดและเปรียบเทียบ บางสิ่งที่คุณสังเกตเห็นได้ทันทีเมื่อคุณลองฟังเว็บไซต์ของคุณก็คือข้อความบางส่วนอาจไม่เป็นไปตามคำสั่ง หัวเรื่องและตารางอาจคลาดเคลื่อน รูปภาพอาจถูกข้ามไปหรืออาจพูดว่า "ภาพ" หรือสิ่งที่ไม่เป็นประโยชน์เท่าเทียมกัน ตารางมีแนวโน้มที่จะถูกอ่านเป็นชุดของรายการที่ไม่มีบริบท
คุณสามารถหวังว่าจะแก้ไขปัญหานี้ได้
Alt-Tags หรือ Alternative Attribute
ใช้แอตทริบิวต์ alt-tag หรือ alternative (alt) ใน HTML เพื่ออธิบายภาพ ใน HTML จะมีลักษณะดังนี้:
แม้ว่าคุณจะสร้างเว็บไซต์ของคุณด้วยเครื่องมือวิชวลที่ซ่อนโค้ด HTML ของคุณอยู่ แต่คุณมักจะมีโอกาสที่จะใส่คำอธิบายภาพ คุณสามารถป้อนอะไรก็ได้ (alt = "") แต่จะดีกว่ามากที่จะให้คำอธิบายที่เป็นประโยชน์ หากคุณตาบอดคุณต้องการรู้อะไรเกี่ยวกับภาพบ้าง? "ผู้หญิง" ไม่ค่อยมีประโยชน์ แต่อาจจะเป็น "แผนภูมิการออกแบบการวาดภาพผู้หญิงรวมทั้งการเข้าถึงการใช้งานการสร้างแบรนด์และการออกแบบ"
ข้อความชื่อ
เว็บไซต์ไม่แสดงแท็กชื่อ HTML เสมอ แต่จะเป็นประโยชน์สำหรับโปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าแต่ละหน้าของเว็บไซต์ของคุณมีชื่ออธิบาย (แต่ไม่มากเกินไป) ที่บอกผู้เข้าชมเกี่ยวกับหน้าเว็บ
ให้เว็บไซต์ของคุณดีลำดับชั้นข้อมูล
แบ่งส่วนใหญ่ของข้อความที่มีส่วนหัวและถ้าเป็นไปได้ให้ ใช้ส่วนหัวกับ ลำดับชั้น H1, H2, H3 อย่างเหมาะสม ไม่เพียงทำให้เว็บไซต์ของคุณง่ายขึ้นสำหรับโปรแกรมอ่านหน้าจอเท่านั้น แต่ยังช่วยให้ทุกคนสามารถเข้าถึงได้ง่ายขึ้น นอกจากนี้ยังเป็นสัญญาณที่ดีเยี่ยมสำหรับ Google และเครื่องมือค้นหาอื่น ๆ เพื่อช่วยในการจัดทำดัชนีเว็บไซต์ของคุณได้ดียิ่งขึ้น
ในทำนองเดียวกันคุณควรตรวจสอบว่าเว็บไซต์ของคุณอยู่ในลำดับเนื้อหาเชิงตรรกะและคุณไม่มีกล่องข้อมูลที่ไม่เกี่ยวข้องที่ปรากฏ หากคุณกำลังใช้โฆษณาโปรดดูว่าโฆษณาของคุณไม่ได้ล่วงล้ำและทำให้ข้อความบนเว็บไซต์ของคุณบ่อยเกินไป
สร้างตารางที่ดีขึ้น
หากคุณใช้ตาราง HTML คุณสามารถเพิ่มคำอธิบายภาพลงในตารางโดยใช้แท็กเพื่อให้ผู้อ่านอ่านหน้าจอเข้าใจได้ง่ายกว่าเพียงแค่ทำให้ชื่อของตารางเป็นตัวหนา นอกจากนี้คุณยังสามารถเพิ่มส่วน "scope" และระบุแถวและคอลัมน์ใหม่ ๆ ในตารางได้อย่างชัดเจนเพื่อให้โปรแกรมอ่านหน้าจอไม่เพียงแค่ปิดเสียงชุดของเซลล์ในตารางโดยไม่ให้บริบทใด ๆ
การนำทางด้วยแป้นพิมพ์
โดยทั่วไปสิ่งที่คุณใส่ในเว็บไซต์ของคุณควรเป็นสิ่งที่คนน่าจะทำได้โดยใช้แป้นพิมพ์เท่านั้น นั่นหมายความว่าปุ่มการนำทางของคุณไม่ควรเป็นปุ่มแบบเลื่อนลงแบบเคลื่อนไหวหากคุณไม่สามารถใช้งานได้กับโปรแกรมอ่านหน้าจอ (ลองดูดูว่าคุณไม่แน่ใจหรือไม่ - บางปุ่มมีการตั้งโปรแกรมสำหรับการใช้งานคีย์บอร์ด)
คำบรรยายเเบบปิด
หากคุณเพิ่มวิดีโอหรือองค์ประกอบเสียงลงในเว็บไซต์ของคุณพวกเขาควรมีคำอธิบายภาพ HTML5 และบริการสตรีมมิ่งวิดีโอมากมาย (เช่น YouTube) มีการสนับสนุนคำอธิบายภาพ คำบรรยายจะมีประโยชน์ไม่เพียง แต่สำหรับการเข้าถึงเท่านั้น แต่ยังสำหรับผู้ใช้ที่อาจเรียกดูเว็บไซต์ของคุณที่ซึ่งไม่สามารถเล่นเสียงได้เช่นในสำนักงานหรือในที่ที่มีเสียงดัง
สำหรับพ็อดคาสท์หรือองค์ประกอบเสียงอื่น ๆ ให้พิจารณาให้ข้อความที่เป็นข้อความ ไม่เพียง แต่จะเป็นประโยชน์สำหรับผู้ที่ไม่สามารถฟังเสียงการมีข้อความจะช่วยให้ Google และเครื่องมือค้นหาอื่น ๆ สามารถจัดทำดัชนีเนื้อหานั้นและ ช่วย Google ในการจัดอันดับ ได้ง่ายขึ้น
ชาร์ตเพลง
ถ้าคุณต้องการไปที่ระดับขั้นสูงในการเข้าถึง HTML5 ARIA หรือ WAI-ARIA จะเป็นมาตรฐานใหม่ที่จะก้าวไปข้างหน้า อย่างไรก็ตามนี่เป็นคู่มือทางเทคนิคที่ซับซ้อน (และมีการพัฒนา) ดังนั้นสิ่งที่คุณควรทำคือใช้เครื่องตรวจสอบ ARIA เพื่อสแกนเพื่อดูว่าเว็บไซต์ของคุณมีประเด็นที่คุณสามารถจัดการได้หรือไม่ นอกจากนี้ Mozilla ยังมีแนวทางในการเริ่มต้นใช้งาน ARIA อีกด้วย