วิทยาศาสตร์ข้อมูลและฐานข้อมูล

ความสามารถในการเข้าถึงเว็บ: เหตุใดมาตรฐาน W3C จึงมักถูกละเลย



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

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



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



มาดูเบื้องหลังการทำงานและสาเหตุที่นักพัฒนาจำนวนมากมองข้ามมาตรฐานการเข้าถึงเว็บโดยไม่มีเหตุผลที่ดี



1. “ การออกแบบที่สามารถเข้าถึงได้” หมายถึงอะไร?

เนื้อหาที่เข้าถึงได้คือ เนื้อหาที่ทุกคนสามารถใช้ได้ . เราไม่ทราบทุกแง่มุมว่าผู้ใช้เข้าถึงเนื้อหาของเราได้อย่างไรดังนั้นเราจึงต้องออกแบบโดยคำนึงถึงการเข้าถึงล่วงหน้า

ดังที่ฉันได้เน้นไว้ก่อนหน้านี้สิ่งนี้ไม่ได้เกี่ยวข้องกับคนพิการ แต่เป็นเรื่องเกี่ยวกับ ประมาณ 15% ของประชากรโลก . ในชีวิตจริงผู้ใช้มักจะไม่บริโภคเนื้อหาและโต้ตอบกับอุปกรณ์ในลักษณะเดียวกับที่จินตนาการไว้ในระหว่างการพัฒนา นอกจากนี้ยังจำเป็นต้องมีเนื้อหาที่สามารถเข้าถึงได้ด้วยเหตุผลทางกฎหมายในหลายเขตอำนาจศาล อ่าน“ ปัจจัยด้านกฎหมายและนโยบายในการพัฒนากรณีธุรกิจการเข้าถึงเว็บสำหรับองค์กรของคุณ ” สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการปฏิบัติตามข้อกำหนดการเข้าถึง



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

  • ไม่สามารถได้ยินได้ดี 360 ล้านคน ทั่วโลกมีความพิการทางการได้ยิน เนื้อหาเสียงควรมีการถอดเสียงและวิดีโอควรมีคำบรรยาย



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

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



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

  • การใช้อุปกรณ์เคลื่อนที่ ปรับเนื้อหาของคุณสำหรับหน้าจอขนาดเล็ก อนุญาตให้ผู้ใช้ซูมหรือเพิ่มขนาดตัวอักษร



2. วิธีการตรวจสอบการเข้าถึงเว็บที่ดี

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

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



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

ที่มา: W3C

ที่มา: W3C

เพื่อแสดงให้เห็นถึงวิธีการทำงานลองดูตัวอย่างโค้ดง่ายๆ:

