ทำฟอร์มสมัครงานเว็บให้เป็นมิตรกับผู้บกพร่องการมองเห็น: ARIA, คอนทราสต์สี และ HTML

คุณเคยลองหลับตาแล้วสมัครงานผ่านเว็บไซต์ดูบ้างไหม? ถ้าลองทำดู คุณอาจจะพบว่ามันยากกว่าที่คิดเป็นไหนๆ สถิติจาก WebAIM แสดงให้เห็นว่ากว่า 80% ของหน้าเว็บไซต์มีปัญหาด้านการเข้าถึง (Accessibility) โดยเฉพาะฟอร์มต่างๆ ซึ่งในมุมมองขององค์กร ฟอร์มสมัครงานที่ไม่เข้าถึงได้ เท่ากับว่าคุณกำลังตัดโอกาสของผู้สมัครที่มีความสามารถเพียงเพราะพวกเขาใช้ Screen Reader หรือมีปัญหาทางสายตา

วันนี้เราจะมาเจาะลึกวิธีการปรับฟอร์มสมัครงานบนเว็บให้เป็นมิตรกับผู้บกพร่องการมองเห็น ด้วย 3 หัวใจหลัก ได้แก่ โครงสร้าง HTML, การใช้ ARIA และการจัดการคอนทราสต์สี

ทำไมการเข้าถึงฟอร์มสมัครงานจึงสำคัญ?

การทำเว็บให้เข้าถึงได้ (Web Accessibility) ไม่ใช่แค่เรื่องของกฎหมายหรือมาตรฐาน WCAG เท่านั้น แต่มันคือการให้โอกาสที่เท่าเทียมกัน ผู้บกพร่องการมองเห็นอาจใช้ซอฟต์แวร์อ่านหน้าจอ (Screen Reader) เช่น NVDA หรือ VoiceOver เพื่อนำทางเว็บไซต์ หากโครงสร้างฟอร์มของเราไม่ได้มาตรฐาน โปรแกรมเหล่านี้จะอ่านไม่ออก ทำให้ผู้ใช้ไม่รู้ว่าต้องกรอกข้อมูลอะไร หรือกรอกผิดพลาดตรงไหน

โครงสร้าง HTML ที่ถูกต้องคือพื้นฐานที่สุด

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

ใช้ Semantic Elements

อย่าใช้ <div> หรือ <span> มาทำฟอร์ม ให้ใช้ <form>, <fieldset>, และ <legend> เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้องกัน

<form action="/submit" method="POST">
  <fieldset>
    <legend>ข้อมูลส่วนตัว</legend>
    <!-- ช่องกรอกข้อมูล -->
  </fieldset>
  <fieldset>
    <legend>ประสบการณ์การทำงาน</legend>
    <!-- ช่องกรอกข้อมูล -->
  </fieldset>
</form>

การใช้ <fieldset> ร่วมกับ <legend> จะทำให้ Screen Reader สามารถประกาศชื่อกลุ่มของข้อมูลได้ เช่น เมื่อผู้ใช้เข้ามาในส่วนของประสบการณ์การทำงาน โปรแกรมจะอ่านว่า "ประสบการณ์การทำงาน" ก่อนที่จะเริ่มอ่านรายละเอียดในแต่ละช่อง

การกำกับด้วย Label

ทุกๆ ช่องกรอกข้อมูล (Input) ต้องมี <label> ที่เชื่อมโยงกันด้วย id และ for อย่างถูกต้อง ห้ามใช้ placeholder แทน label เด็ดขาด เพราะ placeholder จะหายไปเมื่อผู้ใช้เริ่มพิมพ์ และ Screen Reader มักจะข้ามมันไป

<label for="firstname">ชื่อ:</label>
<input type="text" id="firstname" name="firstname" required>

บทบาทของ ARIA เมื่อ HTML ยังไม่พอ

