{"id":504,"date":"2022-12-26T08:00:00","date_gmt":"2022-12-26T07:00:00","guid":{"rendered":"https:\/\/www.stefanvd.net\/blog\/?p=504"},"modified":"2024-04-28T13:59:57","modified_gmt":"2024-04-28T12:59:57","slug":"5-important-accessibility-options-for-chrome-extension-manifest-v3","status":"publish","type":"post","link":"https:\/\/www.stefanvd.net\/blog\/2022\/12\/26\/5-important-accessibility-options-for-chrome-extension-manifest-v3\/","title":{"rendered":"5 Accessible Chrome Extension Manifest V3 for Developers should use"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><p>Table of Contents<\/p><nav><ul><li><a href=\"#accessibility-of-a-chrome-extension-manifest-v-3\">Accessibility of a Chrome extension Manifest V3<\/a><ul><li><a href=\"#1-use-css-dark-mode\">1. Use CSS dark mode<\/a><\/li><li><a href=\"#2-use-aria-annotation\">2. Use ARIA annotation<\/a><ul><li><a href=\"#what-elements-can-be-used-with-aria-label\">What elements can be used with aria-label?<\/a><\/li><\/ul><\/li><li><a href=\"#when-to-use-it\">When to use it?<\/a><\/li><li><a href=\"#3-web-p-images-and-2-x-retina-images\">3. WebP images and @2x Retina images<\/a><ul><li><a href=\"#web-p\">WebP<\/a><\/li><li><a href=\"#retina\">Retina<\/a><ul><li><a href=\"#simple\">Simple<\/a><\/li><li><a href=\"#advanced\">Advanced<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#4-use-lazy-load-iframe-and-images\">4. Use lazy load (iframe and images)<\/a><\/li><li><a href=\"#5-fit-your-mobile-screen-layout\">5. Fit your mobile screen layout<\/a><\/li><\/ul><\/li><li><a href=\"#addition-resource\">Addition resource<\/a><\/li><li><a href=\"#final-remarks\">Final remarks<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p>Take your digital brush and pencil. Because this article makes the experience for your Chrome extension the best for all users. Most developers do not think about this user experience. Because this is the most important point for a good Chrome extension. And this brings a huge benefit to the users.<\/p>\n\n\n\n<p>In this post, I will explain to you the important 5 user experiences (UX) that Google did not tell you when you were building your first Chrome extension Manifest V3. A good user experience makes the Chrome extension&#8217;s user interface accessible to all users. Such as readable text, good contrast for the text and background, etc.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Disability is part of being human. Almost everyone will temporarily or permanently experience disability at some point in their life.&nbsp;An estimated 1.3 billion people \u2013 <strong>about 16%<\/strong> of the global population \u2013 currently experience significant disability. This number is increasing due in part to population ageing and an increase in the prevalence of noncommunicable diseases.<\/p>\n<cite>Source: <a href=\"https:\/\/www.who.int\/health-topics\/disability\" target=\"_blank\" rel=\"noreferrer noopener\">WHO (World Health Organization<\/a>) publication on 2 December 2022<\/cite><\/blockquote>\n\n\n\n<p>Accessibility is very important for everyone (people with color blindness, eye strain, eye fatigue, deaf people, etc.). As I see, many developers ignore or forget this point. So with not adding this accessibility and UX improvement in its Chrome extension, it is only ready for 84% of the world&#8217;s population. And the small things that can give huge improvements for the users of your Chrome extension. Such as implementing a dark mode theme that matches the coherence of your Operating System appearance, and makes the screen reader read the correct label for that interface action.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"accessibility-of-a-chrome-extension-manifest-v-3\">Accessibility of a Chrome extension Manifest V3<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-use-css-dark-mode\">1. Use CSS dark mode<\/h3>\n\n\n\n<p>Dark Mode is the first Accessibility feature that developers do not immediately think of when creating a Chrome extension. The Dark Mode is to define a color scheme that uses light-colored text and other UI elements on a dark-colored background. By default, when creating a new web page, it is always a light theme. That contains a white background and the text color in black.<\/p>\n\n\n\n<p>Implementing a Dark Mode style for the Popup page, New Tab page, and Options page is very easy to set it up in the stylesheet document. The web browser will choose the correct theme depending on your Operating System&#8217;s appearance setting. So when you switch your operating system from light to dark. The web browser will automatically show you a dark version of that web page. No JavaScript code is needed to get this comfortable experience for your users.<\/p>\n\n\n\n<p>The code of the Options page stylesheet can be as this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Light mode *\/\n:root {\n   --totl-primary-background: #fff;\n   --totl-primary-font-color: #000;\n}\n\n\/* Dark mode *\/\n@media (prefers-color-scheme: dark) {\n:root{\n   --totl-primary-background: #232323;\n   --totl-primary-font-color: #fff;\n}\n\nbody{\n   background-color: var(--totl-primary-background);\n   color: var(--totl-primary-font-color);\n}<\/code><\/pre>\n\n\n\n<p>In the head of the HTML Options page this must be added:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"color-scheme\" content=\"light dark\"&gt;\n&lt;meta name=\"theme-color\" content=\"#ffffff\" media=\"(prefers-color-scheme: light)\"&gt;\n&lt;meta name=\"theme-color\" content=\"#232323\" media=\"(prefers-color-scheme: dark)\"&gt;<\/code><\/pre>\n\n\n\n<p>The meta <code>name=\"color-scheme\"<\/code> specifies the color scheme via the meta tag, so the browser can adapt to the preferred scheme faster. And the meta <code>name=\"theme-color\"<\/code> is needed for the top navigation bar to have the same dark or light theme colors. The Chrome desktop web browser is this not supported. However, the Safari iOS mobile and Samsung Internet do support this theme.<\/p>\n\n\n\n<p>In your Chrome extension Manifest V3, for images on your HTML web page, you can do this method to get a light and dark mode. So the visual design is in harmony with the light and dark modes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;picture&gt;\n   &lt;source srcset=\"dark.png\" media=\"(prefers-color-scheme: dark)\"&gt;\n   &lt;img src=\"light.png\" alt=\"Preview element\"&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/dark-mode-image.png\" alt=\"Dark Mode with a white lamp button for a Chrome extension Manifest V3\" class=\"wp-image-606\"\/><figcaption class=\"wp-element-caption\">Dark Mode with a white lamp button for a Chrome extension Manifest V3<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/light-mode-image.png\" alt=\"Light Mode with a gray lamp button for a Chrome extension Manifest V3\" class=\"wp-image-607\"\/><figcaption class=\"wp-element-caption\">Light Mode with a gray lamp button for a Chrome extension Manifest V3<\/figcaption><\/figure>\n<\/div>\n\n\n\n<p>When implementing this HTML code, this will not load two images, only the image on that Operating System appearance that is active. For example, when Dark Mode is enabled in your Operating System, then it will download the dark.png and vice versa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-use-aria-annotation\">2. Use ARIA annotation<\/h3>\n\n\n\n<p>The ARIA abbreviation stands for Accessible Rich Internet Applications. This is to set the roles and attributes to make it accessible for people with disabilities. So it can use the Operating System&#8217;s voiceover to help and guide the user on that web page. For example to know which interactive element can be clicked.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"what-elements-can-be-used-with-aria-label\">What elements can be used with <code>aria-label<\/code>?<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Interactive elements<\/strong>:<br>Such as&nbsp;<code>a<\/code>&nbsp;when there is&nbsp;<code>href<\/code>&nbsp;an attribute is present,<br><code>audio<\/code>&nbsp;and&nbsp;<code>video<\/code>&nbsp;when there is&nbsp;<code>controls<\/code>&nbsp;an attribute is present, <code>input<\/code>,&nbsp;<code>select<\/code>,&nbsp;<code>button<\/code>,&nbsp;<code>textarea<\/code><\/li>\n\n\n\n<li><strong>Implicit landmark elements<\/strong>:<br>Such as&nbsp;<code>header<\/code>, <code>footer<\/code>, <code>nav<\/code>, &nbsp;<code>main<\/code>,&nbsp;<code>aside<\/code>, <code>section<\/code>, and&nbsp;<code>form<\/code><\/li>\n\n\n\n<li><strong>Explicit landmark elements<\/strong>:<br>Such as an element with&nbsp;<code>role=\"navigation\"<\/code><\/li>\n\n\n\n<li><strong>Widget role elements<\/strong>:<br>Such as an element with&nbsp;<code>role=\"dialog\"<\/code>&nbsp;or&nbsp;<code>role=\"tooltip\"<\/code>(there are <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Roles#2._widget_roles\" target=\"_blank\" rel=\"noreferrer noopener\">27 widget roles<\/a> in ARIA 1.1)<\/li>\n\n\n\n<li><strong><code>iframe<\/code>&nbsp;and&nbsp;<code>img<\/code>&nbsp;elements<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"when-to-use-it\">When to use it?<\/h3>\n\n\n\n<p>The <code>aria-label<\/code>&nbsp;is the string value that is used when there is no other visible text in this DOM node. Then you can best use this <code>aria-label<\/code> and describe the action of this interactive element. However, when there is visible text in that label or element, use <code>aria-labelledby<\/code>&nbsp;instead. And link it with that <code>id<\/code> of that node.<\/p>\n\n\n\n<p>The <code>aria-label<\/code> code&nbsp;example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button aria-label=\"Main menu\" class=\"icon\"&gt;&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>The <code>aria-labelledby<\/code> code example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav aria-labelledby=\"nav-title\"&gt;\n  &lt;h2 id=\"nav-title\"&gt;Sidebar Content&lt;\/h2&gt;\n  &lt;ul&gt;\n     &lt;li&gt;Basics&lt;\/li&gt;\n     &lt;li&gt;Design&lt;\/li&gt;\n     &lt;li&gt;About&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>The&nbsp;<code>aria-label<\/code>&nbsp;is only &#8220;visible&#8221; to assistive technologies such as a screen reader that can tell the element function. And it will not be visible on the website content to the user.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-web-p-images-and-2-x-retina-images\">3. WebP images and @2x Retina images<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"web-p\">WebP<\/h4>\n\n\n\n<p>To lighten up the Chrome extension Manifest V3 package, use <code>webp<\/code> images on your Options page and popup panel. The smaller the image resources, the faster the web page opens. And to provide the users with a smooth and snappy experience. So with an instant click, you can see the content.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>WebP lossless images are&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study#results\" target=\"_blank\" rel=\"noreferrer noopener\">26% smaller<\/a>&nbsp;in size compared to PNGs. WebP lossy images are&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_study\" target=\"_blank\" rel=\"noreferrer noopener\">25-34% smaller<\/a>&nbsp;than comparable JPEG images at equivalent&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Structural_similarity\" target=\"_blank\" rel=\"noreferrer noopener\">SSIM<\/a>&nbsp;quality index.<\/p>\n<cite><a href=\"https:\/\/developers.google.com\/speed\/webp\" target=\"_blank\" rel=\"noreferrer noopener\">Google Developer WebP documentation<\/a><\/cite><\/blockquote>\n\n\n\n<p>The <em>WebP<\/em>&nbsp;is a modern image format that provides the users huge benefits, that provide the images in a  superior lossless and lossy compression on the web.&nbsp;This replacement JPEG, PNG, BMP, and GIF file formats.<\/p>\n\n\n\n<p>Note: The <strong>Chrome extension Manifest V3 icon<\/strong> for the <strong>browser action button and context menu needs to be a png file type<\/strong>. The web browser does not support webp and SVG file types.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"retina\">Retina<\/h4>\n\n\n\n<p>The name Retina, is the brand name of the technology company Apple, as it is known as the first that brings high-DPI, or high dots per inch displays mass-produced for consumers. That was for the iPhone 4 device released in June 2010.<\/p>\n\n\n\n<p>Today most new devices have an HDPI display (or on Mac computers known as a retina display). So if you are adding an image, try adding @2x images. So everything looks pixel-sharp. Because any blurriness or low-quality image makes the Chrome extension incomplete for the user. And may think the Chrome Extension Manifest V3 is not ready or they are just testing a beta version of it.<\/p>\n\n\n\n<p>You can use 2 ways to set a high-quality image on your HTML web page. That with the simple way or the advanced way.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"simple\">Simple<\/h5>\n\n\n\n<p>The simple way is to get only 1 regular (for non-HDPI screens) and 1 HDPI image in the image node:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n id=\"loadinglamp\"\n alt=\"Turn Off the Lights lamp button\"\n width=\"16\"\n height=\"16\" \n src=\"images\/icon16.png\"\n srcset=\"images\/icon16.png 1x, images\/icon16@2x.png 2x\"&gt;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"advanced\">Advanced<\/h5>\n\n\n\n<p>The advanced way is to get support for multiple screen sizes. Multiple screen sizes that depend on the platform (desktop, tablet, or mobile) the user is using your Chrome Extension Manifest V3:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\nsrc=\"small.png\"\nsrcset=\"large.png 2000w, medium.png 1000w, small.png 320w\"\nsizes=\"(min-width: 60em) 33.3333vw, (min-width: 38em) 50vw, 100vw\"\nalt=\"Example image\"&gt;<\/code><\/pre>\n\n\n\n<p>Build for all screens in the above&nbsp;<code>srcset<\/code>&nbsp;the attribute we are telling the web browser that there are 3 different images to choose from:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>large.png<\/code>&nbsp;which has a pixel width of&nbsp;<code>2000<\/code><\/li>\n\n\n\n<li><code>medium.<code>png<\/code><\/code>&nbsp;which has a pixel width of&nbsp;<code>1000<\/code><\/li>\n\n\n\n<li><code>small.<code>png<\/code><\/code>&nbsp;which has a pixel width of&nbsp;<code>320<\/code><\/li>\n<\/ol>\n\n\n\n<p>The smaller screen size can be handy in the future when Chrome extension Manifest V3 will be allowed on iOS and the Android Chrome web browser. So the same Chrome Extension Manifest V3 code can be used on all mobile web browsers.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>So think about the future and build it now for the future. To get a harmoney web experience for desktop, and mobile.<\/p>\n<cite>Stefan Van Damme Developer Quote<\/cite><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-use-lazy-load-iframe-and-images\">4. Use lazy load (iframe and images)<\/h3>\n\n\n\n<p>The other important point is speed as part of Accessibility. Slow web pages create a bad experience. Do you use many embedded videos or images that are not visible in the view part of the web page? Then you can best use the lazy attribute. Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It is a way to shorten the length of the critical rendering path, which translates into reduced page load times.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"image.webp\" alt=\"Stefan vd Logo\" loading=\"lazy\" \/&gt;\n&lt;iframe src=\"video-player.webm\" title=\"Stefan vd Video\" loading=\"lazy\"&gt;&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-fit-your-mobile-screen-layout\">5. Fit your mobile screen layout<\/h3>\n\n\n\n<p>Design your Chrome extension for mobile. And that is about the Options page and popup panel.<br>Because in Safari 15 you can port your Chrome Extension Manifest V3 to Safari and get your Chrome extensions running on iOS and iPadOS.<\/p>\n\n\n\n<p>However, it needs some design improvement such as the notch and the touch experience. The certain button must be bigger than <strong>48px in width and height<\/strong>, so your finger can tap on it. And the notch on the top in the latest iPhone model, you must place a viewport to make sure your content stays under this panel and not in it. Even with the dynamic island, it is smaller than the previous one. However, it overlaps your web content and a correct alignment is needed to get the content visible.<\/p>\n\n\n\n<p>With this code in your HTML web page, it will be in the safe area of your mobile device. That works for the finger reader below your screen and the Face ID notch.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"&gt;<\/code><\/pre>\n\n\n\n<p>After that, your HTML page will fit the full screen and height of your iPhone X design. So the content is under the notch of the iPhone X design. However, in portrait orientation, the view may be good for the users, but in the landscape, you will find that the notch will overlay your website content. And to solve this problem, your visible element will be visible in this landscape mode by adding the CSS safe area code. That for each of the corners of the screen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>safe-area-inset-left<\/code><\/li>\n\n\n\n<li><code>safe-area-inset-right<\/code><\/li>\n\n\n\n<li><code>safe-area-inset-top<\/code><\/li>\n\n\n\n<li><code>safe-area-inset-bottom<\/code><\/li>\n<\/ul>\n\n\n\n<p>Here is a CSS example of how to get the navigation bar from a safe distance from the notch. That is used in the Turn Off the Lights Safari extension for the Options page to customize the experience for the users. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav{\n   position:absolute;\n   width: 200px;\n   left: env(safe-area-inset-left);\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/iphone-x-design-options-page-1024x638.png\" alt=\"An example of the Turn Off the Lights Safari extension with a notch design\" class=\"wp-image-642\" srcset=\"https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/iphone-x-design-options-page-1024x638.png 1024w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/iphone-x-design-options-page-300x187.png 300w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/iphone-x-design-options-page-768x479.png 768w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/iphone-x-design-options-page-1536x957.png 1536w, https:\/\/www.stefanvd.net\/blog\/wp-content\/uploads\/2022\/12\/iphone-x-design-options-page.png 2012w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">An example of the Turn Off the Lights Safari extension with a notch designed well around it that with the HTML meta code<\/figcaption><\/figure>\n\n\n\n<p>And maybe soon on Chrome Extension Manifest V3 support on Android. It is logical to get this experience on all devices. As the primary launch <a href=\"https:\/\/www.turnoffthelights.com\/blog\/introducing-the-turn-off-the-lights-for-samsung-internet-extension-for-android\/\" target=\"_blank\" rel=\"noreferrer noopener\">Turn Off the Lights Samsung Internet extension<\/a> went previous week online for Android users using the Samsung Internet web browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"addition-resource\">Addition resource <\/h2>\n\n\n\n<p>To learn more about Chrome Extension Manifest V3 APIs and continue to create a creative experience for the users, see these resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\" target=\"_blank\" rel=\"noreferrer noopener\">Mozilla Accessibility ARIA documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/speed\/webp\" data-type=\"URL\" data-id=\"https:\/\/developers.google.com\/speed\/webp\" target=\"_blank\" rel=\"noreferrer noopener\">Webp images documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/extensions\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Developer Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Add-ons\/WebExtensions\" target=\"_blank\" rel=\"noreferrer noopener\">MDN Browser Extensions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webkit.org\/blog\/7929\/designing-websites-for-iphone-x\/\" target=\"_blank\" rel=\"noreferrer noopener\">Safe Areas iPhone X Documentation<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-remarks\">Final remarks<\/h2>\n\n\n\n<p>In my <a href=\"https:\/\/www.stefanvd.net\/blog\/2022\/11\/14\/creates-a-google-chrome-extension-manifest-v3-for-beginners-from-scratch\/\" target=\"_blank\" data-type=\"post\" data-id=\"338\" rel=\"noreferrer noopener\">previous post, I provided an easily understandable beginner tutorial on how to create your first Chrome extension Manifest V3<\/a>. With an explanation of which developer environment you can use to get started. And the brief architecture overview of what component can be included in a Chrome extension Manifest V3.<\/p>\n\n\n\n<p>A fundamental of Chrome (also the Chrome motto in every conference and summit) is the 4 S. And that said here also for the Google Chrome web browser is <em>Speed, Security, Stability, <\/em>and<em> Simplicity<\/em>. For Chrome extension Manifest V3 is a start to bringing this performance, security, and privacy for the users.<\/p>\n\n\n\n<p>In this article, you have learned the accessibility features you need to add to your <strong>Google Chrome extension Manifest V3<\/strong>. If you are a beginner\/junior, or medior developer, you can follow these handy tips for your Chrome extension. Even if you are a senior developer creating unique and popular Chrome extensions such as me. You can fine-tune your Chrome extension Manifest V3 so it will be accessible for all users, that include the 16% of the global population that has a disability. Your users will appreciate this change when they users are browsing the web daily on their personal or work computers.<\/p>\n\n\n\n<p>I did these tips already in my unique Chrome extension Turn Off the Lights. I hope you enjoyed my new Chrome extension Manifest V3 accessibility user experience tip post. That I want to share this with the browser extension community. So you get to build this high-quality experience for the users. If you would like to support me, consider <a href=\"https:\/\/www.stefanvd.net\/donate\/\" target=\"_blank\" rel=\"noreferrer noopener\">a small donation<\/a> to my web community work.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Take your digital brush and pencil. Because this article makes the experience for your Chrome extension the best for all users. Most developers do not think about this user experience. Because this is the most important point for a good Chrome extension. And this brings a huge benefit to the users. In this post, I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":611,"comment_status":"closed","ping_status":"open","sticky":false,"template":"single-full-width.php","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-504","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-browser","category-programming"],"_links":{"self":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/comments?post=504"}],"version-history":[{"count":53,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/504\/revisions"}],"predecessor-version":[{"id":1655,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/posts\/504\/revisions\/1655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media\/611"}],"wp:attachment":[{"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/media?parent=504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/categories?post=504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.stefanvd.net\/blog\/wp-json\/wp\/v2\/tags?post=504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}