วิธีการตรวจสอบการช่วยสำหรับการเข้าถึงขั้นพื้นฐาน
เผยแพร่แล้ว: 2017-08-09ดังนั้น คุณได้เรียนรู้มากมายเกี่ยวกับการช่วยสำหรับการเข้าถึงเมื่อเร็วๆ นี้ แต่ตอนนี้คุณต้องการตรวจสอบไซต์ของคุณเองและดูว่าคุณต้องปรับปรุงด้านใด คุณจะทำอย่างนั้นได้อย่างไร? ถึงเวลาสำหรับการตรวจสอบการช่วยสำหรับการเข้าถึง! ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นถึงขั้นตอนในการตรวจสอบการช่วยสำหรับการเข้าถึงขั้นพื้นฐาน ซึ่งจะช่วยให้คุณมีไซต์ที่สามารถเข้าถึงได้มากขึ้น
ตามที่คุณจะจำได้จากชุดภาพรวมของฉัน เว็บไซต์ที่เข้าถึงได้นั้นสามารถรับรู้ ใช้งานได้ เข้าใจได้ และมีประสิทธิภาพ การทดสอบเพื่อให้แน่ใจว่าไซต์ของคุณมีคุณสมบัติการเข้าถึงได้ครบทั้งสี่ข้อไม่เกี่ยวข้องกับการเข้ารหัส ดังนั้นอย่ากังวล เราอาจติดตั้งส่วนขยาย Chrome หรือสองรายการ แต่คุณจะขอบคุณฉันในภายหลัง มาเริ่มกันเลย!
หมายเหตุ: บทช่วยสอนนี้อนุมานว่าคุณทราบวิธีใช้ Chrome Inspector หรือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์พื้นฐานของเบราว์เซอร์ใดก็ตาม
รับรู้ได้
เริ่มต้นด้วยการรับรู้ เพราะหากผู้ใช้ไม่สามารถรับรู้เว็บไซต์ของคุณได้ พวกเขาก็ไม่รู้ว่าเว็บไซต์มีอยู่จริง เราจะเน้นที่ 3 สิ่งต่อไปนี้: ทางเลือกข้อความ คำอธิบายภาพ และสี
สำหรับรูปภาพทุกรูปในไซต์ของคุณที่เป็นมากกว่าการตกแต่ง (ซึ่งหมายความว่าเป็นส่วนสำคัญของข้อมูล ไม่ใช่แค่การเพิ่มประสิทธิภาพ) รูปภาพควรมีแอตทริบิวต์ alt คุณสามารถตรวจสอบได้โดยตรวจสอบซอร์สโค้ดของรูปภาพและค้นหาแอตทริบิวต์ ถ้ามีก็ดีสิ! ตอนนี้เราต้องตรวจสอบให้แน่ใจว่าค่าของแอตทริบิวต์นั้นมีประโยชน์ แอตทริบิวต์ alt ควรอธิบายรูปภาพในลักษณะที่แจ้งให้ผู้ใช้ที่มีความบกพร่องทางสายตาทราบ นี่ไม่ใช่โอกาสในการใส่คำหลัก SEO ลงในไซต์ของคุณ ทำให้คำอธิบายของคุณสั้น ตรงประเด็น และเป็นประโยชน์ ควรบันทึกคำอธิบายที่ยาวกว่านี้สำหรับเนื้อหาของไซต์เอง
ควบคู่ไปกับรูปภาพคือเนื้อหาวิดีโอและเสียง ในทั้งสองกรณี คุณจะต้องให้คำอธิบายภาพหรือการถอดความเนื้อหาบางประเภท วิดีโอของคุณควรเปิดใช้งานคำบรรยายใต้ภาพหรือมีคำบรรยายล่วงหน้า การทดสอบนี้ทำได้ง่ายเพียงแค่เริ่มวิดีโอบนไซต์ของคุณและตรวจสอบคำบรรยาย
สุดท้ายเราต้องทดสอบสีของเรา ในการดำเนินการนี้ เราจะติดตั้งส่วนขยายของ Chrome ที่เปิดใช้งานโหมดสีเทา เมื่อติดตั้งแล้ว ให้โหลดไซต์ของคุณอีกครั้งและเปิดส่วนขยาย สังเกตบริเวณที่อ่านยาก สิ่งเหล่านี้คือจุดที่ปัญหาของคุณมาจากมุมมองที่ตรงกันข้าม จากนั้นปิดใช้งานระดับสีเทาและใช้ตัวตรวจสอบความคมชัดของสี Snook เพื่อตรวจสอบคะแนนของคุณ คุณจะต้องใช้ตัวตรวจสอบเพื่อดึงค่าฐานสิบหกของคุณหากคุณไม่มีให้สะดวก โปรดจำไว้ว่า อะไรที่น้อยกว่า 4.5 (หรือ 3.0 สำหรับข้อความขนาดใหญ่) เป็นปัญหา
ใช้งานได้
ขั้นตอนต่อไปคือการตรวจสอบให้แน่ใจว่าไซต์ใช้งานได้ ซึ่งหมายความว่าเราจะทดสอบการทำงานของแป้นพิมพ์ ในการดำเนินการนี้ ให้เปิดเว็บไซต์ของคุณ เมื่อโหลดหน้าแล้วให้กดปุ่มแท็บ เกิดอะไรขึ้น? หวังว่าลิงค์ข้ามจะปรากฏขึ้น ถ้าไม่อย่างนั้น อย่างน้อย คุณควรมีโครงร่างรอบๆ ลิงก์แรกบนหน้า ตามหลักการแล้ว คุณจะมีสถานะแบบกำหนดเอง :focus แต่ค่าต่ำสุดที่เปลือยเปล่าควรเป็นสิ่งที่เบราว์เซอร์มีให้ จากที่นั่น ให้กดปุ่มแท็บต่อไปเพื่อให้แน่ใจว่าคุณกำลังเปลี่ยนจากลิงก์หนึ่งไปยังอีกลิงก์หนึ่งตามลำดับที่ปรากฏบนหน้า หากโฟกัสของคุณไม่หยุดนิ่ง แสดงว่าคุณมีปัญหาดัชนีแท็บที่ต้องแก้ไข ปลั๊กอินแบบฟอร์มมักเป็นผู้ร้ายที่นี่
เข้าใจได้
ต่อไป เราจะตรวจสอบเว็บไซต์ของคุณเพื่อให้แน่ใจว่าสามารถอ่านได้ ท้ายที่สุดแล้ว หากผู้ใช้ไม่สามารถอ่านเนื้อหาของคุณได้ จะมีไว้เพื่ออะไร? ข้อกำหนดที่นี่ค่อนข้างง่าย: สามารถกำหนดภาษาของไซต์ของคุณด้วยโค้ดได้หรือไม่ ในการตรวจสอบ ให้เปิดตัวตรวจสอบของคุณและดูที่แท็ก <html> หลัก มันมีแอตทริบิวต์ lang หรือไม่? ถ้าใช่ คุณชัดเจน นอกจากนี้ คุณจะต้องตรวจสอบให้แน่ใจว่ากลุ่มใดๆ ที่อยู่ในภาษาอื่นมีการนำแอตทริบิวต์ lang ไปใช้
มีการตรวจสอบระดับ AAA อื่นๆ เกี่ยวกับความสามารถในการอ่านได้ แต่สิ่งเหล่านี้อยู่นอกเหนือขอบเขตของการตรวจสอบขั้นพื้นฐาน โดยทั่วไปแล้ว คุณจะต้องเก็บเนื้อหาของคุณไว้ที่ระดับการอ่านชั้นประถมศึกษาปีที่ 6 เว้นแต่กลุ่มเป้าหมายของคุณจะมีระดับการศึกษาที่สูงขึ้น
ด้านที่สำคัญอื่นๆ ของความไม่เสถียรของไซต์ของคุณเกี่ยวข้องกับข้อความแสดงข้อผิดพลาดและการเปลี่ยนแปลงบริบท โดยเฉพาะอย่างยิ่งการขาดมัน เมื่อผู้ใช้ให้ความสนใจหรือเปิดใช้งานการป้อนข้อมูล การเปลี่ยนแปลงที่สำคัญไม่ควรเกิดขึ้น หน้าไม่ควรข้ามเว้นแต่จะมีการเตือนผู้ใช้ในทางใดทางหนึ่ง (ไอคอนลูกศร ข้อความช่วยเหลือ ฯลฯ) สิ่งเหล่านี้คือสิ่งที่คุณจะสังเกตเห็นเมื่อทำการทดสอบด้วยแป้นพิมพ์
เมื่อทดสอบแบบฟอร์มของคุณ ข้อความแสดงข้อผิดพลาดสามารถพูดได้เช่นเดียวกัน ข้อผิดพลาดควรแสดงให้ผู้ใช้เห็นอย่างชัดเจนและอยู่บนหน้าจอเพื่อให้สามารถแก้ไขข้อผิดพลาดได้ นี่คือสิ่งที่แม้แต่เว็บไซต์ใหญ่ ๆ ก็ผิดพลาดตลอดเวลา พวกเขาลืมโฟกัสไปที่ส่วนของหน้าที่มีข้อผิดพลาดหรืออย่างน้อยก็ทำเครื่องหมายไว้ ทดสอบแบบฟอร์มเพื่อหาข้อผิดพลาดและตรวจสอบว่าข้อความมีความชัดเจน การใช้ปลั๊กอินรูปแบบทึบจะช่วยได้มาก แต่อย่าพึ่งพาปลั๊กอินนี้เพื่อทำงานทั้งหมดของคุณ นอกจากนี้ คุณจะต้องแน่ใจว่าคุณไม่ได้เพียงแค่ใช้สี (โดยทั่วไปคือสีแดง) เพื่อแสดงถึงข้อผิดพลาด ข้อความจริง "ข้อผิดพลาด" มีความสำคัญมาก โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ตาบอดสีสีแดง/เขียว
นอกเหนือจากข้อผิดพลาด แบบฟอร์มและข้อมูลที่ป้อนควรมีคำแนะนำที่ชัดเจน ตรวจดูแต่ละอินพุตในไซต์ของคุณ และตรวจสอบให้แน่ใจว่ามีความชัดเจนมากว่าผู้ใช้ควรทำอย่างไร ตัวอย่างเช่น แบบฟอร์มการค้นหาควรมีบางอย่างนอกเหนือจากแว่นขยาย ป้ายชื่อ "ค้นหา" ง่ายๆ ก็เพียงพอแล้ว ตรวจสอบให้แน่ใจว่าผู้ใช้ของคุณรู้ว่าต้องทำอย่างไรกับองค์ประกอบแบบโต้ตอบ ไม่เคยสมมติ
แข็งแกร่ง
สุดท้ายนี้ เว็บไซต์ของคุณต้องแข็งแกร่ง สิ่งนี้หมายความว่าไซต์นี้ใช้งานได้กับเทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ หากไซต์ของคุณมีรูปแบบที่ดีด้วย HTML คุณก็ไม่เป็นไร พึงระลึกไว้เสมอว่าเบราว์เซอร์สมัยใหม่บางตัว รวมทั้ง Chrome จะแก้ไขข้อผิดพลาด HTML พื้นฐาน หรืออย่างน้อยก็พยายามแก้ไข วิธีที่เร็วที่สุดในการทดสอบความทนทานของไซต์ของคุณคือการโหลดไซต์ใน Safari และเปิดใช้งาน VoiceOver ซึ่งเป็นโปรแกรมอ่านหน้าจอในตัว หากไซต์ของคุณใช้งานไม่ได้ คุณจะต้องแก้ไขปัญหาเหล่านั้น
ห่อ
บทช่วยสอนการตรวจสอบนี้รวดเร็ว แต่นั่นคือประเด็น ใช้เวลาไม่นานในการตรวจสอบให้แน่ใจว่าไซต์ของคุณสามารถเข้าถึงได้ และเครื่องมือที่จำเป็นมีเพียงเล็กน้อย สิ่งสำคัญที่ต้องจำไว้คือคุณต้องการใส่ตัวเองให้อยู่ในรองเท้าของคนที่ไม่มีความสามารถที่คุณถือว่ายอมรับได้ในฐานะผู้ใช้ทั่วไป รักษาแนวความคิดนั้นไว้ และการตรวจสอบของคุณจะช่วยให้แน่ใจว่าไซต์ของคุณสามารถเข้าถึงได้มากขึ้น
ในกรณีที่คุณพลาด ให้ตรวจดูซีรีส์นี้เกี่ยวกับการช่วยสำหรับการเข้าถึง:
- ข้อมูลเบื้องต้นเกี่ยวกับการเข้าถึง: ตอนที่ 1
- ข้อมูลเบื้องต้นเกี่ยวกับการเข้าถึง: ตอนที่ 2
- ข้อมูลเบื้องต้นเกี่ยวกับการเข้าถึง: ตอนที่ 3