วิธีการประเมิน (และปรับปรุง) เว็บไซต์ของคุณด้วยการทดสอบความสามารถในการเข้าถึง

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

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

เหตุใดเรื่องการทดสอบความสามารถในการเข้าถึง

บล็อก Elegant Themes

ยิ่งเว็บไซต์ของคุณเข้าถึงได้มากเท่าใดผู้ใช้ทุกประเภทก็จะสามารถนำทางได้ง่ายขึ้นเท่านั้น

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

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

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

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

ก่อนที่เราจะกระโดดลงไปในรายละเอียดเราขอแนะนำให้คุณลองดูที่เป็น   Web Content Accessibility แนวทาง (WCAG)ใส่กันโดยWorld Wide Web สมาคม (W3C) ในกรณีที่คุณไม่คุ้นเคยกับ W3C ก็เป็นชุมชนระหว่างประเทศที่ทำงานเพื่อพัฒนามาตรฐานเว็บสำหรับประสบการณ์ที่ดีขึ้น

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

วิธีการประเมิน (และปรับปรุง) เว็บไซต์ของคุณด้วยการทดสอบความสามารถในการเข้าถึง (ใน 4 ขั้นตอน)

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

ขั้นตอนที่ 1: ทดสอบเว็บไซต์ของคุณสำหรับปัญหาเกี่ยวกับการด้อยค่าภาพสี

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

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

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

ตัวกรองสี Toptal Blind

หากต้องการใช้เครื่องมือเพียงวาง URL ที่ต้องการทดสอบภายใน  ช่องURL พิมพ์ จากนั้นเลือกตัวกรองจากเมนูทางด้านขวา ซึ่งรวมถึงตัวเลือกสำหรับการตาบอดสีสามแบบและตัวเลือกหนึ่งตัวเลือกทั้งหมด:

ตัวกรองสี Toptal Blind Filter กำลังทำงาน

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

ขั้นตอนที่ 2: ตรวจสอบปัญหาที่ส่งผลต่อผู้ใช้ที่มีปัญหาเรื่องวิสัยทัศน์ทั่วไป

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

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

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

ส่วนขยาย NoCoffee Chrome

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

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

  1. ใช้ความคมชัดได้ดีขึ้นตามที่เราได้กล่าวถึงในขั้นตอนที่หนึ่ง
  2. เพิ่มขนาดตัวอักษรเพื่อให้อ่านข้อความได้ง่ายยิ่งขึ้นแม้กระทั่งสำหรับผู้ที่มีความบกพร่องทางสายตา

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

การจำลองบล็อก Elegant Themes ด้วยตัวกรองภาพนิ่ง

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

ขั้นตอนที่ 3: เพิ่ม แอตทริบิวต์”Alt” ที่อธิบายถึงรูปภาพของคุณสำหรับผู้ใช้ที่มีปัญหาทางสายตา

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

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

ในระยะสั้นภาพใด ๆ ที่คุณเพิ่มลงในบทความและหน้าเว็บควรมีแท็กalt ที่ อธิบาย เอาดอกไม้นี้เช่น:

ดอกไม้สีแดงตรงกลางของทุ่งนา

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

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

วิธีเพิ่มแท็ก alt ลงในภาพ WordPress ของคุณ

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

ขั้นตอนที่ 4: ทบทวนคำอธิบายภาพวิดีโอของคุณ

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

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

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

เครื่องมือที่ใช้ในการปิดคำบรรยายภาพของ YouTube

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

การฝังวิดีโอ YouTube ใน WordPress

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

ข้อสรุป

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

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

  1. ทดสอบเว็บไซต์ของคุณเกี่ยวกับปัญหาด้านการมองเห็นด้วยความบกพร่องทางสี
  2. ตรวจหาปัญหาที่อาจส่งผลต่อผู้ใช้ที่มีปัญหาด้านวิสัยทัศน์ทั่วไป
  3. เพิ่มแอตทริบิวต์ alt ที่อธิบายให้กับรูปภาพของคุณ
  4. ตรวจสอบคำบรรยายภาพวิดีโอของคุณ

 


อ้างอิงข้อมูลจาก:  elegantthemes.com