ขอสารภาพครับ เราทำอะไรพลาดไปบ้างในเว็บนี้

ห้าตอนที่ผ่านมา เราเล่าแต่เรื่องที่คิดมาดีแล้วครับ ตอนนี้ขอเล่าเรื่องที่คิดไม่ถึงบ้าง

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

หนึ่ง มุมรูปที่โค้งกว่ากล่องที่ครอบมันอยู่

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

แต่คำสั่งนั้นไม่เคยทำงานเลยครับ รูปมันโค้ง 32 พิกเซลอยู่ดี มุมการ์ดเลยโผล่ออกมาเป็นเสี้ยวสีขาวรอบมุมรูปครบทั้งสี่ด้าน

สาเหตุน่าสนใจมากเลยแหละครับ CSS utility สองตัวที่กำหนด border-radius บนอิลิเมนต์เดียวกัน มันไม่ได้ทับกันตามลำดับที่เราเขียนใน HTML แต่ทับกันตามลำดับที่มันไปวางเรียงอยู่ในไฟล์ CSS ที่เครื่องมือสร้างขึ้น ซึ่งเราไม่ได้เป็นคนกำหนด เขียน rounded-none ไว้ทีหลังก็ไม่ได้แปลว่ามันจะชนะครับ

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

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

บทเรียน ถ้าบั๊กเกิดจากการที่สองอย่างขัดกันได้ อย่าไปแก้ที่ผลลัพธ์ครับ ให้แก้ที่การทำให้มันขัดกันไม่ได้ตั้งแต่แรก

สอง หน้ามืดที่มีแถบขาวคาดกลาง

โหมดมืดทำงานถูกต้องทุก section ครับ แต่มีแถบสีขาวพาดขวางหน้าจอตรงแถบโลโก้ลูกค้าเสียอย่างนั้น

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

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

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

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

สาม สีแบรนด์สีเดียวที่ทำงานสองหน้าที่

สีน้ำเงินของแบรนด์เราถูกใช้ทั้งเป็นสีถมปุ่ม และเป็นสีตัวอักษรของลิงก์

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

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

บทเรียน ระบบสีที่ตั้งชื่อตาม "สีอะไร" จะพังทันทีที่มีธีมที่สอง ส่วนระบบที่ตั้งชื่อตาม "ใช้ทำอะไร" จะไม่พังครับ

สิ่งที่เรายังไม่ได้ทำ จนกระทั่งต้องมาเขียนเรื่องนี้

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

แล้วพอเขียนรายการออกมาจริง ๆ ปรากฏว่ามันสั้นพอที่จะลงมือทำเลย เราก็เลยทำ

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

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

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

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

สิ่งที่ยังขาดอยู่จริง ๆ

เราไม่ได้ทดสอบกับโปรแกรมอ่านหน้าจอจริงอย่างเป็นระบบครับ การนั่งอ่านโครงสร้าง HTML แล้วเชื่อว่ามันน่าจะฟังดูถูกต้อง ไม่ใช่สิ่งเดียวกับการนั่งฟัง VoiceOver หรือ NVDA อ่านหน้านั้นจริง ๆ

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

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

ปิดซีรีส์

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

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