ดูการเข้าถึงเว็บมาตรฐานและการเข้าถึงแอป HTML ของ ARIA
เทคโนโลยีเว็บที่เปิดกว้างและครอบคลุมอย่างแท้จริงซึ่งช่วยให้ผู้ใช้ที่พิการสามารถใช้เทคโนโลยีช่วยเหลือเพื่อเพลิดเพลินกับเนื้อหาเว็บแบบไดนามิกและเว็บแอปที่ทันสมัย มาตรฐานการเข้าถึงเว็บของ W3C มีวัตถุประสงค์เพื่อเติมข้อมูลเว็บด้วยแอปพลิเคชันอินเทอร์เน็ตที่เข้าถึงได้ง่าย (ARIA) ที่ผู้ใช้ที่พิการสามารถใช้งานได้อย่างมีประสิทธิภาพ.
ARIA เป็นหนึ่งในมาตรฐานการเข้าถึงข้อมูลและแนวทางที่เผยแพร่โดย Web Accessibility Intitiative (WAI) มันให้มาร์กอัปเพิ่มเติมที่สามารถแทรกลงในเอกสาร HTML ได้อย่างง่ายดาย WAI-ARIA เป็นโซลูชันข้ามแพลตฟอร์มที่มีเป้าหมายเป็นแพลตฟอร์มเปิดเว็บดังนั้นไม่เพียง แต่คิดถึงเว็บไซต์ แต่ยังเกี่ยวกับเกมความบันเทิงดิจิทัลการดูแลสุขภาพมือถือและแอพประเภทอื่น ๆ.
ในโพสต์นี้เราจะมาดูว่าคุณสามารถเพิ่มการเข้าถึงเอกสาร HTML ของคุณได้อย่างไรด้วยความช่วยเหลือของมาตรฐาน WAI-ARIA.
ARIA Framework
ไวยากรณ์ของ HTML ไม่อนุญาตให้นักพัฒนาสามารถอธิบายองค์ประกอบอย่างถูกต้องเพื่อระบุบทบาทของพวกเขาและระบุความสัมพันธ์ระหว่างพวกเขา แม้ว่าจะไม่ค่อยมีปัญหาสำหรับผู้เข้าชมที่มีความรู้สึกครบถ้วน แต่ก็สามารถขัดขวางผู้ใช้เทคโนโลยีช่วยเหลือจากการเข้าใจสิ่งที่เกิดขึ้นบนหน้าจอและสำรวจทางเลือกของพวกเขา.
นี่คือจุดที่ ARIA เข้ามาช่วยเหลือเราเนื่องจากเป็นไปได้ที่จะกำหนดวัตถุประสงค์ขององค์ประกอบต่าง ๆ ด้วยความช่วยเหลือของ บทบาทของสถานที่สำคัญ, และอธิบายลักษณะของพวกเขาด้วย แอททริบิวต์ aria-prefixed. แอ็ตทริบิวต์ Aria ที่นำหน้ามีสองประเภท: คุณสมบัติ ที่อธิบายคุณลักษณะที่มีโอกาสน้อยที่จะเปลี่ยนแปลงตลอดวงจรชีวิตของหน้าและ รัฐ ที่ให้ข้อมูลเกี่ยวกับสิ่งต่าง ๆ ที่อาจมีการเปลี่ยนแปลงบ่อยครั้งเนื่องจากการโต้ตอบของผู้ใช้.
บทบาทสถานที่สำคัญ
บทบาทของแลนด์มาร์ค เป็นรูปแบบบทบาทที่รู้จักกันดีที่สุดของ ARIA's Model Model (บทบาทอื่น ๆ คือ Abstract Roles, Widget Roles, และ Document Structure Roles) บทบาทของแลนด์มาร์คช่วยให้นักพัฒนาสามารถระบุตัวตนขนาดใหญ่ได้ ภูมิภาคที่รับรู้ได้ บนหน้าเว็บที่ผู้ใช้เทคโนโลยีช่วยเหลืออาจต้องการเข้าถึงอย่างรวดเร็ว.
บทบาทของแลนด์มาร์ค ARIA มี 8 ประเภทและจะต้องเพิ่มเป็นแอตทริบิวต์ของแท็ก HTML ที่เกี่ยวข้อง.
บทบาท =”ธง”
บทบาทแบนเนอร์มีวัตถุประสงค์เพื่อใช้เป็นหลักสำหรับเนื้อหาที่เกี่ยวข้องกับทั้งไซต์ไม่ใช่เฉพาะกับแต่ละหน้า โดยปกติจะมีการเพิ่มเป็นแอตทริบิวต์ในส่วนหัวหลักของไซต์สำหรับโลโก้และข้อมูลทั่วทั้งไซต์ที่สำคัญอื่น ๆ เป็นสิ่งสำคัญที่คุณสามารถใช้บทบาทแบนเนอร์ได้เพียงครั้งเดียวภายในเอกสาร HTML หรือแอปใด ๆ.
บทบาท =”หลัก”
บทบาทหลักของแลนด์มาร์คนั้นเกี่ยวข้องกับเนื้อหาหลักของเอกสาร ไม่สามารถใช้มากกว่าหนึ่งครั้งในหน้า HTML ใด ๆ มันมักจะดังต่อไปนี้ บทบาทการนำทางมีวัตถุประสงค์เพื่อใช้ในการระบุพื้นที่ที่มีองค์ประกอบการนำทางเช่นลิงก์และรายการบนไซต์. บทบาทแลนด์มาร์กเสริมอธิบายเนื้อหาเพิ่มเติมที่เกี่ยวข้องกับเนื้อหาหลักของเว็บไซต์ มันจะต้องอยู่ในระดับที่คล้ายกันในลำดับชั้น DOM เป็น บทบาท contentinfo แจ้งตัวแทนผู้ใช้เกี่ยวกับการปรากฏตัวของภูมิภาคที่มีข้อมูลเมตาประเภทต่าง ๆ เช่นข้อมูลลิขสิทธิ์ประกาศทางกฎหมายและความเป็นส่วนตัว โดยปกติจะใช้สำหรับส่วนท้ายของไซต์. บทบาทจุดสังเกตแบบฟอร์มระบุว่าแบบฟอร์มกำลังรอการป้อนข้อมูลของผู้ใช้ สำหรับแบบฟอร์มการค้นหาที่คุณควรใช้ บทบาทการค้นหานั้นอธิบายได้ด้วยตัวเองมันมีจุดประสงค์เพื่อช่วยให้เทคโนโลยีช่วยเหลือระบุฟังก์ชันการค้นหาของเว็บไซต์. คุณสามารถใช้บทบาทสถานที่สำคัญของแอปพลิเคชันสำหรับภูมิภาคที่คุณต้องการประกาศเป็นเว็บแอปแทนที่จะเป็นเอกสารเว็บ ไม่แนะนำให้รวมไว้ในเว็บไซต์ดั้งเดิมเนื่องจากจะมีคำแนะนำเกี่ยวกับเทคโนโลยีอำนวยความสะดวกในการเปลี่ยนจากโหมดการเรียกดูปกติไปเป็นโหมดการเรียกดูแอปพลิเคชัน คุณควรใช้บทบาทหลักนี้ด้วยความระมัดระวังอย่างยิ่ง. ในขณะที่บทบาทช่วยให้คุณสามารถกำหนดความหมายของแท็ก HTML, สถานะและคุณสมบัติให้ผู้ใช้มีข้อมูลเพิ่มเติมเกี่ยวกับวิธีการโต้ตอบกับพวกเขา ทั้งสถานะและคุณสมบัติถูกทำเครื่องหมายด้วย แอททริบิวต์ aria-prefixed ด้วยไวยากรณ์ aria- *. แอตทริบิวต์ ARIA ที่รู้จักกันดีที่สุดน่าจะเป็นคุณสมบัติที่ต้องใช้เพลงและสถานะที่ตรวจสอบโดยเพลง เพลงที่ต้องการคือ คุณสมบัติ เนื่องจากเป็นคุณลักษณะถาวรขององค์ประกอบอินพุต (เช่นผู้ใช้ต้องกรอกข้อมูล) ในขณะที่การตรวจสอบโดยใช้งานจริงนั้นเป็น สถานะ เนื่องจากช่องทำเครื่องหมายอาจเปลี่ยนค่าบ่อยครั้งเนื่องจากการโต้ตอบของผู้ใช้. บางครั้งสถานะและคุณสมบัติใช้ค่าโทเค็น (ชุด จำกัด ของค่าที่กำหนดไว้ล่วงหน้า) ตัวอย่างเช่นคุณสมบัติ aria-live สามารถมีค่าต่างกัน 3 ค่า: ปิด, สุภาพ, แน่วแน่. ไวยากรณ์ในตัวอย่างนี้มีลักษณะดังนี้: ในกรณีอื่น ๆ ค่าของแอททริบิวต์ aria-prefixed จะถูกแทนด้วย เงื่อนไข, หมายเลข, จำนวนเต็ม, การอ้างอิง ID หรือ ถูกผิด ค่า. ใช้แอตทริบิวต์ความสัมพันธ์เพื่อระบุความสัมพันธ์ระหว่างองค์ประกอบต่าง ๆ ในเว็บไซต์ของคุณซึ่งไม่สามารถกำหนดได้จากโครงสร้างเอกสาร ตัวอย่างเช่น หลังจากที่คุณตั้งค่าบทบาทแลนด์มาร์ค ARIA สำหรับพื้นที่ที่รับรู้ได้ในหน้า HTML ของคุณแล้วมันสามารถช่วยเทคโนโลยีการช่วยเหลือได้มากมายหากคุณเปลี่ยนสถานะและคุณสมบัตินำหน้า ARIA ขององค์ประกอบย่อยตามเหตุการณ์ที่เกิดขึ้นบนหน้าจอ สิ่งนี้อาจเป็นสิ่งสำคัญที่ผู้ใช้ต้องโต้ตอบกับเว็บไซต์เช่นกรอกแบบฟอร์มหรือเรียกใช้คำค้นหา. กฎทั่วไปของการออกแบบการช่วยสำหรับการเข้าถึงคือสถานะปัจจุบันของอินเทอร์เฟซผู้ใช้จำเป็นต้องรับรู้ได้เสมอด้วยเทคโนโลยีช่วยเหลือ ตัวอย่างเช่นหากผู้ใช้เลือกตัวเลือกในแบบฟอร์มผู้ใช้จะต้องเลือกตัวเลือกสำหรับเทคโนโลยีช่วยเหลือเช่นกัน สิ่งนี้สามารถทำได้อย่างง่ายดายโดยการใช้สถานะการเลือกเพลงด้วยไวยากรณ์ต่อไปนี้: แนวทางปฏิบัติด้านการเขียนของ WAI-ARIA ของ W3C สามารถให้แนวคิดที่ยอดเยี่ยมอื่น ๆ อีกมากมายเกี่ยวกับวิธีการประสานภาพและอินเทอร์เฟซที่เข้าถึงได้ง่ายของไซต์ของคุณ. บางครั้งการใช้บทบาทและคุณสมบัติของ ARIA สามารถซ้ำซ้อนกันได้ เมื่อคุณใช้แท็ก semantic ของ HTML5 เช่น ตัวอย่างเช่นไม่จำเป็นต้องใช้ ฟอร์ม บทบาทของสถานที่สำคัญในการกำหนด ดังนั้นหากคุณได้เพิ่ม ซ่อนเร้น คุณลักษณะ HTML ของแบบฟอร์มการป้อนข้อมูลจึงไม่จำเป็นต้องเพิ่ม เพลงที่ซ่อนอยู่ สถานะเป็นเบราว์เซอร์รวมโดยค่าเริ่มต้น.. หลังถูกเพิ่มเข้าไปในรายละเอียด W3C โดยมีวัตถุประสงค์ในการทำแผนที่ หลัก บทบาทของแลนด์มาร์ค ARIA สำหรับองค์ประกอบ HTML แบบความหมาย. บทบาท =”การเดินเรือ”
บทบาท =”ประกอบ”
บทบาท = "หลัก". โพสต์ที่เกี่ยวข้องบทความยอดนิยมความคิดเห็นล่าสุดเป็นตัวอย่างทั่วไปของเนื้อหาประกอบอิสระ.บทบาท =”contentinfo”
บทบาท =”ฟอร์ม”
บทบาท = "ค้นหา" แทน.บทบาท =”ค้นหา”
บทบาท =”ใบสมัคร”
รัฐและคุณสมบัติ
ไวยากรณ์ของแอตทริบิวต์ Aria ที่ขึ้นต้นด้วย
วิธีการใช้ประโยชน์จากสถานะและคุณสมบัติ ARIA
1. สร้างความสัมพันธ์ระหว่างองค์ประกอบที่มีคุณสมบัติความสัมพันธ์
เพลง-labelledby property ระบุองค์ประกอบที่ระบุองค์ประกอบปัจจุบัน.เพลง-labelledby - ท่ามกลางสิ่งอื่น ๆ - สามารถผูกหัวเรื่องไปยังภูมิภาคแลนด์มาร์ค ARIA ด้วยวิธีต่อไปนี้:นี่คือหัวข้อ
เนื้อหาหลัก… 2. ซิงโครไนซ์สถานะและคุณสมบัติด้วยวงจรชีวิตขององค์ประกอบ
3. จับคู่อินเตอร์เฟซ Visual และการเข้าถึงได้
.อย่าใช้ ARIA มากเกินไป
หรือ , เว็บเบราว์เซอร์ที่ทันสมัยเพิ่มความหมาย ARIA ที่เหมาะสมโดยค่าเริ่มต้น ในกรณีนี้มันไม่มีเหตุผลที่จะต้องกำหนดบทบาทสำคัญของ ARIA ต่างหาก. ธาตุ. แทนการ ไวยากรณ์มันสมบูรณ์เพียงพอที่จะใช้เพียงแค่ . นอกจากนี้ยังไม่จำเป็นที่จะต้องใช้แอตทริบิวต์ดั้งเดิมของ HTML พร้อมกับคุณสมบัติ ARIA ที่เหมาะสม.
