วิธีดำเนินการตรวจสอบการช่วยสำหรับการเข้าถึงสำหรับการปฏิบัติตามข้อกำหนด WCAG

WCAG (แนวทางการเข้าถึงเนื้อหาเว็บ) สร้างขึ้นโดยกลุ่มเวิลด์ไวด์เว็บ (W3C) และเป็นมาตรฐานที่ได้รับการยอมรับมากที่สุดทั่วโลกสำหรับการเข้าถึง

ในบทความนี้ เราสรุปงานที่จำเป็นสำหรับการตรวจสอบเพื่อยืนยันการปฏิบัติตามมาตรฐาน WCAG 2.1

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

ตัวอย่างเช่น:

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

อย่างที่คุณเห็นมีความพิการหลายรูปแบบที่คุณต้องพิจารณา

หลักเกณฑ์ของ WCAG แบ่งออกเป็นดังนี้:

ก่อนดำเนินการผ่านแต่ละส่วน ต่อไปนี้คือรายการสิ่งที่คุณต้องทำการทดสอบ:

1. รับรู้ได้

• การเลือกเบราว์เซอร์รวมถึงข้อความเท่านั้น (เช่น Lynx)
• เครื่องมือสำหรับตรวจสอบแท็ก alt หัวเรื่อง ฯลฯ (เช่น ScreamingFrog)
• โปรแกรมอ่านหน้าจอ เช่น NVDA
• เครื่องมือทดสอบการช่วยสำหรับการเข้าถึงเว็บไซต์
• เครื่องมือพัฒนา Chrome
• เข้าถึงอุปกรณ์ที่เลือกได้

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

เครื่องมือช่วยการเข้าถึงของ WAVE เป็นหนึ่งในเครื่องมือมากมายที่สามารถใช้เพื่อค้นหาปัญหาในพื้นที่นี้:

ในตัวอย่างข้างต้น หน้านี้ทำได้ค่อนข้างดี มีเพียง 1 ข้อผิดพลาดและ 5 ข้อผิดพลาดเกี่ยวกับปัญหาความคมชัดของสี

ข้อผิดพลาดประการหนึ่งคือหน้านี้ไม่ได้ระบุภาษา

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

มาดูแนวทางและเกณฑ์ความสำเร็จกัน

แนวปฏิบัติ 1.1 - การจัดหาข้อความทางเลือกแทนเนื้อหาที่ไม่ใช่ข้อความ

มีข้อความอื่นแทนเนื้อหาที่ไม่ใช่ข้อความหรือไม่

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

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

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

ARIA คืออะไร?

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

ภาพบรรยาย

ภาพพรรณนาเป็นสิ่งที่แสดงถึงบางสิ่งที่มีความหมาย ตัวอย่างเช่น รูปภาพของรถยนต์โตโยต้าพรีอุส

หากคุณไม่เห็นรูปภาพ จะต้องมีวิธีอธิบายว่ารูปภาพนี้แสดงถึงอะไร ซึ่งเป็นที่มาของแท็ก Alt

ในแพลตฟอร์มเช่น WordPress คุณสามารถเพิ่มแท็ก alt เมื่ออัปโหลดรูปภาพ:

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

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

คุณสามารถดูรูปภาพควบคู่ไปกับรายละเอียดของรูปภาพได้ด้วย:

ภาพตกแต่ง

รูปภาพตกแต่งคือรูปภาพที่มีไว้เพื่อเสริมการออกแบบ แต่ไม่มีอะไรในภาพที่ควรค่าแก่การอธิบาย!

รูปภาพตกแต่งควรใช้คุณสมบัติพื้นหลัง CSS เว้นแต่จะมีเหตุผลที่ดีที่จะใช้แท็ก 'img' หากโปรแกรมอ่านหน้าจอเห็นคุณสมบัติพื้นหลัง CSS ก็รู้ว่าไม่ต้องสนใจรูปภาพ

ต่อไปนี้คือตัวอย่างรูปภาพที่อธิบายว่าเป็นภาพพื้นหลังในเว็บไซต์ My Emergency Doctor ในออสเตรเลีย:

