Vytváranie aplikácií s plátnom v službe PowerAppsCreate accessible canvas apps in PowerApps

Prístupnú aplikáciu s plátnom môžu úspešne používať aj ľudia so zrakovým, sluchovým alebo iným postihnutím.An accessible canvas app will allow users with vision, hearing and other impairments to successfully use the app. Dodržanie nižšie uvedených pokynov je nielen podmienkou mnohých vlád a organizácií, ale tiež zvyšuje použiteľnosť aplikácie pre všetkých používateľov bez ohľadu na ich schopnosti.In addition to being a requirement for many governments and organizations, following the below guidelines increases usability for all users, regardless of their abilities.

Pomocou kontroly zjednodušenia ovládania môžete skontrolovať potenciálne problémy so zjednodušením ovládania aplikácie.Use the Accessibility Checker to help review potential accessibility issues in your app.

Rozloženie a farbaLayout and color

Logický a jednoduchý návrh znamená prístupnejšiu aplikáciu pre všetkých používateľov.Common sense and uncomplicated design helps apps be more accessible to all users. Ak vykonávate zásadné úpravy aplikácie, skúste sa riadiť týmito radami.When doing heavy customization of apps take note of the below suggestions. Motívy služby PowerApps sú predvolene prístupné.PowerApps themes are by default accessible.

  • Skontrolujte, či sú všetky prvky dobre viditeľné a veľkosť textu je dostačujúca.Ensure all elements are clearly visible and text is of sufficient size. Všetok obsah musí byť bez problémov zrozumiteľný a čitateľný voľným okom.All content must be easily read and understood by the naked eye.
  • Vyhýbajte sa použitiu vlastnosti viditeľnosti (Visibility) na prenesenie prvkov do zobrazenia.Avoid using the visibility property of items to bring an element into view. Ak potrebujete, aby sa obsah zobrazoval podmienečne, vytvorte ho na novej obrazovke, na ktorú sa bude prechádzať.If you need to show something conditionally, create the content in a new screen and navigate to it and back.
  • Skontrolujte, či majú prvky vstupu na obrazovke označenie.Ensure input elements are labeled on the screen. Vlastnosť AccessibilityLabel určuje, čo bude čítačka obrazovky oznamovať.AccessibilityLabel property defines what the screen reader will announce.
  • Ak upravujete farby, nastavte kontrast medzi textom a pozadím na pomer 4,5 :  1 alebo vyšší.If customizing colors, ensure the contrast of text:background is 4.5:1 or greater. Softvérové nástroje, ktoré tento proces uľahčujú, sú ľahko dostupné.Software tools that assist this process are readily available.
  • Skontrolujte, či rozloženie zabezpečuje logickú postupnosť pri čítaní zhora nadol a zľava doprava.Ensure layout follows a logical flow when read top-bottom, left to right.

Podpora klávesniceKeyboard support

Pri testovaní prístupnosti si overte, či je možné ovládať aplikáciu len pomocou klávesnice. Takisto skontrolujte režimy prístupnosti na zariadeniach so systémami iOS a Android a možnosť bezproblémového prechádzania aplikáciou so zapnutou čítačkou obrazovky.When testing your app's accessibility, ensure the app can be used with the keyboard only, the accessibility modes on iOS and Android, as well as navigated successfully with the screen reader enabled.

Na prechádzanie pomocou klávesnice (s čítačkou obrazovky alebo bez nej) nastavte v každom ovládacom prvku vlastnosť TabIndex, aby sa pri prechode na pole vstupu pomocou klávesu TAB zachovala logická postupnosť.For keyboard navigation (with or without the screen reader) ensure that a logical order is followed when using the TAB key to navigate to input fields by setting each control's TabIndex property:

  • Ovládacie prvky Label (Označenie), Image (Obrázok), Icon (Ikona) a Shape (Tvar) – ak predstavujú interaktívne prvky (napríklad tlačidlá), nastavte vlastnosť TabIndex na hodnotu 0. Ak majú dekoratívnu funkciu alebo slúžia ako text, nastavte hodnotu -1.Label, Image, Icon, Shape contols - if they represent interactive elements (i.e.buttons) set TabIndex to 0; if they are decorative elements or text, set TabIndex to -1.
  • Nenastavujte hodnotu vyššiu ako 0.Avoid setting tab index higher than zero.

