How to use accessibility - 10 common examples

To help you get started, we’ve selected a few accessibility examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mozilla-b2g / gaia / tv_apps / smart-system / js / accessibility.js View on Github external
if (aValue) {
                  SettingsListener.getSettingsLock().set({
                    'accessibility.screenreader-show-settings': true
                  });
                }
                this.screen.classList.toggle('screenreader', aValue);
                break;

              case 'accessibility.colors.enable':
                SettingsListener.getSettingsLock().set({
                  'layers.effect.invert': aValue ?
                    this.settings['accessibility.colors.invert'] : false,
                  'layers.effect.grayscale': aValue ?
                    this.settings['accessibility.colors.grayscale'] : false,
                  'layers.effect.contrast': aValue ?
                    this.settings['accessibility.colors.contrast'] : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;

              case 'accessibility.colors.invert':
              case 'accessibility.colors.grayscale':
              case 'accessibility.colors.contrast':
                if (this.settings['accessibility.colors.enable']) {
                  var effect = settingKey.split('.').pop();
github mozilla-b2g / gaia / apps / system / js / accessibility.js View on Github external
this.CONTRAST_CAP : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;

              case 'accessibility.colors.invert':
              case 'accessibility.colors.grayscale':
              case 'accessibility.colors.contrast':
                if (this.settings['accessibility.colors.enable']) {
                  var effect = settingKey.split('.').pop();
                  var gfxSetting = {};
                  if (effect === 'contrast') {
                    gfxSetting['layers.effect.contrast'] =
                      aValue * this.CONTRAST_CAP;
                  } else {
                    gfxSetting['layers.effect.' + effect] = aValue;
                  }
                  SettingsListener.getSettingsLock().set(gfxSetting);
                }
                break;
            }
          }.bind(this));
      }, this);
github mozilla-b2g / gaia / tv_apps / smart-system / js / accessibility.js View on Github external
this.settings['accessibility.colors.contrast'] : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;

              case 'accessibility.colors.invert':
              case 'accessibility.colors.grayscale':
              case 'accessibility.colors.contrast':
                if (this.settings['accessibility.colors.enable']) {
                  var effect = settingKey.split('.').pop();
                  var gfxSetting = {};
                  if (effect === 'contrast') {
                    gfxSetting['layers.effect.contrast'] =
                      aValue * this.CONTRAST_CAP;
                  } else {
                    gfxSetting['layers.effect.' + effect] = aValue;
                  }
                  SettingsListener.getSettingsLock().set(gfxSetting);
                }
                break;
            }
          }.bind(this));
      }, this);
