{"id":9619,"date":"2026-05-14T06:27:43","date_gmt":"2026-05-14T06:27:43","guid":{"rendered":"https:\/\/stage-barriano.projectbeta.biz\/what-is-a-voluntary-product-accessibility-template-vpat\/"},"modified":"2026-08-06T09:26:12","modified_gmt":"2026-08-06T09:26:12","slug":"html","status":"publish","type":"post","link":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/html\/","title":{"rendered":"Barriano Accessibility Widget HTML Installation Guide"},"content":{"rendered":"

Welcome to the Barriano installation guide. Follow these simple steps to add the Barriano Accessibility Widget to your HTML website and make your digital content more accessible to everyone.<\/p>\n

Step 1: Register Your Website to Get Started<\/h2>\n

Sign in to your Barriano account and register the website where you want to install the accessibility widget.<\/p>\n

You can skip this step if your website has already been registered in the Barriano dashboard.<\/p>\n

Step 2: Access Your Barriano Installation Code<\/h2>\n

After registering your website, Barriano will generate a unique installation script for your domain.<\/p>\n

Copy and save this code. Your installation script will look similar to the following:<\/p>\n

\n
<script\n  src=\"https:\/\/widget.barriano.com\/ada-widget.embed.min.js?rlzqa4lo23t9nsv39whnx0amtvcw1unu\"\n  async>\n<\/script><\/code><\/pre>\n<\/div>\n
Make sure you use the unique script provided for your website instead of the example key shown above.<\/p>\n
You can access the code again at any time by signing in to your Barriano dashboard, selecting your website, and opening the installation or embed-code section.<\/p>\n
Step 3: Open Your Website\u2019s HTML Files<\/h2>\n
Locate the root folder containing your website files and open the HTML pages where you want the Barriano widget to appear.<\/p>\n
Common HTML file names include:<\/p>\n
\n
index.html\nabout.html\nservices.html\ncontact.html<\/code><\/pre>\n<\/div>\n
Open the files using a plain-text or code editor, such as:<\/p>\n
    \n
  • Visual Studio Code<\/li>\n
  • Notepad++<\/li>\n
  • Sublime Text<\/li>\n
  • WebStorm<\/li>\n<\/ul>\n
    To make the widget available throughout your website, add the Barriano script to every relevant HTML page.<\/p>\n
    If your website uses a shared header, template, or layout file, you may only need to add the script once to that shared file.<\/p>\n
    Step 4: Copy and Paste the Barriano Code<\/h2>\n
    Open an HTML file and locate the opening <head><\/code> tag.<\/p>\n
    Paste the Barriano installation script immediately after the opening <head><\/code> tag.<\/p>\n
    \n
    <html lang=\"en\">\n<head>\n  <script\n    src=\"https:\/\/widget.barriano.com\/ada-widget.embed.min.js?rlzqa4lo23t9nsv39whnx0amtvcw1unu\"\n    async>\n  <\/script>\n\n  <meta charset=\"UTF-8\">\n  <title>My Website<\/title>\n<\/head>\n<body>\n  <!-- Your website content -->\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n
    Do not paste the script inside the visible HTML body section. The script should be added inside the document\u2019s <head><\/code> section.<\/p>\n
    Step 5: Save the HTML File<\/h2>\n
    After adding the Barriano script, save the updated HTML file.<\/p>\n
    Use the following keyboard shortcuts:<\/p>\n
      \n
    • Windows or Linux:<\/strong> Ctrl + S<\/code><\/li>\n
    • macOS:<\/strong> Command + S<\/code><\/li>\n<\/ul>\n
      You can also select File \u2192 Save<\/strong> from your editor\u2019s menu.<\/p>\n
      Step 6: Repeat the Steps and Preview Your Website<\/h2>\n
      Repeat the installation process for the remaining HTML pages on your website.<\/p>\n
      After updating the required files, preview your website in a browser and confirm that:<\/p>\n
        \n
      • The Barriano accessibility icon is visible.<\/li>\n
      • The accessibility widget opens correctly.<\/li>\n
      • The accessibility options work as expected.<\/li>\n
      • The widget displays correctly on desktop and mobile devices.<\/li>\n<\/ul>\n
        Step 7: Upload Your Website to the Server<\/h2>\n
        Upload the updated HTML files to your web server using your preferred publishing method, such as:<\/p>\n
          \n
        • FTP or SFTP<\/li>\n
        • Your hosting control panel<\/li>\n
        • Git deployment<\/li>\n
        • Your website\u2019s existing deployment workflow<\/li>\n<\/ul>\n
          Once the updated files are published, open the live website and verify that the Barriano Accessibility Widget is active.<\/p>\n
          You\u2019re All Set!<\/h2>\n
          The Barriano Accessibility Widget is now installed on your HTML website.<\/p>\n
          Your visitors can use the widget to personalize their browsing experience according to their accessibility needs, helping make your website more inclusive and accessible to a wider audience.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":43534,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[544],"tags":[],"class_list":["post-9619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-installations"],"_links":{"self":[{"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/posts\/9619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/comments?post=9619"}],"version-history":[{"count":14,"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/posts\/9619\/revisions"}],"predecessor-version":[{"id":44144,"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/posts\/9619\/revisions\/44144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/media\/43534"}],"wp:attachment":[{"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/media?parent=9619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/categories?post=9619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stage-barriano.projectbeta.biz\/pt-br\/wp-json\/wp\/v2\/tags?post=9619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}