แนวทางปฏิบัติของ CSS ที่อาจส่งผลกระทบต่อการเข้าถึง

CSS กลายเป็นภาษาที่ทรงพลัง สิ่งที่เริ่มเป็นวิธีการเพิ่มสไตล์พื้นฐานให้กับข้อความและองค์ประกอบการออกแบบอื่นๆ ในขณะนี้สามารถทำได้มากกว่านั้น

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

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

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

การแสดงข้อความสำคัญโดยใช้คุณสมบัติ content

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

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

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

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

การสร้างลำดับภาพเคลื่อนไหวที่กะพริบรุนแรง

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

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

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

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

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

ไม่ใช้งานง่าย :hover หรือ :focus ระบุองค์ประกอบแบบโต้ตอบ

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

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

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

สไตล์เริ่มต้นขององค์ประกอบแบบอินเทอร์แอคทีฟเป็นเพียงครึ่งเดียวของการต่อสู้ นำเสนอรูปแบบที่ใช้งานง่ายสำหรับ :hover และ :focus pseudo-classes เติมเต็มประสบการณ์ผู้ใช้

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

รับพื้นฐานของการออกแบบที่สามารถเข้าถึงได้

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

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

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

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

มันเกี่ยวกับการใช้ CSS อย่างมีความรับผิดชอบ

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

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

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

CSS อยู่ที่นั่นเพื่อทำให้การเข้าถึงง่ายขึ้น อยู่ที่ว่าเราจะเลือกใช้มันอย่างไร