นี่คือรหัสที่อยู่เบื้องหลังสิ่งนี้:

เนื่องจากรูปภาพนี้ไม่อยู่ในรายการ <img> มันจึงใช้ role=img เพื่อให้โปรแกรมอ่านหน้าจอทราบว่านี่คือรูปภาพ ใช้ 'Aria-label' เพื่อให้คำอธิบายภาพที่ถูกต้องแม่นยำ นอกจากนี้ยังกำหนดภาพเป็น 'ภาพพื้นหลัง'

หมายเหตุ: หากคุณใช้แท็ก 'img' สำหรับรูปภาพพื้นหลัง คุณต้องกำหนดแท็ก null alt เช่น alt=” “

คุณควรใช้ <img> แทนสีพื้นหลังเมื่อใด

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

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

หมายเหตุ: <img> เป็นแท็ก HTML แต่ภาพพื้นหลังเป็นสไตล์ CSS ที่คุณใช้

การควบคุม UI

มีการควบคุม UI ต่างๆ ที่ต้องใช้ข้อความเพื่ออธิบายว่ามันคืออะไร

ตัวอย่างเช่น ปุ่มหรือตัวควบคุมฟอร์ม

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

การใช้ ARIA คุณสามารถกำหนด 'role=button' แต่ด้วย HTML มาตรฐาน คุณสามารถใช้แท็ก <button> คุณควรใช้อันไหน?

ต่อไปนี้คือตัวอย่างปุ่มที่มี X อยู่ ซึ่งกำหนดให้เราต้องสร้าง 'aria-label' เพื่ออธิบายว่าปุ่มนี้ทำหน้าที่อะไร

<button aria-label=”ปิด” onclick=”myDialog.close()”>X</button>

ต่อไปนี้คือรายการการควบคุม UI ทั่วไปที่คุณต้องทดสอบ:

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

<label for=”fname”>ชื่อ:</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>นามสกุล:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

หมายเหตุ: สำหรับแบบฟอร์ม คุณควรตรวจสอบให้แน่ใจว่า:

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

Captcha

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

เราจะตรวจสอบการใช้งานและให้คำแนะนำที่เกี่ยวข้อง

เนื้อหามัลติมีเดีย

วิดีโอ/เสียงต้องมีคำอธิบายอย่างน้อยเพื่อระบุว่าวิดีโอ/เสียงนั้นเกี่ยวกับอะไร

ลิงค์

คุณต้องการทำให้แน่ใจว่าลิงก์มีความโดดเด่นอย่างชัดเจนบนหน้าเว็บ (เช่น สีต่างกัน) และใช้ anchor text และคำอธิบายลิงก์ที่เกี่ยวข้อง

แนวปฏิบัติ 1.2 – สื่อตามเวลา

พื้นที่นี้เกี่ยวกับการจัดเตรียมเนื้อหาวิดีโอและเสียงที่ต้องสามารถเข้าถึงได้มากขึ้น

มีการถอดเสียงเป็นคำสำหรับเสียงที่บันทึกไว้ล่วงหน้าเท่านั้นหรือวิดีโอ เท่านั้น

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

เคล็ดลับการถอดความ!

Rev.com เป็นบริการที่ยอดเยี่ยมสำหรับการสร้างคำบรรยายภาพ/การถอดเสียงสำหรับเสียง/วิดีโอของคุณ พวกเขายังให้บริการคำบรรยายสดสำหรับวิดีโอซูม

มีคำบรรยายสำหรับเสียงที่บันทึกไว้ล่วงหน้าหรือไม่?

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

มีคำอธิบายเสียงหรือทางเลือกสื่อ (บันทึกไว้ล่วงหน้า) หรือไม่

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

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

ต่อไปนี้คือตัวอย่างการถอดเสียงเป็นคำที่มีคำอธิบายเสียง

สิ่งนี้ยอดเยี่ยมสำหรับผู้เยี่ยมชมเว็บไซต์ของคุณ แต่ก็ดีสำหรับ SEO ด้วย!

เคล็ดลับในการเลือกผู้เล่นที่เข้าถึงได้:

