accessibility checks

README.md

@@ -1,15 +1,15 @@
-<p align="center"><a href="https://enbizcard.vercel.app/" target="_blank"><img src="assets/images/GitHub.png" width="100%"></a></p>
+<p align="center"><a href="https://enbizcard.vercel.app/"><img src="assets/images/GitHub.png" width="100%"></a></p>
 
 <h1 align="center">An Open-Source Digital Business Card Generator</h1>
 <!-- <h3 align="center">Your Website Can Host Your Digital Business Cards for FREE!</h3> -->
 <h3 align="center">Why Pay When Your Digital Business Cards Can Be Hosted on Your Website for Free!</h3>
 <p align="center">EnBizCard helps you create interactive and responsive HTML-based digital business cards that can be hosted with your website.</p>
-<h3 align="center"><a href="https://enbizcard.vercel.app" target="_blank">Open App</a> | <a href="https://enbizcard.vercel.app" target="_blank">View demo</a></h3>
+<h3 align="center"><a href="https://enbizcard.vercel.app">Open App</a> | <a href="https://enbizcard.vercel.app">View demo</a></h3>
 
 ---
 
 <p align="center">
-<a href="https://www.gnu.org/licenses/agpl-3.0" alt="License: GPLv3" target="_blank"><img src="https://img.shields.io/badge/License-AGPL%20v3-blue"></a> <a href="https://github.com/vishnuraghavb/EnBizCard/issues" alt="GitHub issues" target="_blank"><img src="https://img.shields.io/github/issues/vishnuraghavb/EnBizCard?label=Issues"></a> <a href="https://liberapay.com/vishnuraghavb/donate" alt="Liberapay" target="_blank"><img src="https://img.shields.io/liberapay/patrons/vishnuraghavb.svg?logo=liberapay"></a> <a href="https://www.vishnuraghav.com/donate" alt="Donate" target="_blank"><img src="https://img.shields.io/badge/Donate%20to-Vishnu%20Raghav-brightgreen"></a></p>
+<a href="https://www.gnu.org/licenses/agpl-3.0" alt="License: GPLv3"><img src="https://img.shields.io/badge/License-AGPL%20v3-blue"></a> <a href="https://github.com/vishnuraghavb/EnBizCard/issues" alt="GitHub issues"><img src="https://img.shields.io/github/issues/vishnuraghavb/EnBizCard?label=Issues"></a> <a href="https://liberapay.com/vishnuraghavb/donate" alt="Liberapay"><img src="https://img.shields.io/liberapay/patrons/vishnuraghavb.svg?logo=liberapay"></a> <a href="https://www.vishnuraghav.com/donate" alt="Donate"><img src="https://img.shields.io/badge/Donate%20to-Vishnu%20Raghav-brightgreen"></a></p>
 
 ---
 
@@ -81,4 +81,4 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 ## Support me
 
-<a href="https://www.vishnuraghav.com/donate/" target="_blank"><img alt="Donate to Vishnu Raghav" src="assets/images/donate.svg" width="207"></a>
+<a href="https://www.vishnuraghav.com/donate/"><img alt="Donate to Vishnu Raghav" src="assets/images/donate.svg" width="207"></a>

assets/styles/T1.scss

@@ -49,6 +49,8 @@ body {
   align-items: center;
   border-radius: 5rem;
   padding: 0.75rem 1.5rem;
+  border: none;
+  outline: none;
   cursor: pointer;
   span {
     margin-left: 0.5rem;
@@ -186,7 +188,7 @@ a {
   justify-content: center;
   width: 100%;
 }
-#dlVcard {
+#vcard {
   display: flex;
   align-items: center;
   border-radius: 5rem;

components/Check.vue

@@ -11,8 +11,10 @@
         "
         type="checkbox"
         :id="'check' + index"
+        aria-label="checkbox"
       />
       <img
+        alt="checkmark"
         src="~/assets/icons/check.svg"
         class="absolute top-0 left-0 m-3 z-10 pointer-events-none select-none transition-opacity duration-200"
         :class="item.checked ? 'opacity-100' : 'opacity-20'"

components/Download.vue

@@ -41,6 +41,7 @@
         <br /><a
           class="inline-block font-extrabold tracking-wide leading-none flex-shrink-0 p-3 text-white bg-gray-700 rounded hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200 mt-4"
           href="https://www.vishnuraghav.com/donate/"
+          rel="noreferrer"
           target="_blank"
           >Donate</a
         >

components/Featured.vue

@@ -2,15 +2,15 @@
   <div class="flex flex-col w-full mt-6 bg-gray-800 rounded">
     <div class="flex justify-between">
       <div class="flex items-center w-full">
-        <button
+        <div
           class="p-1 flex-shrink-0 focus:outline-none drag cursor-move"
           tabindex="-1"
         >
           <div
             class="w-6 h-6"
             v-html="require(`~/assets/icons/drag.svg?include`)"
           ></div>
-        </button>
+        </div>
         <div class="w-full">
           <input
             class="px-4 w-full h-12 bg-transparent placeholder-gray-600 transition-colors duration-200 border-b border-black focus:outline-none focus:border-gray-500 hover:border-gray-500"

components/Help.vue

@@ -9,6 +9,7 @@
           href="https://t.me/enbizcard"
           target="_blank"
           class="flex items-center text-lg leading-none p-5 flex-shrink-0 rounded cursor-pointer border-2 border-transparent bg-gray-700 text-white hover:bg-gray-600 focus:bg-gray-600 transition-colors duration-200 font-extrabold"
+          rel="noreferrer"
         >
           Join the Telegram group
         </a>