Better accessability support

[MauPoLom]

Feature Request

A native way to determine if any and with what values accessability services are used/enabled on a device.

Motivation Behind Feature

Mobile Accessibility Compliance and Legislation in EU

In recent years, the European Union put two pieces of legislation in place. They contain deadlines for making mobile products and services accessible in both the public and private sector. These will improve the use for people with disabilities in the EU, accounting for approximately 80 million people. The deadline for the public sector is in 2021, and for the private sector in 2025. Public sector mobile applications

All EU member states have developed national legislation for public sector bodies based on the European Web Accessibility Directive. The effective date for mobile applications is June 23, 2021. The Directive refers to the accessibility standard EN 301 549.

It is important to note that although the EU Web Accessibility Directive applies to public-sector websites and apps, it will have an impact on private organizations as well. For instance, organizations that provide mobile products or services that impact public-facing government apps may need to comply.

From June 23, 2021, public sector bodies have the responsibility to make their mobile app content accessible to everyone.

Feature Description

Create a plugin or embed natively a way to read values/determine the use of accessability services on a device like:

• text zoom
• text zoom changed
• screenreader service on/off etc

Alternatives or Workarounds

There is an old phonegap plugin called phonegap-plugin-mobile-accessibility https://github.com/phonegap/phonegap-mobile-accessibility that has some of these features but it hasn't been updated since 2016 and it isn't working anymore on Ios (or so it seems).

No more workarounds are known

[breautek]

What kind of accessibility features are required and/or desired that is not supported by the underlying webview / W3C?

monochrome detection - supported since iOS Safari 1 / Android Webview 37

ARIA is the W3C way into most accessibility features and while the API is large and complex so not everything is supported by the webview/browser, it likely supports a lot of what is desired.

[BigBalli]

I will not be making a plugin for this, but if anyone wants to, here are the available properties on iOS:

NSLog(@"UIAccessibilityIsAssistiveTouchRunning: %d",UIAccessibilityIsAssistiveTouchRunning());
NSLog(@"UIAccessibilityIsClosedCaptioningEnabled: %d",UIAccessibilityIsClosedCaptioningEnabled());
NSLog(@"UIAccessibilityIsShakeToUndoEnabled: %d",UIAccessibilityIsShakeToUndoEnabled());
NSLog(@"UIAccessibilityIsBoldTextEnabled: %d",UIAccessibilityIsBoldTextEnabled());
NSLog(@"UIAccessibilityDarkerSystemColorsEnabled: %d",UIAccessibilityDarkerSystemColorsEnabled());
NSLog(@"UIAccessibilityIsGrayscaleEnabled: %d",UIAccessibilityIsGrayscaleEnabled());
NSLog(@"UIAccessibilityIsGuidedAccessEnabled: %d",UIAccessibilityIsGuidedAccessEnabled());
NSLog(@"UIAccessibilityIsInvertColorsEnabled: %d",UIAccessibilityIsInvertColorsEnabled());
NSLog(@"UIAccessibilityIsMonoAudioEnabled: %d",UIAccessibilityIsMonoAudioEnabled());
NSLog(@"UIAccessibilityIsReduceMotionEnabled: %d",UIAccessibilityIsReduceMotionEnabled());
NSLog(@"UIAccessibilityIsReduceTransparencyEnabled: %d",UIAccessibilityIsReduceTransparencyEnabled());
NSLog(@"UIAccessibilityIsSpeakScreenEnabled: %d",UIAccessibilityIsSpeakScreenEnabled());
NSLog(@"UIAccessibilityIsSpeakSelectionEnabled: %d",UIAccessibilityIsSpeakSelectionEnabled());
NSLog(@"UIAccessibilityIsSwitchControlRunning: %d",UIAccessibilityIsSwitchControlRunning());
NSLog(@"UIAccessibilityIsVoiceOverRunning: %d",UIAccessibilityIsVoiceOverRunning());
if (@available(iOS 13.0, *)) {
    NSLog(@"UIAccessibilityIsOnOffSwitchLabelsEnabled: %d",UIAccessibilityIsOnOffSwitchLabelsEnabled());
    NSLog(@"UIAccessibilityIsVideoAutoplayEnabled: %d",UIAccessibilityIsVideoAutoplayEnabled());
}

[MauPoLom]

What kind of accessibility features are required and/or desired that is not supported by the underlying webview / W3C?

monochrome detection - supported since iOS Safari 1 / Android Webview 37

ARIA is the W3C way into most accessibility features and while the API is large and complex so not everything is supported by the webview/browser, it likely supports a lot of what is desired.

At this moment in my humble opinion the text zoom (%) & text zoom changed features are most needed. Depending on text zoom some elements on a page need to be arranged differently because the elements (div etc) themselves do not zoom/scale accordingly.

So what I'm trying to do is to point to a different css when zoom-level are >150% . Maybe this is the wrong way to establish this but don't hesitate to point me in the right direction.

[BigBalli]

"Depending on text zoom some elements on a page need to be arranged differently"

From my experience, iOS will force the larger text size only on native elements (ie not what you code in html/css/js). It might be easier to create your own font-size adjuster in css if you're unable to find/create a plugin.

[breautek]

At this moment in my humble opinion the text zoom (%) & text zoom changed features are most needed. Depending on text zoom some elements on a page need to be arranged differently because the elements (div etc) themselves do not zoom/scale accordingly.

So what I'm trying to do is to point to a different css when zoom-level are >150% . Maybe this is the wrong way to establish this but don't hesitate to point me in the right direction.

No worries, I just want to make sure the features aren't already available the webview itself, no reason to re-implement the wheel if they are. These thoughts are of my own and not representative of Apache, but if supporting text-zoom or other accessibility features does require a plugin to tap into native APIs, it will likely have to be a third-party community plugin that someone is willing to develop rather than an official Apache plugin. This is stemming from the fact that there is only a handful of core volunteers maintaining Apache Cordova and their volunteer time is usually taken by maintaining the core platforms, more so than plugins. But regardless of who decides to develop a plugin if it comes down to that path, it would be good to find out what is the required scope.

From my experience, iOS will force the larger text size only on native elements (ie not what you code in html/css/js).

Just as a datapoint, I do know that Android system webview does respect font size accessibility adjustment. Which consequentially did break the UI of my apps, since they are not really built to have text sizes increasing...

Regarding text zoom specifically, I didn't find any web api that really tells you whether text zoom is enabled or not or what the accessibility value is.

However i found a blog that kinda explains how build your web UI that will work regardless of text-zoom. The key takeaway is to stay away from absolute units like px and such and use flexible units like rem which is a unit that is relative to the root element's font size.

[BigBalli]

With all the different physical device screen sizes and pixel densities, it is always a best practice to use fluid/adaptive layouts.