การเข้าถึง HTML
การเข้าถึง HTML
เขียนโค้ด HTML โดยคำนึงถึงการช่วยสำหรับการเข้าถึงเสมอ!
มอบวิธีที่ดีแก่ผู้ใช้ในการนำทางและโต้ตอบกับไซต์ของคุณ ทำให้โค้ด HTML ของคุณมีความหมายมากที่สุด
HTML เชิงความหมาย
HTML เชิงความหมายหมายถึงการใช้องค์ประกอบ HTML ที่ถูกต้องเพื่อจุดประสงค์ที่ถูกต้องมากที่สุด องค์ประกอบเชิงความหมายเป็นองค์ประกอบที่มีความหมาย หากคุณต้องการปุ่ม ให้ใช้<button>องค์ประกอบ (ไม่ใช่
<div>องค์ประกอบ)
ความหมาย
<button>Report an Error</button>
ไม่ใช่ความหมาย
<div>Report an Error</div>
HTML เชิงความหมายให้บริบทแก่โปรแกรมอ่านหน้าจอ ซึ่งอ่านเนื้อหาของหน้าออกมาดัง ๆ
โดยคำนึงถึงตัวอย่างปุ่ม:
- ปุ่มมีรูปแบบที่เหมาะสมกว่าตามค่าเริ่มต้น
- โปรแกรมอ่านหน้าจอระบุว่าเป็นปุ่ม
- โฟกัสได้
- คลิกได้
ปุ่มยังสามารถเข้าถึงได้สำหรับผู้ที่อาศัยการนำทางด้วยแป้นพิมพ์เท่านั้น สามารถคลิกได้ทั้งเมาส์และปุ่ม และสามารถแท็บระหว่าง (โดยใช้ปุ่มแท็บบนแป้นพิมพ์)
ตัวอย่างขององค์ประกอบที่ไม่ใช่ความหมาย<div> : และ<span>- ไม่บอกอะไรเกี่ยวกับเนื้อหา
ตัวอย่างขององค์ประกอบเชิงความหมาย<form> : , <table>, และ<article>- กำหนดเนื้อหาอย่างชัดเจน
หัวเรื่องมีความสำคัญ
หัวข้อถูกกำหนดด้วยแท็ก<h1>ถึง :<h6>
ตัวอย่าง
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
เสิร์ชเอ็นจิ้นใช้ส่วนหัวเพื่อจัดทำดัชนีโครงสร้างและเนื้อหาของหน้าเว็บของคุณ
ผู้ใช้ดูหน้าของคุณตามหัวเรื่อง สิ่งสำคัญคือต้องใช้หัวเรื่องเพื่อแสดงโครงสร้างเอกสารและความสัมพันธ์ระหว่างส่วนต่างๆ
โปรแกรมอ่านหน้าจอยังใช้หัวเรื่องเป็นเครื่องมือนำทาง หัวเรื่องประเภทต่างๆ จะระบุโครงร่างของหน้า
<h1>ควรใช้หัวเรื่องสำหรับหัวเรื่องหลัก ตามด้วย<h2>หัวเรื่อง รองลงมามีความสำคัญน้อยกว่า
<h3>และอื่นๆ
หมายเหตุ:ใช้ส่วนหัว HTML สำหรับส่วนหัวเท่านั้น อย่าใช้หัวเรื่องเพื่อทำให้ ข้อความใหญ่หรือหนา
ข้อความแสดงแทน
แอตทริบิวต์altจัดเตรียมข้อความสำรองสำหรับรูปภาพ หากผู้ใช้ไม่สามารถดูรูปภาพได้ด้วยเหตุผลบางประการ (เนื่องจากการเชื่อมต่อช้า ข้อผิดพลาดใน
src
แอตทริบิวต์ หรือหากผู้ใช้ใช้โปรแกรมอ่านหน้าจอ)
ค่าของaltแอตทริบิวต์ควรอธิบายรูปภาพ:
ตัวอย่าง
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
หากเบราว์เซอร์ไม่พบรูปภาพ จะแสดงค่าของalt
แอตทริบิวต์:
ตัวอย่าง
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
ประกาศภาษา
คุณควรใส่lang
แอตทริบิวต์ไว้ใน<html>แท็กเสมอ เพื่อประกาศภาษาของหน้าเว็บ มีขึ้นเพื่อช่วยเหลือเครื่องมือค้นหาและเบราว์เซอร์
ตัวอย่างต่อไปนี้ระบุภาษาอังกฤษเป็นภาษา:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
ใช้ภาษาที่ชัดเจน
ใช้ภาษาที่ชัดเจนเสมอที่เข้าใจง่าย พยายามหลีกเลี่ยงอักขระที่โปรแกรมอ่านหน้าจอไม่สามารถอ่านได้อย่างชัดเจน ตัวอย่างเช่น:
- เก็บประโยคให้สั้นที่สุด
- หลีกเลี่ยงการขีดคั่น แทนที่จะเขียน 1-3 ให้เขียน 1 ถึง 3
- หลีกเลี่ยงคำย่อ แทนที่จะเขียนกุมภาพันธ์ เขียนกุมภาพันธ์
- หลีกเลี่ยงคำสแลง
สร้างข้อความลิงก์ที่ดี
ข้อความลิงก์ควรอธิบายอย่างชัดเจนว่าผู้อ่านจะได้รับข้อมูลใดบ้างเมื่อคลิกลิงก์นั้น
ตัวอย่างลิงค์ที่ดีและไม่ดี:
ดี
แย่
หมายเหตุ:หน้านี้เป็นเพียงการแนะนำในการเข้าถึงเว็บ ไป ที่บทช่วย สอนการเข้าถึง ของเรา สำหรับรายละเอียดเพิ่มเติม