HTML for Kids · บทเรียน

พื้นฐานการเข้าถึง

เพิ่มข้อความแทนลงในรูปภาพและทำให้หน้าเว็บใช้งานง่ายสำหรับทุกคน

บทเรียน 2 จาก 410 ขั้นตอน

พื้นฐานการเข้าถึง เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน

การทำให้หน้าเว็บเข้าถึงได้

พื้นฐานด้านการเข้าถึง

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

การเข้าถึงคืออะไร

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

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

มาเรียนรู้วิธีทำให้หน้าเว็บเปิดกว้างสำหรับทุกคนกันครับ!

การเพิ่มข้อความทดแทนให้รูปภาพ

ใช้แอตทริบิวต์ alt ในแท็ก <img> เพื่ออธิบายรูปภาพ วิธีนี้ช่วยให้โปรแกรมอ่านหน้าจอถ่ายทอดเนื้อหาของรูปภาพแก่ผู้ใช้ที่มีความบกพร่องทางการมองเห็นครับ

ตัวอย่าง:

<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />

การใช้ HTML เชิงความหมาย

แท็กเชิงความหมาย เช่น <header>, <nav> และ <footer> ช่วยให้เทคโนโลยีช่วยเหลือเข้าใจโครงสร้างหน้าเว็บของคุณครับ

ตัวอย่าง:

<header>
  <h1>My Blog</h1>
</header>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>
<footer>
  <p>© 2024 My Blog</p>
</footer>

การนำทางด้วยแป้นพิมพ์

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

ตัวอย่าง:

<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>

การกำหนดป้ายกำกับให้ช่องป้อนข้อมูล

ใช้แท็ก <label> เพื่อกำหนดคำอธิบายที่ชัดเจนให้ช่องป้อนข้อมูล เชื่อมโยงป้ายกำกับกับช่องป้อนข้อมูลโดยใช้แอตทริบิวต์ for

ตัวอย่าง:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" />
</form>

ความแตกต่างของสี

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

เคล็ดลับ: ความแตกต่างของสีในระดับสูงช่วยให้ผู้ที่มีความบกพร่องทางการมองเห็นอ่านข้อความได้ง่ายขึ้น

ตัวอย่าง:

<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>

ลองทำด้วยตนเอง

มาสร้างแบบฟอร์มที่ทุกคนเข้าถึงได้กัน ตัวอย่างมีดังนี้:

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Form</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" />
      <br />
      <button type="submit">Sign Up</button>
    </form>
  </body>
</html>

สรุปเรื่องการเข้าถึง

ทำได้ดีมาก!

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

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 16
บทเรียน: 35

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “พื้นฐานการเข้าถึง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐานการเข้าถึง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐานการเข้าถึง”

เพิ่มข้อความแทนลงในรูปภาพและทำให้หน้าเว็บใช้งานง่ายสำหรับทุกคน คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐานการเข้าถึง” ใช้เวลานานแค่ไหน

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

ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม

ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML for Kids