ขั้นตอนขั้นต่ำที่ฉันควรทำคืออะไรเพื่อให้แน่ใจว่าเว็บไซต์ของฉันสามารถเข้าถึงได้?


35

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

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

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


uxexchange.com?
Bobby Jack

คำตอบ:


18
  • ตรวจสอบให้แน่ใจว่าทุกภาพมีข้อความแสดงแทน
  • ตรวจสอบให้แน่ใจว่าชุดรูปแบบสีของคุณเหมาะสำหรับผู้ที่มีอาการตาบอดสี
  • เสนอเค้าโครงความคมชัดสูงหรือเค้าโครงข้อความขนาดใหญ่สำหรับผู้บกพร่องทางสายตา
  • ตรวจสอบให้แน่ใจว่าลิงก์ของคุณเหมาะสมเมื่ออ่านนอกบริบท (เช่นอย่าเพิ่งเขียน "คลิกที่นี่")
  • ตรวจสอบให้แน่ใจว่าไซต์ของคุณยังคงมีฟังก์ชั่นพื้นฐานอย่างสมบูรณ์หากผู้ใช้ไม่มีการสนับสนุน JavaScript

W3 มีเคล็ดลับขั้นพื้นฐานบางอย่างเกี่ยวกับการเข้าถึงผ่านทางเว็บไซต์ของ Joe Clark มีหนังสือ"อาคารที่เข้าถึงได้ง่าย"เวอร์ชั่นออนไลน์ให้ดูฟรีซึ่งมีข้อมูลที่เป็นประโยชน์มากมาย


1
มีหลายประการสำหรับกฎ 'ข้อความ alt' น่าเสียดายที่ฉันทำงานกับคนที่คิดว่าเป็นกฎที่ยากและรวดเร็วนั่นคือทุกภาพต้องมีแอตทริบิวต์ alt จากนั้นพวกเขาก็เพิ่มสิ่งต่าง ๆ เช่น "โลโก้ บริษัท ของเรา" ลงในภาพโลโก้และ "สีฟ้าขนาดใหญ่" ไปที่ภาพที่เชื่อมโยงกับบัญชี Twitter
Bobby Jack

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

8

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


1
และสนุกมากขึ้นในวัน CSS เปล่า :) :)
Post Post

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

7

ประการแรก“ คนพิการ” หมายถึงอะไร!

ดังนั้นให้ดูที่กลุ่มคนที่คุณต้องการตรวจสอบว่าเป็นเว็บไซต์ของคุณหรือไม่

คนยากจนที่มีสมุดจดบันทึกพร้อมหน้าจอขนาดเล็กเท่านั้น

คุณเพียงแค่ต้องตรวจสอบเว็บไซต์ของคุณสามารถใช้งานได้เมื่อหน้าต่างเบราว์เซอร์มีขนาดเล็กโดยไม่ต้องเจ็บปวดมากเกินไป

คนตาบอดสี

ใครบางคนสามารถใช้เว็บไซต์ของคุณโดยไม่เห็นสีของไอคอน ฯลฯ ถ่ายภาพคุณกำลังเข้าถึงมันบนจอภาพ B&W

คนที่มีไซต์ไม่ดี

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

ไซต์ของคุณใช้เค้าโครงที่มีคอนทราสต์สูงหรือไม่หากผู้ใช้เปลี่ยนรูปแบบที่มีคอนทราสต์สูงหรือไม่

บุคคลที่ไม่สามารถใช้เมาส์ได้

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

คนที่มีทักษะการอ่านไม่ดี

คุณใช้ภาษาอังกฤษง่ายที่สุดเท่าที่จะเป็นไปได้?

คนที่ไม่เก่งในการเรียนรู้สิ่งใหม่

การออกแบบเว็บไซต์ของคุณขึ้นอยู่กับเว็บไซต์อื่น ๆ ที่ผู้ใช้ของคุณรู้อยู่แล้วว่าจะใช้อย่างไร?

คนตาบอด

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

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

คนตาบอดส่วนใหญ่พบว่ามันยากมากที่จะใช้เว็บไซต์แบบโต้ตอบใด ๆ ที่พวกเขาไม่เคยใช้มาก่อน แต่เว็บไซต์ก็ออกแบบมาอย่างดี

ดังนั้นคุณควรให้ตัวเลือกเว็บที่ไม่มี? (โทรศัพท์บุคคลที่เยี่ยมชมพวกเขาเพื่อช่วยกรอกแบบฟอร์ม ฯลฯ )

ประการแรกไซต์ของคุณสามารถใช้งานได้โดยไม่มีภาพหรือไม่? (ข้อความ Alt เป็นวิธีหนึ่งในการทำเช่นนี้)

