pos-system/microservices/.agent/skills/maui-branding-expert/guidelines/accessibility-rules.md

Accessibility Rules / Quy Tắc Truy Cập

Overview

Ứng dụng Enterprise BẮT BUỘC tuân thủ chuẩn WCAG. .NET MAUI sử dụng SemanticProperties (thay thế AutomationProperties cũ).

---

1. SemanticProperties

<!-- ✅ MODERN -->
<Button Text="Submit"
        SemanticProperties.Description="Submit button"
        SemanticProperties.Hint="Double tap to submit form" />

<!-- ❌ DEPRECATED -->
<Button AutomationProperties.Name="Submit" />

Property	Purpose
Description	Mô tả ngắn - đọc khi focus
Hint	Hướng dẫn chi tiết
HeadingLevel	Heading hierarchy (Level1-9)

---

2. Heading Levels

<Label Text="Settings"
       SemanticProperties.HeadingLevel="Level1" />

<Label Text="Account"
       SemanticProperties.HeadingLevel="Level2" />

---

3. Interactive Elements

<!-- Image buttons PHẢI có Description -->
<ImageButton Source="cart.png"
             SemanticProperties.Description="Shopping cart"
             SemanticProperties.Hint="Tap to view cart" />

<!-- Entry với label -->
<Label Text="Email" x:Name="EmailLabel" />
<Entry SemanticProperties.LabeledBy="{x:Reference EmailLabel}" />

---

4. Font Scaling

❌ DON'T: Fixed Heights

<Label HeightRequest="50" />

✅ DO: Flexible Layouts

<Grid RowDefinitions="Auto,Auto,*">
    <Label Grid.Row="0" LineBreakMode="WordWrap" />
</Grid>

---

5. Touch Target Size

Platform	Minimum
iOS	44x44
Android	48x48

<Button MinimumHeightRequest="48" MinimumWidthRequest="48" />

---

6. Programmatic Announcements

SemanticScreenReader.Announce("Order placed successfully");

---

Test Checklist

• Buttons có Description
• Images có Description (trừ decorative)
• Headings có HeadingLevel
• UI không vỡ ở font scale 200%
• Touch targets >= 48dp