คุณต้องการให้แน่ใจว่าเครื่องเล่นวิดีโอที่คุณใช้รองรับสิ่งที่จำเป็นสำหรับการเข้าถึง:

1. รองรับคำบรรยาย
2. สามารถเปิด/ปิดคำบรรยายเสียงได้
3. สามารถใช้การควบคุมคำหลักบนเครื่องเล่นสื่อ
4. เครื่องเล่นสื่อทำงานบนอุปกรณ์และเบราว์เซอร์ที่แตกต่างกัน
5. การควบคุมทั้งหมดสามารถเข้าถึงได้

มีคำบรรยายสำหรับเสียงสด หรือไม่?

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

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

มีคำอธิบายเสียงสำหรับสื่อซิงโครไนซ์ที่บันทึกไว้ล่วงหน้าหรือไม่?

ใช้สำหรับสื่อที่มีภาพและเสียง เราต้องการข้อมูลเสียงที่มาพร้อมกับสื่อ

แนวปฏิบัติ 1.3 – ปรับเปลี่ยนได้ – นำเสนอข้อมูลในรูปแบบที่ซอฟต์แวร์สามารถเข้าใจได้

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

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

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

นี่คือสิ่งที่คุณจะต้องตรวจสอบ:

• เนื้อหาแบ่งออกเป็นหัวข้อย่อยหรือไม่?
• ใช้รายการ ตาราง ฯลฯ ตามความเหมาะสมหรือไม่
• มี HTML ที่ถูกต้องสำหรับองค์ประกอบโครงสร้างอื่นๆ ตลอดทั้งเนื้อหาหรือไม่
• มีป้ายกำกับและข้อความแสดงแทนที่ใช้ตามต้องการ (เช่น ในแบบฟอร์มหรือไม่)

เคล็ดลับ

จุดเริ่มต้นที่ดีคือการทดสอบเว็บไซต์ของคุณโดยใช้เครื่องมือตรวจสอบที่ตรวจสอบ html ที่ถูกต้อง (เช่น W3.org html validator)

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

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

 <label for="lastname" class="required">นามสกุล (จำเป็น): </label>
<input type="text" size="25" value=""/>
<style type="text/css">
  .ที่จำเป็น {
    สี:สีแดง;
  }
</style>

มีลำดับเนื้อหาที่เหมาะสมหรือไม่?

• เมื่อคุณดูหน้าเว็บ คุณจะเห็นแถบนำทาง ตามด้วยเนื้อหา หัวเรื่อง หัวเรื่องย่อย ย่อหน้าของข้อความ คุณต้องการให้แน่ใจว่าสิ่งนี้ถูกนำเสนอในลำดับที่เหมาะสม
• ใช้ลักษณะหัวเรื่องเพื่อระบุความสำคัญของส่วนต่างๆ โดยทั่วไปแล้ว คุณจะมีสไตล์ <h1> เพียงรูปแบบเดียวในการระบุหน้าของเนื้อหา จากนั้นคุณอาจมีหลาย H2, H3 เป็นต้น
• แยกการนำทางออกจากเนื้อหา (เช่น กำหนดการนำทางโดยใช้ <nav>)
• ใช้ html . ที่ถูกต้อง

นี่คือโครงสร้างทั่วไปของส่วนหัวที่สมเหตุสมผล:

ผู้ใช้สามารถเข้าใจเนื้อหาเมื่อไม่สามารถรับรู้รูปร่าง ขนาด หรือใช้ข้อมูลเกี่ยวกับรูปร่างหรือขนาดเชิงพื้นที่ได้หรือไม่

วิธีที่ง่ายที่สุดในการอธิบายสิ่งนี้คือด้วยตัวอย่าง:

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

เว็บไซต์ทำงานได้ดีในโหมดแนวตั้งและแนวนอนหรือไม่?

เว็บไซต์ต้องสามารถปรับให้เข้ากับโหมดแนวตั้งหรือแนวนอนได้โดยไม่เสียความหมาย

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

ข้อมูลป้อนเข้าในแบบฟอร์มอธิบายถูกต้องหรือไม่?

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

และถ้าเป็นไปได้ให้เปิดใช้งานการเติมอัตโนมัติเพื่อให้ผู้ใช้ไม่ต้องกรอกทุกอย่าง!

วัตถุประสงค์ขององค์ประกอบบนหน้าเว็บสามารถหาได้โดยทางโปรแกรมหรือไม่

ตัวอย่างนี้คือการใช้องค์ประกอบ 'บทบาท' ของ ARIA สำหรับส่วนต่างๆ ของเว็บไซต์

ตัวอย่างเช่น แบนเนอร์ที่มีโลโก้/ชื่อบริษัท ฯลฯ สามารถอธิบายได้ว่าเป็น 'role=banner'

หรือใช้ป้ายใส่แบบฟอร์มสำหรับอีเมล ชื่อ ที่อยู่ ฯลฯ

นี่คือลักษณะที่คุณเห็นใน HTML:

<ประเภทการป้อนข้อมูล=”อีเมล>

มีรูปแบบข้อความของกราฟใด ๆ หรือไม่?

หากมีเนื้อหาประเภทกราฟ คุณจะต้องมีตารางที่สรุปว่าเนื้อหานี้เกี่ยวกับอะไร

แนวปฏิบัติ 1.4 – ดูและฟังเนื้อหา

นี่เป็นการทำให้ผู้คนเห็นและได้ยินเนื้อหาได้ง่าย

มีการใช้สีแทนข้อความในการถ่ายทอดข้อมูลหรือไม่?

ลองนึกภาพว่าคุณมีแบบฟอร์มและช่องที่ต้องกรอกแสดงเป็นสีแดง

นี้ไม่ได้มีความหมายมากสำหรับโปรแกรมอ่านหน้าจอ!

แต่คุณสามารถเพิ่มคำว่า 'จำเป็น' ลงในตารางได้ดังตัวอย่างด้านล่าง:

<label for=”lastname” class=”required”>นามสกุล (จำเป็น): </label> <input id=”lastname” type=”text” size=”25″ value=””/> <style type= ”text/css”> .required { color:red; } </style>

มีกลไกในการหยุดชั่วคราวหรือหยุดเสียงหากเล่นนานกว่า 3 วินาทีหรือไม่?

หากคุณกำลังใช้โปรแกรมอ่านหน้าจอและวิดีโอเล่นพร้อมกันโดยอัตโนมัติ คุณจะได้ยินเสียงสองเสียง!

ตามหลักการแล้วจะไม่มีการเล่นวิดีโออัตโนมัติเพื่อแก้ปัญหานี้

หากมีการเล่นอัตโนมัติ ให้ตรวจสอบว่ามีเวลาน้อยกว่า 3 วินาที และหากไม่มี ให้ตรวจสอบว่ามีวิธีควบคุมเสียงของการเล่นวิดีโอ

พื้นหลังมีความเปรียบต่างที่ดีระหว่างข้อความและรูปภาพ/สีหรือไม่

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

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

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

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

สีพื้นหลังอยู่ด้านซ้าย จากนั้นสีข้อความจะอยู่ด้านขวา คะแนนอยู่ตรงกลาง

คำแนะนำคือคอนทราสต์อย่างน้อย 4.5:1 หรือ 3.1 เมื่อข้อความมีขนาดใหญ่ (เช่น ตัวหนา 18 หรือ 14 พอยต์)

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

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

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

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

แต่คุณต้องการให้เว็บไซต์ทำงานตามปกติหากผู้ใช้เพิ่มขนาดข้อความ

ตัวอย่างเช่น เมื่อผู้ใช้ซูมข้อความได้ถึง 400% คุณต้องแน่ใจว่าไม่มีข้อมูลสูญหาย

นี่คือรูปภาพจาก W3.org ฉันแน่ใจว่าคุณไม่ต้องการให้เว็บไซต์ของคุณดูเหมือนด้านขวาเมื่อคุณขยายข้อความ

ข้อกำหนด WCAG 2.1 คือคุณสามารถขยายได้ถึง 200% โดยไม่มีปัญหาใดๆ