ARIA (Accessible Rich Internet Applications) เป็นชุดของ attribute ที่ช่วยเสริมความสามารถให้กับ HTML โดยเฉพาะในส่วนที่เป็น Dynamic หรือมีการโต้ตอบที่ซับซ้อน แต่ขอย้ำว่า "กฎทองของ ARIA คือ ถ้าใช้ HTML แทนได้ ให้ใช้ HTML" (No ARIA is better than bad ARIA)

aria-describedby สำหรับคำอธิบายเพิ่มเติม

บางครั้งฟอร์มสมัครงานมีข้อกำหนดพิเศษ เช่น รหัสผ่านต้องมีตัวเลขและอักษรพิเศษ เราสามารถใช้ aria-describedby เพื่อให้ Screen Reader อ่านคำอธิบายนี้ให้ผู้ใช้ฟังได้

<label for="password">รหัสผ่าน:</label>
<input type="password" id="password" aria-describedby="pwd-hint" required>
<small id="pwd-hint">รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร ประกอบด้วยตัวเลขและอักษรพิเศษ</small>

การจัดการสถานะข้อผิดพลาด (Error Handling)

เมื่อผู้ใช้กรอกข้อมูลผิดพลาด เช่น ใส่อีเมลไม่ถูกรูปแบบ ระบบต้องแจ้งเตือนให้ Screen Reader รับรู้ทันที เราจะใช้ aria-invalid="true" และ aria-describedby เพื่อชี้ไปยังข้อความ Error

<label for="email">อีเมล:</label>
<input type="email" id="email" aria-invalid="true" aria-describedby="email-error" required>
<span id="email-error" role="alert" style="color: red;">
  รูปแบบอีเมลไม่ถูกต้อง กรุณาตรวจสอบอีกครั้ง
</span>

การใส่ role="alert" จะทำให้ Screen Reader หยุดและอ่านข้อความนั้นทันทีเมื่อมันปรากฏขึ้นบนหน้าจอ

คอนทราสต์สีที่ช่วยให้มองเห็นชัดเจน

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

ค่ามาตรฐานคอนทราสต์

ตามมาตรฐาน WCAG 2.1 ระดับ AA ข้อความธรรมดาต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 และข้อความขนาดใหญ่ (18pt ขึ้นไป) ต้องมีอย่างน้อย 3:1

คุณสามารถใช้เครื่องมืออย่าง WebAIM Contrast Checker เพื่อตรวจสอบสีของคุณได้

หลีกเลี่ยงการใช้สีเป็นตัวบ่งบอกสถานะเพียงอย่างเดียว

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

<label for="phone">เบอร์โทรศัพท์ <span aria-hidden="true" style="color: red;">*</span><span class="sr-only">จำเป็นต้องกรอก</span></label>
<input type="tel" id="phone" required>

คลาส sr-only เป็นเทคนิคที่ซ่อนข้อความจากสายตาคนทั่วไป แต่ Screen Reader ยังสามารถอ่านได้

การนำทางด้วยคีย์บอร์ด (Keyboard Navigation)

ผู้บกพร่องการมองเห็นส่วนใหญ่ไม่ได้ใช้เมาส์ พวกเขาจะใช้ปุ่ม Tab เพื่อเลื่อนไปยังช่องต่างๆ ตามลำดับ ดังนั้นลำดับการเลื่อน (Tab Order) ต้องเป็นไปตามโครงสร้าง HTML จากบนลงล่าง จากซ้ายไปขวา

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

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

input:focus, textarea:focus, select:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

อย่าเพิ่ม outline: none; โดยไม่มีการกำหนด style ทดแทน เพราะมันจะทำให้ผู้ใช้คีย์บอร์ดหลุดไปจากเส้นทางได้ง่าย

สรุปและก้าวต่อไป

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

คุณลองหลับตาแล้วทดสอบฟอร์มสมัครงานของคุณดูได้เลย หรือจะลองเปิด NVDA บน Windows หรือ VoiceOver บน Mac เพื่อจำลองสถานการณ์จริงดูสักครั้ง แล้วคุณจะรู้ว่ามีอะไรต้องปรับแก้รีบทำกันเลย!