diff --git a/packages/docs/src/_includes/components/logo.njk b/packages/docs/src/_includes/components/logo.njk
index b8b528064..bc7eed3cc 100644
--- a/packages/docs/src/_includes/components/logo.njk
+++ b/packages/docs/src/_includes/components/logo.njk
@@ -1,7 +1,7 @@
 
 <h3 class="c-logo">
 	<a href="/" class="c-logo__link" rel="home">
-	    <img class="c-logo__img" src="https://patternlab.io/images/icon-atom.svg" alt="Pattern Lab">
+	    <img class="c-logo__img" src="https://patternlab.io/images/icon-atom.svg" alt="Pattern Lab logo" aria-hidden="true">
 
 		<div class="c-logo__body">
 			<span class="c-logo__text">Pattern Lab</span>
diff --git a/packages/docs/src/_includes/components/tree-subnav.njk b/packages/docs/src/_includes/components/tree-subnav.njk
index 9265520ab..ace03cb8c 100644
--- a/packages/docs/src/_includes/components/tree-subnav.njk
+++ b/packages/docs/src/_includes/components/tree-subnav.njk
@@ -3,7 +3,7 @@
 {% for entry in navPages %}
     {% if entry.key == subnavCategory %}
     <li class="c-tree-nav__subnav-item">
-        <a href="{{entry.url}}" class="c-tree-nav__subnav-link">{{ entry.title }}<a>
+        <a href="{{entry.url}}" class="c-tree-nav__subnav-link">{{ entry.title }}</a>
     </li><!--end c-tree-nav__subnav-item -->
   {% endif %}
 {% endfor %}
diff --git a/packages/docs/src/_includes/layouts/demos.njk b/packages/docs/src/_includes/layouts/demos.njk
index f16878645..f3746bbef 100644
--- a/packages/docs/src/_includes/layouts/demos.njk
+++ b/packages/docs/src/_includes/layouts/demos.njk
@@ -9,17 +9,15 @@
 {% set demoListItems = collections.demos %}
 
 {% block content %}
-  <main id="main-content">
-    <div class="l-container">
-      {% include "components/page-header.njk" %}
-      
-        <h2 class="c-section-header">In the wild</h2>
-          {% set demoListCategory = 'example' %}
-          {% include "partials/components/demo-list.njk" %}
+  <div class="l-container">
+    {% include "components/page-header.njk" %}
+    
+      <h2 class="c-section-header">In the wild</h2>
+        {% set demoListCategory = 'example' %}
+        {% include "partials/components/demo-list.njk" %}
 
-        <h2 class="c-section-header">Starterkits</h2>
-          {% set demoListCategory = 'starterkit' %}
-          {% include "partials/components/demo-list.njk" %}
-    </div>
-  </main>
+      <h2 class="c-section-header">Starterkits</h2>
+        {% set demoListCategory = 'starterkit' %}
+        {% include "partials/components/demo-list.njk" %}
+  </div>
 {% endblock %} 
\ No newline at end of file
diff --git a/packages/docs/src/_includes/partials/components/demo-list.njk b/packages/docs/src/_includes/partials/components/demo-list.njk
index cfca893a4..6d097b554 100644
--- a/packages/docs/src/_includes/partials/components/demo-list.njk
+++ b/packages/docs/src/_includes/partials/components/demo-list.njk
@@ -15,7 +15,7 @@
                   <div class="c-stacked-block__bar-dots"></div>
                 </div>
                 <div class="c-stacked-block__preview-content">
-                  <iframe class="c-stacked-block__frame-item" src="{{item.data.refLink}}" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"></iframe>
+                  <iframe title="preview of {{ item.data.title }}" class="c-stacked-block__frame-item" src="{{item.data.refLink}}" sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"></iframe>
                   <div class="c-stacked-block__frame-overlay"></div>
                 </div>
               </div>
