การออกแบบสําหรับการเข้าถึง
การเข้าถึงเป็นหัวข้อที่ค่อนข้างใหญ่ เราไม่สามารถครอบคลุมได้ทั้งหมดในมอดูล Learn เดียว อย่างไรก็ตาม มีผู้เช่าหลักบางส่วนที่คุณจะต้องใช้ในทุกหน้าที่คุณสร้าง การออกแบบเพจที่สามารถเข้าถึงได้ตั้งแต่เริ่มต้นจะง่ายกว่าการกลับไปยังเพจที่มีอยู่เสมอเพื่อทําให้สามารถเข้าถึงได้
ใช้ HTML ในการออกแบบ
HTML มีองค์ประกอบมากมายที่คุณสามารถใช้เพื่อสร้างเพจ รวมถึงปุ่ม ลิงก์ และตัวควบคุมฟอร์ม แต่ละองค์ประกอบเหล่านั้นมีชุดฟังก์ชันการทํางานในตัว เช่น สามารถคลิกได้ สามารถเชื่อมโยง หรือยอมรับโฟกัสได้
โน้ต
Focus เป็นคําการพัฒนาเว็บซึ่งหมายความว่าตัวควบคุมสามารถยอมรับการป้อนข้อมูลจากแป้นพิมพ์ได้ ปุ่มสามารถยอมรับโฟกัส อนุญาตให้ใครสักคนเปิดใช้งาน หรือ "คลิก" โดยการเลือก Spacebar
ด้วย CSS และ JavaScript คุณสามารถทําให้องค์ประกอบมีลักษณะเหมือนตัวควบคุมทุกชนิดได้ ตัวอย่างเช่น คุณสามารถใช้ <span> เพื่อสร้างองค์ประกอบ <button> และ <b> สามารถกลายเป็น <a>ได้ แม้ว่าความสามารถนี้มีทางลัดบางอย่างสําหรับการจัดรูปแบบหรือการวางรูปแบบหน้าของคุณ แต่จะลบฟังก์ชันที่มีอยู่ภายในออก เครื่องมือเช่นโปรแกรมอ่านหน้าจอจะไม่สามารถเข้าใจว่า <span> กําลังถูกใช้เป็น <a> บางคนที่เรียกดูด้วยแป้นพิมพ์จะไม่สามารถตั้งค่าโฟกัสบนองค์ประกอบ <div> ที่ถูกตั้งโปรแกรมเพื่อจําลององค์ประกอบ <button> ได้
องค์ประกอบ HTML อื่นที่มักจะข้ามคือส่วนหัว (<h1> ผ่าน <h6>) จากจุดยืนของวิชวล แท็กส่วนหัวเริ่มต้นจากมากที่สุดไปจนถึงขนาดข้อความน้อยที่สุด แบบแผนนี้ทําให้นักพัฒนาจํานวนมากสร้างองค์ประกอบส่วนหัวและจัดแต่ง <div> หรือองค์ประกอบทั่วไปอื่น ๆ แทน
น่าเสียดายที่องค์ประกอบทั่วไปที่มีการจัดรูปแบบสื่อเฉพาะข้อมูลภาพแทนที่จะเป็นโครงสร้าง ผู้ใช้โปรแกรมอ่านหน้าจอ ขึ้นอยู่กับหัวเรื่อง เพื่อค้นหาข้อมูลและเรียกดูผ่านหน้าเพจ การเขียนเนื้อหาหัวเรื่องเชิงพรรณนาและใช้แท็กส่วนหัวเชิงความหมายมีความสําคัญสําหรับการสร้างไซต์ที่สามารถนําทางได้ง่ายสําหรับผู้ใช้โปรแกรมอ่านหน้าจอ
แนวทางปฏิบัติที่ดีที่สุดคือ คุณควรใช้ HTML ที่เหมาะสมเสมอเมื่อสร้างตัวควบคุมบนเพจ ถ้าคุณต้องการการเชื่อมโยงหลายมิติ ให้ใช้ <a>หรือใช้ <button> สําหรับปุ่ม
ใช้สิ่งแสดงภาพที่ดี
นักพัฒนามักจะคิดว่าโปรแกรมอ่านหน้าจอเป็นเครื่องมือช่วยสําหรับการเข้าถึงเท่านั้น อย่างไรก็ตามผู้ใช้อาจใช้เครื่องมืออื่น ๆ มากมายหรือพวกเขาอาจไม่ใช้เครื่องมือเลย ผู้ใช้ที่กําลังใช้เบราว์เซอร์จะขึ้นอยู่กับสิ่งแสดงภาพบางอย่างเพื่อทําความเข้าใจวิธีการโต้ตอบกับหน้าของคุณ
หนึ่งในคุณลักษณะที่ยอดเยี่ยมของ CSS คือสามารถควบคุมวิธีแสดงหน้าได้อย่างสมบูรณ์รวมถึงการลบองค์ประกอบการแสดงผลบางอย่าง ตัวอย่างเช่น คุณสามารถเอาเค้าร่างออกจากกล่องข้อความ หรือเอาการขีดเส้นใต้ออกจากการเชื่อมโยงหลายมิติได้ น่าเสียดายที่การลบสัญลักษณ์ประเภทเหล่านั้นสามารถทําให้เป็นเรื่องยากสําหรับบุคคลที่ขึ้นอยู่กับพวกเขาในการจดจําประเภทของการควบคุม
พิจารณาแป้นพิมพ์
ผู้ใช้บางรายไม่สามารถใช้เมาส์หรือแทร็คแพด/ทัชแพดได้ แต่ผู้ใช้เหล่านี้อาศัยการโต้ตอบแป้นพิมพ์เพื่อแท็บจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง เป็นสิ่งสําคัญสําหรับหน้าของคุณในการนําเสนอเนื้อหาของคุณตามลําดับตรรกะเพื่อให้ผู้ใช้คีย์บอร์ดสามารถเข้าถึงองค์ประกอบเชิงโต้ตอบแต่ละตัวเมื่อเลื่อนลง
เมื่อผู้ใช้เลื่อนผ่านหน้าเพจโดยการแท็บ โฟกัสจะย้ายจากตัวควบคุมหนึ่งไปยังตัวควบคุมถัดไปตามลําดับที่ตัวควบคุมถูกแสดงอยู่ในแหล่งข้อมูล HTML ตัวควบคุมสําหรับหน้าของคุณควรแสดงอยู่ในแหล่งข้อมูล HTML ตามลําดับที่คุณคาดว่าจะเรียกดูหน้า ในขณะที่ขึ้นอยู่กับ CSS เพื่อจัดเค้าโครงหน้าแบบมองเห็นได้สําหรับผู้ใช้
ตัวอย่างเช่น ลองนึกถึงการสร้างฟอร์มที่มีสองคอลัมน์ คุณจะต้องพิจารณาว่าโฟลว์ธรรมชาติคืออะไรสําหรับบุคคลที่กรอกฟอร์ม แล้วทํารายการตัวควบคุมตามลําดับ จากนั้นคุณสามารถใช้ CSS เพื่อสร้างคอลัมน์ และแสดงตัวควบคุมในตําแหน่งที่ตั้งที่เหมาะสม
การนําทางแป้นพิมพ์ขึ้นอยู่กับ HTML เชิงความหมายอย่างมาก ตัวควบคุมบางอย่าง (เช่น ปุ่ม) ยอมรับโฟกัส ในขณะที่องค์ประกอบ div ไม่ยอมรับ ถ้าคุณกําลังสร้างตัวควบคุมที่มีอยู่แล้วใน HTML คุณจะทําให้ผู้อื่นใช้เพจของคุณด้วยแป้นพิมพ์ได้ยากขึ้น