ขอแจ้งเรื่องปัญหาของ theme BN v.4 ตามนี้นะครับ

คือตามที่ผมได้ลองถามคุณ MK ว่า เห็นว่าช่วงนี้ ทาง BN กำลังปรับปรุง theme อยู่ และพอเข้าไปดู ก็เห็นว่า ตัวเลือกใน my account > edit ที่เคยมีให้เลือก theme v. เก่าๆ นั้นหายไป ก็สอบถามไปว่า แล้วสรุปคือจะตัดออกเลยหรือว่าอย่างไร

คุณ MK ก็ตอบกลับมาว่า "อยากได้ก็ต้องทำส่งมาครับ"

ซึ่งก็งงว่า มันเกี่ยวกันตรงไหน?
(พึ่งเข้าใจว่า จากการ upgrade Drupal มันจึงไม่ support theme v. เก่า ก็โอเคครับ)

คือปัญหาของผมที่อยากให้มี theme v. เก่าก็เนื่องมาจากว่า theme v.4 ซึ่งเข้าใจว่าก็คือ theme หลักของปัจจุบัน นั้น มันขาดความ accessible แบบ theme เก่าอยู่นะครับ

ผมเข้าใจว่า หลักการข้อนึงที่ทาง BN ยึดถือมาตลอดก็คือ การเข้าถึงได้ของทุกคน (web accessibility) แต่ด้วย theme v.4 ที่ว่านี้ มันทำให้คนที่ใช้ screen reader เข้าถึงเนื้อหาแต่ละส่วนได้ยากขึ้นอะครับ

ขออธิบายก่อนดังนี้ (เอ่อ ซึ่งอาจจะทราบกันอยู่แล้วก็ได้)

การสำรวจหน้าเว็บของคนที่ใช้ screen readder นั้น จะใช้การกดปุ่มบน keyboard แต่ละปุ่ม ซึ่งจะแทนส่วนต่างๆ ขององค์ประกอบบนหน้าเว็บ เช่น

h = heading
p = paragraph
i = list
e = edit box
b = bottom

เป็นต้น

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

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

ซึ่งปัญหามันอยู่ตรงนี้แหละครับ เพราะว่า theme BN v.4 มันไม่มี heading ตรงแต่ละพาดหัวข่าว หรือส่วนอื่นๆ บางส่วน ที่มันเคยมีและใช้งานได้ดีมากใน theme v.3

ผมเคยบอกไว้แล้วในกระทู้ bug report ตอนที่ theme v.4 ออกใหม่ๆ แต่ก็ไม่ทราบว่า ทั้งสองท่าน มองข้าม หรืออ่านเจอแล้วแต่ไม่เข้าใจ อย่างไรนะครับ ถึงไม่ได้แก้ไขจุดนี้ให้

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

Hiring! บริษัทที่น่าสนใจ

Carmen Software company cover
Carmen Software
Hotel Financial Solutions
Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
MuvMi (Urban Mobility Tech Co.,Ltd.) company cover
MuvMi (Urban Mobility Tech Co.,Ltd.)
Shape the future of urban mobility towards affordable, clean, and safe solutions
T.N. Digital Solution Co., Ltd. company cover
T.N. Digital Solution Co., Ltd.
TNDS has been involving in every first move of banking’s major digital transformation.
KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
The Gang Technology Co., Ltd. company cover
The Gang Technology Co., Ltd.
We're a Digital Agency that helps our customers transform their business into digital with ease.
LTMH company cover
LTMH
LTMH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

ไม่เข้าใจครับ กรณีแบบนี้ถ้าคาดหวังอะไรอธิบายเป็นคำพูดคงยาก ลองทำ mock up ส่งมาดูดีกว่าครับ

ถ้าเป็น code ก็ส่ง html mockup มาได้ครับ

OH! ผมคงไม่มีปัญญาทำ mock up ให้ดูได้หรอกครับ ให้อธิบายด้วยตัวหนังสือได้แค่นั้น

คือปัญหามันไม่ใช่ว่า หน้า My account > edit ของผมมันหายไปนะครับ แต่ที่มันหายไปคือ ตัวเลือกในหน้านั้น ในส่วนของการเลือก theme ซึ่งแต่ก่อนเราจะสามารถเลือกได้ว่าจะใช้ theme v. ไหน ซึ่งเท่าที่จำได้ มันเคยมีให้เลือก 3 v. = v.2 v.3 v.4

แต่ปัญหาจริงๆ ก็คือว่า ที่ต้องถามถึงส่วนของการเลือก theme ก็เพราะ theme v. ปัจจุบัน ด้วยความที่ code ผิดพลาด หรือตั้งใจทำออกมาให้เป็นอย่างนี้ก็ไม่ทราบได้ คือเหมือนว่า tag <h*> ในบางหัวข้อ มันหายไปอะครับ อย่างเช่นพาดหัวข่าวเป็นต้น ที่เห็นได้ชัดที่สุด

เมื่อเป็นเช่นนี้ ทำให้คนที่ต้องใช้ screen reader ในการอ่านเว็บ ไม่สามารถกำหนดการเคลื่อนไปยังตำแหน่งที่ต้องการจริงๆ ได้ เพราะว่าปกติก็จะใช้การกด H เพื่อ move to next heading

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

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

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

แต่หลักๆ ที่เป็นปัญหาที่สุดตอนนี้คือพาดหัวข่าว เพราะไม่สามารถใช้ key ไหน เพื่อเลื่อนไปแต่ละข่าวๆ ได้เลย

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

edit: ขอเพิ่มเติมอีกนิด ความจริงแล้ว ยังมีอีกหลาย tag ที่ถ้าหากใส่แล้วจะทำให้คนที่ใช้ screen reader สามารถใช้เว็บได้สะดวกยิ่งขึ้น แต่ผมก็ไม่ทราบว่าทำไมหลายๆ เว็บถึงเลือกที่จะไม่ใส่ให้ครบทั้งหมด เดาเอาว่า มันอาจจะเกี่ยวกับหน้าตาที่เปลี่ยนไป ทำให้ไม่ได้หน้าตาอย่างที่อยากได้ (หรือเปล่า)

เท่าที่อ่าน คือ ... จขกท. บอกว่า Theme ในปัจจุบันใช้ tag <div> แทนที่จะเป็น <h1> หรือ h อื่น ๆ ซึ่งสำหรับผู้ใช้ตามปรกติจะไม่มีปัญหาเพราะว่าแสดงผลถูกต้อง แต่ผู้ใช้กลุ่มที่ต้องใช้งานโปรแกรมจำพวก Screen Reader (เช่น พวกผู้พิการทางด้านการมองเห็น ต้องอาศัยโปรแกรมเพื่อที่จะอ่านหน้าจอให้ฟัง) จะมีปัญหาเกี่ยวกับการ navigate ไปยังที่ต่าง ๆ บนหน้าจอ เพราะโปรแกรมประเภทนี้จะใช้ tag ในการที่จะเลื่อนหน้าจอไปยังตำแหน่งต่าง ๆ เช่น กด h ก็เลื่อนไปยัง header ต่อไป เป็นต้น ในขณะที่ใน Theme ปัจจุบันใช้ tag <div> ทั้งหมดทำให้ไม่สามารถแยกแยะได้ว่าตำแหน่งไหนเป็น header (เพราะจะให้เดาจากชื่อ class ใน CSS ก็คงจะยากไปนิด เพราะไม่รู้ว่า designer จะใช้ชื่อคลาสอะไร)

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

ทั้งหมดคือเท่าที่ผมอ่านและแยกแยะดูนะ ผมเองก็ไม่มั่นใจเหมือนกัน

ผมก็เข้าใจเท่าคุณ mr_tawan นั่นล่ะครับ

คำถามคือ จะให้แก้อย่างไร ไม่มีรายละเอียดอะไรมาให้เลย เป็นการแจ้งบั๊กที่แย่มาก

