การช่วยเหลือพิเศษ

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

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

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

เครื่องมือบางอย่างจะช่วยให้คุณทราบคร่าวๆ ว่ารูปแบบสีของคุณปรากฏต่อผู้ที่มีการมองเห็นสีแบบต่างๆ อย่างไร

แท็บการช่วยเหลือพิเศษของ Firefox มีเมนูแบบเลื่อนลงที่ติดป้ายกำกับว่าจำลองพร้อมรายการตัวเลือก

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

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

ใน Mac ให้ไปที่

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

เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

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

a {
  color: red;
}

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

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

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

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

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

คุณควรประกาศ 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;
}

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

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

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

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

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

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

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

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

Media Query 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 คำศัพท์ของ ARIA ช่วยให้คุณระบุข้อมูลเชิงความหมายได้เมื่อไม่มีองค์ประกอบ HTML ที่เหมาะสม

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

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

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

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

ทดสอบความเข้าใจ

ทดสอบความรู้ด้านการช่วยเหลือพิเศษ