diff --git a/packages/docs/src/docs/advanced-config-options.md b/packages/docs/src/docs/advanced-config-options.md
index 19bd1efb3..6c7e5ef83 100644
--- a/packages/docs/src/docs/advanced-config-options.md
+++ b/packages/docs/src/docs/advanced-config-options.md
@@ -11,7 +11,7 @@ eleventyNavigation:
 
 Pattern Lab Node comes with a configuration file [(`patternlab-config.json`)](https://github.com/pattern-lab/patternlab-node/blob/master/packages/core/patternlab-config.json) that allows you to modify certain aspects of the system. The latest default values are included within. This file is shipped within [the editions](https://github.com/pattern-lab?utf8=%E2%9C%93&query=edition-node) or can be supplied from core and the command line interface. Below is a description of each configuration option and how it affects Pattern Lab Node.
 
-### cacheBust
+## cacheBust
 
 Instructs Pattern Lab to append a unique query string to Javascript and CSS assets throughout the frontend.
 
@@ -21,13 +21,13 @@ Instructs Pattern Lab to append a unique query string to Javascript and CSS asse
 
 **default**: `true`
 
-### cleanPublic
+## cleanPublic
 
 Sets whether or not to delete `public.patterns/` upon each build of Pattern Lab. When set to false, [incremental builds](https://github.com/pattern-lab/patternlab-node/wiki/Incremental-Builds) are also enabled.
 
 **default**: `true`
 
-### defaultPattern
+## defaultPattern
 
 Sets a specific pattern upon launch of the styleguide. This pattern will not be available in the navigation, or in view all pages. The only way to get to it will be via a refresh. Set it using the [short-hand pattern-include syntax](/docs/including-patterns/):
 
@@ -39,19 +39,19 @@ A special value of `all` can also be supplied to display all patterns on load.
 
 **default**: `all`
 
-### defaultShowPatternInfo
+## defaultShowPatternInfo
 
 Sets whether or not you want the styleguide to load with the pattern info open or closed.
 
 **default**: `false`
 
-### defaultPatternInfoPanelCode (optional)
+## defaultPatternInfoPanelCode (optional)
 
 Sets default active pattern info code panel by file extension - if unset, uses the value out of _patternExtension_ config value, or instead use value `html` to display the html code initially, or the value defined for the _patternExtension_.
 
 **default**: _patternExtension_ value (`"hbs"` | `"mustache"` | `"twig"` | `"html"`)
 
-### ishControlsHide
+## ishControlsHide
 
 Sets whether or not to hide navigation options within the styleguide.
 
@@ -77,7 +77,7 @@ Sets whether or not to hide navigation options within the styleguide.
 }
 ```
 
-### ishViewportRange
+## ishViewportRange
 
 Sets the boundaries of each of the viewport toggles, 'S'mall, 'M'edium, and 'L'arge. Clicking on one of these buttons will randomly set the ish Viewport to a value within the given range. Setting the range to the same number can effectively set an exact value. The first entry in `ishViewportRange.s` is the `ishViewportMinimum`, which is now obsolete. The second entry in `ishViewportRange.l` is the `ishViewportMaximum`, which is now also obsolete.
 
@@ -91,7 +91,7 @@ Sets the boundaries of each of the viewport toggles, 'S'mall, 'M'edium, and 'L'a
 },
 ```
 
-### logLevel
+## logLevel
 
 Sets the level of verbosity for Pattern Lab Node logging.
 
@@ -105,7 +105,7 @@ This replaces the now obsolete `debug` flag.
 
 **default**: `info`
 
-### outputFileSuffixes
+## outputFileSuffixes
 
 Sets the naming of output pattern files. Suffixes are defined for 'rendered', 'rawTemplate', and 'markupOnly' files. This configuration is needed for some PatternEngines that use the same input and output file extensions. Most users will not have to change this.
 
@@ -117,7 +117,7 @@ Sets the naming of output pattern files. Suffixes are defined for 'rendered', 'r
 },
 ```
 
-### paths
+## paths
 
 Sets the configurable source and public directories for files Pattern Lab Node operates within. Build, copy, output, and server operations rely upon these paths. Some paths are relative to the current UIKit. See UIKit configuration for more info. Note the `patternlabFiles` which help create the front end styleguide. Note also the intentional repetition of the nested structure, made this way for maximum flexibility. These are unlikely to change unless you customize your environment or write custom UIKits.
 
@@ -158,13 +158,13 @@ Sets the configurable source and public directories for files Pattern Lab Node o
   },
 ```
 
