diff --git a/src/components/action-button.tsx b/src/components/action-button.tsx
index a5f2100..3334da4 100644
--- a/src/components/action-button.tsx
+++ b/src/components/action-button.tsx
@@ -33,8 +33,9 @@ export function ActionButton({
             }}
             disabled={disabled}
             className="border-[3px] border-black bg-purple-400 p-4 px-4 text-base text-black shadow-[4px_4px_0_0_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:transform hover:bg-purple-400 sm:p-6 sm:px-6 sm:text-lg"
+            tabIndex={0}
           >
-            <Icon className="h-6 w-6" />
+            <Icon className="h-6 w-6" role="img" aria-label={text || tooltipText}/>
             {text && <span className="text-sm">{text}</span>}
           </Button>
         </TooltipTrigger>
diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
index 3fa783b..de5a1cf 100644
--- a/src/components/copy-button.tsx
+++ b/src/components/copy-button.tsx
@@ -28,15 +28,16 @@ export function CopyButton({ onClick }: CopyButtonProps) {
           <Button
             onClick={handleClick}
             className="border-[3px] border-black bg-purple-400 p-4 px-4 text-base text-black shadow-[4px_4px_0_0_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:transform hover:bg-purple-400 sm:p-6 sm:px-6 sm:text-lg"
+            tabIndex={0}
           >
             {copied ? (
               <>
-                <Check className="h-6 w-6" />
+                <Check className="h-6 w-6" role="img" aria-label="Copied!"/>
                 <span className="text-sm">Copied!</span>
               </>
             ) : (
               <>
-                <FileText className="h-6 w-6" />
+                <FileText className="h-6 w-6" role="img" aria-label="Copy Mermaid.js Code"/>
                 <span className="text-sm">Copy Mermaid.js Code</span>
               </>
             )}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 396c314..fc1ee1c 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -52,7 +52,12 @@ export function Header() {
         <nav className="flex items-center gap-3 sm:gap-6">
           <span
             onClick={() => setIsApiKeyDialogOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter")
+                setIsApiKeyDialogOpen(true);
+              }}
             className="cursor-pointer text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600"
+            tabIndex={0}
           >
             <span className="flex items-center sm:hidden">
               <span>API Key</span>
@@ -63,7 +68,12 @@ export function Header() {
           </span>
           <span
             onClick={() => setIsPrivateReposDialogOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter")
+                setIsPrivateReposDialogOpen(true);
+              }}
             className="cursor-pointer text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600"
+            tabIndex={0}
           >
             <span className="sm:hidden">Private Repos</span>
             <span className="hidden sm:inline">Private Repos</span>
@@ -71,8 +81,9 @@ export function Header() {
           <Link
             href="https://github.com/ahmedkhaleel2004/gitdiagram"
             className="flex items-center gap-1 text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600 sm:gap-2"
+            tabIndex={0}
           >
-            <FaGithub className="h-5 w-5" />
+            <FaGithub className="h-5 w-5" aria-label="Github" role="img"/>
             <span className="hidden sm:inline">GitHub</span>
           </Link>
           <span className="flex items-center gap-1 text-sm font-medium text-black">
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index 857a6d2..e28d6f6 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -8,6 +8,8 @@ const Hero = () => {
         viewBox="0 0 91 98"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-hidden
       >
         <path
           d="m35.878 14.162 1.333-5.369 1.933 5.183c4.47 11.982 14.036 21.085 25.828 24.467l5.42 1.555-5.209 2.16c-11.332 4.697-19.806 14.826-22.888 27.237l-1.333 5.369-1.933-5.183C34.56 57.599 24.993 48.496 13.201 45.114l-5.42-1.555 5.21-2.16c11.331-4.697 19.805-14.826 22.887-27.237Z"
@@ -31,6 +33,8 @@ const Hero = () => {
         viewBox="0 0 92 80"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-hidden
       >
         <path
           d="m35.213 16.953.595-5.261 2.644 4.587a35.056 35.056 0 0 0 26.432 17.33l5.261.594-4.587 2.644A35.056 35.056 0 0 0 48.23 63.28l-.595 5.26-2.644-4.587a35.056 35.056 0 0 0-26.432-17.328l-5.261-.595 4.587-2.644a35.056 35.056 0 0 0 17.329-26.433Z"
diff --git a/src/components/main-card.tsx b/src/components/main-card.tsx
index d3fbbac..88709e1 100644
--- a/src/components/main-card.tsx
+++ b/src/components/main-card.tsx
@@ -105,6 +105,7 @@ export default function MainCard({
             required
           />
           <Button
+            tabIndex={0}
             type="submit"
             className="border-[3px] border-black bg-purple-400 p-4 px-4 text-base text-black shadow-[4px_4px_0_0_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:transform hover:bg-purple-400 sm:p-6 sm:px-6 sm:text-lg"
           >
@@ -136,12 +137,13 @@ export default function MainCard({
                             ? "bg-purple-400"
                             : "bg-purple-300 hover:bg-purple-400"
                         }`}
+                        tabIndex={0}
                       >
                         <span>Customize Diagram</span>
                         {activeDropdown === "customize" ? (
-                          <ChevronUp size={20} />
+                          <ChevronUp size={20} role="img" aria-label="Customize Diagram"/>
                         ) : (
-                          <ChevronDown size={20} />
+                          <ChevronDown size={20} role="img" aria-label="Customize Diagram"/>
                         )}
                       </button>
                     )}
@@ -158,22 +160,24 @@ export default function MainCard({
                             ? "bg-purple-400"
                             : "bg-purple-300 hover:bg-purple-400"
                         }`}
+                        tabIndex={0}
                       >
                         <span>Export Diagram</span>
                         {activeDropdown === "export" ? (
-                          <ChevronUp size={20} />
+                          <ChevronUp size={20} role="img" aria-label="Export Diagram"/>
                         ) : (
-                          <ChevronDown size={20} />
+                          <ChevronDown size={20} role="img" aria-label="Export Diagram"/>
                         )}
                       </button>
                     </div>
                   )}
                   {lastGenerated && (
                     <>
-                      <label className="font-medium text-black">
+                      <label className="font-medium text-black" htmlFor="zoom-toggle">
                         Enable Zoom
                       </label>
                       <Switch
+                        id="zoom-toggle"
                         checked={zoomingEnabled}
                         onCheckedChange={onZoomToggle}
                       />
@@ -224,6 +228,7 @@ export default function MainCard({
                   variant="outline"
                   className="border-2 border-black bg-purple-400 text-sm text-black transition-transform hover:-translate-y-0.5 hover:transform hover:bg-purple-300 sm:text-base"
                   onClick={(e) => handleExampleClick(path, e)}
+                  tabIndex={0}
                 >
                   {name}
                 </Button>
@@ -239,6 +244,8 @@ export default function MainCard({
           className="h-20 w-20 fill-sky-400 text-black"
           strokeWidth={0.6}
           style={{ transform: "rotate(-15deg)" }}
+          role="img"
+          aria-hidden
         />
       </div>
     </Card>