diff --git a/core/config/schema/core.data_types.schema.yml b/core/config/schema/core.data_types.schema.yml
index 4ab0fd7..7360b08 100644
--- a/core/config/schema/core.data_types.schema.yml
+++ b/core/config/schema/core.data_types.schema.yml
@@ -175,6 +175,9 @@ theme_settings:
         favicon:
           type: boolean
           label: 'Shortcut icon'
+        skip_navigation:
+          type: boolean
+          label: 'Skip navigation visible'
         logo:
           type: boolean
           label: 'Logo'
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 769e34c..292c30a 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1306,6 +1306,7 @@ function template_preprocess_html(&$variables) {
     $placeholder = '<' . $placeholder_name . '-placeholder token="' . $variables['placeholder_token'] . '">';
     $variables['#attached']['html_response_attachment_placeholders'][$type] = $placeholder;
   }
+  $variables['skip_navigation_visible'] = theme_get_setting('features')['skip_navigation'];
 }
 
 /**
diff --git a/core/lib/Drupal/Core/Extension/ThemeHandler.php b/core/lib/Drupal/Core/Extension/ThemeHandler.php
index 59cfd99..c127d30 100644
--- a/core/lib/Drupal/Core/Extension/ThemeHandler.php
+++ b/core/lib/Drupal/Core/Extension/ThemeHandler.php
@@ -28,6 +28,7 @@ class ThemeHandler implements ThemeHandlerInterface {
     'node_user_picture',
     'comment_user_picture',
     'comment_user_verification',
+    'skip_navigation',
   );
 
   /**
diff --git a/core/modules/system/src/Form/ThemeSettingsForm.php b/core/modules/system/src/Form/ThemeSettingsForm.php
index 82ad415..c053777 100644
--- a/core/modules/system/src/Form/ThemeSettingsForm.php
+++ b/core/modules/system/src/Form/ThemeSettingsForm.php
@@ -142,6 +142,7 @@ public function buildForm(array $form, FormStateInterface $form_state, $theme =
       'comment_user_picture' => t('User pictures in comments'),
       'comment_user_verification' => t('User verification status in comments'),
       'favicon' => t('Shortcut icon'),
+      'skip_navigation' => t('Skip navigation visible'),
     );
 
     // Some features are not always available
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index ae6142f..1457314 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -1022,6 +1022,7 @@ function _system_rebuild_module_data_ensure_required($module, &$modules) {
       }
     }
   }
+  $page['skip_navigation_visibility'] = (!theme_get_setting('toggle_skip_navigation')) ? 'element-invisible element-focusable' : '';
 }
 
 /**
@@ -1072,6 +1073,7 @@ function _system_default_theme_features() {
     'node_user_picture',
     'comment_user_picture',
     'comment_user_verification',
+    'skip_navigation',
   );
 }
 
diff --git a/core/modules/system/templates/html.html.twig b/core/modules/system/templates/html.html.twig
index 39702c2..6ef9e24 100644
--- a/core/modules/system/templates/html.html.twig
+++ b/core/modules/system/templates/html.html.twig
@@ -19,6 +19,8 @@
  * - db_offline: A flag indicating if the database is offline.
  * - placeholder_token: The token for generating head, css, js and js-bottom
  *   placeholders.
+ * - skip_navigation_visible: A flag indicating whether skiå navigation link
+ *    is visible or not.
  *
  * @see template_preprocess_html()
  *
@@ -34,7 +36,7 @@
     <js-placeholder token="{{ placeholder_token|raw }}">
   </head>
   <body{{ attributes }}>
-    <a href="#main-content" class="visually-hidden focusable">
+    <a href="#main-content" class="{% if skip_navigation_visible %}visually-hidden focusable skip-link{% endif %}">
       {{ 'Skip to main content'|t }}
     </a>
     {{ page_top }}
diff --git a/core/themes/classy/templates/layout/html.html.twig b/core/themes/classy/templates/layout/html.html.twig
index 5bd83ee..9d50f09 100644
--- a/core/themes/classy/templates/layout/html.html.twig
+++ b/core/themes/classy/templates/layout/html.html.twig
@@ -19,6 +19,8 @@
  * - db_offline: A flag indicating if the database is offline.
  * - placeholder_token: The token for generating head, css, js and js-bottom
  *   placeholders.
+ * - skip_navigation_visible: A flag indicating whether skiå navigation link
+ *    is visible or not.
  *
  * @see template_preprocess_html()
  */
@@ -40,7 +42,7 @@
     <js-placeholder token="{{ placeholder_token|raw }}">
   </head>
   <body{{ attributes.addClass(body_classes) }}>
-    <a href="#main-content" class="visually-hidden focusable skip-link">
+    <a href="#main-content" class="{% if not skip_navigation_visible %}visually-hidden focusable skip-link{% endif %}">
       {{ 'Skip to main content'|t }}
     </a>
     {{ page_top }}