ทำให้เว็บไซต์ง่ายต่อการพูดคุยกับ

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

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

การบุกรุกของผู้พูดที่บ้าน

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

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

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

“

การออกแบบล่องหน

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

ฐานรากอายุ

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

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

• ล้างการนำทางในหน้าและทั่วทั้งไซต์
• จัดโครงสร้าง DOM ด้วยการออกแบบที่มองเห็นได้
• ข้อความแสดงแทน ไม่เกิน 16 คำหรือมากกว่านั้น หากรูปภาพไม่ต้องการข้อความแสดงแทน (เช่น หากเป็นพื้นหลัง) มีข้อความแสดงแทนว่างเปล่า แสดงว่า ไม่มี ข้อความแสดงแทน
• ไฮเปอร์ลิงก์อธิบาย
• 'ข้ามไปที่ลิงก์เนื้อหา'

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

อ่านเพิ่มเติมเกี่ยวกับการออกแบบและการเข้าถึง TTS

• ข้อความเป็นคำพูดโดย W3C
• Front End North Pt 2: Leonie Watson ทำเอาฉันใจสลาย
• การแปลงข้อความเป็นคำพูดด้วย AWS (ตอนที่ 1)
• แปลงข้อความเป็นคำพูดและกลับมาอีกครั้งด้วย AWS (ตอนที่ 2)
• 6-6-62. หมายเหตุเกี่ยวกับการเข้าถึงโดยไคลเอนต์
• การควบคุมการติดฉลากโดย W3C
• การใช้แอตทริบิวต์ aria-label โดย Mozilla
• ฉันใช้เว็บเป็นเวลาหนึ่งวันโดยใช้โปรแกรมอ่านหน้าจอ
• จากผู้เชี่ยวชาญ: การพัฒนาการเข้าถึงข้อมูลดิจิทัลทั่วโลกในช่วง COVID-19

สิ่งที่นักเล่น

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

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

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

มีมาร์กอัปความหมายอยู่แล้วสำหรับสิ่งนี้ หนึ่งเรียกว่า 'พูดได้' ซึ่งเป็นพร็อพเพอร์ตี้ Schema.org ที่อยู่ในรุ่นเบต้าซึ่งไฮไลต์ส่วนต่างๆ ของหน้าเว็บที่ 'เหมาะสมอย่างยิ่งสำหรับการแปลงข้อความเป็นคำพูด'

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

 { "@context": "https://schema.org", "@type": "Review", "reviewBody": "It's breathless, explosive music, the kind of stuff that compels listeners to pick up an instrument or start a band. Origin of Symmetry listens like a spectacular jam — with all the unpolished, patchy, brazen energy that entails — and all in all it's pretty rad, man.", "datePublished": "2015-05-23", "author": [ { "@type": "Person", "name": "Andre Dack" }, { "@type": "Person", "name": "Frederick O'Brien" }, { "@type": "Person", "name": "Andrew Bridge" } ], "itemReviewed": { "@type": "MusicAlbum", "name": "Origin of Symmetry", "@id": "https://musicbrainz.org/release-group/ef03fe86-b54c-3667-8768-029833e7e1cd", "image": "https://alpha.audioxide.com/api/images/album-artwork/origin-of-symmetry-muse-medium-square.jpg", "albumReleaseType": "https://schema.org/AlbumRelease", "byArtist": { "@type": "MusicGroup", "name": "Muse", "@id": "https://musicbrainz.org/artist/9c9f1380-2516-4fc9-a3e6-f9f61941d090" } }, "reviewRating": { "@type": "Rating", "ratingValue": 26, "worstRating": 0, "bestRating": 30 }, "speakable": { "@type": "SpeakableSpecification", "cssSelector": [ ".review-header__album", ".review-header__artist", ".review-sidebar__summary" ] } }

ดังนั้น หากมีคนถามผู้ช่วยลำโพงในบ้านว่า Audioxide คิดอย่างไรเกี่ยวกับ Origin of Symmetry โดย Muse ให้ speakable ไปที่ชื่ออัลบั้ม ศิลปิน และบทสรุปสั้นๆ ของบทวิจารณ์ สะดวกและตรงประเด็น (และช่วยให้ผู้คนเจ็บปวดจากการฟังบทสรุปทั้งหมดของเรา) ไม่มีอะไรที่ไม่เคยมีมาก่อน มันถูกติดฉลากอย่างถูกต้อง คุณจะสังเกตเช่นกันว่าการเลือกคลาส CSS ก็เพียงพอแล้ว ง่าย.

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

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

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

อ่านเพิ่มเติม

• เว็บแอปที่พูดได้ — บทนำสู่ Speech Synthesis API
• แนวคิดและการใช้งาน Web Speech โดย Mozilla
• ส่วนต่อประสานผู้ใช้เสียงคืออะไร? โดยมูลนิธิออกแบบปฏิสัมพันธ์

การเขียนเพื่อการพูด

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

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

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

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

สิ่งนี้หมายความว่าในแง่ภาษาศาสตร์คือ:

• ประโยคสั้น ๆ
• ภาษาธรรมดา เรียบง่าย
• ข้อมูลด้านหน้า (คิดว่าปิรามิดคว่ำ)
• คำตอบแบบวลีเป็นประโยคที่สมบูรณ์

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

อ่านเพิ่มเติม

• 'การทดสอบความสามารถในการอ่านเนื้อหาเสียง' ใน รายการต่างหาก
• องค์ประกอบของสไตล์ โดย William Strunk Jr.

HAL โดยไม่มี Bad Bits

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

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

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

• นำทางไซต์ของคุณโดยใช้โปรแกรมอ่านหน้าจอ
• ลองสอบถามด้วยเสียงผ่านโทรศัพท์/ผู้ช่วยที่บ้าน
• ใช้มาร์กอัปความหมาย
• ใช้มาร์กอัปที่พูดได้

การออกแบบเว็บไซต์สำหรับสถานการณ์ที่ไม่มีหน้าจอช่วยปรับปรุงการช่วยสำหรับการเข้าถึง แต่ยังทำให้บุคลิกภาพ จุดประสงค์ และประโยชน์ของเว็บไซต์ดีขึ้นอีกด้วย ดังที่ Preston So เขียนให้กับ A List Apart 'เป็นวิธีที่มีประสิทธิภาพในการวิเคราะห์และทดสอบความเครียดว่าเนื้อหาของคุณไม่เชื่อเรื่องช่องอย่างแท้จริง'

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