โฮมเพจ » การเข้ารหัส » ดูการเข้าถึงเว็บมาตรฐานและการเข้าถึงแอป HTML ของ ARIA

    ดูการเข้าถึงเว็บมาตรฐานและการเข้าถึงแอป 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 ใด ๆ มันมักจะดังต่อไปนี้

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

    บทบาท =”การเดินเรือ”

    บทบาทการนำทางมีวัตถุประสงค์เพื่อใช้ในการระบุพื้นที่ที่มีองค์ประกอบการนำทางเช่นลิงก์และรายการบนไซต์.

    บทบาท =”ประกอบ”

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

    บทบาท =”contentinfo”

    บทบาท contentinfo แจ้งตัวแทนผู้ใช้เกี่ยวกับการปรากฏตัวของภูมิภาคที่มีข้อมูลเมตาประเภทต่าง ๆ เช่นข้อมูลลิขสิทธิ์ประกาศทางกฎหมายและความเป็นส่วนตัว โดยปกติจะใช้สำหรับส่วนท้ายของไซต์.

    บทบาท =”ฟอร์ม”

    บทบาทจุดสังเกตแบบฟอร์มระบุว่าแบบฟอร์มกำลังรอการป้อนข้อมูลของผู้ใช้ สำหรับแบบฟอร์มการค้นหาที่คุณควรใช้ บทบาท = "ค้นหา" แทน.

    บทบาท =”ค้นหา”

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

    บทบาท =”ใบสมัคร”

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

    ภาพ: ทรัพยากรการเข้าถึง Sky.com

    รัฐและคุณสมบัติ

    ในขณะที่บทบาทช่วยให้คุณสามารถกำหนดความหมายของแท็ก HTML, สถานะและคุณสมบัติให้ผู้ใช้มีข้อมูลเพิ่มเติมเกี่ยวกับวิธีการโต้ตอบกับพวกเขา ทั้งสถานะและคุณสมบัติถูกทำเครื่องหมายด้วย แอททริบิวต์ aria-prefixed ด้วยไวยากรณ์ aria- *.

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

    ไวยากรณ์ของแอตทริบิวต์ Aria ที่ขึ้นต้นด้วย

    บางครั้งสถานะและคุณสมบัติใช้ค่าโทเค็น (ชุด จำกัด ของค่าที่กำหนดไว้ล่วงหน้า) ตัวอย่างเช่นคุณสมบัติ aria-live สามารถมีค่าต่างกัน 3 ค่า: ปิด, สุภาพ, แน่วแน่. ไวยากรณ์ในตัวอย่างนี้มีลักษณะดังนี้:

    .

    ในกรณีอื่น ๆ ค่าของแอททริบิวต์ aria-prefixed จะถูกแทนด้วย เงื่อนไข, หมายเลข, จำนวนเต็ม, การอ้างอิง ID หรือ ถูกผิด ค่า.

    วิธีการใช้ประโยชน์จากสถานะและคุณสมบัติ ARIA

    1. สร้างความสัมพันธ์ระหว่างองค์ประกอบที่มีคุณสมบัติความสัมพันธ์

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

    เพลง-labelledby - ท่ามกลางสิ่งอื่น ๆ - สามารถผูกหัวเรื่องไปยังภูมิภาคแลนด์มาร์ค ARIA ด้วยวิธีต่อไปนี้:

    นี่คือหัวข้อ

    เนื้อหาหลัก…

    2. ซิงโครไนซ์สถานะและคุณสมบัติด้วยวงจรชีวิตขององค์ประกอบ

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

    3. จับคู่อินเตอร์เฟซ Visual และการเข้าถึงได้

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

    แนวทางปฏิบัติด้านการเขียนของ WAI-ARIA ของ W3C สามารถให้แนวคิดที่ยอดเยี่ยมอื่น ๆ อีกมากมายเกี่ยวกับวิธีการประสานภาพและอินเทอร์เฟซที่เข้าถึงได้ง่ายของไซต์ของคุณ.

    อย่าใช้ ARIA มากเกินไป

    บางครั้งการใช้บทบาทและคุณสมบัติของ ARIA สามารถซ้ำซ้อนกันได้ เมื่อคุณใช้แท็ก semantic ของ HTML5 เช่น หรือ

    , เว็บเบราว์เซอร์ที่ทันสมัยเพิ่มความหมาย ARIA ที่เหมาะสมโดยค่าเริ่มต้น ในกรณีนี้มันไม่มีเหตุผลที่จะต้องกำหนดบทบาทสำคัญของ ARIA ต่างหาก.

    ตัวอย่างเช่นไม่จำเป็นต้องใช้ ฟอร์ม บทบาทของสถานที่สำคัญในการกำหนด

    ธาตุ. แทนการ
    ไวยากรณ์มันสมบูรณ์เพียงพอที่จะใช้เพียงแค่
    . นอกจากนี้ยังไม่จำเป็นที่จะต้องใช้แอตทริบิวต์ดั้งเดิมของ HTML พร้อมกับคุณสมบัติ ARIA ที่เหมาะสม.

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

    © Savtec
    ข้อมูลที่เป็นประโยชน์และเคล็ดลับการพัฒนาเว็บ การเขียนโปรแกรม, ออกแบบเว็บไซต์, CSS, HTML, JAVASCRIPT กำหนดค่าและติดตั้ง WINDOWS อีกครั้ง การสร้างเว็บไซต์และแอปพลิเคชันตั้งแต่เริ่มต้น