Accessibility in Detail

Designing software for accessibility

• AccessibilityVideo
There are essentially two types of users of assistive technology (AT):
1. Those who need it, because of disabilities or impairments, age-related conditions, or temporary
conditions (such as limited mobility from a broken limb).
2. Those who use it out of preference, for a more comfortable or convenient computing experience

• Ensure that programs and functionality are easily available to the widest range of users,
including those who have disabilities and impairments.
• Approaching software for accessibility often results in overall improved usability and customer
satisfaction.
Types of assistive technologies and
accessibility features
• Screen Reader
• Keyboard based Navigation
• Narrator
• Visual settings and color schemes
• Magnifier
• Speech recognition
• On-screen keyboard
How to use Assistive technologies
Keyboard based Navigation

• In addition to the standard hardware keyboard, UWP applications

support two software keyboards: the touch (or software
keyboard) and the On-Screen Keyboard.
• Gamepad and remote control share much of the keyboard input
experience for navigation and commanding.
• A well-designed keyboard experience lets users efficiently navigate
the UI of your app and access its full functionality without ever lifting
their hands from the keyboard.
Keyboard based Navigation (cont…)
• Keyboard navigation is typically supported through the Tab keys and the
Arrow keys.
• Tab keys between actionable/active controls in tab order.
• Shift + Tab navigate controls in renavigateverse tab order.
• Arrow keys expose control-specific "inner navigation“.
• Enter and Space key invokes the action or command associated with the
focused control (just like a tap with touch or a click with a mouse).
• Keyboard shortcuts
• Other keys like Esc, Page Up and Down, Home and End Keys.
Screen Reader and Narrator

• A screen reader enables users with visual disabilities or

impairments to navigate a UI by transforming visuals to
audio.
• Each UI element that the user can interact with must be
keyboard accessible
• Narrator is a scaled-down screen reader in Windows that
allows users to hear on-screen text and UI elements read
aloud.
Screen Reader and Narrator (cont…)
• Shortcut for Opening Narrator -> Windows Key + Ctrl + Enter
• Primary navigation is very similar to keyboard access.
• When Narrator is turned on, press the Caps lock key (also known as the Narrator key) together with other
keys to navigate and interact with things on the screen.
• There are lot of other key combinations to access other features for narrator Narrator Detail.
Visual settings and color schemes
• Users with visual impairment may benefit from system settings such as high-contrast mode or the ability to
customize background and foreground color schemes.
• Head to Ease of access settings .
Speech recognition
• It allows users to interact with their computers by voice.
• Use voice command “show Numbers” to activate speech control.
• Say the corresponding number followed by ok to execute that command.
Guidelines, Problems and Fixes
 Keyboard
1. Tab order should be logical and predictable.
• All interactive controls should have tab stops (unless they are in a group).
• Non-interactive controls, such as labels, should not have tab stop.
• Avoid a custom tab order that makes the focus jump around in your application.
2. Try to coordinate tab order and visual order
3. Set initial focus on most logical element.
4. Don't set initial focus on an element that exposes a potentially negative, or even disastrous, outcome

Current Flow
 Keyboard (Issues and Fixes)
Issue Fixes
• Initial Focus not on most • Re arrange UI to reflect logical flow.
primary action. • Programmatically move focus to primary action.
• Tab order not very helpful

• Use TabIndex to set order of tab.

 Keyboard (Issues and Fixes)
Fixes
Issue
• Non-interactive controls,
• To exclude a control from the tab order, set IsTabStop
such as labels , should not
property to false
have tab stop

• Use TabIndex to set order of tab.

 Keyboard (Issues and Fixes)

• Support for Access keys aka shortcuts and Keyboard Accelerators.

• improve the usability and the accessibility of your Windows applications by providing an intuitive way
for users to quickly navigate and interact with an app's visible UI .
• Currently we do not support shortcuts in our app.

Some common Keyboard

accelerators
Narrator
• Flow order should be logical.
• Read out meaningful accessible names for UIElements for better understanding the content or interacting
with the UI.
• Text and other controls which is to be not read by narrator should be skipped.
• Identify events to be notified to user on completion of actions.
• Ensure correct role is read out for a control.
 Narrator (Issues and Fixes)
Fixes
Issue • Map control to proper type
• correct role not read out for
a control.

•
 Narrator (Issues and Fixes)
Issue
• Meaningful name not read
out for UIElements. ( This is
the major culprit in
accessibility bugs).
Fixes
• Set up proper automation properties on the
UIElement.
• Use AutomationProperties.HelpText to give more
information about the UIControl.
• Use tools like Keros to early identify this bug.
 Narrator (Issues and Fixes)
Fixes
Issue • Use RaiseNotificationEvent to notify narrator
• Event completion not about events.
notified to user.

• The RaiseNotificationEvent should be run on App’s

UI Thread.
 Narrator (Issues and Fixes)
Issue Fixes
• Unintended controls not • Set AutomationProperties.AccessibilityView to
skipped by narrator. Another Raw to skip these controls to be read out from
major source of Bugs Narrator.
Accessible Text
• Use proper color contrast ratio for text.
• Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background
behind the text.
• Flow order should be logical for text blocks
• Text blocks are read by narrator.
• Ensure proper text font size.
• Several people use settings of 200% resolution to view text.
 Accessible Text (Issues and Fixes)
Issue Fixes
• Not proper color contrast • Use color code analyzer to identify text contrast
ratio for text ratio.
 Accessible Text (Issues and Fixes)
Issue Fixes
• Text cut in low resolution • Make adaptive UI for scaling properly.
and high text scale factor. • Use AdaptiveTrigger to target screen size specific
requirements.
High Contrast
• Avoid hardcoding colors for high contrast.
• If required to use specific colors for light experience, separately define colors for High Constrast as well.
• Test app in all 4 high contrast themes.
• Respect the background/foreground pairs where possible.
• Use theme specific color sources for High Contrast as they are automatically handled by system on Theme change.

• Add a high contrast-only border where necessary to preserve important boundaries in your UI.
• Use colors in generic.xaml to have better understanding of exact color codes used by system.
 High Contrast (Issues and Fixes)
Issue Fixes
• High contrast not followed • In case of default implementation, Also declare an
implementation for High Contrast if the high
contrast experience is getting affected by Default
Settings.
• Use ResourceDictionary to define settings for High
Contrast.
Learnings
• Logical flow for accessibility should be decided by designers at start
itself.
• Narrator experience for each experience should be finalized at start
itself.
• Proper color codes to be decided at start itself.
• Along with main experience, Experience for High Contrast should be
finalized.
 Custom Controls
• Use Xaml default controls as maximum as possible.
• In case of using custom control, support proper AutomationPeers for Custom Contro. E.g. ManipulatorControl in Layout App
Accessibility Testing tools
• Keros for narrator.
• Color code analyzer for Luminosity
• Test keyboard accessibility
Accessibility Checklist
• We have our own check list for Accessibility.