การอนุญาตให้หน้าเว็บตอบสนองต่อขนาดหน้าจอที่แตกต่างกันเป็นเพียงวิธีหนึ่งที่ช่วยให้มั่นใจว่าผู้คนจะเข้าถึงเว็บไซต์ได้มากที่สุด ลองพิจารณาปัจจัยอื่นๆ เหล่านี้ที่คุณควรคำนึงถึง
ภาวะบกพร่องในการมองเห็นสี
แต่ละคนมีการรับรู้เกี่ยวกับสีแตกต่างกัน ผู้ที่เป็นโรคตาบอดสีแดงจะมองว่าสีแดงเป็นสีที่ไม่เหมือนกัน สำหรับภาวะตาบอดสีเขียว จะไม่มีสีเขียว สำหรับคนตาบอดสีน้ำเงิน ภาวะตาบอดสีน้ำเงิน
เครื่องมือบางอย่างจะช่วยให้คุณเห็นภาพทั่วๆ ไปว่ารูปแบบสีของคุณแสดงต่อผู้ชมที่มีการมองเห็นสีต่างกันอย่างไร
แท็บการเข้าถึงของ Firefox มีเมนูแบบเลื่อนลงที่มีป้ายกำกับว่าจำลอง พร้อมรายการตัวเลือก
ใน Chrome DevTools แท็บการแสดงผลช่วยให้คุณจำลองภาวะบกพร่องทางการมองเห็นได้
ซึ่งเป็นเครื่องมือเฉพาะเบราว์เซอร์ นอกจากนี้ยังจำลองการมองเห็นประเภทต่างๆ ในระดับระบบปฏิบัติการได้ด้วย
ใน Mac ให้ไปที่:
- ค่ากำหนดของระบบ
- การช่วยเหลือพิเศษ
- Display
- ฟิลเตอร์สี
- เปิดใช้ฟิลเตอร์สี
เลือกตัวเลือกใดตัวเลือกหนึ่ง
โดยทั่วไปแล้ว การใช้สีเพียงอย่างเดียวเพื่อแยกความแตกต่างระหว่างองค์ประกอบต่างๆ ไม่ใช่ความคิดที่ดี ตัวอย่างเช่น คุณสามารถหรือควรทำให้ลิงก์มีสีแตกต่างจากข้อความโดยรอบ แต่คุณควรใส่สัญลักษณ์การจัดรูปแบบอื่นๆ ด้วย เช่น การขีดเส้นใต้หรือทําให้ลิงก์เป็นตัวหนา
a {
color: red;
}
a {
color: red;
font-weight: bold;
}
คอนทราสต์ของสี
การใช้สีร่วมกันบางสีอาจทำให้เกิดปัญหาได้ หากสีพื้นหน้าและสีพื้นหลังมีคอนทราสต์ไม่เพียงพอ ข้อความจะอ่านได้ยาก คอนทราสต์ของสีต่ำเป็นปัญหาด้านความสามารถเข้าถึงได้ง่ายที่พบได้บ่อยที่สุดบนเว็บ แต่ก็โชคดีที่คุณเจอได้ตั้งแต่เนิ่นๆ ในขั้นตอนการออกแบบ
คุณสามารถใช้เครื่องมือต่อไปนี้เพื่อทดสอบอัตราส่วนคอนทราสต์ของสีข้อความและสีพื้นหลังได้
- tota11y คือ bookmarklet ที่คุณสามารถเพิ่มลงในแถบเครื่องมือของเบราว์เซอร์ได้
- VisBug คือส่วนขยายของเบราว์เซอร์ที่สามารถใช้ได้กับเบราว์เซอร์ส่วนใหญ่ของเดสก์ท็อป
- เครื่องมือตรวจสอบการเข้าถึงของ Firefox ตรวจหาปัญหาเกี่ยวกับคอนทราสต์ของภาพได้
- นอกจากนี้ คุณยังค้นหาและแก้ไขข้อความคอนทราสต์ต่ำด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้ด้วย
- ในเบราว์เซอร์ Edge ของ Microsoft คุณจะทดสอบคอนทราสต์ของสีข้อความได้โดยใช้ตัวเลือกสี
ควรประกาศ color และ background-color ร่วมกันใน CSS เสมอ อย่าคิดเองว่าสีพื้นหลังจะเป็นค่าเริ่มต้นของเบราว์เซอร์ ผู้ใช้สามารถเปลี่ยนสีของเบราว์เซอร์ได้
body {
color: black;
}
body {
color: black;
background-color: white;
}
คอนทราสต์สูง
ผู้ใช้บางคนตั้งค่าระบบปฏิบัติการให้ใช้โหมดคอนทราสต์สูง คุณสามารถลองใช้วิธีนี้ในระบบปฏิบัติการของคุณ
ใน Mac ให้ไปที่:
- ค่ากำหนดของระบบ
- การช่วยเหลือพิเศษ
- Display
เลือกตัวเลือกเพื่อเพิ่มคอนทราสต์
มีฟีเจอร์สื่อสำหรับตรวจหาว่ามีคนเปิดใช้โหมดคอนทราสต์สูงหรือไม่ คุณจะค้นหาฟีเจอร์สื่อของ prefers-contrast ได้ 3 ค่า ได้แก่ no-preference, less และ more คุณสามารถใช้ข้อมูลนี้เพื่อปรับชุดสีของเว็บไซต์ของคุณ
นอกจากนี้ ผู้ใช้ยังตั้งค่าให้ระบบปฏิบัติการใช้การสลับสีได้ด้วย
ใน Mac ให้ไปที่:
- ค่ากำหนดของระบบ
- การช่วยเหลือพิเศษ
- Display
เลือกตัวเลือกเพื่อกลับสี
ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณยังคงเหมาะสำหรับผู้ที่กำลังท่องเว็บด้วยสีสลับสี ระวังเงากล่อง ซึ่งอาจต้องปรับเมื่อสีมีการกลับด้าน
ขนาดแบบอักษร
สีไม่ใช่สิ่งเดียวที่สามารถปรับได้ในเบราว์เซอร์ของตน แต่ยังสามารถปรับขนาดแบบอักษรเริ่มต้นได้ด้วย แต่เมื่อสูญเสียการมองเห็น จึงอาจปรับขนาดแบบอักษรเริ่มต้นในเบราว์เซอร์หรือระบบปฏิบัติการ ทำให้ตัวเลขมีจำนวนเพิ่มขึ้นเมื่อผ่านไปหลายปี
คุณสามารถตอบสนองต่อการตั้งค่าเหล่านี้โดยใช้ขนาดแบบอักษรที่เกี่ยวข้อง หลีกเลี่ยงการใช้หน่วยเช่น px โปรดใช้หน่วยสัมพัทธ์ เช่น rem หรือ ch แทน
ลองเปลี่ยนการตั้งค่าขนาดข้อความเริ่มต้นในเบราว์เซอร์ ทำในการตั้งค่าเบราว์เซอร์ได้เลย หรือคุณอาจทำในขณะที่เข้าชมหน้าเว็บโดยการซูมเข้า เว็บไซต์จะยังใช้งานได้หรือไม่หากขนาดแบบอักษรเริ่มต้นเพิ่มขึ้น 200% เอาล่ะ 400% ล่ะ
ผู้ที่เข้าชมเว็บไซต์บนคอมพิวเตอร์เดสก์ท็อปที่มีขนาดแบบอักษรเพิ่มขึ้นถึง 400% ควรมีเลย์เอาต์แบบเดียวกับผู้ที่เข้าชมเว็บไซต์บนอุปกรณ์หน้าจอขนาดเล็ก
การนำทางด้วยแป้นพิมพ์
ไม่ใช่ทุกคนที่ใช้เมาส์หรือแทร็กแพดเพื่อไปยังหน้าเว็บต่างๆ แป้นพิมพ์เป็นอีกวิธีหนึ่งในการไปยังส่วนต่างๆ ของหน้าเว็บ โดยแป้น tab จะมีประโยชน์เป็นพิเศษ ผู้ใช้สามารถย้ายจากลิงก์หรือช่องแบบฟอร์มหนึ่งไปยังลิงก์หรือช่องแบบฟอร์มถัดไปได้อย่างรวดเร็ว
ลิงก์ที่จัดรูปแบบด้วยคลาสเทียม :hover และ :focus จะแสดงรูปแบบเหล่านั้นไม่ว่าผู้ใช้จะใช้เมาส์ แทร็กแพด หรือแป้นพิมพ์หรือไม่ก็ตาม ใช้คลาส Pseudo :focus-visible เพื่อจัดรูปแบบลิงก์สำหรับการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ คุณสามารถทำให้สไตล์เหล่านั้นโดดเด่นขึ้นได้
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
เนื่องจากแท็บผู้ใช้จากลิงก์หนึ่งไปอีกลิงก์หรือฟิลด์แบบฟอร์มไปยังฟิลด์ของฟอร์ม องค์ประกอบเหล่านั้นจะถูกโฟกัสตามลำดับที่ปรากฏในโครงสร้างเอกสาร ซึ่งควรตรงกับลำดับภาพด้วย
โปรดระวังพร็อพเพอร์ตี้ order ของ CSS คุณสามารถใช้ฟังก์ชันนี้ร่วมกับ Flexbox และตารางกริดเพื่อวางองค์ประกอบในลำดับภาพต่างๆ ให้เป็นระเบียบใน 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;
}
}
คิวรี่สื่อ prefers-reduced-motion มีไว้สำหรับการเคลื่อนไหวบนหน้าจอโดยเฉพาะ หากคุณใช้การเปลี่ยนสีขององค์ประกอบที่ไม่ควรได้รับผลกระทบจาก prefers-reduced-motion นอกจากนี้ยังสามารถใช้ค่าความทึบแสงในการเปลี่ยนและจางลงได้ การลดการเคลื่อนไหวไม่จำเป็นต้องหมายความว่าไม่มีภาพเคลื่อนไหว
เสียง
ประสบการณ์ของผู้ใช้เว็บจะต่างกันไป ไม่ใช่ทุกคนที่เห็นเว็บไซต์ของคุณบนหน้าจอ เทคโนโลยีความช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ จะแปลงเอาต์พุตข้อมูลเป็นหน้าจอเป็นคำพูด
โปรแกรมอ่านหน้าจอทำงานได้กับแอปพลิเคชันทุกประเภทรวมถึงเว็บเบราว์เซอร์ เพื่อให้เว็บเบราว์เซอร์สื่อสารกับโปรแกรมอ่านหน้าจอได้อย่างมีประสิทธิภาพ จะต้องมีข้อมูลเชิงความหมายที่เป็นประโยชน์ในหน้าเว็บที่กำลังเข้าถึงอยู่
ก่อนหน้านี้คุณได้เรียนรู้ไปแล้วว่าปุ่มเฉพาะไอคอนต้องระบุแอตทริบิวต์เพื่อระบุวัตถุประสงค์ของปุ่มแก่ผู้ใช้ที่มองไม่เห็น นี่เป็นเพียงตัวอย่างหนึ่งของความสำคัญของ 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
ถ้าเป็นไปได้ ให้ทดสอบกับผู้ใช้โปรแกรมอ่านหน้าจอจริง วิธีนี้ไม่เพียงแค่ช่วยให้คุณเข้าใจวิธีไปยังส่วนต่างๆ ของเว็บมากขึ้นเท่านั้น แต่ยังทำให้คุณไม่ต้องคาดเดาในการออกแบบโดยคำนึงถึงความสามารถเข้าถึงได้ง่ายด้วย
การทดสอบกับบุคคลจริงเป็นวิธีที่ยอดเยี่ยมในการตั้งคำถามและตั้งสมมติฐาน ในโมดูลถัดไป คุณจะได้เรียนรู้เกี่ยวกับวิธีต่างๆ ที่ผู้คนโต้ตอบกับเว็บไซต์ของคุณ ซึ่งเป็นอีกเรื่องหนึ่งที่การคาดเดาได้ง่ายเกินไป
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการช่วยเหลือพิเศษ
CSS ช่วยให้นักพัฒนาซอฟต์แวร์เขียนทับค่ากำหนดของผู้ใช้ เช่น ขนาดแบบอักษร ในกรณีที่มีข้อผิดพลาดที่สุดได้
body { font-size: 12px; } ก็เพียงพอแล้วหากต้องการหลีกเลี่ยงการเขียนทับค่ากำหนดขนาดแบบอักษรของผู้ใช้ ให้ใช้
pxremทุกคนในโลกใช้เมาส์
รูปภาพที่มีแอตทริบิวต์ Alt ที่ว่างเปล่ามีประโยชน์อย่างไร