คะแนนเต็มทุกช่อง แต่เปิดดูแล้ว ไม่อยากอ่าน

ช่วงที่ 1ไล่คะแนนจนเขียวหมด แล้วเปิดดูแล้วอยากปิด

อยากได้ lighthouse score สูงๆ ไม่ใช่เรื่องผิดเลย (Lighthouse คือเครื่องมือของ Chrome ที่ตรวจหน้าเว็บแล้วให้คะแนน 0 ถึง 100 ทั้งความเร็ว การเข้าถึง และ SEO) หน้าที่โหลดช้า ปุ่มเล็กจนนิ้วกดไม่โดน ฟอนต์ที่กระพริบตอนโหลด พวกนี้ทำร้ายคนอ่านจริงทั้งนั้น เราก็ไล่เก็บของพวกนี้เหมือนกัน

รอบหนึ่งเราเขียนสคริปต์ไล่กวาดทั้งหน้าเว็บบนขนาดจอมือถือ เก็บทุกอย่างที่แปลงเป็นตัวเลขได้ overflow แนวนอน (เนื้อหาที่ล้นออกนอกจอจนต้องเลื่อนซ้ายขวา) เท่ากับ 0 · tap target ครบทุกปุ่ม คือปุ่มใหญ่พอให้นิ้วโป้งกดโดน · ฟอนต์โหลดขึ้นทุกตัว · console ไม่มี error สักบรรทัด คือช่องที่เบราว์เซอร์พ่นข้อความผิดพลาดออกมา ไม่มีข้อความอะไรโผล่เลย รันจบแล้วเขียวหมดทุกช่อง

พอส่งให้คนเปิดดูของจริงบนมือถือ ความเห็นกลับมาสั้นมาก หน้ามันดูเหมือนงานเล่นๆ ไม่น่าเชื่อถือพอจะให้ใครอ่าน

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

ช่วงที่ 2ค่า 0 ที่เอามาเป็นหลักฐาน คือผลของกฎ layout ที่วางผิด

วันเดียวกันนั้นเอง เราเจอเรื่องเดิมซ้ำอีกรอบ คราวนี้กับตาราง

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

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

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

เก็บบทเรียนตรงนี้ให้ตรง เคสนี้ไม่ได้แปลว่าความอ่านง่ายวัดไม่ได้ มันแปลว่าเราเลือกตัววัดผิดตัว แล้ววางกฎ layout ผิดข้อ ตัวเลขที่ควรดูไม่ใช่ overflow ของทั้งหน้า แต่เป็นความกว้างต่ำสุดของคอลัมน์ หรือจำนวนตัวอักษรต่อบรรทัดในเซลล์ สองอย่างนี้นับได้ตรงๆ ทั้งคู่ ส่วนกฎ layout ที่ถูก มีคนเขียนไว้เป็นมาตรฐานก่อนเราแล้ว WCAG 2.2 ข้อ reflow (WCAG คือมาตรฐานการเข้าถึงเว็บของ W3C องค์กรที่วางมาตรฐานกลางของเว็บ) ยกเว้นตารางข้อมูลออกจากกฎห้ามเลื่อนสองแกน แล้วแนะนำให้วางตารางไว้ในกล่องที่เลื่อนได้ของตัวเอง เพื่อให้เนื้อหาที่เหลือบนหน้ายังไหลตามจอได้ตามปกติ ตรงกับทางแก้ที่เราคลำจนเจอเอง ต่างกันแค่เราไปเจอทีหลัง

ช่วงที่ 3ไม่ใช่ตัวตรวจพัง แต่เป็นชุดตัววัด ที่เลือกผิดชุด

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

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

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

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

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

เรื่องตัวตรวจที่ตายเงียบแล้วรายงานกลับมาว่าไม่เจออะไร เราเคยเล่าไว้แล้วในโพสต์ mutation testing กับ positive control (วิธีจงใจทำให้โค้ดผิดเพื่อดูว่าเทสต์จับได้ไหม กับการป้อนของที่ต้องถูกปฏิเสธเพื่อดูว่าตัวตรวจยังยิงออก อ่านเต็มได้ในโพสต์นั้น) ตรงนั้นคำถามคือ "ตัวตรวจยังทำงานอยู่จริงไหม" แล้ววิธีตอบคือทำให้มันแดงให้ดูสักครั้ง รอบนี้คนละคำถามกันเลย ตัวตรวจยังมีชีวิตดี ตอบถูกทุกข้อ คำถามที่ค้างอยู่คือ "ชุดที่วัดได้ ครอบคลุมสิ่งที่เราอยากได้จริงหรือเปล่า" สองคำถามนี้ต้องถามแยกกัน เพราะทำให้ตัวตรวจแดงได้ ไม่ได้แปลว่าสิ่งที่มันตรวจคือสิ่งที่สำคัญ

ช่วงที่ 4เรื่องเดียวกัน เกิดกับงานเขียน ไม่ใช่แค่หน้าจอ

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

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

ทุกรอบเราบอกตัวเองไปแล้วว่า "ตรวจแล้ว" สิ่งที่ตรวจจริงๆ คือสิ่งที่วัดได้แทนของจริง ไม่มี em-dash ศัพท์ถูกอธิบายครบ ตัวกันพลาดทุกตัวเขียว ส่วนเป้าหมายจริงคือคนแปลกหน้าคนหนึ่งอ่านแล้วได้อะไรกลับไป กับเราลงมือทำมาพอจะเล่าเรื่องนี้ได้จริงหรือยัง สองอย่างนั้นไม่เคยถูกตรวจเลย

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

ช่วงที่ 5ให้สายตาใหม่เป็นคนชี้ขาด ช่องติ๊กเป็นแค่บันทึก

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

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

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

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