จัดระเบียบตัวควบคุมในแอปพื้นที่ทำงานที่สามารถเข้าถึงได้

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

ชื่อหน้าจอที่มีความหมาย

เมื่อหน้าจอถูกโหลด โปรแกรมอ่านหน้าจอจะพูดชื่อหน้าจอ เลือกชื่อที่มีความหมายเพื่อกำหนดทิศทางผู้ใช้

คุณสามารถเปลี่ยนชื่อหน้าจอในโครงสร้างตัวควบคุมหรือแผงคุณสมบัติ ใน Power Apps Studio เลือกหน้าจอ และจากนั้น เลือก เพื่อเปลี่ยนชื่อหน้าจอ

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

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

ลำดับการควบคุมเชิงตรรกะ

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

ในตัวอย่างนี้ A จะปรากฏเป็นอันดับแรก เนื่องจากใกล้กับด้านบนมากที่สุด B และ C มีตำแหน่งแนวตั้งเหมือนกัน แต่เนื่องจาก B อยู่ใกล้ทางซ้ายมากกว่า และด้วยเหตุนี้จึงปรากฏก่อนที่ C, D จะปรากฏเป็นอันดับสุดท้าย เนื่องจากอยู่ห่างจากด้านบนมากที่สุด

หมายเหตุ

• ในโหมด การแสดงตัวอย่าง เมื่อแก้ไขแอป ลำดับตัวควบคุมจะไม่อัปเดตเนื่องจากเหตุผลด้านประสิทธิภาพ ลำดับจะถูกแก้ไข เมื่อมีการเผยแพร่และเรียกใช้แอป
• ลำดับตัวควบคุมไม่เหมือนกับที่แสดงใน มุมมองแบบต้นไม้ของตัวควบคุม ใน Power Apps Studio มุมมองแบบต้นไม้จะเรียงลำดับตัวควบคุมตามเวลาที่ถูกเพิ่มลงในแอป ไม่มีผลต่อลำดับของตัวควบคุมเมื่อเรียกใช้แอป
• เมื่อค่า X หรือ Y ของตัวควบคุมถูกตั้งค่าเป็นนิพจน์ ลำดับตัวควบคุมจะไม่ได้รับการอัปเดตเมื่อผลลัพธ์ของนิพจน์เปลี่ยนแปลง ลำดับได้รับการคำนวณและแก้ไขเมื่อมีการบันทึกแอป โดยใช้สถานะเริ่มต้นของแอปเพื่อประเมินนิพจน์
  • หากคุณกำลังเปลี่ยนตำแหน่งเนื่องจากมีการซ่อนหรือแสดงตัวควบคุมอื่นๆ คุณสามารถใช้ คอนเทนเนอร์เค้าโครงอัตโนมัติ เพื่อจัดการ X และ Y สำหรับคุณ
  • คุณยังสามารถวางตำแหน่งตัวควบคุมทั้งหมดในแบบที่เหมาะสมได้ โดยไม่คำนึงถึงค่านิพจน์ ตัวอย่างเช่น หากตัวควบคุม A ควรอยู่ต่ำกว่าตัวควบคุม B และ B อาจถูกซ่อนไว้ในบางครั้ง ให้ตั้งค่า Y ของ A เป็น If(B.Visible, B.Y + B.Height, B.Y + 1) การบวก 1 จะทำให้ A อยู่ต่ำกว่า B เสมอ แม้ว่า B จะถูกซ่อนอยู่ก็ตาม

ตัวควบคุมที่ถูกจัดกลุ่ม

ลำดับเริ่มต้นเหมาะสำหรับเนื้อหาที่แยกได้ แต่ไม่ใช่สำหรับเนื้อหาที่จัดกลุ่ม พิจารณาไทล์สองไทล์แบบเคียงข้างกัน วาดด้วยตัวควบคุม สี่เหลี่ยมผืนผ้า แต่ละไทล์มีส่วนหัว ด้านล่างของส่วนหัวมีปุ่มสองปุ่มซ้อนกันในแนวตั้ง: A และ B สำหรับไทล์แรก และ C และ D สำหรับอีกปุ่ม

