การเข้าถึง

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

ภาวะบกพร่องในการมองเห็นสี

แต่ละคนมีความเห็นเรื่องสีต่างกัน ผู้ที่มีภาวะตาบอดสีแดงจะไม่คิดว่าสีแดงเป็นสีที่เด่นชัด ภาวะตาบอดสีเขียวหายไป สำหรับผู้ที่มีภาวะตาบอดสีน้ำเงิน สีฟ้า

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

แท็บการเข้าถึงของ Firefox จะมีเมนูแบบเลื่อนลงที่มีข้อความจำลองพร้อมรายการตัวเลือก

วันที่

ใน Chrome DevTools แท็บการแสดงผลจะช่วยให้คุณจำลองภาวะบกพร่องทางการมองเห็นได้

ซึ่งเป็นเครื่องมือเฉพาะเบราว์เซอร์ นอกจากนี้ยังจำลองการมองเห็นประเภทต่างๆ ในระดับระบบปฏิบัติการได้ด้วย

ใน Mac ให้ไปที่

1. ค่ากำหนดของระบบ
2. การช่วยเหลือพิเศษ
3. ดิสเพลย์
4. ฟิลเตอร์สี
5. เปิดใช้ตัวกรองสี

เลือกตัวเลือกใดตัวเลือกหนึ่ง

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

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

คอนทราสต์ของสี

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

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

• tota11y เป็นบุ๊กมาร์กเล็ตที่คุณสามารถเพิ่มลงในแถบเครื่องมือของเบราว์เซอร์
• VisBug คือส่วนขยายเบราว์เซอร์ที่สามารถใช้ได้กับเบราว์เซอร์หลักๆ ทั้งหมดในเดสก์ท็อป
• ตัวตรวจสอบการช่วยเหลือพิเศษของ Firefox สามารถตรวจหาปัญหาเกี่ยวกับคอนทราสต์ของภาพ
• นอกจากนี้ คุณยังค้นหาและแก้ไขข้อความที่มีคอนทราสต์ต่ำได้ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
• ในเบราว์เซอร์ Microsoft Edge คุณจะทดสอบคอนทราสต์ของสีข้อความได้โดยใช้ตัวเลือกสี

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

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

คอนทราสต์สูง

ผู้ใช้บางคนกำหนดให้ระบบปฏิบัติการใช้โหมดคอนทราสต์สูง คุณสามารถลองดำเนินการดังกล่าวได้ในระบบปฏิบัติการของคุณ

ใน Mac ให้ไปที่

1. ค่ากำหนดของระบบ
2. การช่วยเหลือพิเศษ
3. ดิสเพลย์

เลือกตัวเลือกเพื่อเพิ่มคอนทราสต์

มีฟีเจอร์สื่อที่ใช้ตรวจหาว่ามีคนเปิดใช้โหมดคอนทราสต์สูงไหม คุณค้นหาฟีเจอร์สื่อของ prefers-contrast ได้ค่า 3 ค่า ได้แก่ no-preference, less และ more คุณสามารถใช้ข้อมูลนี้เพื่อปรับเปลี่ยนชุดสีของเว็บไซต์ได้

และผู้ใช้ยังตั้งค่ากำหนดในระบบปฏิบัติการให้ใช้การสลับสีได้ด้วย

ใน Mac ให้ไปที่

1. ค่ากำหนดของระบบ
2. การช่วยเหลือพิเศษ
3. ดิสเพลย์

เลือกตัวเลือกเพื่อกลับสี

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

ขนาดแบบอักษร

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

คุณตอบสนองต่อการตั้งค่าเหล่านี้ได้โดยใช้ขนาดแบบอักษรที่สัมพันธ์กัน หลีกเลี่ยงการใช้หน่วย เช่น px โปรดใช้หน่วยสัมพัทธ์ เช่น rem หรือ ch แทน

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

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

วันที่

การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์

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

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

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

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

โปรดระมัดระวังพร็อพเพอร์ตี้ order ของ CSS คุณใช้ฟีเจอร์นี้ร่วมกับ Flexbox และตารางกริดเพื่อวางองค์ประกอบในลำดับการแสดงผลที่แตกต่างกันตามลําดับใน HTML ได้ ฟีเจอร์นี้เป็นฟีเจอร์ที่มีประสิทธิภาพแต่อาจทำให้ผู้ใช้นำทางด้วยแป้นพิมพ์สับสนได้

ทดสอบหน้าเว็บโดยใช้ปุ่ม tab บนแป้นพิมพ์เพื่อให้แน่ใจว่าลำดับการเรียงแท็บเหมาะสม

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

การเคลื่อนไหวลดลง

ภาพเคลื่อนไหวและการเคลื่อนไหวเป็นวิธีที่ยอดเยี่ยมในการทำให้การออกแบบเว็บมีชีวิตขึ้นมา แต่สำหรับบางคน การเคลื่อนไหวเหล่านี้อาจทำให้รู้สึกสับสนมากและทำให้เกิดอาการคลื่นไส้ได้

มีคำค้นหาฟีเจอร์ที่สื่อสารว่าผู้ใช้ต้องการการเคลื่อนไหวน้อยลง ซึ่งเรียกว่า prefers-reduced-motion ใส่ข้อมูลดังกล่าวได้ทุกที่ที่คุณใช้การเปลี่ยนหรือภาพเคลื่อนไหว CSS

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

คิวรี่สื่อ prefers-reduced-motion มีไว้สำหรับการเคลื่อนไหวบนหน้าจอโดยเฉพาะ หากคุณใช้การเปลี่ยนสีขององค์ประกอบที่ไม่ควรได้รับผลกระทบจาก prefers-reduced-motion คุณยังเปลี่ยนความทึบแสงและครอสเฟดได้ด้วย การเคลื่อนไหวที่ลดลงไม่จำเป็นต้องหมายความว่าไม่มีภาพเคลื่อนไหว

Voice

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

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

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

ส่วนหัว

ใช้ส่วนหัว เช่น <h1>, <h2>, <h3> ฯลฯ อย่างสมเหตุสมผล โปรแกรมอ่านหน้าจอใช้ส่วนหัวเหล่านี้เพื่อสร้างโครงร่างของเอกสาร ซึ่งไปยังส่วนต่างๆ ได้ด้วยแป้นพิมพ์ลัด

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

โครงสร้าง

ใช้องค์ประกอบจุดสังเกต เช่น <main>, <nav>, <aside>, <header> และ <footer> เพื่อจัดโครงสร้างเนื้อหาของหน้า จากนั้นผู้ใช้โปรแกรมอ่านหน้าจอก็จะข้ามไปยังจุดสังเกตเหล่านี้ได้ทันที

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

ฟอร์ม

ตรวจสอบว่าช่องของแบบฟอร์มทุกช่องมีองค์ประกอบ <label> ที่เชื่อมโยงกัน คุณเชื่อมโยงป้ายกำกับกับช่องแบบฟอร์มได้โดยใช้แอตทริบิวต์ for ในองค์ประกอบ <label> และแอตทริบิวต์ id ที่เกี่ยวข้องในช่องแบบฟอร์ม

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

รูปภาพ

ระบุข้อความอธิบายรูปภาพโดยใช้แอตทริบิวต์ alt เสมอ

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

หากรูปภาพมีไว้สำหรับการนำเสนอเท่านั้น คุณก็ยังควรใส่แอตทริบิวต์ alt แต่จะระบุค่าว่างได้

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald เผยแพร่บทความเกี่ยวกับการเขียนข้อความ alt ที่ยอดเยี่ยม

ลิงก์

และพยายามใส่ข้อความอธิบายไว้ในลิงก์ หลีกเลี่ยงการใช้วลีอย่าง "คลิกที่นี่" หรือ "เพิ่มเติม"

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

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

วิดเจ็ตอินเทอร์เฟซบางรายการที่ไม่มีองค์ประกอบ HTML ที่เกี่ยวข้อง เช่น ภาพสไลด์ แท็บ แอคคอร์เดียน และอื่นๆ โดยองค์ประกอบเหล่านี้ต้องสร้างขึ้นใหม่ตั้งแต่ต้นโดยใช้ HTML, CSS, JavaScript และ ARIA ร่วมกัน

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

หากจำเป็นต้องสร้างองค์ประกอบของอินเทอร์เฟซที่ยังไม่ได้ใช้เป็นองค์ประกอบ HTML ให้ทำความคุ้นเคยกับ ARIA

ยิ่งคุณเพิ่มฟังก์ชันที่ตรงตามความต้องการด้วย JavaScript มากเท่าใด คุณก็ยิ่งต้องทำความเข้าใจ ARIA มากขึ้นเท่านั้น หากใช้องค์ประกอบ HTML แบบเนทีฟต่อไป คุณอาจไม่จำเป็นต้องใช้ ARIA

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

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้ด้านความสามารถเข้าถึงได้ง่าย