github mozilla-b2g / gaia / apps / system / js / accessibility.js View on Github external
if (aValue) {
                  SettingsListener.getSettingsLock().set({
                    'accessibility.screenreader-show-settings': true
                  });
                }
                this.screen.classList.toggle('screenreader', aValue);
                break;

              case 'accessibility.colors.enable':
                SettingsListener.getSettingsLock().set({
                  'layers.effect.invert': aValue ?
                    this.settings['accessibility.colors.invert'] : false,
                  'layers.effect.grayscale': aValue ?
                    this.settings['accessibility.colors.grayscale'] : false,
                  'layers.effect.contrast': aValue ?
                    this.settings['accessibility.colors.contrast'] *
                    this.CONTRAST_CAP : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;

              case 'accessibility.colors.invert':
              case 'accessibility.colors.grayscale':
              case 'accessibility.colors.contrast':
                if (this.settings['accessibility.colors.enable']) {
github mozilla-b2g / gaia / apps / system / js / accessibility.js View on Github external
case 'accessibility.screenreader':
                // Show Accessibility panel if it is not already visible
                if (aValue) {
                  SettingsListener.getSettingsLock().set({
                    'accessibility.screenreader-show-settings': true
                  });
                }
                this.screen.classList.toggle('screenreader', aValue);
                break;

              case 'accessibility.colors.enable':
                SettingsListener.getSettingsLock().set({
                  'layers.effect.invert': aValue ?
                    this.settings['accessibility.colors.invert'] : false,
                  'layers.effect.grayscale': aValue ?
                    this.settings['accessibility.colors.grayscale'] : false,
                  'layers.effect.contrast': aValue ?
                    this.settings['accessibility.colors.contrast'] *
                    this.CONTRAST_CAP : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;

              case 'accessibility.colors.invert':
              case 'accessibility.colors.grayscale':
github mozilla-b2g / gaia / tv_apps / smart-system / js / accessibility.js View on Github external
case 'accessibility.screenreader':
                // Show Accessibility panel if it is not already visible
                if (aValue) {
                  SettingsListener.getSettingsLock().set({
                    'accessibility.screenreader-show-settings': true
                  });
                }
                this.screen.classList.toggle('screenreader', aValue);
                break;

              case 'accessibility.colors.enable':
                SettingsListener.getSettingsLock().set({
                  'layers.effect.invert': aValue ?
                    this.settings['accessibility.colors.invert'] : false,
                  'layers.effect.grayscale': aValue ?
                    this.settings['accessibility.colors.grayscale'] : false,
                  'layers.effect.contrast': aValue ?
                    this.settings['accessibility.colors.contrast'] : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;

              case 'accessibility.colors.invert':
              case 'accessibility.colors.grayscale':
              case 'accessibility.colors.contrast':
github mozilla-b2g / gaia / tv_apps / smart-system / js / accessibility.js View on Github external
this.settings[settingKey] = aValue;
            switch (settingKey) {
              case 'accessibility.screenreader':
                // Show Accessibility panel if it is not already visible
                if (aValue) {
                  SettingsListener.getSettingsLock().set({
                    'accessibility.screenreader-show-settings': true
                  });
                }
                this.screen.classList.toggle('screenreader', aValue);
                break;

              case 'accessibility.colors.enable':
                SettingsListener.getSettingsLock().set({
                  'layers.effect.invert': aValue ?
                    this.settings['accessibility.colors.invert'] : false,
                  'layers.effect.grayscale': aValue ?
                    this.settings['accessibility.colors.grayscale'] : false,
                  'layers.effect.contrast': aValue ?
                    this.settings['accessibility.colors.contrast'] : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;

              case 'accessibility.colors.invert':
github mozilla-b2g / gaia / apps / system / js / accessibility.js View on Github external
this.settings[settingKey] = aValue;
            switch (settingKey) {
              case 'accessibility.screenreader':
                // Show Accessibility panel if it is not already visible
                if (aValue) {
                  SettingsListener.getSettingsLock().set({
                    'accessibility.screenreader-show-settings': true
                  });
                }
                this.screen.classList.toggle('screenreader', aValue);
                break;

              case 'accessibility.colors.enable':
                SettingsListener.getSettingsLock().set({
                  'layers.effect.invert': aValue ?
                    this.settings['accessibility.colors.invert'] : false,
                  'layers.effect.grayscale': aValue ?
                    this.settings['accessibility.colors.grayscale'] : false,
                  'layers.effect.contrast': aValue ?
                    this.settings['accessibility.colors.contrast'] *
                    this.CONTRAST_CAP : '0.0'
                });
                break;

              case 'accessibility.screenreader-captions':
                this.speechSynthesizer.captions = aValue;
                // If captions are displayed hide them.
                if (!aValue) {
                  this.speechSynthesizer.hideSpeech(true);
                }
                break;
github mozilla-b2g / gaia / tv_apps / smart-system / js / accessibility.js View on Github external
announceScreenReader: function ar_announceScreenReader() {
      var enabled = this.settings['accessibility.screenreader'];
      this.isSpeaking = true;
      return this.speak({
        string: enabled ? 'disableScreenReaderSteps' : 'enableScreenReaderSteps'
      }, {enqueue: false});
    },
github mozilla-b2g / gaia / apps / system / js / accessibility.js View on Github external
this.reset();

      if (!this.isSpeaking && timeStamp > this.expectedCompleteTimeStamp) {
        this.cancelSpeech();
        this.announceScreenReader(function onEnd() {
          this.resetSpeaking(timeStamp + this.REPEAT_BUTTON_PRESS);
        }.bind(this));
        return;
      }

      this.cancelSpeech();
      this.resetSpeaking();
      SettingsListener.getSettingsLock().set({
        'accessibility.screenreader':
          !this.settings['accessibility.screenreader']
      });
    },