ลำดับเริ่มต้นเรียงจากบนลงล่าง จากนั้นซ้ายไปขวา ดังนั้น ลำดับของตัวควบคุมคือ:

1. ซ้าย สี่เหลี่ยมผืนผ้า
2. ขวา สี่เหลี่ยมผืนผ้า
3. หัวเรื่องด้านซ้าย
4. หัวเรื่องด้านขวา
5. A
6. C
7. B
8. D

โครงสร้างนี้ไม่ได้สื่อว่า A และ B อยู่ด้วยกัน และในทำนองเดียวกัน C และ D อยู่ด้วยกัน

ใช้ คอนเทนเนอร์ เพื่อจัดกลุ่มเนื้อหาที่เกี่ยวข้อง ตัวควบคุมทั้งหมดใน คอนเทนเนอร์ จะปรากฏขึ้นพร้อมกันตามลำดับ ภายในคอนเทนเนอร์ ระบบจะเรียงลำดับตัวควบคุมด้วยกฎเดียวกัน: จากบนลงล่าง จากนั้นจากซ้ายไปขวา

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

1. ซ้าย คอนเทนเนอร์
2. หัวเรื่องด้านซ้าย
3. A
4. B
5. ขวา คอนเทนเนอร์
6. หัวเรื่องด้านขวา
7. C
8. D

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

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

ลำดับการนำทางของแป้นพิมพ์ลอจิคัล

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

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

หมายเหตุ

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

หลีกเลี่ยงดัชนีแท็บที่กำหนดเอง

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

หลีกเลี่ยงการใช้ดัชนีแท็บที่กำหนดเองเนื่องจากสาเหตุต่อไปนี้

ความสามารถเข้าถึง

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

ความง่ายในการใช้งาน

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

การบำรุงรักษา

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

ประสิทธิภาพ

เพื่อรองรับดัชนีแท็บที่กำหนดเอง ระบบ Power Apps ต้องตรวจสอบตัวควบคุมทั้งหมดบนหน้าและคำนวณลำดับที่เหมาะสม การคำนวณนี้เป็นกระบวนการที่เคร่งครัด ตัวควบคุม คอนเทนเนอร์ เช่น แกลเลอรี มีกฎเกณฑ์ที่ซับซ้อนเกี่ยวกับวิธีการที่ TabIndex ทำงานสำหรับตัวควบคุมรอง ระบบจะจับคู่ TabIndex ที่ต้องการของผู้สร้างแอปกับค่าอื่นเพื่อปฏิบัติตามกฎเหล่านี้ นี่คือเหตุผลที่แม้ว่า TabIndex จะถูกตั้งค่าเป็นศูนย์สำหรับตัวควบคุมทั้งหมด แต่ tabindex ของ HTML จริงจะเป็นจำนวนบวก

การรวมกับส่วนประกอบอื่น

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

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

ดัชนีแท็บแบบง่าย (พรีวิว)

เพื่อให้แน่ใจว่าดัชนีแท็บเป็น 0 หรือ -1 ให้เปิดใช้งานคุณลักษณะแอป ดัชนีแท็บแบบง่าย จาก การตั้งค่า > คุณลักษณะที่จะให้บริการเร็วๆ นี้

ข้อสำคัญ

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

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

วิธีแก้ปัญหาสำหรับลำดับแท็บที่กำหนดเอง

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

ในตัวอย่างด้านล่าง ปุ่ม A อยู่เหนือปุ่ม B ลำดับการนำทางของแท็บปกติคือ A จากนั้น B

หากต้องการย้อนกลับลำดับการนำทางแท็บ ให้ใส่ B ในตัวควบคุม คอนเทนเนอร์ ตั้งค่า Y ของ คอนเทนเนอร์ ให้อยู่เหนือ A โครงสร้างแอปในขณะนี้มี คอนเทนเนอร์ (และ B) ก่อน A ดังนั้น ลำดับการนำทางแท็บคือ B จากนั้น A

ด้วยเทคนิคนี้ ผู้ใช้โปรแกรมอ่านหน้าจอจะยังพบ B ก่อน A เมื่อนำทางโดยไม่มีแป้น Tab

ขั้นตอนถัดไป

สีที่สามารถเข้าถึงได้ใน Power Apps

ดูเพิ่มเติม

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