หลีกเลี่ยงรูปภาพของข้อความเว้นแต่จำเป็นหรือไม่

คุณอาจมีโลโก้ที่มีข้อความ (เช่น ชื่อบริษัทของคุณ) ซึ่งก็ไม่เป็นไร

แต่สิ่งที่เกี่ยวกับรูปภาพของข้อความ?

หากคุณมีรูปภาพของข้อความ อย่างน้อย คุณต้องระบุป้ายกำกับที่อธิบายข้อความนั้น

แต่คุณควรหลีกเลี่ยงรูปภาพประเภทนี้ เว้นแต่:

• มันจำเป็น
• ปรับแต่งได้

เว็บไซต์ตอบสนองหรือไม่?

เป็นเรื่องปกติที่จะเลื่อนลงมาเพื่อดูหน้าเว็บแบบเต็ม แต่ห้ามเลื่อนไปทางขวาหรือซ้าย

เมื่อคุณย้ายจากเดสก์ท็อปไปยังอุปกรณ์ขนาดเล็ก หน้าจอควรปรับโดยอัตโนมัติ เพื่อให้คุณไม่ต้องเลื่อนไปทางขวาหรือซ้าย

มีคอนทราสต์เพียงพอสำหรับเนื้อหาที่ไม่ใช่ข้อความหรือไม่

สีที่อยู่ติดกันต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 3:1

ข้อกำหนดนี้มีไว้สำหรับผู้ที่มีสายตาเลือนราง

สามารถปรับระยะห่าง/ความสูงของเส้นโดยไม่สูญเสียประสิทธิภาพการทำงานได้หรือไม่?

• ความสูงของบรรทัด (ระยะห่างระหว่างบรรทัด) ควรมีอย่างน้อย 1.5 เท่าของขนาดตัวอักษร
• ระยะห่างของย่อหน้าถัดไปควรมีขนาดแบบอักษรอย่างน้อย 2 เท่า
• ระยะห่างระหว่างตัวอักษร (การติดตาม) ควรมีอย่างน้อย 0.12 เท่าของขนาดตัวอักษร
• ระยะห่างระหว่างคำควรมีอย่างน้อย 0.16 เท่าของขนาดตัวอักษร

เนื้อหาแสดงอย่างถูกต้องเมื่อวางเมาส์เหนือหรือโฟกัสหรือไม่

เมื่อคุณโฟกัสที่องค์ประกอบ (เช่น แท็บไปที่องค์ประกอบนั้น) หรือวางเมาส์เหนือองค์ประกอบนั้น คุณจะเห็นเนื้อหาเพิ่มเติม

ตัวอย่างเช่น คุณวางเมาส์เหนือปุ่มและป๊อปอัปปรากฏขึ้น

…หรือเมนูย่อยจะปรากฏขึ้น

เนื้อหานี้จะต้อง:

ปิดได้ – ตัวอย่างเช่น หากคุณคลิก Escape เนื้อหาจะไม่แสดงอีกต่อไป

Hoverable – เมื่อคุณวางเมาส์เหนือเนื้อหา เนื้อหาจะแสดงตราบใดที่เมาส์อยู่เหนือทริกเกอร์

ถาวร - นี่คือการรวมกันของทั้งสองอย่าง เนื้อหาจะยังคงปรากฏอยู่จนกว่าผู้ใช้จะยกเลิก ผู้ใช้เลื่อนเมาส์ออก หรือเนื้อหาไม่มีข้อมูลสำคัญอีกต่อไป

หมายเหตุ: สิ่งนี้ใช้ไม่ได้กับเมื่อองค์ประกอบ HTML เช่นชื่อปรากฏขึ้นเมื่อคุณวางเมาส์เหนือบางสิ่ง (เช่น รูปภาพ)

แบบอักษรอ่านได้หรือไม่

แบบอักษร/แบบอักษรบางตัวอ่านง่ายกว่าแบบอื่นๆ มีความพึงพอใจต่อ serif หรือ sans serif แต่นั่นไม่จำเป็น ส่วนสำคัญคือสามารถอ่านได้

