คุณลักษณะของ "บทบาท" ใน HTML คืออะไร?

ฉันเห็นคุณลักษณะของบทบาทในงานของบางคน ฉันใช้มันเหมือนกัน แต่ฉันไม่แน่ใจเกี่ยวกับผลกระทบของมัน

ตัวอย่างเช่น:

<header id="header" role="banner">
    Header stuff in here
</header>

หรือ:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

หรือ:

<section id="main" role="main">
     Main content stuff in here
</section>

แอ็ตทริบิวต์บทบาทนี้จำเป็นหรือไม่?

คุณลักษณะนี้ดีกว่าสำหรับซีแมนทิกส์หรือไม่

ปรับปรุง SEO หรือไม่

รายการของบทบาทสามารถพบได้ที่นี่แต่ฉันเห็นบางคนทำขึ้นเอง นั่นเป็นสิ่งที่ได้รับอนุญาตหรือใช้งานอย่างถูกต้องของบทบาทของบทบาท

ความคิดใด ๆ เกี่ยวกับเรื่องนี้?

บทบาทส่วนใหญ่ที่คุณเห็นถูกกำหนดเป็นส่วนหนึ่งของ ARIA 1.0 แล้วรวมเข้ากับ HTML5 ในภายหลัง องค์ประกอบ HTML5 ใหม่บางส่วน (กล่องโต้ตอบหลักและอื่น ๆ ) จะขึ้นอยู่กับบทบาท ARIA ดั้งเดิม

http://www.w3.org/TR/wai-aria/

มีสองเหตุผลหลักในการใช้บทบาทเพิ่มเติมจากองค์ประกอบความหมายดั้งเดิมของคุณ

เหตุผลที่ # 1 การแทนที่บทบาทที่ไม่มีองค์ประกอบภาษาโฮสต์เหมาะสมหรือด้วยเหตุผลต่างๆจึงใช้องค์ประกอบที่เหมาะสมน้อยกว่าความหมาย

ในตัวอย่างนี้มีการใช้ลิงก์แม้ว่าฟังก์ชั่นที่ได้จะมีลักษณะเหมือนปุ่มมากกว่าลิงค์การนำทาง

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

โปรแกรมอ่านหน้าจอจะได้ยินสิ่งนี้เป็นปุ่ม (ตรงข้ามกับลิงก์) และคุณสามารถใช้ตัวเลือกแอตทริบิวต์ CSS เพื่อหลีกเลี่ยง class-itis และ div-itis

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

เหตุผลที่ # 2 การสำรองบทบาทขององค์ประกอบพื้นฐานเพื่อสนับสนุนเบราว์เซอร์ที่ใช้งานบทบาท ARIA แต่ยังไม่ได้ใช้บทบาทขององค์ประกอบพื้นฐาน

ยกตัวอย่างเช่น "หลัก" บทบาทที่ได้รับการสนับสนุนในเบราว์เซอร์เป็นเวลาหลายปี แต่มันเป็นนอกจากนี้ล่าสุดค่อนข้างเป็น HTML5 <main>เพื่อให้เบราว์เซอร์จำนวนมากยังไม่สนับสนุนความหมายสำหรับ

<main role="main">…</main>

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

คุณยังเขียนว่า:

ฉันเห็นบางคนแต่งเอง นั่นเป็นสิ่งที่ได้รับอนุญาตหรือการใช้งานที่ถูกต้องของคุณลักษณะบทบาทหรือไม่

นั่นเป็นการใช้แอตทริบิวต์ที่ถูกต้องเว้นแต่จะไม่มีการรวมบทบาทจริง เบราว์เซอร์จะใช้บทบาทแรกที่รู้จักในรายการโทเค็น

<span role="foo link note bar">...</a>

ออกจากรายการเท่านั้นlinkและnoteเป็นบทบาทที่ถูกต้องดังนั้นบทบาทลิงก์จะถูกนำไปใช้เพราะมาก่อน หากคุณใช้บทบาทที่กำหนดเองตรวจสอบให้แน่ใจว่าพวกเขาจะไม่ขัดแย้งกับบทบาทที่กำหนดไว้ใน ARIA หรือภาษาโฮสต์ที่คุณใช้ (HTML, SVG, MathML และอื่น ๆ )

ตามที่ฉันเข้าใจแล้วบทบาทเริ่มต้นถูกกำหนดโดย XHTML แต่เลิกใช้แล้ว อย่างไรก็ตามตอนนี้มันถูกกำหนดโดย HTML 5 ดูที่นี่: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

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

แนวปฏิบัติที่นี่: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

แอ็ตทริบิวต์บทบาทนี้จำเป็นหรือไม่?

คำตอบ: ใช่

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

มันให้คุณ:

• การเข้าถึง
• การปรับอุปกรณ์
• การประมวลผลฝั่งเซิร์ฟเวอร์
• คำอธิบายข้อมูลที่ซับซ้อน ... ฯลฯ

ฉันรู้ว่านี่เป็นคำถามเก่า แต่สิ่งที่ต้องพิจารณาอีกประการหนึ่งขึ้นอยู่กับข้อกำหนดที่แน่นอนของคุณคือการตรวจสอบความถูกต้องของhttps://validator.w3.org/สร้างคำเตือนดังนี้

คำเตือน: บทบาทของฟอร์มไม่จำเป็นสำหรับฟอร์มองค์ประกอบ

แอ็ตทริบิวต์ Role ส่วนใหญ่ปรับปรุงการเข้าถึงสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ ในหลายกรณีเราใช้เช่นความสามารถในการเข้าถึงการปรับอุปกรณ์การประมวลผลฝั่งเซิร์ฟเวอร์และคำอธิบายข้อมูลที่ซับซ้อน ทราบรายละเอียดเพิ่มเติมคลิก: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute