Accessibility and your app design

Accessibility is about making your app usable to the largest possible audience. For some apps, accessibility is required by law. For others, it’s part of the service you are offering to a specific audience and a way to make your app more generally appealing.

Choosing to incorporate accessibility features is a good idea no matter what your motivation. Thinking about accessibility, in turn, will help you to become a better designer because you will be considering the user experience much more broadly for a greater variety of users.

Be accessible

Accessibility options include features relating to mobility, vision, color perception, hearing, speech, cognition and literacy. However, you can address most requirements by providing:

  • support for keyboard interactions and screen readers
  • support for user customization, such as font, zoom setting (magnification), color, and high-contrast settings
  • alternatives or supplements for parts of your UI, such as audio descriptions of text for those who are visually impaired

Standard Windows controls already have Microsoft UI Automation support and are accessible by default. They require fewer accessibility attributes that are app-specific. If you want to create a custom control, you can add similar support by using custom automation peers.

In the UI design, here are some steps you should take to ensure you app works well with the following scenarios:

picture1

Scenario Steps to take
Screen reading Users of this feature rely on a screen reader like MS Narrator to help them create a mental model of your UI. To help them interact with your app, you need to provide information about its UI elements, such as name, role, description, state and value. Learn more about exposing basic accessibility information.
Keyboard accessibility Allow users to interact with all UI elements by keyboard only. This enables them to:
– navigate the app by using Tab and arrow keys
– activate UI elements by using the Spacebar and Enter keys
– access commands and controls by using keyboard shortcutsLearn more about implementing keyboard accessibility.
Accessible visual experience Some visually impaired users prefer text displayed with a high contrast ratio. They likely also need a UI that looks good in high-contrast mode and scales properly after changing settings in the Ease of Access control panel. Where color is used to convey information, users with color blindness need color alternatives like text, shapes and icons. Learn more about supporting high-contrast themes and about meeting accessible text requirements.
Important: To prevent seizures, avoid elements that flash. If you must include flashing elements, do not let them flash more than three times per second.

 

Reduce UI button pressing

There are other design-related ideas you can employ to make your app more accessible. For example, try to reduce UI gestures to make common tasks require less button pressing.

Provide multiple ways to interact with the same control. For example, activate UI elements by use of the keyboard, rather than just by touch or click. A control that only supports mouse interactions would be extremely difficult, if not impossible, for a visually impaired person to use. To make a control accessible to the visually impaired, you must provide keyboard shortcuts. Also, let users navigate your app using the tab and arrow keys.

Note: Include only interactive elements in the tab order.

Consider creating a tab flow diagram to help you plan how the user would progress through common tasks using only the keyboard. The tab order is also important because it indicates what order screen readers should present the text to the user. For more information, refer to the eBook Engineering Software for Accessibility.

picture2

Not everyone has perfect vision

Design your text and UI to support a high-contrast theme. While color is important, it must not be the only channel of communicating information. For example, users who are color blind would not be able to distinguish some color status indicators from their surroundings. Include other visual cues, preferably text, to ensure that information is accessible.

Figure 1: The screen on the right represents, for those viewing this blog without colorblindness, what those who are colorblind would most likely see – reds and greens are indistinguishable.

Figure 1: The screen on the right represents, for those viewing this blog without colorblindness, what those who are colorblind would most likely see – reds and greens are indistinguishable.

 Figure 2: By adding text indicators, users who are colorblind are able to recognize the various color options even though they are not able to see it.

Figure 2: By adding text indicators, users who are colorblind are able to recognize the various color options even though they are not able to see it.

Imagine you had to work with a black and white printout of your app’s screen. The values of the colors – how dark or light they are on a grayscale – help you tell them apart. This is important to keep in mind when you are selecting colors for highlights and calls to action, which you read about in our blog on visual communication and visual cues. You can also add textures to help distinguish the colors – but try to keep them subtle.

picture5

Optimize your UWP app design for touch input and get basic support for mouse, pen and touchpad by default. Visit MSDN to learn more about designing interactions that are easy to use.

Scale

Allowing users to zoom and resize elements can be helpful to people with visual impairment, especially for images that include words. Ensure that text and UI scale appropriately when Ease of Access settings are changed. However, take care not to start with a font size that is too small in general for many users. Everyone’s vision deteriorates as they age; your app should be available to users of any age.

To allow for differences in vision, provide scaling options for your users in your app settings. They might change the font size for easier reading or, if you include the option, may shrink or enlarge the UI as well.

Note: Using vector images (SVG) rather than raster images makes scaling easier. Raster images can become pixelated when enlarged or distorted when shrunk. Vector images look proportional and clear at any scale.

Figure 3: When zoomed onto the section of the illustration, vector images produce clear sharp edges compared to the pixelated and blurriness of the raster image.

Figure 3: When zoomed onto the section of the illustration, vector images produce clear sharp edges compared to the pixelated and blurriness of the raster image.

Once you believe you have your design working, be sure to test it on your target device(s). The Windows Software Development Kit (SDK) includes accessibility testing tools such as AccScope, Inspect and UI Accessibility Checker. Testing the design should help you identify any areas that need correcting, as well as any opportunities presented on different screen sizes. For more information about these tools, see the article about accessibility testing on MSDN.

If you want your app to look good on very large screens, you may want to include optional larger images, add more whitespace, add rows or columns or incorporate more navigation options without using submenus. You could also take advantage of the extra space by adding something like an overlay on part of the screen to provide more information, such as details about a selected item or a view of the user’s cart.

Figure 4: As the app scales up the images' size increase and more spacing occurs between elements. The navigation also expands and now includes text indicators. The extra space allows for more information to be included onto the app's canvas as seen here with the inclusion of the map.

Figure 4: As the app scales up the images’ size increase and more spacing occurs between elements. The navigation also expands and now includes text indicators. The extra space allows for more information to be included onto the app’s canvas as seen here with the inclusion of the map.

Wrapping up

Accessibility design is really just usability design for a larger audience. While the Universal Windows Platform (UWP) can take care of some of this for you, you will find that a bit of thoughtfulness in incorporating built-in controls will actually go a long way toward making your app more accessible and usable for everyone. To learn more about UWP and accessibility, refer to the following MSDN articles:

Practice your app accessibility skills – download Visual Studio and get developing!

The Windows team would love to hear your feedback. Please keep the feedback coming using our Windows Developer UserVoice site. If you have a direct bug, please use the Windows Feedback tool built directly into Windows 10.

Hyper-V @ Ignite

I am busily getting ready for my Hyper-V session at Ignite this year – and went to check for other sessions that I could be pointing people to.  Initial results where not hopeful:

image

Umm.  What?  Well – after a short discussion with the team running the Ignite website, it seems that the session search can’t handle dashes.  Guh. 

image

Much better (https://myignite.microsoft.com/sessions?q=Hyper#ignite-html-anchor to see the results for yourself).  And – of course do not forget all the great sessions that we have on Windows Containers (https://myignite.microsoft.com/sessions?q=Containers#ignite-html-anchor):

image

This year I only have one session – Discover what’s new in Windows Server 2016 Virtualization – https://myignite.microsoft.com/sessions/2957.  My goal is to try and fly through all the great new functionality – and hopefully show off a couple of things that even our technical preview testers will have missed along the way.

I will also be spending plenty of time at the Hyper-V and Containers booths – so come on by and have a chat with us if you are there.

Cheers,
Ben

Blocking out-of-date Flash ActiveX controls on IE11

Note: Customers running Windows Server 2012 R2, Windows 8.1, and Windows 10 are not impacted by this change. By default, Windows Update will automatically install important Flash updates as they become available for Internet Explorer and Microsoft Edge on those systems.

Starting on October 11, 2016, we’re expanding the out-of-date ActiveX control blocking feature to include outdated versions of Adobe Flash Player. This update notifies you when a Web page tries to load a Flash ActiveX control older than (but not including):

  • Adobe Flash Player version 21.0.0.198
  • Adobe Flash Player Extended Support Release version 18.0.0.241

You can continue to view the complete list of out-of-date ActiveX controls being blocked by this feature here.

Supported configurations and scope of out-of-date Flash ActiveX control blocking

Unlike out-of-date Java and Silverlight blocking, the following caveats are additionally applicable to out-of-date Flash ActiveX control blocking.

Supported configurations

Out-of-date Flash ActiveX control blocking only applies to Internet Explorer 11 on Windows 7 SP1 or Windows Server 2008 R2.

Scope

First, with out-of-date Flash ActiveX control blocking, Internet Explorer will only warn you once per tab process. All subsequent out-of-date Flash ActiveX controls will be allowed.

Second, users who are not members of the Local Administrators group on the PC will not see any out-of-date Flash ActiveX control blocks.

Security note:

If you would like out-of-date Flash blocking to apply to all users, including non-members of the Administrators group, run the following command from a command prompt:

reg add "HKCUSoftwareMicrosoftWindowsCurrentVersionPoliciesExt" /v NonAdminSuppressEnabled /t REG_DWORD /d 0 /f

Finally, the term of out-of-date Flash ActiveX control blocking will end on November 10, 2016.

Enterprise testing for out-of-date Flash ActiveX control blocking

Remember, out-of-date ActiveX controls aren’t blocked in the Local Intranet Zone or the Trusted Sites Zone, so your intranet sites and trusted line-of-business apps should continue to use ActiveX controls without any disruption.

If you want to see what happens when a user goes to a Web page with an out-of-date Flash ActiveX control after October 11, 2016, you can run this test:

  • On a test computer, install the most recent cumulative update for Internet Explorer.
  • Open a command prompt and run this command to stop downloading updated versions of the versionlist.xml file:
    reg add "HKCUSoftwareMicrosoftInternet ExplorerVersionManager" /v DownloadVersionList /t REG_DWORD /d 0 /f

    Important: After you’re done testing, delete this registry key. If you don’t, this computer will stop receiving the updated VersionList.xml file with all of the out-of-date ActiveX controls. Because of this, we don’t recommend setting this registry key in your production environment.

  • Copy the test versionlist-TEST.xml file from here to %LOCALAPPDATA%MicrosoftInternet ExplorerVersionManager
  • Rename this file to versionlist.xml. Make sure you agree to overwrite any existing file.

    Important: After you’re done testing, replace this file with its production version from here. We don’t recommend manually changing the versionlist.xml file in your production environment.

  • Restart Internet Explorer.

You’ll now get an out-of-date ActiveX control blocking notice when a Web site tries to load an outdated Flash ActiveX control.

Screen capture displaying an error: "Flash Player was blocked because it is out of date and needs to be updated" with "Update" and "Run this time" buttons.

If you need more time to minimize your reliance on outdated Flash ActiveX controls, see the Out-of-date ActiveX control blocking on managed devices section of the Out-of-date ActiveX control blocking topic.

― Jasika Bawa, Program Manager, Enterprise & Security