2. ใช้งานได้

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

แนวทาง 2.1 – แป้นพิมพ์ที่เข้าถึงได้

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

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

ทุกอย่างสามารถเข้าถึงได้ผ่านแป้นพิมพ์หรือไม่?

ถึงเวลาหยุดใช้เมาส์และใช้แป้นพิมพ์เท่านั้น

คุณกำลังตรวจสอบ:

ทำทุกอย่างตามลำดับตรรกะไปข้างหน้าหรือข้างหลัง (โดยใช้แท็บเพื่อไปข้างหน้าและเปลี่ยนแท็บเพื่อย้อนกลับ)

เมื่อคุณอยู่ในปุ่มใดปุ่มหนึ่ง ส่วน ฯลฯ คุณเห็นว่าองค์ประกอบนี้ถูกเน้นหรือไม่ ในตัวอย่างต่อไปนี้ เห็นได้ชัดว่าเราได้แท็บ 'บทความ'

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

หมายเหตุ: หากป๊อปอัปปรากฏขึ้นคุณจะต้องสามารถนำทางได้

คุณสามารถข้ามส่วนหัวได้หรือไม่

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

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

หากคุณกดแท็บที่สอง คุณจะย้ายไปที่ลิงก์ 'ข้ามไปยังการนำทาง' หากคุณกด Enter คุณจะเข้าสู่การนำทาง

หากคุณกดแท็บอีกครั้ง คุณจะย้ายไปที่ 'ข้ามไปยังการนำทาง' หากคุณเลือกตัวเลือกนี้ คุณจะข้ามไปที่การนำทางโดยตรง

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

2.1.2 มีสถานการณ์ใดบ้างที่คุณกดปุ่มคีย์บอร์ดจนสุดทาง (กับดักคีย์บอร์ด) ?

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

สิ่งนี้เรียกว่ากับดักคีย์บอร์ด ขณะที่เพลงดำเนินไป…ติดกับดัก มองย้อนกลับไปไม่ได้….

มีทางเลือกอื่นนอกเหนือจากแป้นพิมพ์ลัดที่ใช้ตัวอักษรหรือไม่?

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

เราจึงต้องจัดหาทางเลือกอื่น

ก) ความสามารถในการทำการแมปตัวละครนี้กับทางลัดอื่น

ข) ปิดมัน

ค). ใช้งานได้เฉพาะเมื่อคุณมีสมาธิกับสิ่งนี้ นั่นหมายความว่า ถ้าคุณใช้ทางลัด จะไม่มีอะไรเกิดขึ้น เว้นแต่คุณจะอยู่บนนั้นจริงๆ!

แนวทาง 2.2 – เวลาเพียงพอ

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

ปรับเวลาได้หรือไม่?

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

ผู้ใช้เว็บไซต์สามารถหยุดชั่วคราว หยุดหรือซ่อนการเคลื่อนไหว กะพริบ หรืออัปเดตเนื้อหาอัตโนมัติได้หรือไม่

ถ้ามันเคลื่อนที่/กะพริบหรือดุและมัน:

ก) เริ่มโดยอัตโนมัติ

ข) กินเวลานานกว่า 5 วินาที

ค). นำเสนอควบคู่ไปกับเนื้อหาอื่นๆ

จากนั้นมีกลไกสำหรับการหยุดชั่วคราว หยุด หรือลบ

ปัญหาเดียวกันกับเนื้อหาอัปเดตอัตโนมัติ

แนวทางที่ 2.3 – อาการชักและปฏิกิริยาทางกายภาพ

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

'ไฟกะพริบ' บนหน้าจอตรงตามหลักเกณฑ์หรือไม่

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

แนวทาง 2.4 – นำทางได้

นี่คือการทำให้ง่ายต่อการนำทางผ่านเว็บไซต์

คุณสามารถข้ามบล็อกซ้ำได้หรือไม่?

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

ชื่อหน้าทั้งหมดถูกต้องหรือไม่

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

คุณสามารถใช้ Screaming Frog เพื่อดูชื่อหน้าได้ในที่เดียว:

ลำดับโฟกัสรักษาความหมายหรือไม่

หากคุณกำลังแท็บผ่านเนื้อหา แต่คุณแท็บในลำดับที่ไม่สมเหตุสมผล คุณจะต้องแก้ไขปัญหานี้

คุณสามารถกำหนดวัตถุประสงค์ของลิงก์จากข้อความลิงก์ได้หรือไม่

'คลิกที่นี่' ไม่ใช่ anchor text ที่มีประโยชน์มาก คุณต้องมีคำที่อธิบายเนื้อหาที่จะเชื่อมโยงไปถึง

Anchor text คืออะไร?

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

มีมากกว่าหนึ่งวิธีในการค้นหาหน้าเว็บหรือไม่?

นี่คือตัวอย่างบางส่วน:

• แผนผังเว็บไซต์ – มีรายการของหน้าทั้งหมดบนแผนผังเว็บไซต์
• ลิงค์ด่วน – มีลิงค์ด่วนเพื่อไปยังหน้าสำคัญ
• ค้นหา – ค้นหาเพื่อค้นหาหน้าที่เกี่ยวข้อง

โฟกัสของแป้นพิมพ์มองเห็นได้หรือไม่

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

มีการกำหนดส่วนหัว เนื้อหา และส่วนท้ายไว้อย่างชัดเจนหรือไม่

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

แนวปฏิบัติ 2.5 รูปแบบการป้อนข้อมูล

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

ฟังก์ชันที่ใช้ท่าทางแบบหลายจุดหรือตามเส้นทางสามารถสั่งงานด้วยตัวชี้เดียวโดยไม่ต้องใช้ท่าทาง (เว้นแต่จำเป็น) ได้หรือไม่

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

มีวิธีง่าย ๆ ในการออกจากการกระทำที่เริ่มต้นโดยตัวชี้ตัวเดียวหรือไม่?

ตัวชี้เดียวคืออะไร?

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

อย่างน้อยหนึ่งข้อต่อไปนี้ต้องเป็นจริง:

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

ป้ายกำกับที่มองเห็นได้ของส่วนประกอบตรงกับชื่อแบบเป็นโปรแกรมของส่วนประกอบนั้นหรือไม่

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

ฟังก์ชันที่สั่งการโดยการเคลื่อนไหวหรือการใช้ท่าทางสัมผัสสามารถถูกควบคุมโดยส่วนควบคุม UI อื่นๆ ได้หรือไม่

หากคุณเขย่าหรือเอียงบางสิ่งเพื่อควบคุม คุณสามารถใช้การควบคุม UI อื่นเพื่อเข้าถึงฟังก์ชันนี้ได้หรือไม่

เข้าใจได้

นี่คือการทำให้แน่ใจว่าภาษาที่ใช้ในเพจนั้นสามารถเข้าใจได้

3.1 อ่านได้

เราครอบคลุมสิ่งต่อไปนี้:

สามารถกำหนดภาษาของหน้าหรือส่วนของหน้าโดยทางโปรแกรมได้หรือไม่

คุณควรเห็นสิ่งนี้ที่จุดเริ่มต้นของหน้าใดๆ 'Lang' หมายถึงภาษาของหน้า

<html class=”ie ie7″ lang=”en-US”>

หากภาษาเปลี่ยนแปลงในหน้า คุณจะต้องสามารถระบุสิ่งนี้ได้เช่นกัน

3.2 คาดการณ์ได้

คุณต้องการให้ UI ของคุณทำงานในลักษณะที่คาดเดาได้ ไม่ใช่เรื่องน่าประหลาดใจ!

การนำทางในลำดับเดียวกันในหน้าต่างๆ หรือไม่

ตำแหน่งการนำทางในหน้าหนึ่งควรเหมือนกันในหน้าอื่นๆ ทั้งหมด เว้นแต่ผู้ใช้จะทำการเปลี่ยนแปลงการนำทาง

มีการตั้งชื่อส่วนประกอบ รูปภาพ ฯลฯ ในหน้าต่างๆ อย่างสม่ำเสมอหรือไม่

หากคุณมีรูปภาพในหน้าหนึ่งและมีรูปภาพเดียวกันในอีกหน้าหนึ่ง คุณต้องการให้ตั้งชื่อรูปภาพเหมือนกัน

หากคุณมีบทความหลายหน้าและคุณตั้งชื่อหน้า 1, หน้า 2, หน้า 3 ที่สอดคล้อง การติดฉลากไม่จำเป็นต้องเหมือนกันหากไม่สมเหตุสมผล แต่ต้องสอดคล้องกัน

3.3 ความช่วยเหลือในการป้อนข้อมูล

สิ่งนี้เกี่ยวกับการช่วยให้ผู้ใช้หลีกเลี่ยงหรือกู้คืนจากข้อผิดพลาด:

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

ป้ายกำกับ – เมื่อผู้ใช้ต้องป้อนข้อความ จะมีป้ายกำกับที่เกี่ยวข้องซึ่งอธิบายฟิลด์

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

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

4. แข็งแกร่ง

นอกจากจะสามารถเข้าถึงได้แล้ว เนื้อหาของคุณต้องสนับสนุนเบราว์เซอร์ เทคโนโลยี ฯลฯ ที่หลากหลาย

แนวปฏิบัติ 4.1 เข้ากันได้

สิ่งนี้เกี่ยวข้องกับการทดสอบกับตัวแทนผู้ใช้และเทคโนโลยีช่วยเหลือที่หลากหลาย การทดสอบเบื้องต้นที่ดีสำหรับสิ่งนี้คือการใช้เครื่องมือตรวจสอบความถูกต้องของมาร์กอัป W3C เพื่อดูว่ามีข้อผิดพลาดใดๆ หรือไม่ (กล่าวคือตรวจสอบว่าโครงสร้าง/ไวยากรณ์ของ html, xhml ฯลฯ ถูกต้อง)

นี่คือตัวอย่างผลลัพธ์:

นอกจากนี้ คุณต้องทดสอบกับเบราว์เซอร์หลายตัวเพื่อให้แน่ใจว่าโหลดเนื้อหาอย่างถูกต้อง

และมันก็คุ้มค่าที่จะโหลดหน้าในเบราว์เซอร์แบบข้อความเท่านั้น (เช่น Lynx)

ข้อมูลทั้งหมดสามารถแยกวิเคราะห์ได้อย่างถูกต้องหรือไม่?

มีแท็กเริ่มต้นและสิ้นสุดที่เหมาะสมภายในส่วนต่างๆ ของเนื้อหาหรือไม่ เพื่อให้ง่ายต่อการระบุว่าส่วนเริ่มต้นและสิ้นสุดที่ใด

องค์ประกอบซ้อนกันอย่างถูกต้องหรือไม่?

มีแอตทริบิวต์หรือรหัสที่ซ้ำกันที่ทำให้แยกแยะองค์ประกอบได้ยากหรือไม่

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

ต่อไปนี้คือตัวอย่างบางส่วนของการควบคุมและสิ่งที่คุณต้องรู้ให้ได้:

• ช่องทำเครื่องหมาย - ถูกทำเครื่องหมายหรือไม่?
• โฟกัส - องค์ประกอบใดที่มีจุดโฟกัสและสามารถเข้าใจโดยทางโปรแกรม (ไม่ใช่แค่การมองเห็น)

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

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

แบบฟอร์มได้รับการออกแบบมาอย่างถูกวิธีหรือไม่?

ในการทำให้แบบฟอร์มสามารถเข้าถึงได้ คุณจะต้องแน่ใจว่าได้เปิดใช้งานสิ่งต่อไปนี้:

• ความสามารถในการใช้แท็บเพื่อนำทางผ่านแบบฟอร์ม
• ความสามารถในการใช้แท็บเพื่อนำทางผ่านแบบฟอร์ม

<แบบฟอร์ม>

<label for=”fname”>ชื่อ:</label><br>

<input type=”text” id=”fname” name=”fname”><br>

<label for=”lname”>นามสกุล:</label><br>

<input type=”text” id=”lname” name=”lname”>

</form>

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

สรุป

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