-### patternExtension
+## patternExtension
 
 Sets the panel name and language for the code tab on the styleguide. Since this only accepts one value, this is a place where mixed pattern trees (different PatternEngines in the same instance of Pattern Lab) does not quite work.
 
 **default**: `mustache`
 
-### patternStateCascade
+## patternStateCascade
 
 See the [Pattern State Documentation](/docs/using-pattern-states/)
 
@@ -174,13 +174,13 @@ See the [Pattern State Documentation](/docs/using-pattern-states/)
 "patternStateCascade": ["inprogress", "inreview", "complete"],
 ```
 
-### patternExportDirectory
+## patternExportDirectory
 
 Sets the location that any export operations should output files to. This may be a relative or absolute path.
 
 **default**: `./pattern_exports/`
 
-### patternExportPatternPartials
+## patternExportPatternPartials
 
 Sets an array of patterns (using the [short-hand pattern-include syntax](/docs/including-patterns/)) to be exported after a build.
 
@@ -192,7 +192,7 @@ For example, to export the navigation, header, and footer, one might do:
 
 **default**: `[]`
 
-### patternMergeVariantArrays
+## patternMergeVariantArrays
 
 Used to override the merge behavior of pattern variants. For more information see [The Pseudo-Pattern File Data](docs/using-pseudo-patterns/#heading-the-pseudo-pattern-file-data).
 
@@ -205,7 +205,7 @@ Used to override the merge behavior of pattern variants. For more information se
 
 **default**: `true` | `undefined`
 
-### renderFlatPatternsOnViewAllPages
+## renderFlatPatternsOnViewAllPages
 
 Used to activate rendering flat patterns on view all pages and generate view all pages if only flat patterns are available
 
@@ -218,7 +218,7 @@ Used to activate rendering flat patterns on view all pages and generate view all
 
 **default**: `false` | `undefined`
 
-### serverOptions
+## serverOptions
 
 Sets [live-server options](https://github.com/pattern-lab/live-server#usage-from-node):
 
@@ -244,7 +244,7 @@ Sets [live-server options](https://github.com/pattern-lab/live-server#usage-from
 },
 ```
 
-### starterkitSubDir
+## starterkitSubDir
 
 [Starterkits](/docs/starterkits/) by convention house their files within the `dist/` directory. Should someone ever wish to change this, this key is available.
 
@@ -254,7 +254,7 @@ Sets [live-server options](https://github.com/pattern-lab/live-server#usage-from
 "starterkitSubDir": "dist",
 ```
 
-### styleGuideExcludes
+## styleGuideExcludes
 
 Sets whole pattern types to be excluded from the "All" patterns page on the styleguide. This is useful to decrease initial load of the styleguide. For example, to exlude all patterns under `templates` and `pages`, add the following:
 
@@ -269,7 +269,7 @@ These template and page patterns would still be accessible via navigation.
 
 **default**: `[]`
 
-### theme
+## theme
 
 Sets the theme options for the styleguide. There are five options:
 * `"color"`
@@ -314,7 +314,7 @@ And `"logo"` lets you finetune the different aspects of the logo displayed on th
 }
 ```
 
-### transformedAssetTypes (optional)
+## transformedAssetTypes (optional)
 
 Prevent specific filetypes being copied from your `source` to your `public` folder like e.g. CSS preprocessor source files (`.scss`), you could specify those within an array of your pattern lab config:
 
@@ -328,7 +328,7 @@ These template and page patterns would still be accessible via navigation.
 
 **default**: `[]`
 
-### uikits
+## uikits
 
 Introduced in Pattern Lab Node v3, UIKits are a new term in the Pattern Lab [Ecosystem](/docs/overview-of-pattern-lab's-ecosystem/). They are an evolution of the original Styleguidekit pattern which separated front-end templates from front-end assets like stylesheets and code. The existing `styleguidekit-assets-default` and `styleguidekit-mustache-default` have merged into `uikit-workshop`.
 
diff --git a/packages/docs/src/docs/editing-source-files.md b/packages/docs/src/docs/editing-source-files.md
index 71af3301a..d52f1f2a3 100644
--- a/packages/docs/src/docs/editing-source-files.md
+++ b/packages/docs/src/docs/editing-source-files.md
@@ -15,10 +15,10 @@ When editing Pattern Lab you must put your files and edit them in the `./source/
 
 For the most part you can organize `./source/` anyway you see fit. There are a few Pattern Lab-specific directories though. They are:
 
-- `_annotations/` - where your annotations reside. [learn more](/docs/adding-annotations/).
-- `_data/` - where the global data used to render your patterns resides. [learn more](/docs/overview-of-data/).
-- `_meta/` - where the header and footer that get applied to all of your patterns resides. [learn more](/docs/modifying-the-pattern-header-and-footer/).
-- `_patterns/` - where your patterns, pattern documentation, and pattern-specific data reside. [learn more](/docs/reorganizing-patterns/).
+- `_annotations/` - where your annotations reside. [learn more about adding annotations](/docs/adding-annotations/).
+- `_data/` - where the global data used to render your patterns resides. [learn more about (pattern) data](/docs/overview-of-data/).
+- `_meta/` - where the header and footer that get applied to all of your patterns resides. [learn more about meta files](/docs/modifying-the-pattern-header-and-footer/).
+- `_patterns/` - where your patterns, pattern documentation, and pattern-specific data reside. [learn more about how to organize patterns](/docs/reorganizing-patterns/).
 
 ## Configuring Pattern Lab Directories
 
diff --git a/packages/docs/src/scss/abstracts/_variables.scss b/packages/docs/src/scss/abstracts/_variables.scss
index ede67fd45..114b3cbf1 100644
--- a/packages/docs/src/scss/abstracts/_variables.scss
+++ b/packages/docs/src/scss/abstracts/_variables.scss
@@ -60,7 +60,7 @@ $color-gray-02: #f2f2f2;
 $color-gray-07: #eee;
 $color-gray-13: #ddd;
 $color-gray-27: #bbb;
-$color-gray-50: #808080;
+$color-gray-50: #777677;
 $color-gray-60: #666;
 $color-gray-73: #444;
 $color-gray-88: #1f1f1f;
diff --git a/packages/docs/src/scss/base/_text.scss b/packages/docs/src/scss/base/_text.scss
index a2c176e66..e8cae612f 100644
--- a/packages/docs/src/scss/base/_text.scss
+++ b/packages/docs/src/scss/base/_text.scss
@@ -51,6 +51,7 @@ code {
 	background: $color-brand-purple-light;
 	padding: 0.2rem;
 	line-height: 1.2;
+	color: $color-gray-60;
 }
 
 /**
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js
index 550d21ebe..18fa96d7b 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavButton.js
@@ -11,7 +11,7 @@ export const NavButton = (props) => {
       <span
         class="pl-c-nav__link-icon"
         dangerouslySetInnerHTML={{
-          __html: '<pl-icon name="arrow-down"></pl-icon>',
+          __html: '<pl-icon name="arrow-down" aria-hidden="true"></pl-icon>',
         }}
       />
     </button>
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js
index fc47ff4db..e2bea7825 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavTitle.js
@@ -10,7 +10,7 @@ export const NavTitle = (props) => {
       <span
         class="pl-c-nav__link-icon"
         dangerouslySetInnerHTML={{
-          __html: '<pl-icon name="arrow-down"></pl-icon>',
+          __html: '<pl-icon name="arrow-down" aria-hidden="true"></pl-icon>',
         }}
       />
       <span className={`pl-c-nav__link-text`}>{props.children}</span>
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js
index d4c1dbe65..8785ef2ef 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/src/NavToggle.js
@@ -11,7 +11,7 @@ export const NavToggle = (props) => {
       <span
         class="pl-c-nav__link-icon"
         dangerouslySetInnerHTML={{
-          __html: '<pl-icon name="arrow-down"></pl-icon>',
+          __html: '<pl-icon name="arrow-down" aria-hidden="true"></pl-icon>',
         }}
       />
     </button>
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js
index ccb0bfdc3..7990f3a01 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.js
@@ -140,7 +140,11 @@ class Drawer extends LitElement {
                   icon-only="true"
                   @click="${(_) => store.dispatch(updateDrawerState(false))}"
                 >
-                  <pl-icon slot="after" name="close"></pl-icon>
+                  <pl-icon
+                    slot="after"
+                    name="close"
+                    aria-hidden="true"
+                  ></pl-icon>
                 </pl-button>
               </div>
             </div>
@@ -152,7 +156,11 @@ class Drawer extends LitElement {
                   <div class="pl-c-loader__content">
                     <div class="pl-c-loader__message">Loading Code Panel</div>
                     <div class="pl-c-loader__spinner">
-                      <svg class="pl-c-loader-svg" viewBox="0 0 268 255">
+                      <svg
+                        class="pl-c-loader-svg"
+                        viewBox="0 0 268 255"
+                        aria-hidden="true"
+                      >
                         <circle
                           class="pl-c-loader-svg__outer-circle"
                           cx="134.2"
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
index 57f9b879b..7f7815ade 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js
@@ -101,6 +101,7 @@ class Header extends BaseLitComponent {
             height="20"
             width="20"
             fill="currentColor"
+            aria-hidden="true"
           ></pl-icon>
           <span class="is-vishidden">Toggle Menu</span>
         </button>
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js
index 1b0905f52..1264e8919 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-info/pl-toggle-info.js
@@ -72,6 +72,7 @@ class InfoToggle extends LitElement {
         <pl-icon
           name="${this.isDrawerOpen ? 'code-collapse' : 'code-expand'}"
           slot="after"
+          aria-hidden="true"
         ></pl-icon>
       </pl-button>
     `;
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.js b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.js
index e6d146f1f..ff6b00cfc 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.js
@@ -88,6 +88,7 @@ class LayoutToggle extends LitElement {
         <pl-icon
           slot="after"
           name="${this.layoutMode === 'horizontal' ? 'layout-h' : 'layout-v'}"
+          aria-hidden="true"
         ></pl-icon>
       </pl-button>
     `;
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-theme/pl-toggle-theme.js b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-theme/pl-toggle-theme.js
index 31a8ebf65..d98c8f654 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-theme/pl-toggle-theme.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-theme/pl-toggle-theme.js
@@ -76,7 +76,11 @@ class ThemeToggle extends LitElement {
       >
         Switch Theme
 
-        <pl-icon slot="after" name="theme-${this.themeMode}"></pl-icon>
+        <pl-icon
+          slot="after"
+          name="theme-${this.themeMode}"
+          aria-hidden="true"
+        ></pl-icon>
       </pl-button>
     `;
   }
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
index 8e98207df..77ab3d210 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js
@@ -130,7 +130,7 @@ class ToolsMenu extends BaseLitComponent {
           class="pl-c-tools__toggle"
           title="Settings"
         >
-          <pl-icon name="settings" slot="after"></pl-icon>
+          <pl-icon name="settings" slot="after" aria-hidden="true"></pl-icon>
         </pl-button>
         <ul
           class="pl-c-tools__list pl-js-acc-panel ${this.isOpen
@@ -157,7 +157,11 @@ class ToolsMenu extends BaseLitComponent {
                     class="pl-js-open-new-window"
                   >
                     Open In New Tab
-                    <pl-icon name="new-tab" slot="after"></pl-icon>
+                    <pl-icon
+                      name="new-tab"
+                      slot="after"
+                      aria-hidden="true"
+                    ></pl-icon>
                   </pl-button>
                 </li>
               `
@@ -167,7 +171,11 @@ class ToolsMenu extends BaseLitComponent {
                 <li class="pl-c-tools__item">
                   <pl-button href="https://patternlab.io" target="_blank">
                     Pattern Lab Docs
-                    <pl-icon name="help" slot="after"></pl-icon>
+                    <pl-icon
+                      name="help"
+                      slot="after"
+                      aria-hidden="true"
+                    ></pl-icon>
                   </pl-button>
                 </li>
               `
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js
index aefbd8624..3f5acdf6c 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.js
@@ -316,7 +316,7 @@ class ViewportSizes extends BaseComponent {
                 dangerouslySetInnerHTML={{
                   __html: `
                       <span class="is-vishidden">Resize viewport to small</span>
-                      <pl-icon name="phone"></pl-icon>
+                      <pl-icon name="phone" aria-hidden="true"></pl-icon>
                     `,
                 }}
               />
@@ -333,7 +333,7 @@ class ViewportSizes extends BaseComponent {
                 dangerouslySetInnerHTML={{
                   __html: `
                       <span class="is-vishidden">Resize viewport to medium</span>
-                      <pl-icon name="tablet"></pl-icon>
+                      <pl-icon name="tablet" aria-hidden="true"></pl-icon>
                     `,
                 }}
               />
@@ -350,7 +350,7 @@ class ViewportSizes extends BaseComponent {
                 dangerouslySetInnerHTML={{
                   __html: `
                       <span class="is-vishidden">Resize viewport to large</span>
-                      <pl-icon name="laptop"></pl-icon>
+                      <pl-icon name="laptop" aria-hidden="true"></pl-icon>
                     `,
                 }}
               />
@@ -367,7 +367,7 @@ class ViewportSizes extends BaseComponent {
                 dangerouslySetInnerHTML={{
                   __html: `
                       <span class="is-vishidden">Resize viewport to full</span>
-                      <pl-icon name="desktop"></pl-icon>
+                      <pl-icon name="desktop" aria-hidden="true"></pl-icon>
                     `,
                 }}
               />
@@ -384,7 +384,7 @@ class ViewportSizes extends BaseComponent {
                 dangerouslySetInnerHTML={{
                   __html: `
                       <span class="is-vishidden">Resize viewport to random</span>
-                      <pl-icon name="random"></pl-icon>
+                      <pl-icon name="random" aria-hidden="true"></pl-icon>
                     `,
                 }}
               />
@@ -401,7 +401,7 @@ class ViewportSizes extends BaseComponent {
                 dangerouslySetInnerHTML={{
                   __html: `
                       <span class="is-vishidden">Resize viewport using disco mode!</span>
-                      <pl-icon name="disco-ball"></pl-icon>
+                      <pl-icon name="disco-ball" aria-hidden="true"></pl-icon>
                     `,
                 }}
               />
@@ -418,7 +418,7 @@ class ViewportSizes extends BaseComponent {
                 dangerouslySetInnerHTML={{
                   __html: `
                      <span class="is-vishidden">Resize viewport using hay mode!</span>
-                     <pl-icon name="hay"></pl-icon>
+                     <pl-icon name="hay" aria-hidden="true"></pl-icon>
                    `,
                 }}
               />