ตรวจสอบให้แน่ใจว่าลิงก์และรูปภาพสามารถเข้าถึงได้

เสร็จสมบูรณ์เมื่อ

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

เชื่อมโยงข้อความ

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

พิจารณาสองลิงก์ในข้อความตัวอย่างต่อไปนี้:

• "นกเพนกวินตัวน้อยบางครั้งเรียกว่านกเพนกวินเทพนิยายเป็นนกเพนกวินที่เล็กที่สุดในโลก คลิกที่นี่ สําหรับข้อมูลเพิ่มเติม"
• "นกเพนกวินตัวน้อยบางครั้งเรียกว่านกเพนกวินเทพนิยายเป็นนกเพนกวินที่เล็กที่สุดในโลก สําหรับข้อมูลเพิ่มเติม โปรดเยี่ยมชม https://en.wikipedia.org/wiki/Little_penguin"

โน้ต

สองตัวอย่างแสดงให้เห็นถึงสิ่งที่คุณควร ไม่ ใช้ในฐานะนักพัฒนาเว็บ

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

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

คําว่า "คลิก" เป็นปัญหาเพราะไม่ใช่ผู้ใช้ทุกคนจะคลิก ผู้ใช้โทรศัพท์จะแตะ ผู้ใช้คีย์บอร์ดอาจเลือกปุ่ม Enter หรือ Spacebar และไคลเอ็นต์อื่นๆ จะใช้วิธีอื่น

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

• "นกเพนกวิน เพียงเล็กน้อยบางครั้งเรียกว่านกเพนกวินนางฟ้าเป็นนกเพนกวินที่เล็กที่สุดในโลก"

โน้ต

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

แอตทริบิวต์ ARIA

ลองนึกถึงหน้าผลิตภัณฑ์ต่อไปนี้:

ผลิตภัณฑ์	คำอธิบาย	สั่ง
วิด เจ็ต	[Description]('#')	[Order]('#')
วิดเจ็ตสุดยอด	[Description]('#')	[Order]('#')

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

เพื่อสนับสนุนสถานการณ์ประเภทเหล่านี้ HTML สนับสนุนชุดแอตทริบิวต์ที่เรียกว่า Accessible Internet Applications (ARIA) คุณสามารถใช้แอตทริบิวต์เหล่านี้เพื่อให้ข้อมูลเพิ่มเติมกับโปรแกรมอ่านหน้าจอได้

ตัวอย่างเช่น คุณสามารถใช้ aria-label เพื่ออธิบายลิงก์เมื่อรูปแบบของเพจไม่อนุญาตให้คุณ คําอธิบายสําหรับ วิดเจ็ต อาจได้รับการตั้งค่าเป็น:

<a href="#" aria-label="Widget description">description</a>

ARIA มีการใช้งานมากมายนอกเหนือจากการเพิ่มข้อความสําหรับโปรแกรมอ่านหน้าจอเพื่ออ่านลิงก์ คุณสามารถใช้เพื่ออธิบายบทบาทที่องค์ประกอบบางอย่างจะเล่นเมื่อ HTML เชิงความหมายไม่พร้อมใช้งาน เมื่อคุณกําลังสร้างทรี คุณสามารถใช้บทบาท ARIA เพื่ออธิบายอินเทอร์เฟซกับโปรแกรมอ่านหน้าจอ:

<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>

สําคัญ

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

ข้อความแสดงแทนสําหรับรูปภาพ

ตามกฎทั่วไปโปรแกรมอ่านหน้าจอจะไม่สามารถอ่านเนื้อหาของรูปภาพได้ แม้ว่าบางคนอาจใช้ปัญญาประดิษฐ์ แต่ผลลัพธ์ที่สร้างขึ้นอาจไม่แม่นยําตามบริบท โชคดีที่มั่นใจได้ว่ารูปภาพที่สามารถเข้าถึงได้ใช้งานไม่ได้ผลมากนัก - นี่คือสิ่งที่แอตทริบิวต์ alt เกี่ยวกับ รูปภาพที่มีความหมายทั้งหมดควรมีแอตทริบิวต์ alt (รู้จักกันอย่างเป็นลําลองว่าเป็นข้อความแสดงแทน ) เพื่ออธิบายว่าข้อความเหล่านี้เป็นอะไรหรือข้อมูลที่รูปภาพกําลังพยายามสื่อ

รูปภาพที่เป็นของตกแต่งอย่างแท้จริงควรมีแอตทริบิวต์ alt ที่ตั้งค่าเป็นสตริงว่าง: alt="" การตั้งค่านี้จะป้องกันไม่ให้โปรแกรมอ่านหน้าจอประกาศรูปภาพการตกแต่งโดยไม่จําเป็น

โน้ต

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