เมื่อให้ซอฟต์แวร์คำพูดอ่านไซต์จากบนลงล่างเว็บไซต์ของคุณจะสามารถเข้าใจด้วยวิธีนั้นได้หรือไม่

มันยากมากที่จะทำให้ไซต์ที่มีการนำทางที่ซับซ้อนใช้งานง่ายสำหรับผู้ใช้งานที่ต้องการผูกมัดและคนที่ผูกมัดไม่มีทางทราบได้ว่าส่วนหนึ่งของหน้านี้ได้รับการปรับปรุงโดย JavaScript และจำเป็นต้องอ่านอีกครั้ง

การเปลี่ยนสีของรายการสำหรับการเปลี่ยนแปลงสถานะนั้นไม่ใช่ตัวเลือกที่ดี

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


1
ฉันรักประโยคแรกในคำตอบนี้! (และแน่นอนประโยคอื่น ๆ ด้วย)
Post Post

5

คุณสามารถใช้เว็บไซต์นี้เพื่อรับภาพรวมของการปฏิบัติตามอย่างรวดเร็ว: http://wave.webaim.org/

มันทำงานคล้ายกับระบบ "Bobby" เก่าที่ปิดตัวลงเมื่อสองสามปีก่อน


3

รัฐบาลดัตช์ใช้เว็บไซต์นี้เพื่อทดสอบการเข้าถึงเว็บไซต์ ลองดู ... คุณยังสามารถเข้าสู่เว็บไซต์ของคุณเพื่อทดสอบสถานะปัจจุบันของการเข้าถึง ...

http://www.webrichtlijnen.nl/english/


2

ฉันพบว่าหนังสือเล่มดำของ Mark Pilgrim สามารถดาวน์โหลดได้ฟรีในDive Into Accesibilityเพื่อเป็นจุดอ้างอิงที่มีประโยชน์ในธีมนี้ มันมาจากปี 2002 แต่ก็ยังเกี่ยวข้องกันมาก คำแนะนำเช่น "ใช้การลดระดับอย่างสง่างาม" ไม่เก่า



1

ฉันคิดว่าคุณต้องใช้เว็บไซต์นี้http://www.totalvalidator.comหรือปลั๊กอิน firefox ที่มีอยู่ มันมีการตรวจสอบความพิการหลายประการและจะทำเครื่องหมายสิ่งที่ขาดหายไป


1

# 1 คำตอบนั้นง่าย: เขียนให้ถูกต้องใช้ความหมาย HTML / CSS !!! คำแนะนำทั้งหมดข้างต้นนั้นดี นี่คือรายการตรวจสอบที่ผมเขียนสองสามปีที่ผ่านมาแสดงให้เห็นว่าคุณไม่กี่สิ่งที่คุณควรจะได้รับการตรวจสอบในเว็บไซต์ทั้งหมด: https://forge.iowa.gov/wiki/index.php/Web_Checklist มันถือว่าคุณมีแถบเครื่องมือนักพัฒนาเว็บบน FF แต่นั่นฟรีและหาได้ง่าย

สิ่งที่เรียบง่ายสองสามอย่างที่ฉันรู้สึกว่าสามารถสร้างความแตกต่างที่แท้จริง:

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

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

นอกจากนี้ยังเป็นการดีที่จะอนุญาตให้บุคคลที่นำทางหน้าเว็บของคุณโดยไม่มี CSS และรูปภาพที่สวยงามทั้งหมดของคุณข้ามรหัสที่ทำซ้ำไปยังเนื้อหา สิ่งนี้สามารถทำได้โดยใช้ลิงค์ SKIP ที่ซ่อนอยู่ใน CSS ตัวอย่างเช่น<a href="#skipnav" class="noshow">Skip past navigation to content.</a>เพื่ออนุญาตให้ข้ามการนำทางที่มีความยาว

ตามที่ระบุโดย Tony หนึ่งในการทดสอบที่ดีที่สุดคือการตัดเสียงระฆังและเสียงนกหวีดของหน้าเว็บของคุณออกทั้งหมดและดูว่ายังเหมาะสมอยู่หรือไม่


ในเรื่องของแท็ก ALT ... ทุกภาพควรมีแท็ก ALT หากรูปภาพเป็นเนื้อหาควรมีคำอธิบายในแท็ก ALT หากเป็นเพียงการตกแต่งให้ใช้เครื่องหมายอัญประกาศalt=""เพื่อระบุว่าโปรแกรมอ่านหน้าจอเช่น JAWS สามารถส่งต่อได้
ph33nyx
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.