ต้องแก้ Theme น่ะครับ ให้กลับมาใช้ tag ปกติ
แล้วเขียน css บังคับ tag ต่างๆ แทน ที่จะใช้

ระบุน่ะครับ
แต่ปัญหาคือคงต้องรื้อทั้งหมด

ส่วนแก้ปัญหาเฉพาะหน้า แนะนำให้นำ Theme เก่ากลับมาให้ Edit ใน Profile กันก่อนน่ะครับ

อ่า..ผมเข้าใจว่า

  • อยากให้เลือก theme เก่ากลับมาได้(ซึ่งจบไปด้วยการทำไม่ได้เพราะไม่รองรับ)

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

ถ้าผมเข้าใจไม่ผิด คุณ Virusfowl นั้นน่าจะมีปัญหาส่วนตัวทำให้ต้องใช้อุปกรณ์ Accessibility ในการอ่าน (ถ้าใครไม่เข้าใจเรื่อง Accessibility ขอให้เข้า Control Panel แล้วดูที่ Icon Accessibility)

อุปกรณ์นี้น่าจะมีการ Scan หา Tag ต่างๆ บนหน้าเว็บ และผูกเข้ากับปุ่มบน Screen Reader

เมื่อ Tag เฉพาะกิจเช่น H1 H2 H3 etc หายไป จึงทำให้ปุ่มต่างๆ ใช้งานไม่ได้

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

ผมเคยพยายามหาซอฟต์แวร์พวกนี้มาใช้งาน (เพื่อทดสอบ accessibility ของเว็บนี้) แต่ไม่สำเร็จครับ เหมือนที่สมาคมตาบอดใช้งานอยู่จะเป็น proprietary software ที่ได้รับบริจาค (หรือซื้อ???) มาเพื่อใช้งานเฉพาะอย่าง ไม่สามารถนำมาใช้ทดสอบเว็บทั่วๆ ไปได้

  1. ธีมเก่าถูกเก็บไว้เพราะธีมใหม่เดิมมีปัญหาความเร็วครับ ตอนนี้แก้แล้วคงปลดไป
  2. ทางออกที่ดีคือการแก้ธีมใหม่ให้มี accessibility ที่ดี (ซึ่งผมยินดีทำ) แต่การแจ้งปัญหาว่า "เหมือนธีมเดิม" อย่างนี้ผมแก้ให้ไม่ได้ครับ อาจจะต้องขอให้ list มาว่าปัญหาอยู่ตรงไหนบ้าง

ปล. หัวข่าวครอบด้วย tag h ผมรับไว้แล้วนะครับ ตอนนี้กำลังทำอยู่บนระบบทดสอบ ยังมีปัญหา css อยู่บ้าง แต่ในสัปดาห์นี้น่าจะได้ครับ

อย่างที่คุณ mr_tawan อธิบายเลยครับ คือ ปัญหามันอยู่ที่ตรง

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

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

แต่สถานการตอนนี้กลายเป็นว่า แทบทุกคนที่เข้ามาอ่านไม่เข้าใจเกือบทุกคำที่ผมอธิบาย

  • accessible
  • Screen reader
  • heading

ซึ่งแน่นอนว่า ถ้าไม่เข้าใจสองคำนี้ เป็นผม ผมก็อ่านปัญหาด้านบนไม่เข้าใจเหมือนกัน...

โอเคครับ จะอธิบายให้ชัดเจนขึ้นละกัน จะไม่ใช้ฐานความคิดว่า พวกคุณๆ น่าจะรู้กันอยู่แล้ว

Screen Reader คือโปรแกรมที่ใช้สำหรับผู้พิการทางสายตา ถูกต้องตามที่หลายๆ คนคิดว่าน่าจะใช่นั่นล่ะครับ ถัดมา ก็ถูกตามที่หลายๆ คนด้านบน ได้บอกไว้ ก็คือ การ navigate หน้าเว็บของ โปรแกรมพวกนี้ ใช้การเคลื่อนไปยังตำแหน่งที่มี tag กำหนดไว้ ทาง w3c จึงมีข้อกำหนดว่า เว็บที่ทุกคนเข้าถึงได้ (WebAccessibility) จะต้องใส่ tag ต่างๆ อย่างไรบ้าง มาตรฐาน WAI

ซึ่งจุดนี้ ผมถึงใช้คำอย่างด้านบนว่า "ความจริงยังมี tag อื่นๆ อีก" ซึ่งผมก็เข้าใจว่ามันเป็นหน้าที่ของคนทำเว็บอยู่แล้ว ที่จะต้องศึกษามาตรฐานพวกนี้ และจะนำมาใส่หรือไม่ใส่ในเว็บของตัวเองก็ได้ ซึ่งก็ไม่ใช่อะไรที่ผมจะต้องบอกหรือสั่งให้ต้องใส่ tag a tag b tag c เพราะมันก็มีมาตรฐานให้ศึกษากันเองได้อยู่แล้ว และหน้าที่การตัดสินใจว่าอะไรควรไม่ควร ก็ควรเป็นของ webmaster

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

ถึงคุณ platalay ขอบอกว่า จากการใช้งานจริง accesskey ใช้งานจริงได้น้อยมากครับ เพราะมันจะไปตีกับ shortcut อื่นๆ ของ browser เองที่ต้องใช้ ปุ่ม alt เพื่อเรียกใช้ เช่น shortcut ต่างๆ บน menu bar

ถึงคุณ lew ตัวทดสอบ accessibility ผมเคยเห็นผ่านๆ เหมือนจะเป็น extension ของ FF แต่ไว้ถ้าหาเจอจะมาแปะลิ้งไว้ให้นะครับ แต่ถ้าหากสนใจจะนำ screen reader ไปทดสอบเหมือนคนที่ใช้งานจริงๆ เลย ก็มี open source screen reader ที่สามารถนำไปใช้ได้แบบฟรีๆ ครับ NVDA

  • ผมรู้จัก screen reader ครับ และเคยพยายามศึกษามาตรฐาน WAI แต่ไม่สำเร็จ
  • ผมไม่รู้ครับว่าต้องทำ tag อะไรบ้าง จำได้บ้างเช่น img ต้องมี alt ก็เท่านั้น
  • มันไม่มีใครมาจำหมดจริงๆ หรอกครับว่าจะทำอย่างไร คุณอาจจะชี้ไปยัง validator หรืออธิบาย "อย่างชัดเจน" ไม่อย่างนั้นใครจะมาเอาใจทำตามที่คุณคาดหวังได้
  • การรายงานบั๊กที่ดีขั้นตอนมาตรฐานคือการ reproduce กับ expectation ครับ คุณอธิบายโดยบอกสิ่งที่คาดหวังไม่ได้ บั๊กก็ถูกทิ้่ง

ซึ่งก็ไม่ใช่อะไรที่ผมจะต้องบอกหรือสั่งให้ต้องใส่ tag a tag b tag c เพราะมันก็มีมาตรฐานให้ศึกษากันเองได้อยู่แล้ว

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

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

ผมไม่อยากให้คุณ mk รักษามาตรฐานการตอบคำถามแบบเดิมๆ เอาไว้ที่ว่า "ถ้าที่นี่ไม่มีอะไรที่ต้องการก็ไปหาที่อื่น" ผมคิดว่าคุณ mk สามารถทำทุกอย่างได้ดีกว่าที่ทำไว้ครับ ทุกอย่างจริงๆ

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

ซึ่งปัญหามันอยู่ตรงนี้แหละครับ เพราะว่า theme BN v.4 มันไม่มี heading ตรงแต่ละพาดหัวข่าว หรือส่วนอื่นๆ บางส่วน ที่มันเคยมีและใช้งานได้ดีมากใน theme v.3

ผมคิดว่าประโยคนี้ชัดเจนแล้วนะครับ