Podpora čítačiek obrazovkyScreen reader support

Pri používaní služby PowerApps s čítačkou obrazovky sa odporúčajú nasledujúce podporované softvérové kombinácie:The following software combinations are the supported recommendations for consuming PowerApps with a screen reader:

  • Windows: Edge/ModerátorWindows: Edge / Narrator
  • macOS: Safari/VoiceOvermacOS: Safari / VoiceOver
  • Android: aplikácia PowerApps/TalkbackAndroid: PowerApps app / Talkback
  • iOS: aplikácia PowerApps/VoiceOveriOS: PowerApps app / VoiceOver

Odporúčania na zabezpečenie uspokojivej práce s čítačkami obrazovky:To ensure a satisfying experience with the screen reader it is recommended to:

  • Skontrolujte, či majú všetky ovládacie prvky vstupu nastavenú vlastnosť AccessibilityLabel.Ensure all input controls have the AccessibilityLabel property set.
  • V prípade obrázkov nastavte vlastnosť AccessibilityLabel na príslušný popis.For images set AccessibilityLabel to an appropriate description.
    • Ak sa obrázok nepoužíva ako tlačidlo ani odkaz (napríklad ikona, ktorá má len dekoratívnu funkciu) a čítačka obrazovky by ho nemala čítať, vlastnosť AccessibilityLabel nesmie byť nastavená alebo musí zostať prázdna.If a picture is not used as a button or a link (i.e. icon is there just for the decoration) and should not be read by the screen reader, make sure the AccessibilityLabel is empty or not set.
    • Ak sa obrázok alebo ikona používa ako tlačidlo, nastavte vlastnosť TabIndex na hodnotu 0 a vlastnosť AccessibilityLabel na popis odkazu.If a picture or an icon is used as a button, then set TabIndex to 0 and AccessibilityLabel to the link description.

MultimédiáMultimedia

Skontrolujte, či majú všetky videá titulky a používatelia majú k dispozícii prepis všetkých zvukových nahrávok.Ensure all videos are captioned and a transcript of all audio recordings is available to the user. Ovládací prvok Video podporuje skryté titulky vo formáte WebVTT prostredníctvom vlastnosti ClosedCaptionsUrl.Video control suppports closed captions in WebVTT format via the ClosedCaptionsUrl property.

Ak je zapnutá čítačka obrazovky, ovládací prvok Časovač neoznamuje text tlačidla, ale uplynulý čas.Note that with the screen reader enabled, Timer does not announce button text, but how much time has passed. Oznámenia nie je možné vypnúť, ani keď je časovač skrytý pomocou nízkej nepriehľadnosti.Announcements can't be turned off, even if timer is hidden with low opacity.

Práca s podpismiWorking with signatures

Ak je v aplikácii pole podpisu využívajúce ovládací prvok Vstup perom, je potrebné povoliť alternatívny spôsob zadávania podpisu.If you have a signature field that uses the PenInput control you need to enable an alternative method of signature input. Odporúča sa zobraziť ovládací prvok Vstup textu, do ktorého môže používateľ zadať svoje meno.The recommended way is to show a TextInput control where a user can type their name. Skontrolujte, či sa pokyny na podpisovanie nachádzajú vo vlastnosti AccessibilityLabel a ovládací prvok je blízko prvku Vstup perom (napravo alebo priamo pod ním).Ensure the signing instructions are placed in the AccessibilityLabel property and the control is placed close to the Pen input - to the right or immediately below.

Súvisiace témy:Related: