เว็บที่ทุกคนใช้ได้ ไม่ใช่ฟีเจอร์เสริมนะครับ

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

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

เราเพิ่งแก้เรื่องนี้เสร็จเมื่อเช้านี้เองครับ และมันไม่ใช่บั๊กที่ใครจะเจอด้วยการนั่งดูหน้าจอเฉย ๆ

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

accessibility คืออะไรกันแน่

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

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

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

และที่คนมักลืมคือ กลุ่มที่ใหญ่ที่สุดไม่ใช่คนที่มีข้อจำกัดถาวรด้วยซ้ำครับ

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

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

ทำไมมันถึงสำคัญกว่าที่หลายคนคิด

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

ข้อสองซึ่งหนักกว่าคือ มันพังแบบเงียบ ๆ

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

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

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

แล้วเราคิดกับมันยังไง

มีคนบอกว่าเว็บบริษัทไม่ต้องคิดเรื่องนี้ก็ได้ เพราะคนกลุ่มนั้นคงไม่ได้เข้ามาอยู่แล้ว

เราไม่เห็นด้วยอย่างยิ่งครับ

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

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

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

และเพราะข้อสุดท้ายนี่แหละ เราถึงต้องไปตรวจ

หนี้ที่เราเขียนประกาศไว้เอง

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

ประโยคปิดของหัวข้อนั้นคือ เราเขียนไว้ตรงนี้เพื่อให้มันเป็นหนี้ที่มองเห็น ไม่ใช่ช่องว่างที่เงียบ

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

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

ของที่ผ่าน และเราเพิ่งรู้ว่ามันผ่านจริง

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

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

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

กับดักสแปมที่เกือบทำให้ใบสมัครหายไปเงียบ ๆ

อันนี้เป็นข้อที่ผ่าน แต่ผมอยากเล่าเป็นพิเศษ เพราะถ้าพลาดขึ้นมา มันพลาดแบบที่ไม่มีใครรู้เลยครับ

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

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

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

สี่อย่างที่ไม่ผ่าน

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

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

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

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

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

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

แก้ที่ต้นเหตุ ไม่ใช่ไล่แก้ทีละช่อง

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

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

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

เรื่องที่เราตรวจแล้ว แต่ยังตอบไม่ได้

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

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

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

สี่ข้อนี้ใช้เวลาแก้รวมกันไม่ถึงครึ่งวัน

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

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

ถ้าเพื่อน ๆ อยากลองกับงานของตัวเอง

ไม่ต้องมีเครื่องมืออะไรเลยครับ เอาแค่คีย์บอร์ดของคุณ เปิดหน้าหลักของผลิตภัณฑ์ เก็บมือออกจากเมาส์ แล้วกด Tab อย่างเดียวจนจบหน้า

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

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

ถ้าอยากให้เราช่วยดูระบบหรือเว็บที่คุณกำลังทำอยู่ ติดต่อเราได้ เลยครับ