แล้วในเมื่อคุณเป็นคนแก้ไข theme v.3 ด้วยตัวเอง ก็น่าจะต้องทราบสิครับว่า ความต่างของ tag ที่ใส่หรือไม่ใส่ ระหว่าง theme v.3 และ theme v.4 มันอยู่ตรงไหนบ้าง และสิ่งที่ผมคาดหวัง (ประโยคตะกี้) ก็เป็นสิ่งที่สำคัญ แต่ส่วนอื่นๆ ที่ผมอาจจะไม่ได้อธิบายไว้ ก็เป็นแค่ "ถ้ามี" ก็ดี เพราะฉะนั้น ถ้าผมไม่อธิบายให้ละเอียดเอง แล้วคุณไม่ทำให้ ก็ไม่เป็นไรนะครับ

น่าเสียดายที่ผมไม่รู้จักและไม่เข้าใจ "reproduce กับ expectation" เลย เลยอาจเป็นผู้รายงานบั๊กที่ดีไม่ได้ พอดีอิ๊งผมมันอ่อนด้อยนักครับ :(

จากนี้

h = heading
p = paragraph
e = edit box
b = bottom
ที่พอจะแก้ง่ายสุด

หัวข่าวเพิ่ม ที่หัวด้วย h1
แล้วcopy css เดิมที่สั่งบังคับ div
เช่น content-title-box
มา เป็น content-title-box.h1

ใส่ h1 เข้าไปก่อน ก็จะเป็นแบบนี้

ค่อยตามไปแก้ css อีกที พอดี ในส่วนของ comment มันอยู่ใต้ class อื่นๆ เลยบังคับด้วย css อันนี้ไม่ได้

.content-title-box.h1 {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background: none repeat scroll 0 0 #4C6E9C;
font-size: 1.2em;
font-weight: bold;
margin: 0 0 5px;
padding: 5px 15px;
position: relative;
}

แต่ถ้าไปแก้ Theme ให้ มี tag h ที่หัว และ ใช้ css ด้านบนน่าจะใช้ได้เลย

แต่ผมไม่ได้ไล่ดูนะว่ามี css บังคับ h ไว้ที่ไหนอีกหรือเปล่า

ถถถถูก ต้องเลยคร้าบบบบ แบบนี้แหละ แต่ถ้าจะให้ผมอธิบายแบบคุณ Ton-or ก็เห็นจะไม่ได้ เพราะผมก็แค่ user not dev.

ปล. เมื่อไหร่ google docs จะสนับสนุน accessibility เพิ่มขึ้นครับ โดยเฉพาะ spreadsheet

o.k. ครับ เรื่อง tag h (heading) เป็นอันว่าทุกฝ่ายเข้าใจตรงกันแล้ว และคุณ lew ก็กำลังดำเนินการให้อยู่ ก็ต้องขอบคุณ ณ จุดนี้

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

ถ้าจะถามผม ผมก็คงให้ข้อมูลได้แค่ว่าให้ลองศึกษามาตรฐาน WAI ด้านบน หรือลองดู Web Content Accessibility Guidelines (WCAG) 2.0 ประกอบการตัดสินใจดูนะครับ ว่าทาง BN จะสามารถทำตามได้มากแค่ไหน

เพราะถ้าจะถามว่า ต้องมีอะไรบ้าง 1 2 3 ผมก็ให้คำตอบที่แน่นอนไปเลยไม่ได้ แม้จะเป็นแค่ความเห็นส่วนตัว เพราะแต่ละเว็บก็จะใส่ใจจุดนี้แตกต่างกัน แต่อย่างที่บอกคือ ถ้าให้อธิบายลักษณะง่ายๆ ก็คือ theme BN v.3 ถ้ามี tag ทั้งหมด คล้ายๆ เดิมแบบนั้น ก็ถือว่า BN มีความ accessible ค่อนข้างมากแล้วครับ

ความหมายทางนี้ คือ
เขาไม่ทราบต้องใส่ tag อะไรเพิ่มให้บ้างครับ
ok เข้าใจตรงกันแล้ว h ที่หัวข่าว

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

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

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

ถัดมา ผมไม่สามารถ save รูป และวงส่วนต่างๆ ให้ได้ครับเกินความสามารถจริงๆ :(

ส่วนเรื่องโปรแกรม screen reader ผมก็ได้ให้ลิ้งใน reply ของคุณ lew ด้านบนไปแล้วนะครับ แต่ไม่ได้แนบวิธีการใช้ไปให้ อันนี้ก็คงจะเกินความสามารถผมอีกแหละ

ผมว่าถ้าเพิ่ม tag h ครอบ tag a ใน div.content-title-box

แล้วเพิ่ม css

div.content-title-box > h1 {
margin: 0;
font-size: 1em;
}

ก็ได้แล้วนะครับ การแสดงผลก็ยังคงเหมือนเดิม

(ปล. ผมทดสอบบน Chrome และ Firefox ใน Mac นะครับ)

ขอแชร์ ประสบการณ์เรื่องนึง เมื่อนานมาแล้ว

ครั้งนึงผมก็เคย PM ไปคุยกับ web admin ของ เว็บ Citec จำประโยคแบบแน่นอนไม่ได้ แต่ก็ประมาณว่า ผมถามเขาว่า ทำไมเว็บคุณถึงไม่ให้ความสำคัญกับ มาตรฐาน W3C คือต้องบอกก่อนว่า ตอนนั้นความรู้ด้านคอมพิวเตอร์และความรู้ต่างๆ เกี่ยวกับเว็บของผมนั้นยังอ่อนด้อยกว่านี้มาก ไม่ว่าจะการใช้งาน หรือคำศัพท์ต่างๆ ที่คนทำเว็บเขารู้กัน แต่ผมตอนนั้นเรียกว่าไม่รู้อะไรเลยดีกว่า แต่เผอิญว่า มาตรฐาน W3C นั้นมันเป็นอะไรที่ใกล้ตัว เลยเข้าใจและรู้ว่ามันมีมาตรฐานนี้อยู่ และมันมีเพื่ออะไรบ้าง (ทั้งที่จริงตอนนั้นก็รู้แบบไม่ถูกนักซะด้วยซ้ำ) ซึ่งความจริงสิ่งที่ผมควรถามตอนนั้นก็คือ ทำไมเว็บของคุณถึงไม่ให้ความสำคัญกับ มาตรฐาน WAI และ WCAG (ตามลิ้งที่ได้แปะไว้ตามด้านบน) ต่างหาก

และคำตอบที่ผมได้กลับมาก็คือ W3C คืออะไร และทำไมผมถึงต้องทำตามมาตรฐานนี้

อ้าว! คุณเป็น web admin เป็นคนทำเว็บ คุณไม่รู้จักเหรอ ดันมาถามผมกลับซะอีก (นึกในใจแต่ก็ไม่ได้ตอบอะไรกลับไป) และเหตุการณ์นี้ ก็ผ่านไป....

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

นั่นคุณมองมุมคุณครับ

ยังมีงานอีกเยอะที่คนอื่นเขาทำ (นอกจากไปบ่นให้ admin ฟัง) ไม่ว่าจะเป็นตัวตรวจสอบต่างๆ จากทาง W3C การทำโลโก้โปรโมทมาตรฐาน ฯลฯ

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

คำแนะนำผมนะครับ

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

เยี่ยมครับคุณ lew

ใจนึงผมก็อยากจะรับอาสาคุยกับคุณ Virusfowl ให้เลยแล้วสอบถามถึงความต้องการต่างๆ ด้วยตัวเองก่อนที่จะนำมาบอกต่อให้กับคุณ mk และคุณ lew พัฒนาต่อไปครับ

แต่อีกใจนึงก็กลัวทำได้ไม่ดี แต่ถ้าคุณ lew ต้องการให้ผมช่วยด้านไหน(เกี่ยวกับเรื่องนี้) หากผมช่วยได้ก็อยากจะช่วยครับ อยากมีส่วนร่วมกับ Blognone บ้างครับ

ขอแนะนำตัวนิดนึงครับ Hook Event,Function ต่างๆ ของ Drupal เป็น,ทำ Theme ของ Drupal ง่ายๆ เป็นครับ

  • ถ้าจะให้ผมบอกปัญหาให้สั้นๆ ผมก็คงจะบอกเพียงว่าtheme BN v.4 มันไม่ accessible เพราะ heading มันหายไป ถ้าบอกแค่นี้ จะเข้าใจกันไหมครับ? เพราะฉะนั้นที่ต้องเขียนให้ยาว ก็เพราะผมพยายามอธิบายหลักการการใช้งานของคนที่ใช้โปรแกรมพวก screen reader ให้เข้าใจ ทั้งๆ ที่ก็() ไว้ว่าซึ่งอาจจะเข้าใจกันอยู่แล้วก็ได้ ก็คือพยายามอธิบายให้เห็นภาพได้มากที่สุด แต่ปัญหาอาจเป็นว่า ผมไม่สามารถใช้ภาษาของ dev. ที่จะพูดสั้นๆ แล้วพวก dev. ก็จะเข้าใจกันเลย เช่น tag h div css อะไรพวกนี้ คือถ้าใช้ฐานคิดว่า ต้องเป็น dev. เท่านั้นที่จะรายงานปัญหาการใช้เว็บได้ มันก็...
  • ผมไม่ทราบนะครับว่า ใครที่จะต้องอารมเสียกับกระทู้นี้ เพราะผมคิดว่า การทำงาน การแก้ปัญหา มันต้องใช้ความเข้าใจ และก็ค่อยๆ คิด ค่อยๆ แก้ไขกันไป ไม่ทราบว่าหากใช้อารมในการแก้ปัญหา งานมันจะลุล่วงได้อย่างไร แต่หากใช้คำว่าเสียเวลาแล้ว อันนี้คงต้องยอมรับ เพราะต้องใช้เวลานาน (หลายความเห็น) กว่าที่ผมจะอธิบายให้ คุณๆ เข้าใจปัญหาได้
  • เรื่อง guideline นั้น ทางสมาคมคนตาบอดมี คู่มือการพัฒนาเว็บไซต์ให้เป็น "เว็บไซต์ที่ทุกคนเข้าถึงได้" จากกระทรวงเทคโนโลยีสารสนเทสและการสื่อสาร Twcag 2009 ออกมา (เป็นไฟล์ .doc นะครับ และเนื่องจากลิ้งตรงของสมาคมเสีย ผมจึงอัปให้ใหม่เอง)
  • ส่วนการแปลงหน้าเว็บเป็นเสียงนั้น ผมนึกไม่ออกจริงๆ ว่ามันจะมีผลดีอย่างไรต่อนักพัฒนาเว็บนะครับ เพราะประเด็นมันก็มีอยู่ว่า แค่คุณทำเว็บให้ได้ตามมาตรฐาน ทั่วๆ ไปแล้ว พวกโปรแกรม screen reader ก็สามารถเข้าถึงได้อยู่แล้ว แต่ประเด็นที่ theme BN v.4 เกิดไม่ accessible ขึ้นมา ผมเข้าใจว่า น่าจะเกิดจากที่คนทำ theme เกิดลืมใส่พวก tag มาตรฐานมาให้ แค่นั้นล่ะครับ

ผมนี่ล่ะครับอารมณ์เสีย

ผมรู้หลักการของ h อยู่แล้ว และสามารถแก้ได้ให้ทันทีเลยไม่มีปัญหา บอกมาสั้นๆ ก็พอว่า "structure มันไม่ถูก เลยกดเลื่อนลำบาก"

ที่ผมมีปํญหาก็คือประโยคที่ว่า "ไม่ accessible" (ตรงไหน?) และ "แท็กอื่นๆ" (อะไร?) ซึ่งผมไม่มีปัญญาแก้ให้คุณได้แน่ๆ ครับ (แม้จะอยากช่วยก็ตาม) พอถามให้หนักๆ เข้า คุณก็ไล่ให้ไปอ่าน guideline แบบนี้แปลว่า?

  1. คุณก็รู้จัก tag h นี่ครับบอกตรงๆ ว่า "หัวข้อข่าวควรครอบด้วย header tag เพื่อให้ screen reader อ่านได้ถูกต้อง" ก็จบครับ ไม่ต้องมีคำว่า accessibility สักคำให้ใครงง
  2. การที่คุณคอมเมนต์วนไปวนมาในนี้ ยกเรื่องที่ไม่เกี่ยวตั้งแต่ W3C ไปมานี่ล่ะครับ ทำคนทำงานอารมณ์เสีย ผมก็อารมณ์เสีย คุณควรแสดงความเคารพต่อคนทำงานด้วยการเรียงลำดับเนื้อความให้กระชับและตรงประเด็นมากกว่านี้ครับ
  3. มี guideline ก็ดีครับ ไว้ผมจะอ่าน
  4. มันคือการ debug ครับ อันนี้ถ้าคุณไม่เคยอยู่ในกระบวนการพัฒนา ควรรับรู้ครับว่าการโยน guideline มาให้ทำตามสุดท้ายมันต้องทดสอบ ไม่อย่างนั้นมันไม่มีทางถูกต้อง ผมเคยขอซอฟต์แวร์พวกนี้จากสมาคมคนตาบอด ผมเองก็ไม่เข้าใจว่าทำไมมันขอยากขอเย็น ได้รับคำตอบแบบเดียวกับว่าทำตามมาตรฐานแล้วใช้ได้เลย สุดท้ายก็มาบ่นแบบนี้กัน

เห็นด้วยกับข้อหนึ่ง ถ้าตั้งแบบนี้ตั้งแต่แรกก็จบ เลย เพราะผมนั่งอ่าน และเดาเอาเหมือนกันว่าจะทราบว่าต้องการ tag h tag p

ใจเย็นๆ ท่าน

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

ผมเข้าใจอยู่ ว่าทาง bn ก็ยุ่ง ทาง user ก็มีสกิลไม่ถึงที่จะ แจ้ง report ให้ครบตามต้องการ

ผมว่าก็คงมีทางเลือกให้สองทาง

  • ทาง bn คงต้องเดาไล่เพิ่ม tag ให้หรือไล่ เทียบกับ theme เก่า
  • กับ user ก็พยายามหาทาง ใช้งาน web นี้ผ่านทาง ช่องทาง อื่น แทน เช่นเครื่องมือ ฟีด ข่าวต่างๆ

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

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

ขอแจมด้วยนะครับ

ผมเป็นคนออกแบบในส่วนดีไซน์เองครับ ในตอนนั้นยังไม่ค่อยเข้าใจ Drupal นัก จึงออกแบบตามที่คิดอยากให้เป็น ซึ่งปรากฏว่าเวลาทำธีม มันไม่ใช่แค่ไป "ปรับนิดๆ หน่อยๆ เหมือน v.3"

ทางอาสาสมัคร (คุณเดียร์คนหนึ่งละ ผมไม่แน่ใจว่ามีคนอื่นอีกหรือเปล่า) จึงเขียนธีมขึ้นใหม่ให้หมดเลยครับ ทำให้ v.4 ไม่ได้สร้างขึ้นบน v.3 และทำให้ยากมากที่จะรู้ว่า v.4 ต่างกับ v.3 ตรงไหนบ้าง ทำให้คุณ mk ถามว่า แล้วคุณ @virusfowl เจออะไรที่คิดว่าเป็นปัญหาอีกบ้าง ซึ่งถ้าระบุ Tag ไม่ได้ อย่างน้อยก็ Print Screen มาแล้วชี้ให้หน่อยว่าเกิดปัญหาตรงไหน และคิดว่าควรแก้อย่างไร (เรียกว่า Mock-up ครับ)

แต่หากคุณ @virusfowl เป็นผู้พิการทางสายตา,
สิ่งที่คุณ mk พลาดก็คือ "ไม่รู้ว่าคุณ @virusfowl เป็นผู้พิการทางสายตา จึงให้ทำในสิ่งที่ต้องเป็นคนตาปกติทำ (แม้จะใช้ศัพท์ยากไปนิด)" และสิ่งที่คุณ @virusfowl พลาดก็คือ การไม่บอกว่าตนเองเป็นผู้พิการทางสายตา ทำให้คนอื่นๆ คิดว่าเป็นเกรียนมาป่วน (ก็ขนาดใช้คำว่า accessible ได้ ถ้าเป็นคนรู้จักการทำเว็บแล้วรู้จักคำนี้ ต้องรู้จักคำว่า mock-up อยู่แล้ว)

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

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

เช่น ใช้คอมพิวเตอร์แบบไหน รุ่นไหน, ใช้โปรแกรมอะไรในการอ่าน Blognone, เจอปัญหาอะไรบ้าง, ทำอย่างไรถึงเจอปัญหา ฯลฯ โดยพยายามระบุที่ปัญหา และผลลัพธ์ที่เราอยากได้ ไม่จำเป็นต้องไปตำหนิคนอื่น (ในภาษาไทย ประโยคคำถามหลายอันมักจะมีนัยยะของการตำหนิ เช่นประโยค "คนไทยหรือเปล่า" :P ดังนั้นหากไม่ตั้งใจถาม ไม่ควรตั้งประโยคคำถามครับ)

ดังนั้น ถ้าผมเป็นคุณ @virusfowl ผมคิดว่า น่าจะบอกว่า

  1. ผมเป็นผู้พิการทางสายตา (ถ้าผมเป็นคนอ้วนอยากซื้อกางเกงตัวเล็ก ผมก็ต้องไปบอกเค้าก่อนว่าผมอ้วน มีไซส์นี้หรือเปล่า โดยไม่คิดว่าคนขายต้องมาสมเพชดูถูกที่ผมอ้วน การบอกว่าอ้วนทำให้เค้ารู้ว่าจะต้องหาอะไรให้ผม) การบอกว่าเป็นผู้พิการทางสายตา ทำให้คนอ่านพอจะรู้ว่าทำอะไรได้ไม่ได้ (อย่างน้อยคนอื่นก็ย่อมไม่บอกให้คุณ Print Screen หรือทำ Mock Up)
  2. ผมใช้โปรแกรม xxxx ในเครื่อง yyyyy ในการอ่าน Blognone
  3. ผมเคยใช้ธีม v.3 มันสามารถอ่านได้ตามปกติคือ สามารถอ่านหัวข้อข่าวได้ (กด h ไปที่ heading) สามารถอ่านย่อหน้าใหม่ได้ (กด p ไปที่ paragraph) สามารถคอมเม้นท์ได้ (กด e ไปที่ edit box) ฯลฯ
  4. พอผมใช้ธีม v.4 ผมไม่สามารถหาหัวข้อข่าวได้, ไม่สามารถคอมเม้นท์ได้, ไม่สามารถ xxx ได้ นั่นคือผมกด h แล้วมันไม่ไปที่หัวข้อข่าว, ผมกด e แล้วไม่ไปที่ edit box ฯลฯ
  5. ไม่ทราบว่าผมควรทำอย่างไรครับถึงจะสามารถเลือกหัวข้อข่าวแต่ละข่าวได้ หรือทำ xxx ได้? (เหมือนที่ธีม v.3 ทำได้)

ซึ่งผมคิดว่าน่าจะได้ทางออกที่ดีกว่านี้

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

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

แต่หากคุณ @virusfowl เป็นผู้พิการทางสายตา,
สิ่งที่คุณ mk พลาดก็คือ "ไม่รู้ว่าคุณ @virusfowl เป็นผู้พิการทางสายตา จึงให้ทำในสิ่งที่ต้องเป็นคนตาปกติทำ (แม้จะใช้ศัพท์ยากไปนิด)"

อันนี้ขอแย้งครับ ผมรู้ว่าคุณ @virusflow เป็นผู้พิการทางสายตาตั้งแต่แรก แต่ไม่ได้แปลว่าจะมาเรียกร้องอะไรก็ได้ในลักษณะนี้นะครับ เท่าที่ดูจากคอมเมนต์ คุณ @virusflow ก็มีความรู้เรื่อง tag ของ HTML และการจัดหน้าในเว็บเพจเป็นอย่างดี บอกได้ว่าอะไรมีปัญหา แต่ไม่ยอมบอกว่าจะแก้อย่างไร วกไปวนมาแบบนี้ ตอบมายืดยาวขนาดนี้ ผมคิดว่าเป็นปัญหาเรื่องอื่นที่ไม่เกี่ยวกับสายตาแล้วครับ

การคอมเมนต์อย่างมีคุณภาพ การแจ้งบั๊กที่สามารถแก้ได้ มันเกี่ยวกับตรรกะครับ ไม่ได้เกี่ยวกับสายตา

ขอแทรกเพิ่มเติมในฐานคนทำเว็บเหมือนกันนะครับ

ไม่ทราบว่า พอจะมีตัวอย่างเว็บในต่างประเทศ หรือเว็บที่สามารถใช้ screen reader ได้ครบถ้วนตามความต้องการพื้นฐาน ไหมครับ ขอ url ก็ได้ครับ

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

ซึ่งคล้ายกับคุณ @เม่น ครับว่า ถ้าพอมีตัวอย่างเว็บ และมีรายละเอียดบอกว่า กด h จะไปที่ header นะ อะไรแนวนี้ คนทำจะง่ายขึ้นทีเดียวครับ

แก้ไขเพิ่มเติมคำถามสำคัญเลยครับ

เนื่องจากผมเองมักจะใช้ Captcha เพื่อป้องกัน spam ถ้าเป็นแบบคำถามแบบนี้ Screen reader อ่านได้ไหมครับ

หนึ่งบวก สาม ได้เท่าไหร่

หรือ

หนึ่ง+สาม ได้เท่ากับ

ต้องขอบคุณ คุณ Kittipat นะครับที่นำลิ้งมาเสริมให้

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

ผมคงบอกได้เพียงว่า การทำเว็บให้ทุกคนเข้าถึงได้ (web accessibility) นั้น มันก็คือการทำเว็บปกติทั่วไปนี่แหละ เพียงแต่ว่า คุณต้องยึดมาตรฐานการเขียนเว็บ โดยอ้างอิงจาก W3C ไม่ว่าจะเป็น WAI WCAG ซึ่งว่าง่ายๆ มันก็คือการใส่พวก tag ต่างๆ ให้ถูกต้องและครบท่วนเท่านั้น ซึ่งในจุดนี้มันก็เป็นข้อดีของเว็บคุณในประการหนึ่งด้วย เพราะถ้าหากว่าเว็บคุณมีการใส่ tag เหล่านี้อย่างครบท่วน bot ของ เว็บต่างๆ อย่างเช่น Google ก็จะเข้าถึงเว็บคุณได้ง่ายขึ้นและทำให้เว็บคุณมีลำดับการค้นหาดีขึ้นได้ด้วย ทางหนึ่ง

แค่คุณทำเว็บที่ได้มาตรฐานอย่างที่บอกไว้ โปรแกรมอ่านหน้าจอ Screen reader ก็จะเข้าถึงส่วนต่างๆ ได้จาก tag บนเว็บนั้นๆ ได้เองโดยอัตโนมัตอยู่แล้ว

สิ่งที่คุณสงสัย ว่ามันจะต้องใส่ code ใด screen reader ถึงจะกด h ไปหา heading ได้นั้น ก็สรุปว่ามันไม่มีอะไรเลย แค่ในหน้าเว็บมี tag <h*> ที่ใส่ * หมายถึงเลข 1-6 ที่มีการใช้เป็น heading level 1-6 กันโดยมาตรฐานนะครับ โปรแกรม screen reader ก็จะสามารถกด h และวิ่งไปหายังตำแหน่ง heading ต่างๆ บนหน้าเว็บได้เลย

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

ข้อมูลเกี่ยวกับโปรแกรมอ่านหน้าจอ หรือ screen reader ขอละไว้นะครับ ว่าหลักการทำงาน และอะไรต่างๆ มันคืออย่างไร ส่วนนี้น่าจะหาข้อมูลเบื้องต้นกันเองได้ ไม่ว่าจะภาษาไทยหรืออังกฤษ

มาเข้าเรื่องของการทำงานของโปรแกรมอ่านหน้าจอกับ browser กันเลยดีกว่า

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

  • b = botton ก็คือปุ่มต่างๆ เช่น Log in Search เป็นต้น
  • c = combowbox ก็คือช่องที่สามารถเลื่อนๆ ไปๆ มาๆ ในนั้นได้ เพื่อเลือกอะไรสักอย่าง (อธิบายถูกป่าวหว่า?)
  • e = edit box ไปยังช่องสำหรับให้พิมพ์ มีข้อสังเกตตรงนี้อย่างหนึ่ง อย่างที่บอกตอนแรกว่า เมื่อเราใช้โปรแกรมอ่านหน้าจอ เปิดเข้า internet ด้วย browser แล้ว ปุ่มทุกปุ่มบน keyboard จะกลายเป็น shortcut key ซึ่งแปลว่า ต่อให้คุณเอา mouse ไปวางอยู่ที่ edit box คุณก็อาจจะพิมพ์ตัวอักษรลงไปไม่ได้ ที่ใช้คำว่าอาจจะ ก็เพราะว่า ในโปรแกรมอ่านหน้าจอรุ่นเก่าๆ นั้น เราจะต้องกด enter เพื่อให้ keyboard ไปอยู่ใน mode สำหรับการพิมพ์ หรือโปรแกรมมันจะพูดว่า formmode on แต่ในโปรแกรมรุ่นใหม่ๆ แค่เราไปอยู่ตรงช่อง edit box โปรแกรมมันก็จะเปลี่ยน formmode ที่ว่านี้ จาก off เป็น on ให้โดยอัตโนมัต ก็แปลว่าเราสามารถใช้ keyboard เพื่อพิมพ์ลงไปได้ตามปกตินั่นเอง
  • f = formfield ก็จะคล้ายๆ กับ editbox
  • g = graphic ไปยังรูปต่างๆ (เฉพาะที่มี tag alt กำกับไว้นะครับ ^^)
  • h = heading ตัวเจ้าปัญหา ซึ่งคือสาระสำคัญของกระทู้นี้นี่เอง ซึ่งผมก็ไม่ทราบว่า คนเขียนเว็บจะเรียก tag h นี่ว่าอะไร แต่ที่ผมใช้ และได้ยินโปรแกรมมันอ่านอยู่ทุกวัน มันอ่านว่า headingซึ่งอาจจะเรียกว่า header ก็คงไม่ผิดไปจากกันนัก ซึ่งถ้าจะถามว่า ในเมื่อ heading มันมีหลาย level แล้วเมื่อเรากด h มันจะกระโดดไปยัง heading ไหน ก็ต้องตอบว่า มันจะกระโดดไปยัง tag h ตำแหน่งถัดไป โดยที่ไม่สนใจเรื่อง level
  • i = list คือมี
  • อยู่ตรงไหน มันก็จะกระโดดไปยังจุดนั้น และเมื่อกดอีกครั้งหนึ่ง มันก็จะกระโดดไปยัง list ถัดไป มิใช่เพียงเลื่อนลงมายังลิ้งแต่ละลิ้งใน list นั้นๆ
  • j =jump to line มันจะขึ้นช่องมาให้เรากรอกว่า จะกระโดดไปยังบรรทัดไหนของหน้าเว็บ
  • k = go to mark คือเราสามารถ ทำ mark แต่ละจุดบนหน้าเว็บไว้ได้ (ผมคิดว่าคนปกติก็มีฟังชั่นนี้นะ)
  • m = frame
  • o = object
  • p = paragraph
  • q = blockquote
  • r = radio botton ที่เวลาให้เลือกคล้ายๆ กับติ๊ก แต่เลือกได้เพียงอย่างใดอย่างหนึ่งอะครับ
  • t = table กระโดดไปยังหัวตาราง (เรื่องตารางนี่ต้องว่ากันอีกยาว เป็นสิ่งที่ผมคิดว่า คนตาบอดเข้าถึงได้ยากอีกส่วนหนึ่ง)
  • u = unvisit link
  • v = visit link
  • x = checkbox

ต้องขอหมายเหตุไว้ก่อนว่า ความจริงมันมีตั้งแต่ a-z นั่นแหละ แต่อันไหนที่ข้ามไป เพราะอาจไม่มั่นใจในชื่อเรียกว่ามันเรียกว่าอะไรนะครับ เดี๋ยวสะกดผิด จะเข้าใจผิดกันไปใหญ่ และอีกอย่างหนึ่ง ความสามารถของ screen reader แต่ละเจ้าก็อาจจะไม่เท่ากัน อย่างเช่น ถ้าคุณใช้ Open source screen reader NVDA ก็อาจจะใช้ไม่ได้ครบทั้ง a-z เกือบลืมบอกไปอีกอย่าง ว่าแต่ละ browser เองก็รองรับ screen reader ได้ไม่เหมือนกันนะครับ หรือจะมองว่า ตัว screen reader ไม่รองรับ browser เอง อันนี้ก็แล้วแต่คนจะมอง โดย browser ที่ใช้งานได้ดีอยู่ในปัจจุบันก็คือ IE (6 7 8) กับ Firefox ทุกรุ่น ยกเว้น (v.4> ยังไม่เคยทดลอง แต่คาดว่าน่าจะใช้งานได้) น่าเสียดายว่า browser ยอดนิยมของ dev. อย่าง Chrome พึ่งจะทำให้ screen reader อย่าง NVDA สามารถใช้งานได้ (นิดหน่อย) เมื่อเร็วๆ นี้เอง

ร่ายซะยาว (เกินไปหรือเปล่าไม่รู้สิ)

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

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

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

  • solona
  • webvisum

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

ของพวกนี้มันต้องการการทดสอบ, การแก้ไข, และการปรับปรุง

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

สวัสดีค่ะ เข้ามาช้านิดนึง.. จะมาแนะนำเว็บๆนึงที่ยึดมาตรฐาน และปฏิบัติตาม Guidelines ของ W3C/WAI ในเรื่อง Accessibility ในการทำเว็บอย่างจริงจัง โดยได้ Conformance Level AA และมีการตรวจสอบอยู่ตลอดเวลา คือเว็บ www.teachers.tv ของประเทศอังกฤษค่ะ

หน้านี้บอกรายละเอียดไว้อย่างถี่ยิบค่ะ ถ้าสนใจ http://www.teachers.tv/help/accessibility

อันนี้เป็นตัวช่วยในการดู outline ของแต่ละหน้า HTML 5 Outliner

ส่วนเว็บนี้เป็น guideline ว่าควรจะทำอะไรบ้าง มีรายละเอียดอยู่หลายอย่างเหมือนกัน

หวังว่าคงพอมีประโยชน์บ้างนะครับ

โดยทั่วไป Drupal ออกแบบให้ผู้พิการเข้าถึงได้ง่ายอยู่พอสมควร ถ้าเขียนธีมตามมาตรฐานการออกแบบธีมของเขา แต่คุณเม่นเองไม่ค่อยถนัด Drupal เลยออกแบบมาแบบนี้ ซึ่งคงจะไปโทษกันไม่ได้ และผมยอมรับว่าการที่จะทำเว็บให้รองรับผู้พิการทั้งหมดยาก อีกทั้งคนปกติก็ไม่รู้ด้วยว่าคนพิการเจอปัญหาอะไรบ้าง เพราะไม่ได้เจอกับตัวเอง (ถ้าคุณ Virusfowl ให้ความเห็นเพิ่มเติม อย่างที่คุณเม่นแนะจะช่วยคนออกแบบเว็บได้พอสมควรนะผมว่า)

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

ป.ล. เห็นรายการที่ต้องทำแล้วแทบเป็นลม

ขอเอาตัวรอดว่า กระผมแค่ออกแบบเป็นกราฟฟิคน่ะครับ แต่คนตัดธีมและลงโค้ดต่างๆ เป็นอาสาสมัครท่านอื่นๆ ครับ

แต่ยอมรับว่าที่เกี่ยวกับธีมคือ การออกแบบนี้ทำให้ใช้พวกธีมมาตรฐานมาโมได้ยาก เลยทำให้บางโค้ดนั้นคนตัดธีมเค้าเลือกใช้ Tag ไม่ตรงกับที่อยากให้เป็นเท่าไหร่

และเพิ่มเติมว่า ถ้าเราเริ่มจาก "ปัญหาที่เหลือ ว่าคุณ @virusfowl เจอปัญหาอะไรอีกบ้าง นอกจากเรื่อง Heading" แทนที่จะเริ่มจาก "เอ้า มานั่งทำธีมให้ถูกข้อกำหนดต่างๆ อีก 1,000 หน้ากันเถอะ" รับรองว่าจะแก้ได้เร็วกว่าครับ

ลองนึกภาพว่า หากคุณ mk มาบอกว่า ขอให้คุณ @virusfowl ไปอ่านคู่มือเหล่านี้ก่อนแล้วค่อยแจ้งบั๊ก เช่น คู่มือการใช้ภาษาไทย (200 หน้า) คู่มือการตั้งคำถามที่เข้าใจง่าย (90 หน้า) คู่มือมารยาทเน็ท (50 หน้า) คู่มือการแจ้งบั๊ก (2,000 หน้า) พรบ. คอมพิวเตอร์ (500 หน้า) ฯลฯ ถามว่าอยากจะไปอ่านก่อนจริงๆ หรือครับ? สู้แจ้งมาก่อน แล้วงงตรงไหนก็ถามกันไป สะดวกกว่าใช่ไหมครับ?

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

ฮ่าฮ่า พูดไปก็เข้าตัว

เอาแบบนี้ดีกว่า ถ้าบล็อกนันสนใจใช้ Drupal 7 และใช้ธีม stark (หรืออื่นๆ ที่เป็น theme framework) ผมยินดีช่วยโม css นะครับ โดยพยายามปรับดีไซน์ให้น้อยที่สุดครับ

คิดไปคิดมา ธีมนี้มี default reply style มั้ยครับ อาจจะลองปรับ css จากตรงนั้นอาจจะง่ายกว่า เมลมาได้นะครับ

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

ปกติ ผมเริ่มจาก Garland หรือ Marvin น่ะครับ
แล้วไล่บังคับ แต่ css พวก tag,class ของเดิมเอา

ข้างบนผมน่าจะตอบผิดประเด็น
ส่วนของ reply อย่างเดียว
ลองดู
http://drupal.org/project/deco
ครับ reply เป็นลำดับขั้นคล้ายๆ ของ blognone น่ะครับ

อ่านมาตั้งนาน ก็งงว่าทำไมคุณ Virusfowl ถึงทำ mock up ไม่ได้ จนถึงคอมเม้นหลังๆ ถึงรู้ว่าคุณ Virusfowl พิการทางสายตานี่เอง

ยังไงก็เอาใจช่วยให้ปรับแก้กันไปจนใช้งานได้ครับ

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

อย่างแรกต้องขอบคุณ อีกทีสำหรับ blognone v.4.1.1

ตอบคุณ mk & Lew นะครับ ต้องยอมรับว่า ณ จุดนี้ เราใช้คำศัพท์ ไม่ตรงกัน อย่างที่ผมพยายามบอกในหลายๆ ความเห็นแล้วว่าผมก็แค่ user เท่านั้น ไม่ใช่ dev. จุดที่ผมบอกตั้งแต่แรก ว่าปัญหามันคือ theme BN v.4 มันไม่มี heading ก่อนหน้ากระทู้นี้ ผมไม่ทราบจริงๆ ว่า คนทั่วๆ ไป เขาใช้คำว่า header กัน และมันคือ tag h อย่างที่ใช้เรียกกันในกระทู้นี้

เพราะอย่างที่บอก ว่าการที่ผมรู้จัก ที่พวกคุณ เรียกๆ กันว่า tag หรือที่ผมเข้าใจในองค์ประกอบส่วนต่างๆ ของหน้าเว็บนั้น ก็เนื่องมาจากการที่ใช้ ตัว screen reader อยู่ทุกวัน และมันก็อ่านให้ฟังว่า เรากดปุ่มนี้ ไปที่ส่วนไหน แต่ผมไม่ใช่นักพัฒนาเว็บ แล้วผมจะทราบได้อย่างไรครับว่า ไอ้ heading ที่โปรแกรมมันอ่านให้ฟังนั้น คนเขียนเว็บเขาเรียกกันว่า header และ ถ้าจะให้มันมี heading แบบนี้ ต้องใส่ code อะไรตรงไหน

และการที่ผมนำลิ้งของมาตรฐานต่างๆ มาให้ ก็เนื่องมาจากเหตุผลเดิม คือผมก็ไม่มีปัญญามาบอกคุณจริงๆ ว่ามันต้องใส่ tag นี้ตรงนั้น tag นั้นตรงนี้ และก็อย่างที่ได้ยืนยันไปในหลายๆ ความเห็นด้านบนแล้ว ว่า tag อื่นๆ นั้น ถือว่าอยู่ที่ตัว webmaster เองแล้วว่าจะใส่ใจทำให้มากแค่ไหน คือจะทำหรือไม่ทำก็ได้ คือถ้าคุณ mk & lew ไม่มีเวลาไปนั่งอ่านพวกมาตรฐานเหล่านั้น และไม่ทำอะไรเพิ่มเติมให้ นอกเหนือจากใส่ tag h ดังกล่าวแล้ว คนที่ใช้ screen reader ก็พอที่จะใช้งาน web blognone ได้ในระดับที่น่าพอใจ (กว่าตอนที่ไม่มี tag hเลย) แล้วครับ

ทั้งหลายทั้งปวงก็คือ สิ่งที่ผมเรียกร้อง (จริงๆ) ก็แค่ ให้ใส่ tag h ให้ ส่วน tag อื่นๆ นั้น มันกลายเป็นปัญหาว่า คุณ mk ก็อยากทราบ และผมก็ตอบให้ไม่ได้ เลยได้แต่หามาตรฐานต่างๆ มาให้ดู เผื่อคุณ mk จะหาคำตอบจากข้อมูลพวกนั้นได้

โอเคครับการที่ผมใช้คำว่า "ทำตามมาตรฐานแล้วมันก็จะอ่านได้" อาจจะไม่ถูกต้องนัก อย่างการออกแบบ theme v.4 ของคุณ imenn ก็ต้องเรียกได้ว่ามีมาตรฐานของคุณ imenn อยู่แล้ว แค่มันออกมาไม่ accessible ก็เท่านั้น

แต่ที่ผมกำกับไว้ก็คือ อย่างเช่น มาตรฐานของ W3C หรือ พวก WAI WCAG ซึ่งแน่นอนว่า การปฏิบัติตามมาตรฐานเหล่านี้ ไม่จำเป็นต้องทำหมดทุกข้อ อย่างมาตรฐาน WCAG ของไทยที่ผมเคยอ่าน เขาก็มีแบ่งออกเป็นหลายระดับ ขึ้นอยู่กับว่า webmaster จะสะดวกทำได้แค่ไหน

และอย่างที่คุณ lew บอกผมเลยครับ ว่า

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

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

edit: ขอเพิ่มเติมอีกนิด ความจริงแล้ว ยังมีอีกหลาย tag ที่ถ้าหากใส่แล้วจะทำให้คนที่ใช้ screen reader สามารถใช้เว็บได้สะดวกยิ่งขึ้น แต่ผมก็ไม่ทราบว่าทำไมหลายๆ เว็บถึงเลือกที่จะไม่ใส่ให้ครบทั้งหมด เดาเอาว่า มันอาจจะเกี่ยวกับหน้าตาที่เปลี่ยนไป ทำให้ไม่ได้หน้าตาอย่างที่อยากได้ (หรือเปล่า)

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

edit: ผมลองๆ หาดูแล้วเจอ extension ของ firefox ที่เอาไว้ตรวจ accessibility น่าจะแบบคร่าวๆ จาก กระทู้นี้

ซึ่งแน่นอนว่า การปฏิบัติตามมาตรฐานเหล่านี้ ไม่จำเป็นต้องทำหมดทุกข้อ

ไอ้ตรงนี้แหละครับปัญหา
คือใครมันจะไปรู้ครับว่าปัญหาที่คุณเจอ มันตรงกับการบังคับมาตรฐานข้อไหน

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

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

Virusfowl Tue, 25/01/2011 - 12:05

In reply to by Thaina

ก็ขอ ยืนยันข้อความเดิมนะครับ

ซึ่งปัญหามันอยู่ตรงนี้แหละครับ เพราะว่า theme BN v.4 มันไม่มี heading ตรงแต่ละพาดหัวข่าว หรือส่วนอื่นๆ บางส่วน ที่มันเคยมีและใช้งานได้ดีมากใน theme v.3

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

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

ถ้าให้เทียบง่ายๆ คือ ที่คุณ Virusfowl กำลังทำทั้งตอนรายงานบัก และตอนนี้ก็เหมือนกับบอกว่า

"ทำ Blognone ให้ผู้พิการใช้ง่ายๆ สิ ทำยังไงไม่รู้หรอกนะ ไปคิดเอาเอง แต่ของ่ายๆ เข้าใจปะ"

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

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

ตรงนี้น่าจะเป็นลักษณะเฉพาะของวิศวกร/โปรแกรมเมอร์ ที่ต้องการอะไรที่ตรงจุด ตรงประเด็น ไม่กำกวม ไม่เยิ่นเย้อมากกว่านะครับ

อ่าๆ เห็นอีกจุด ลองกลับมาโพสที่เก่า เผื่อฟลุ๊ค :D

คือตรงส่วน comments ตรงที่เขียนว่า "Comments" เลยอนะครับ ดูจาก ฟ็อนแล้ว ผมเห็นว่ามันก็อยู่ในระดับที่จะใส่ tag h ได้เหมือนกัน เพราะฉะนั้น ก็จะขอให้ใส่ tag H ตรงตำแหน่งดังกล่าวด้วยอีกที่ เพื่อที่คนที่ใช้ screen reader จะได้สามารถแยกส่วนของ comments ได้อย่างชัดเจนมากขึ้น จาก heading

ขออธิบายภาพรวมในปัจจุบันนะครับ tag h อันแรกจะอยู่ตรง พาดหัวข่าว และอันถัดมา จะกระโดดมาตรง post new comment เลย ถ้าหากมี tag h (heading) อีกอันตรงคำว่า Comments อย่างที่บอก มันก็จะแบ่งส่วนสัด (ในมุมมองของคนที่ใช้ screen reader) ได้ชัดเจนขึ้นครับ

ปล. คืออย่างแต่ก่อน (Blognone theme v.3) มันจะมี tag h ของ related stories อยู่ตรงก่อน comments ซึ่งผมมองว่า มันก็โอเคในระดับหนึ่ง แต่พอ ตัดส่วนนี้ออกไป มันก็ดูกระโดดๆ แปลกๆ

ขอบคุณล่วงหน้านะครับ :)

อ่า ขอแจ้งปัญหาหน่อยครับ (ไหนๆก็ไหนๆ)

ตอนนี้รู้สึกว่า การพิมพ์ตัดบรรทัด(Enter นั่นแล) กลับมาเปนว่า ต้องพิมพ์สองบรรทัดถึงจะเว้นได้ อีกแล้วอะครับ
ตัดบรรทัดเดียวไม่ได้อีกแล้ว อันนี้จงใจหรือเปล่าครับ?

อยากให้กลับเปนเหมือนเวอร์ชั่นก่อนน่ะครับ ที่ตัดบรรทัดเิองได้

มาฝากไว้ที่นี่ จะมีใครเห็นอีกไหมหว่า?

พอดีผมพึ่งเจอปัญหาอีก 2 ประการเกี่ยวกับ theme ของ Bn และ ก็เจอปัญหาเรื่องความ accessible เข้าด้วยอีกข้อ

  1. ผมลองเปลี่ยนการตั้งค่า theme ใน profile ให้เป็น Kindle ดู ที่ของเดิมจะมีแค่ theme Blognone version ต่างๆ ให้เลือก แต่ตอนนี้ที่เป็นตัวเลขมีแค่ตัวใหม่ล่าสุด (4.1) ให้เลือกตัวเดียวแล้ว

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

  1. ด้วยความพยายาม ผมจึงจะลองสมัคร account ใหม่ และจะหา url ที่เข้าไปยังหน้า edit profile โดยตรงจาก account ใหม่ที่สมัคร แต่กลับพบความไม่ accessible เข้าแทน นั่นคือ ในส่วนของ captcha ถ้าใช้ screen reader ทำการสมัคร เราจะไม่เจอตัว edit box ที่ให้กรอก captcha เลย แถมระบบ captcha ก็ยังไม่ใช่ระบบรูปภาพ หรือมีระบบ audio ที่จะทำให้ผู้ที่ใช้ screen reader สามารถสมัครได้

ซึ่งผมเองก็จำไม่ได้แล้วว่าตอนสมัคร user นี้ ระบบ captcha ของ Blognone ในตอนนั้นเป็นอย่างไร ถ้ายังไงรบกวนสองประเด็นนี้ด้วยนะครับ

ปล. เคยเห็นระบบ captcha ในบล็อกของคุณ MK มีระบบ audio ให้เลือก แต่มันเป็นแบบ flash ซึ่งขอบอกว่า screen reader นั้น access flash ส่วนใหญ่แทบจะไม่ได้เลย ดังนั้น ระบบ audio captcha ที่เป็น flash สู้ไม่มีเสียยังจะดีกว่าน่ะครับ :(

^^ และ theme Kindle ไม่มีให้ edit post อีกด้วย เลยขอตั้งอีกความเห็นนึงเลยละกัน

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

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

และที่เจอว่าไม่สามารถใช้ screen reader กรอก captcha ได้อีกเว็บก็คือ thaiadmin.org จากที่ดูๆ โค้ตของทั้งสองเว็บที่เจอปัญหาเดียวกันนี้ เดาๆ ว่าน่าจะเกี่ยวกับ javascript หรือ /text area> อะไรสักตัวนี่แหละ

edit: อ๊ากกก น่าแตกดังเพล้งงง

สรุปเรื่อง Captcha ไม่เป็นปัญหาแล้วนะครับ ที่ผมเจอว่ามันเป็นปัญหา ก็เพราะเจอ extension Adblock ทำพิษให้ พอ disable adblock captcha ก็จัดการได้ตามปกติ แป่วววว ของเว็บ Thaiadmin ที่เคยอ้างถึงก็ด้วยเช่นกัน ~_~