ลบ ”. เพื่อช่วยให้ผู้ใช้เข้าใจว่าจะใช้วิธีการใดในการดำเนินการเราสามารถใช้ แอร์ (Assistive Rich Internet Applications) แอตทริบิวต์ (ระบุที่ https://www.w3.org/TR/wai-aria/ ) เพื่อลบล้างบทบาทเดิม เราเปลี่ยนความหมายของลิงก์เป็นปุ่มโดยเพิ่มแอตทริบิวต์ role='button' ด้วยวิธีนี้โปรแกรมอ่านหน้าจอจะอ่านเป็นปุ่มไม่ใช่ลิงก์ แบบไหนเหมาะสมกว่า.

ในระยะสั้นแอตทริบิวต์ ARIA:

  • ให้หรือเพิ่มความหมายขององค์ประกอบที่ไม่ใช่ความหมายหรือความหมายอื่น ๆ

  • ตรวจสอบให้แน่ใจว่าเนื้อหาไดนามิก (สด) ยังคงสามารถเข้าถึงได้

  • จัดเตรียมบทบาทเพื่ออธิบายประเภทของวิดเจ็ตที่กำหนด (เมนูรายการต้นไม้แถบเลื่อนมาตรวัดความคืบหน้า ฯลฯ )

  • จัดเตรียมบทบาทเพื่ออธิบายโครงสร้างของเว็บเพจ (ส่วนหัวภูมิภาคและตาราง)

  • ระบุสถานะของวิดเจ็ต (ตรวจสอบมีป๊อปอัป ฯลฯ )

    เข้ารหัสเซิร์ฟเวอร์ sql 2016 . เสมอ

  • จัดเตรียมคุณสมบัติสำหรับการลากแล้วปล่อยที่อธิบายแหล่งที่มาของการลากและวางเป้าหมาย

การช่วยสำหรับการเข้าถึงในการออกแบบเว็บไซต์คืออะไร?

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

สมมติว่าคุณกำลังจะออกแบบองค์ประกอบเลือกแบบเลื่อนลงที่กำหนดเอง สิ่งที่ควรพิจารณาขณะออกแบบองค์ประกอบมีดังนี้

  • ทำเครื่องหมายสถานะต่างๆ: เปิดใช้งานปิดใช้งานอ่านอย่างเดียว

  • ทำเครื่องหมายองค์ประกอบเมื่อได้รับสถานะโฟกัส / โฮเวอร์

  • ทำเครื่องหมายทุกองค์ประกอบตัวเลือกเมื่อได้รับสถานะโฟกัส / โฮเวอร์

  • ตรวจสอบให้แน่ใจว่าเนื้อหายังคงสามารถอ่านได้เมื่อมีเพียงข้อความเท่านั้นที่ซูมได้ถึงระดับ 200%

  • ตรวจสอบให้แน่ใจว่ามี ความคมชัดเพียงพอ ระหว่างข้อความและพื้นหลัง ช่วยให้ผู้ที่มีสายตาเลือนรางในระดับปานกลางหรือใช้อุปกรณ์ในสภาพแสงที่มากเช่นสัมผัสกับแสงแดดโดยตรงหรือบนจอแสดงผลที่มีความสว่างต่ำเพื่ออ่านเนื้อหา

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

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

    กำหนดการเรียนรู้ของเครื่องและให้ตัวอย่าง

  • ทำเครื่องหมายแต่ละองค์ประกอบเมื่อได้รับสถานะโฟกัส / โฮเวอร์

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

3. การทดสอบการเข้าถึง: จะเริ่มต้นที่ไหน?

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

การกำหนดประเด็นปัญหา

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

ตัวอย่างที่ไม่ดี: ผู้ใช้ไม่สามารถใช้แป้นพิมพ์บนหน้านี้ได้

ตัวอย่างที่ดี: ไม่สามารถใช้การนำทางด้วยแป้นพิมพ์ในเมนูหลัก

ตัวอย่างที่ไม่ดีนำไปสู่กรณีที่ค่อนข้างจะยากที่จะปิดในเวลาอันสั้น การสนทนาในหลายหัวข้ออาจเริ่มต้นในส่วนความคิดเห็นเช่นกันเนื่องจากชื่อตั๋วนั้นดูกว้างเกินไป

ตัวอย่างที่ดีชี้ให้เห็นถึงปัญหาและมุ่งเน้นไปที่สิ่งเดียวเท่านั้น: การนำทางด้วยแป้นพิมพ์ในเมนูหลัก

จัดลำดับความสำคัญของปัญหาการเข้าถึงเว็บ

ลำดับความสำคัญมีความสำคัญเนื่องจากเป็นตัวกำหนดว่าปัญหาใดต้องได้รับการแก้ไขก่อน ตัวอย่างเช่น WCAG หารด้วย สามระดับความสอดคล้อง : A, AA, AAA ซึ่งหมายความว่าคุณควรเริ่มจากระดับขั้นต่ำ A แต่นั่นไม่ได้หมายความว่าระดับ AA และ AAA จะเป็นเพียง 'สิ่งที่ดีที่มี' ทุกระดับมีความสำคัญและสิ่งสำคัญคืออย่าจัดลำดับความสำคัญโดยสมมติว่าระดับ A เพียงอย่างเดียวก็เพียงพอแล้ว

อย่างไรก็ตามระดับ WCAG (หรือแนวทางอื่น ๆ ) อาจเข้าใจยากในบางครั้งและเพื่อให้ง่ายขึ้นเล็กน้อยคุณอาจพิจารณาคำจำกัดความลำดับความสำคัญต่อไปนี้:

  • สำคัญ - ปัญหาที่ป้องกันไม่ให้ผู้ใช้ใช้แอปพลิเคชัน ไม่มีวิธีแก้ปัญหา

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

  • ผู้เยาว์ - ปัญหาที่น่ารำคาญ แต่ไม่ขัดขวางการใช้งานหรือการปรับปรุงที่อาจเกิดขึ้นกับแอปพลิเคชัน

  • ข้อมูล - ไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด คำแนะนำทั่วไปสำหรับการปรับปรุง

แนวทางแก้ไข

ไม่มีแนวทางใดที่ฉันหมายถึง WCAG , มาตรา 508 หรือ มีอยู่ - จะให้คำตอบที่ตรงประเด็นในแง่ของรหัสทางเทคนิคสำหรับวิธีการแก้ไขปัญหาที่ระบุ พวกเขากำหนดพฤติกรรมที่คาดหวังเท่านั้น อย่างไรก็ตาม WCAG ได้กำหนดขั้นตอนการทดสอบเพิ่มเติมที่จะช่วยให้เข้าใจวิธีการสร้างปัญหาซ้ำและมีกลุ่มชุมชน Automated WCAG Monitoring ซึ่งเป็นชุมชน W3C ที่เน้นการพัฒนาที่เชื่อถือได้ กฎ สำหรับการทดสอบการเข้าถึงเว็บทั้งแบบอัตโนมัติและกึ่งอัตโนมัติ

ตัวอย่างสำหรับ เทคนิค WCAG G4 (“ การอนุญาตให้หยุดเนื้อหาชั่วคราวและเริ่มต้นใหม่จากที่ที่หยุดชั่วคราว”):

กระบวนการทดสอบ

บนหน้าที่มีเนื้อหาที่ย้ายหรือเลื่อน

  1. ใช้กลไกที่มีให้ในเว็บเพจหรือโดยตัวแทนผู้ใช้เพื่อหยุดเนื้อหาที่เคลื่อนไหวหรือเลื่อนชั่วคราว

  2. ตรวจสอบว่าการเลื่อนหรือการเลื่อนหยุดลงและไม่ได้รีสตาร์ทเอง
  3. ใช้กลไกที่มีให้เพื่อรีสตาร์ทเนื้อหาที่เคลื่อนไหว
  4. ตรวจสอบว่าการเคลื่อนไหวหรือการเลื่อนกลับมาจากจุดที่หยุด

ผลลัพธ์ที่คาดหวัง

อันดับ 2 และ 4 เป็นเรื่องจริง

ดังที่เราเห็นว่าไม่มีวิธีแก้ปัญหาทางเทคนิค แต่มีการกำหนดพฤติกรรมที่คาดหวังไว้ อย่างไร นักพัฒนาเว็บ ใช้มันขึ้นอยู่กับพวกเขา

แนวทางการเข้าถึงเว็บและมาตรฐาน W3C

การปฏิบัติตามมาตรฐานเว็บพื้นฐานควรเป็นจุดเริ่มต้นของคุณ:

การทดสอบการเข้าถึงเว็บ: ฉันจะทราบได้อย่างไรว่าเนื้อหาของฉันสามารถเข้าถึงได้หรือไม่?

นี่คือจุดตรวจพื้นฐานเบื้องต้นที่จะช่วยให้คุณเข้าถึงเนื้อหาเว็บได้มากขึ้นจากขั้นตอนที่หนึ่ง:

  • ตรวจสอบ HTML ของคุณ ตรวจสอบให้แน่ใจว่าโครงสร้าง HTML ไม่มีข้อผิดพลาดเนื่องจากเทคโนโลยีอำนวยความสะดวกอาจมีปัญหาในการตีความเนื้อหาของหน้า

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

  • ทดสอบด้วยเครื่องมือทดสอบการเข้าถึงและตัวตรวจสอบความถูกต้อง ใช้เครื่องมือที่สแกนและตรวจสอบข้อผิดพลาดในการเข้าถึงที่อาจเกิดขึ้น

  • เนื้อหาแบบไดนามิก แจ้งผู้ใช้โปรแกรมอ่านหน้าจอเกี่ยวกับการเปลี่ยนแปลงแบบไดนามิกเช่น เมื่อผลการค้นหาเปลี่ยนไป

  • อย่าพึ่งใช้สีเพื่ออธิบายความหมาย ใช้สีร่วมกับคำอธิบายเช่นคำเตือน [กล่องสีเหลือง]

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

  • ข้อความแสดงข้อผิดพลาด บอกวิธีแก้ไขข้อผิดพลาดให้ผู้ใช้ทราบเสมอ อย่าเพิ่งระบุว่าข้อมูลไม่ถูกต้อง

    การปรับแต่งประสิทธิภาพเซิร์ฟเวอร์ sql 2008

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

  • ซูม ตรวจสอบให้แน่ใจว่าเนื้อหาของหน้ายังคงสามารถอ่านได้ในขณะที่ซูมข้อความได้สูงสุด 200%

  • ปิดภาพ คุณยังสามารถใช้เพจได้อย่างสะดวกสบายหรือไม่? มีข้อความอื่นสำหรับรูปภาพทั้งหมดหรือไม่?

  • โปรแกรมอ่านหน้าจอ ทดสอบเพื่อดูว่าคุณสามารถอ่านและเลื่อนดูเนื้อหาโดยใช้โปรแกรมอ่านหน้าจออย่างน้อยหนึ่งตัวเช่น VoiceOver, Windows Narrator หรือ NVDA

  • โหมดคอนทราสต์สูง ตรวจสอบเพื่อดูว่าเนื้อหายังอ่านได้หรือไม่ขณะเปลี่ยนเป็นโหมดคอนทราสต์สูง

  • ขนาดตัวอักษร. ตรวจสอบว่าขนาดฟอนต์ในเพจมีขนาดไม่น้อยกว่า 10px

4. ข้อผิดพลาดทั่วไปในการเข้าถึงเว็บ

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

นี่คือรายการที่มีข้อผิดพลาดที่พบบ่อยที่สุดที่นักพัฒนาทำขณะใช้การเข้าถึง:

  • ไม่มีความสามารถในการนำทาง ผ่านเนื้อหาโดยใช้ แป้นพิมพ์เท่านั้น .

  • ใช้คุณสมบัติเค้าร่าง CSS ในทางที่ผิด ในกรณีส่วนใหญ่ outline: 0; ถูกใช้ซึ่งหมายความว่าโครงร่างรอบ ๆ องค์ประกอบที่ดำเนินการได้จะมองไม่เห็นอีกต่อไป ห้ามใช้ outline: 0; หรือ outline: 0 !important; . ผู้ใช้จะสูญเสียความสามารถในการมองเห็นองค์ประกอบที่โฟกัสอยู่ในขณะที่สำรวจเนื้อหาเว้นแต่จะมีทางเลือกอื่นนอกเหนือจากนั้นเช่นการใช้ border คุณสมบัติ CSS

  • การสูญเสียโฟกัส จากองค์ประกอบปัจจุบันเช่นเนื่องจากการปรับแต่ง DOM หรือการใช้ blur() วิธี. สิ่งนี้มักเกิดขึ้นกับแอปพลิเคชันหน้าเดียว

  • ไม่มีการแจ้งเตือนสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ มีการเปลี่ยนแปลงบางอย่างเช่นมีการดาวน์โหลดเนื้อหาโดยใช้ XMLHttpRequest API และมีการแสดงการเปลี่ยนแปลงใหม่ใน UI แต่ผู้ใช้ไม่ได้รับแจ้ง สิ่งนี้มักเกิดขึ้นกับแอปพลิเคชันหน้าเดียว

  • ตัวเลือกวันที่ไม่สามารถเข้าถึงได้ ในหลาย ๆ กรณีจะใช้ตัวเลือกวันที่ที่ไม่สามารถเข้าถึงได้ ผู้ใช้ไม่สามารถเลื่อนดูตัวเลือกปฏิทินโดยใช้แป้นพิมพ์

  • การใช้ส่วนขยาย ที่อ้างว่า แก้ไขปัญหาการเข้าถึงโดยอัตโนมัติ . ใช้อย่างระมัดระวังและตรวจสอบผลลัพธ์ การใช้สิ่งเหล่านี้ในทางที่ผิดอาจสร้างปัญหาได้มากกว่าวิธีแก้ปัญหา

  • การเพิ่มองค์ประกอบ tabindex แอตทริบิวต์ที่มีหมายเลขดัชนีมากกว่า 0 วัตถุประสงค์ของการใช้ tabindex การมีดัชนีมากกว่า 0 ส่วนใหญ่จะเป็นการ 'แก้ไข' เส้นทางการนำทาง อย่างไรก็ตามควรพิจารณาเปลี่ยนโครงสร้าง HTML เพื่อให้ได้เส้นทางการนำทางที่เป็นธรรมชาติ การจัดการโดยใช้ tabindex อาจนำไปสู่ปัญหาการบำรุงรักษาและเส้นทางการนำทางที่คาดเดาไม่ได้

  • ลำดับชั้นของหัวเรื่องไม่ถูกต้อง น่าเสียดายที่ยังคงพบเห็นได้บ่อย แต่ลำดับชั้นของส่วนหัวไม่ได้ถูกสร้างขึ้นอย่างถูกต้องเช่น

    ,
    และ

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

  • ไม่มีการรองรับคอนทราสต์สูง มีผู้ใช้ซอฟต์แวร์ของตนในโหมดคอนทราสต์สูง ตรวจสอบให้แน่ใจว่าเนื้อหาของคุณยังรับรู้ได้

  • ใช้โซลูชัน CAPTCHA ที่ไม่สามารถเข้าถึงได้ น่าเสียดายที่ CAPTCHA ทั้งหมดที่ฉันรู้จักนั้นไม่สามารถเข้าถึงได้หรือใช้งานยากมาก

  • มีภาพเคลื่อนไหวมากเกินไปและ / หรือไม่สามารถหยุดชั่วคราวได้ การเล่นวิดีโอโฆษณาหรือภาพหมุนอัตโนมัติจะรบกวนสมาธิมาก

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

  • ปัญหาการซูม ตรวจสอบให้แน่ใจว่าเนื้อหายังคงสามารถอ่านได้และสามารถนำทางได้เมื่อซูมสูงสุด 200%

  • อาศัยสี. บ่อยครั้งที่สถานะขององค์ประกอบจะถูกทำเครื่องหมายด้วยสีเท่านั้นเช่นสถานะการเตือนจะถูกทำเครื่องหมายด้วยสัญลักษณ์แสดงหัวข้อย่อยสีเหลืองเท่านั้น สีนี้ไม่ถูกมองในลักษณะเดียวกับคนตาบอดสี

  • เป้าหมายที่คลิกได้ / แตะได้ขนาดเล็ก พื้นที่ที่คลิกได้ / แตะได้มักจะเล็กเกินไป การทำให้ใหญ่ขึ้นทำให้ผู้ใช้สามารถเปิดใช้งานได้ง่ายขึ้น

แต่ฉันจะปรับปรุงการเข้าถึงเว็บได้อย่างไร

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

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

หลักการเกสตัลต์ของความใกล้ชิดคือแนวโน้ม

  • บริการตรวจสอบมาร์กอัป W3C - เพื่อให้แน่ใจว่าเนื้อหา HTML ไม่มีข้อผิดพลาด หากโครงสร้าง HTML มีข้อผิดพลาดผลลัพธ์จะไม่สามารถคาดเดาได้และไม่สามารถประมวลผลได้อย่างถูกต้องโดยเฉพาะอย่างยิ่งจากสิ่งที่แตกต่างกัน เทคโนโลยีอำนวยความสะดวก .

  • https://www.w3.org/WAI/ER/tools/ - รายการโปรแกรมหรือบริการออนไลน์ที่ช่วยคุณตรวจสอบว่าเนื้อหาเว็บตรงตามหลักเกณฑ์การช่วยสำหรับการเข้าถึงหรือไม่

  • และเครื่องมือของฉัน ASLint https://www.aslint.org/ ช่วยคุณค้นหาปัญหาการเข้าถึง

โปรดทราบเสมอว่าไม่มีเครื่องมือการเข้าถึง สามารถแทนที่การทดสอบด้วยตนเอง เนื่องจากบางสถานการณ์ไม่สามารถเป็นแบบอัตโนมัติทั้งหมดหรือทั้งหมดได้เช่นการตรวจสอบอัตราส่วนคอนทราสต์ความสว่างขององค์ประกอบด้วย position: fixed;

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

เหตุใดการทำให้เนื้อหาเข้าถึงได้จึงสำคัญ

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

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

สุดท้ายนี่คือสถิติบางส่วนที่คุณต้องพิจารณา:

  • มากกว่า หนึ่งพันล้านคน ทั่วโลกพบกับความพิการบางประเภท

  • การสูงวัยของประชากร . ระหว่างปี 2558 ถึง 2573 จำนวนผู้สูงอายุ - ผู้ที่มีอายุ 60 ปีขึ้นไปทั่วโลกคาดว่าจะเติบโตขึ้น 56 เปอร์เซ็นต์จาก 901 ล้านคนเป็นมากกว่า 1.4 พันล้านคน

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

  • ประเภทของความพิการ: ความพิการมีห้าประเภทกว้าง ๆ ได้แก่ การมองเห็นการเคลื่อนไหวการพูดการรับรู้และการได้ยิน

เราทุกคนต้องการบริการที่มีคุณภาพสูง มาส่งพวกเขาด้วย .

ทำความเข้าใจพื้นฐาน

ความสามารถในการเข้าถึงในการออกแบบเว็บคืออะไร?

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

การปฏิบัติตาม WCAG คืออะไร?

กล่าวง่ายๆว่าการเป็นไปตาม WCAG หมายความว่าคุณกำลังใช้แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) อย่างถูกต้อง ดูข้อมูลอ้างอิงด่วนของ WCAG 2.0 สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีปฏิบัติตามเกณฑ์ต่างๆ

มาตรฐาน WCAG 2.0 คืออะไร

WCAG 2.0 ย่อมาจากแนวทางการเข้าถึงเนื้อหาเว็บ เป็นมาตรฐานทางเทคนิคที่ประกอบด้วยแนวทาง 12 ข้อตามหลักการพื้นฐาน 4 ประการ แนวทางปฏิบัติแต่ละข้อได้รับการทดสอบและจัดอันดับความสอดคล้อง

คู่มือวิศวกรข้อมูลสำหรับการจัดเก็บข้อมูลที่ไม่ใช่แบบดั้งเดิม

วิทยาศาสตร์ข้อมูลและฐานข้อมูล

คู่มือวิศวกรข้อมูลสำหรับการจัดเก็บข้อมูลที่ไม่ใช่แบบดั้งเดิม
วิธีสร้างระบบจัดการข้อผิดพลาด Node.js

วิธีสร้างระบบจัดการข้อผิดพลาด Node.js

ส่วนหลัง