บทบาทของอรรถศาสตร์ในการนำทางหน้าเว็บ
คุณได้เรียนรู้เกี่ยวกับราคา ความหมาย และวิธีที่เทคโนโลยีความช่วยเหลือพิเศษใช้โครงสร้างการช่วยเหลือพิเศษเพื่อสร้างประสบการณ์ทางเลือกให้กับผู้ใช้แล้ว คุณจะเห็นได้ว่าการเขียน HTML เชิงอรรถศาสตร์ที่ชัดเจนจะช่วยให้คุณเข้าถึงได้ง่ายโดยใช้ความพยายามเพียงเล็กน้อย เนื่องจากองค์ประกอบมาตรฐานจำนวนมากจะมีทั้งความหมายและพฤติกรรมการสนับสนุนอยู่ในตัว
ในบทเรียนนี้ เราจะพูดถึงความหมายที่ไม่ค่อยชัดเจนซึ่งมีความสำคัญต่อผู้ใช้โปรแกรมอ่านหน้าจอ โดยเฉพาะในเรื่องของการนำทาง ในหน้าง่ายๆ ที่มีการควบคุมมากมาย แต่มีเนื้อหาที่ไม่มาก คุณสามารถดูหน้าที่ต้องการได้ง่ายๆ แต่ในหน้าเว็บเนื้อหาจำนวนมาก เช่น รายการใน Wikipedia หรือ ผู้รวบรวมข่าว จะอ่านเนื้อหาทุกอย่างจากบนลงล่างไม่ได้เลย จำเป็นจะต้องมีวิธีในการไปยังส่วนต่างๆ ในเนื้อหาอย่างมีประสิทธิภาพ
นักพัฒนาซอฟต์แวร์มักจะเข้าใจผิดว่าโปรแกรมอ่านหน้าจอน่าเบื่อและใช้ช้า หรือทุกอย่างบนหน้าจอจะต้องโฟกัสเพื่อให้โปรแกรมอ่านหน้าจอค้นหาได้ แต่มักจะไม่เป็นเช่นนั้น
ผู้ใช้โปรแกรมอ่านหน้าจอมักอาศัยรายการส่วนหัวเพื่อค้นหาข้อมูล โปรแกรมอ่านหน้าจอส่วนใหญ่มีวิธีง่ายๆ ในการแยกและสแกนรายการส่วนหัวของหน้า ซึ่งเป็นฟีเจอร์สำคัญที่เรียกว่าโรเตอร์ มาดูกันว่าเราจะใช้ส่วนหัว HTML ให้มีประสิทธิภาพ เพื่อสนับสนุนฟีเจอร์นี้ได้อย่างไร
การใช้ส่วนหัวอย่างมีประสิทธิภาพ
ก่อนอื่น เรามาทบทวนประเด็นก่อนหน้านี้อีกครั้งกัน นั่นคือสิ่งสำคัญของคำสั่งซื้อ DOM ไม่ใช่สำหรับลำดับการโฟกัสเท่านั้น แต่รวมถึงลำดับโปรแกรมอ่านหน้าจอด้วย เมื่อทดลองใช้โปรแกรมอ่านหน้าจอ เช่น VoiceOver, NVDA, JAWS และ ChromeVox คุณจะเห็นรายการส่วนหัวเป็นไปตามลำดับ DOM แทนที่จะเรียงลำดับภาพ
ซึ่งเป็นเรื่องจริงสำหรับโปรแกรมอ่านหน้าจอโดยทั่วไป เนื่องจากโปรแกรมอ่านหน้าจอจะโต้ตอบกับโครงสร้างการช่วยเหลือพิเศษ และโครงสร้างการช่วยเหลือพิเศษจะอิงตามแผนผัง DOM ลำดับที่โปรแกรมอ่านหน้าจอรับรู้จึงอิงตามลำดับของ DOM โดยตรง นั่นหมายความว่าโครงสร้างส่วนหัวที่เหมาะสมมีความสำคัญกว่าที่เคย
ในหน้าเว็บที่มีโครงสร้างดีส่วนใหญ่ ระดับส่วนหัวจะซ้อนกันอยู่เพื่อระบุความสัมพันธ์ระดับบนสุดและย่อยในบล็อกเนื้อหา รายการตรวจสอบ WebAIM กล่าวถึงเทคนิคนี้ซ้ำๆ
- 1.3.1 พูดถึง "มาร์กอัปเชิงความหมายใช้เพื่อกำหนดส่วนหัว"
- 2.4.1 กล่าวถึงโครงสร้างหัวข้อในฐานะเทคนิคสำหรับการข้ามบล็อกเนื้อหา
- 2.4.6 กล่าวถึงรายละเอียดบางอย่างสำหรับการเขียนหัวข้อที่มีประโยชน์
- 2.4.10 ระบุว่า "แต่ละส่วนของเนื้อหากำหนดโดยใช้ส่วนหัวตามความเหมาะสม"
ส่วนหัวบางรายการไม่จำเป็นต้องแสดงบนหน้าจอ ตัวอย่างเช่น วิกิพีเดีย ใช้เทคนิคที่วางส่วนหัวบางส่วนไว้นอกหน้าจอ เพื่อทำให้โปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลือพิเศษอื่นๆ เข้าถึงได้เท่านั้น
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
สำหรับแอปพลิเคชันที่ซับซ้อน วิธีนี้เป็นวิธีที่ดีในการรองรับส่วนหัวเมื่อการออกแบบภาพไม่จำเป็นต้องมีหรือไม่มีพื้นที่สำหรับส่วนหัวที่มองเห็นได้
ตัวเลือกการนำทางอื่นๆ
แม้ว่าหน้าที่มีส่วนหัวที่ดีจะช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอไปยังส่วนต่างๆ ได้ แต่ก็ยังมีองค์ประกอบอื่นๆ ที่ผู้ใช้ใช้เพื่อไปยังส่วนต่างๆ ของหน้าเว็บได้ เช่น ลิงก์ ตัวควบคุมแบบฟอร์ม และจุดสังเกต
ผู้อ่านสามารถใช้ฟีเจอร์โรเตอร์ของโปรแกรมอ่านหน้าจอ (วิธีง่ายๆ ในการแยกและสแกนรายการส่วนหัวของหน้า) เพื่อเข้าถึงรายการลิงก์ในหน้าเว็บได้ บางครั้งมีลิงก์จำนวนมากเหมือนบน Wiki ผู้อ่านจึงอาจค้นหาคำภายในลิงก์ต่างๆ ได้ ซึ่งจะจำกัด Hit ไปยังลิงก์ที่มีคำนั้นอยู่จริงๆ แทนที่จะเป็นทุกๆ รายการของคำที่เกิดขึ้นบนหน้าเว็บ
ฟีเจอร์นี้จะมีประโยชน์ก็ต่อเมื่อโปรแกรมอ่านหน้าจอพบลิงก์และข้อความลิงก์นั้นมีความหมาย ลองดูตัวอย่างรูปแบบที่พบบ่อยที่ทำให้ค้นหาลิงก์ได้ยาก
- แท็ก Anchor ที่ไม่มีแอตทริบิวต์
hrefเป้าหมายลิงก์เหล่านี้มักจะใช้ในแอปพลิเคชันแบบหน้าเดียว เนื่องจากเป้าหมายลิงก์เหล่านี้จะทำให้เกิดปัญหาสำหรับโปรแกรมอ่านหน้าจอ อ่านข้อมูลเพิ่มเติมได้ในบทความนี้เกี่ยวกับแอปแบบหน้าเดียว - ปุ่มที่มีการติดตั้งใช้งานลิงก์ ซึ่งจะทำให้โปรแกรมอ่านหน้าจอตีความเนื้อหาเป็นลิงก์ และฟังก์ชันการทำงานของปุ่มจะหายไป สำหรับกรณีเหล่านี้ ให้แทนที่แท็ก Anchor ด้วยปุ่มจริงและจัดรูปแบบให้เหมาะสม
- รูปภาพที่ใช้เป็นเนื้อหาลิงก์ บางครั้งรูปภาพที่ลิงก์อาจใช้กับโปรแกรมอ่านหน้าจอไม่ได้ ตรวจสอบว่ารูปภาพมีข้อความแอตทริบิวต์
altเพื่อให้แน่ใจว่าลิงก์แสดงกับเทคโนโลยีความช่วยเหลืออย่างเหมาะสม
ซึ่งเป็นอีกปัญหาหนึ่งที่ข้อความลิงก์ไม่ดี ข้อความที่คลิกได้ เช่น "ดูข้อมูลเพิ่มเติม" หรือ "คลิกที่นี่" จะไม่ให้ข้อมูลเชิงความหมายเกี่ยวกับตำแหน่งของลิงก์ ให้ใช้ข้อความอธิบาย เช่น "ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์" หรือ "ดูบทแนะนำสำหรับ Canvas" นี้แทน เพื่อช่วยให้โปรแกรมอ่านหน้าจอให้บริบทที่มีความหมายเกี่ยวกับลิงก์
โรเตอร์ยังเรียกข้อมูลรายการตัวควบคุมแบบฟอร์มได้ด้วย ผู้อ่านสามารถใช้รายการนี้เพื่อ ค้นหารายการที่ต้องการและไปที่รายการดังกล่าวได้โดยตรง
ข้อผิดพลาดที่พบบ่อยของโปรแกรมอ่านหน้าจอคือการออกเสียง เช่น โปรแกรมอ่านหน้าจออาจออกเสียง "Udacity" เป็น "oo-dacity" หรืออ่านหมายเลขโทรศัพท์เป็นจำนวนเต็มขนาดใหญ่ หรืออ่านข้อความที่เป็นอักษรตัวพิมพ์ใหญ่ให้เหมือนกับคำย่อ สิ่งที่น่าสนใจคือ ผู้ใช้โปรแกรมอ่านหน้าจอค่อนข้างคุ้นเคยกับพฤติกรรมแปลกๆ นี้และนำไปพิจารณา
นักพัฒนาซอฟต์แวร์บางรายพยายามช่วยเหลือสถานการณ์นี้ด้วยการให้ข้อความสำหรับโปรแกรมอ่านหน้าจอที่สะกดตามการออกเสียง กฎง่ายๆ สำหรับการสะกดคำที่ใช้ออกเสียงมีดังนี้ อย่าทำ เพราะจะทำให้ปัญหาแย่ลง เช่น หากผู้ใช้กำลังใช้จอแสดงผลอักษรเบรลล์ คำนั้นอาจสะกดไม่ถูกต้อง ซึ่งทำให้เกิดความสับสนมากขึ้น โปรแกรมอ่านหน้าจอจะช่วยสะกดคำให้อ่านออกเสียงคำได้ ดังนั้นให้ปล่อยให้ผู้อ่านควบคุมประสบการณ์การใช้งานและตัดสินใจว่าเมื่อจำเป็น
ผู้อ่านสามารถใช้โรเตอร์เพื่อดูรายการจุดสังเกตได้ รายการนี้ช่วยให้ผู้อ่านค้นพบเนื้อหาหลักและชุดจุดสังเกตในการนำทางซึ่งระบุโดยองค์ประกอบจุดสังเกตของ HTML
HTML5 ได้แนะนำองค์ประกอบใหม่ที่ช่วยกำหนดโครงสร้างเชิงความหมายของหน้า ซึ่งได้แก่ header, footer, nav, article, section, main และ aside องค์ประกอบเหล่านี้จะระบุเบาะแสเกี่ยวกับโครงสร้างในหน้าโดยเฉพาะ โดยไม่บังคับให้ใส่การจัดรูปแบบในตัว (ซึ่งคุณควรทำกับ CSS ต่อไป)
องค์ประกอบโครงสร้างเชิงความหมายจะแทนที่บล็อก div ที่ซ้ำๆ หลายบล็อก และมอบวิธีที่ชัดเจนและอธิบายได้ดีกว่าในการแสดงโครงสร้างหน้าเว็บอย่างเป็นธรรมชาติสำหรับทั้งผู้เขียนและผู้อ่าน