Made requested accessibility changes. (#20318)

### Description Made requested changes from Accessibility audit. Live at: [maanavd.github.io/onnxruntime/](https://maanavd.github.io/onnxruntime/) ### Motivation and Context Related issues addressed: #20259, #20261, #20263, #20264, #20096, #20100, #20101, #20102, #20103, #20119, #20120, #20123 Co-authored-by: MaanavD <[email protected]>
microsoft · Apr 17, 2024 · f8e689f · f8e689f
1 parent 55edff1
commit f8e689f
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 94 deletions.
diff --git a/src/images/undraw/image_ortcrossplatform.svelte b/src/images/undraw/image_ortcrossplatform.svelte
@@ -1,4 +1,5 @@
 <svg
+	class="w-full"
 	stroke="currentColor"
 	width="338.4"
 	height="194.4"

diff --git a/src/images/undraw/image_ortgenerativeai.svelte b/src/images/undraw/image_ortgenerativeai.svelte
@@ -1,4 +1,5 @@
 <svg
+	class="w-full"
 	stroke="currentColor"
 	width="361.5"
 	height="165"

diff --git a/src/images/undraw/image_ortperf.svelte b/src/images/undraw/image_ortperf.svelte
@@ -1,4 +1,5 @@
 <svg
+	class="w-full"
 	stroke="currentColor"
 	width="360"
 	height="235.5"

diff --git a/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte b/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte
@@ -69,12 +69,12 @@
 		)}
 	>
 		{#each items as item, idx (item.alt)}
+		<li class="bg-slate-300 m-auto relative h-28 w-[200px] max-w-full flex-shrink-0 hover:scale-105 transition duration-200 rounded-md border border-2 border-secondary md:w-[200px]"> 
 			<a
-				href={item.href}
-				class="bg-slate-300 m-auto relative h-28 w-[200px] max-w-full flex-shrink-0 hover:scale-105 transition duration-200 rounded-md border border-2 border-secondary md:w-[200px]"
-			>
+				href={item.href}>
 				<img class="h-28 p-2 m-auto" src={item.src} alt={item.alt} />
 			</a>
+		</li>
 		{/each}
 	</ul>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -25,7 +25,7 @@
 			link: 'https://www.youtube-nocookie.com/embed/lRBsmnBE9ZA?si=l5i0Q2P7VtSJyGK1'
 		},
 		{
-			title: 'Optimize Training and Inference with ONNX Runtime (ORT/ACPT/DeepSpeed)',
+			title: 'Optimize Training and Inference with ONNX Runtime (ACPT/DeepSpeed)',
 			link: 'https://www.youtube-nocookie.com/embed/lC7d_7waHLM?si=U4252VEd1t5ioZUN'
 		}
 	];

diff --git a/src/routes/blogs/+page.svelte b/src/routes/blogs/+page.svelte
@@ -302,6 +302,14 @@
 		}
 	];
 	let blogsCommunity = [
+		{
+			title:
+				'Deploying a Production-Ready RAG Server: A Comprehensive Guide with LlamaIndex',
+			date: 'March 27, 2024',
+			link: 'https://python.plainenglish.io/deploying-a-production-ready-rag-server-a-comprehensive-guide-with-llamaindex-dbe57cc960df',
+			blurb:
+				'Leveraging ONNX Runtime to use FastEmbed for a serverless deployment of a RAG server with LlamaIndex.'
+		},
 		{
 			title:
 				'Efficient image generation with Stable Diffusion models and ONNX Runtime using AMD GPUs',
@@ -354,6 +362,7 @@
 				<FeaturedBlog
 					title={blog.title}
 					description={blog.blurb}
+					imgalt={blog.imgalt}
 					date={blog.date}
 					link={blog.link}
 					image={blog.image}

diff --git a/src/routes/components/code-blocks.svelte b/src/routes/components/code-blocks.svelte
@@ -48,9 +48,9 @@
 </script>
 
 <div class="container mx-auto px-4">
-	<h1 class="text-xl mb-4 text-center">
+	<h3 class="text-xl mb-4 text-center">
 		Use ONNX Runtime with your favorite language and get started with the tutorials:
-	</h1>
+	</h3>
 	<div class="grid-cols-1 lg:grid-cols-3 gap-4 grid">
 		<div class="col-span-1 mx-auto mt-6 mx-4 lg:mx-0 lg:ml-10">
 			<div class="join join-vertical gap-4 w-full">

diff --git a/src/routes/components/cross-platform.svelte b/src/routes/components/cross-platform.svelte
@@ -8,7 +8,7 @@
 			<Ortcrossplatform />
 		</div>
 		<div class="">
-			<h1 class="text-4xl">Cross-Platform</h1>
+			<h2 class="text-4xl">Cross-Platform</h2>
 			<br /><br />
 			<p class="text-xl">
 				Do you program in Python? C#? C++? Java? JavaScript? Rust? No problem. ONNX Runtime has you

diff --git a/src/routes/components/customers.svelte b/src/routes/components/customers.svelte
@@ -177,7 +177,7 @@
 </script>
 
 <div class="lg:my-5">
-	<h1 class="text-3xl my-5 text-center">Trusted By</h1>
+	<h2 class="text-3xl my-5 text-center">Trusted By</h2>
 	<div class="divider" />
 	<InfiniteMovingCards
 		items={testimonials.sort(() => Math.random() - 0.5)}

diff --git a/src/routes/components/generative-ai-hero.svelte b/src/routes/components/generative-ai-hero.svelte
@@ -6,7 +6,7 @@
 <div class="container mx-auto px-10 mb-10">
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
 		<div class="">
-			<h1 class="text-4xl">Generative AI</h1>
+			<h2 class="text-4xl">Generative AI</h2>
 			<br /><br />
 			<p class="text-xl">
 				Integrate the power of Generative AI and Large language Models (LLMs) in your apps and

diff --git a/src/routes/components/header.svelte b/src/routes/components/header.svelte
@@ -10,9 +10,15 @@
 	onMount(() => {
 		themeChange(false);
 	});
-</script>
 
-<div class="navbar bg-base-100 sticky top-0 z-50">
+	let innerHeight = 0; 
+	let innerWidth= 0; 
+	$: smallWindowHeight = innerHeight <= 360;
+	$: smallWindowWidth = innerWidth <= 360;
+</script>
+<svelte:window bind:innerHeight bind:innerWidth />
+<div role="navigation" class="navbar bg-base-100 top-0 z-50 {smallWindowHeight ? "" : "sticky"}">
+	<!-- Navbar for mobile -->
 	<div class="navbar-start">
 		<div class="dropdown">
 			<button tabindex="0" class="btn btn-ghost lg:hidden">
@@ -34,66 +40,67 @@
 				tabindex="0"
 				class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
 			>
-				<li><a href={pathvar + '/getting-started'}>Get Started</a></li>
-				<li><a href={pathvar + '/blogs'}>Blogs</a></li>
-				<li><a rel="external" href={pathvar + '/docs'}>Docs</a></li>
+				<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/getting-started'}>Get Started</a></li>
+				<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/blogs'}>Blogs</a></li>
+				<li><a class="hover:bg-primary focus:bg-primary" rel="external" href={pathvar + '/docs'}>Docs</a></li>
 				<li>
-					<p>Community</p>
+					<p class="hover:bg-primary focus:bg-primary">Community</p>
 					<ul class="p-2">
-						<li><a href={pathvar + '/events'}>Events</a></li>
-						<li><a href={pathvar + '/testimonials'}>Testimonials</a></li>
+						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/events'}>Events</a></li>
+						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/testimonials'}>Testimonials</a></li>
 						<li>
-							<a href="https://www.youtube.com/onnxruntime" target="_blank"
+							<a class="hover:bg-primary focus:bg-primary" href="https://www.youtube.com/onnxruntime" target="_blank"
 								><div class="w-4 h-4"><FaYoutube /></div>
 								Youtube</a
 							>
 						</li>
 						<li>
-							<a href="https://www.linkedin.com/company/onnxruntime/" target="_blank"
+							<a class="hover:bg-primary focus:bg-primary" href="https://www.linkedin.com/company/onnxruntime/" target="_blank"
 								><div class="w-4 h-4"><FaLinkedinIn /></div>
 								LinkedIn</a
 							>
 						</li>
 					</ul>
 				</li>
 				<li>
-					<a href="https://github.com/microsoft/onnxruntime" target="_blank"
+					<a class="hover:bg-primary focus:bg-primary" href="https://github.com/microsoft/onnxruntime" target="_blank"
 						><div class="w-4 h-4"><FaGithub /></div>
 						GitHub</a
 					>
 				</li>
 			</button>
 		</div>
-		<a href={pathvar + '/'} class="btn btn-ghost normal-case text-xl">
+		<a class="hover:bg-primary focus:bg-primary btn btn-ghost normal-case text-xl" href={pathvar + '/'} >
 			<div class="hidden lg:inline">
 				<OnnxLight width={32} height={32} />
 			</div>
-			ONNX Runtime
+			{smallWindowWidth ? "ORT" : "ONNX Runtime" }
 			<div class="lg:hidden">
 				<OnnxLight width={32} height={32} />
 			</div>
 		</a>
 	</div>
+	<!-- Navbar for deskop -->
 	<div class="navbar-center hidden lg:flex">
 		<ul class="menu menu-horizontal px-1">
-			<li><a href={pathvar + '/getting-started'}>Get Started</a></li>
-			<li><a href={pathvar + '/blogs'}>Blogs</a></li>
-			<li><a rel="external" href={pathvar + '/docs'}>Docs</a></li>
+			<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/getting-started'}>Get Started</a></li>
+			<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/blogs'}>Blogs</a></li>
+			<li><a class="hover:bg-primary focus:bg-primary" rel="external" href={pathvar + '/docs'}>Docs</a></li>
 			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 			<li tabindex="0">
 				<details class="z-[1]">
-					<summary>Community</summary>
+					<summary class="hover:bg-primary focus:bg-primary">Community</summary>
 					<ul class="p-2">
-						<li><a href={pathvar + '/events'}>Events</a></li>
-						<li><a href={pathvar + '/testimonials'}>Testimonials</a></li>
+						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/events'}>Events</a></li>
+						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/testimonials'}>Testimonials</a></li>
 						<li>
-							<a href="https://www.youtube.com/onnxruntime" target="_blank"
+							<a class="hover:bg-primary focus:bg-primary" href="https://www.youtube.com/onnxruntime" target="_blank"
 								><div class="w-4 h-4"><FaYoutube /></div>
 								Youtube</a
 							>
 						</li>
 						<li>
-							<a href="https://www.linkedin.com/company/onnxruntime/" target="_blank"
+							<a class="hover:bg-primary focus:bg-primary" href="https://www.linkedin.com/company/onnxruntime/" target="_blank"
 								><div class="w-4 h-4"><FaLinkedinIn /></div>
 								LinkedIn</a
 							>
@@ -102,7 +109,7 @@
 				</details>
 			</li>
 			<li>
-				<a href="https://github.com/microsoft/onnxruntime" target="_blank"
+				<a class="hover:bg-primary focus:bg-primary" href="https://github.com/microsoft/onnxruntime" target="_blank"
 					><div class="w-4 h-4"><FaGithub /></div>
 					GitHub</a
 				>

diff --git a/src/routes/components/hero.svelte b/src/routes/components/hero.svelte
@@ -53,7 +53,7 @@
 </script>
 
 {#if copied}
-	<div class="toast toast-top top-14 z-50">
+	<div class="toast toast-top top-14 z-50" role="alert">
 		<div class="alert alert-info">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -77,22 +77,22 @@
 		</div>
 	</div>
 {/if}
-<div class="hero bg-gradient-to-b from-primary">
+<div role="main" class="hero bg-gradient-to-b from-primary">
 	<div class="hero-content md:my-20">
 		<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
 			<div class="col-span-4 self-center md:mr-20">
-				<h1 class="text-5xl">
+				<h1 class="lg:text-5xl text-4xl">
 					Accelerated
 					{#key activeWord}
 						<span
-							class="text-5xl"
+							class="lg:text-5xl text-4xl"
 							in:fly={{ delay: 0, duration: 300, x: 200, y: 0, opacity: 1, easing: quintOut }}
 						>
 							{activeWord}
 						</span>
 					{/key}
-				</h1>
-				<h1 class="text-5xl">Machine Learning</h1>
+					<br/>
+					Machine Learning</h1>
 				<p class="py-3">
 					Production-grade AI engine to speed up training and inferencing in your existing
 					technology stack.
@@ -107,7 +107,7 @@
 							aria-label="copy python code"
 							on:click={() => copy(pythonCode)}
 							class="col-span-1 btn rounded-none h-full *:hover:scale-125 *:hover:transition *:hover:duration-200"
-							><span class="w-6 h-6"><FaRegClipboard /></span></button
+							><span class="min-w-6 h-6"><FaRegClipboard /></span></button
 						>
 					</div>
 					<div class="grid grid-cols-6 border-solid border-2 border-secondary">
@@ -118,7 +118,7 @@
 							aria-label="copy nuget code"
 							on:click={() => copy(nugetCode)}
 							class="col-span-1 btn rounded-none h-full *:hover:scale-125 *:hover:transition *:hover:duration-200"
-							><span class="w-6 h-6"><FaRegClipboard /></span></button
+							><span class="min-w-6 h-6"><FaRegClipboard /></span></button
 						>
 					</div>
 				</div>

diff --git a/src/routes/components/performance.svelte b/src/routes/components/performance.svelte
@@ -5,7 +5,7 @@
 <div class="container mx-auto px-10 mb-10">
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
 		<div class="">
-			<h1 class="text-4xl">Performance</h1>
+			<h2 class="text-4xl">Performance</h2>
 			<br /><br />
 			<p class="text-xl">
 				CPU, GPU, NPU - no matter what hardware you run on, ONNX Runtime optimizes for latency,

diff --git a/src/routes/components/training-and-inference.svelte b/src/routes/components/training-and-inference.svelte
@@ -8,7 +8,7 @@
 
 <div class="container mx-auto px-10 my-10">
 	<div class="divider" />
-	<h1 class="text-4xl pb-2">ONNX Runtime Inferencing</h1>
+	<h2 class="text-4xl pb-2">ONNX Runtime Inferencing</h2>
 	<p class="text-xl pb-4">
 		ONNX Runtime powers AI in Microsoft products including Windows, Office, Azure Cognitive
 		Services, and Bing, as well as in thousands of other projects across the world. ONNX Runtime is
@@ -47,7 +47,7 @@
 	</div>
 </div>
 <div class="container mx-auto px-10">
-	<h1 class="text-4xl pb-2">ONNX Runtime Training</h1>
+	<h2 class="text-4xl pb-2">ONNX Runtime Training</h2>
 	<p class="text-xl pb-4">
 		ONNX Runtime reduces costs for large model training and enables on-device training.
 	</p>

diff --git a/src/routes/components/videogallery.svelte b/src/routes/components/videogallery.svelte
@@ -7,8 +7,8 @@
 
 <div class="container mx-auto px-{px} my-{my}">
 	{#if title == true}
-		<h1 class="text-4xl">Videos</h1>
-		<h1 class="text-2xl">Check out some of our videos to help you get started!</h1>
+		<h2 class="text-4xl">Videos</h2>
+		<p class="text-2xl">Check out some of our videos to help you get started!</p>
 	{/if}
 	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mx-auto my-{my}">
 		{#each videos as video}

diff --git a/src/routes/getting-started/table.svelte b/src/routes/getting-started/table.svelte
@@ -1626,45 +1626,6 @@
 			event.currentTarget.className = event.currentTarget.className.replace(' focus', '');
 		}
 
-		jq(document).ready(function () {
-			jq(".tbl_tablist li[role='tab']").click(function () {
-				jq(".tbl_tablist li[role='tab']:not(this)").attr('aria-selected', 'false');
-				jq(this).attr('aria-selected', 'true');
-				var tabpanid = jq(this).attr('aria-controls');
-				var tabpan = jq('#' + tabpanid);
-				jq("div[role='tabpanel']:not(tabpan)").attr('aria-hidden', 'true');
-				jq("div[role='tabpanel']:not(tabpan)").addClass('hidden');
-
-				tabpan.removeClass('hidden');
-				tabpan.attr('aria-hidden', 'false');
-			});
-
-			jq(".tbl_tablist li[role='tab']").keydown(function (ev) {
-				if (ev.which == 13) {
-					jq(this).click();
-				}
-			});
-
-			//This adds keyboard function that pressing an arrow left or arrow right from the tabs toggel the tabs.
-			jq(".tbl_tablist li[role='tab']").keydown(function (ev) {
-				if (ev.which == 39 || ev.which == 37) {
-					var selected = jq(this).attr('aria-selected');
-					if (selected == 'true') {
-						jq("li[aria-selected='false']").attr('aria-selected', 'true').focus();
-						jq(this).attr('aria-selected', 'false');
-
-						var tabpanid = jq("li[aria-selected='true']").attr('aria-controls');
-						var tabpan = jq('#' + tabpanid);
-						jq("div[role='tabpanel']:not(tabpan)").attr('aria-hidden', 'true');
-						jq("div[role='tabpanel']:not(tabpan)").addClass('hidden');
-
-						tabpan.attr('aria-hidden', 'false');
-						tabpan.removeClass('hidden');
-					}
-				}
-			});
-		});
-
 		// Modal Extension
 		// ===============================
 
@@ -1835,7 +1796,7 @@
 		Select the configuration you want to use and run the corresponding installation script.
 	</p>
 	<div>
-		<div class="tabs tabs-bordered">
+		<div class="tabs tabs-bordered" role="tablist">
 			{#each tabs as tab, index}
 				<li
 					class="nav-item tab tab-lg"
@@ -1844,7 +1805,6 @@
 					on:keypress={() => (activeTab = index)}
 					id={index == 0 ? 'OI_tab' : 'OT_tab'}
 					data-toggle="pill"
-					aria-controls="panel{index}"
 					tabindex={0}
 					role="tab"
 				>

diff --git a/src/routes/inference/+page.svelte b/src/routes/inference/+page.svelte
@@ -74,8 +74,8 @@
 	imgalt=""
 />
 <div class="container mx-auto px-10 my-10">
-	<div class="mx-auto border border-solid border-primary rounded m-4 p-4">
-		<h1 class="text-3xl mb-2">Examples</h1>
+	<div class="mx-auto bg-neutral-200 rounded m-4 p-4">
+		<h1 class="text-3xl mb-2 text-primary-content">Examples</h1>
 		<div class="grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 			<div class="card bg-base-300">
 				<div class="card-body items-center text-center">
@@ -168,10 +168,10 @@
 			<ImageInference2 />
 		</div>
 	</div>
-	<div class="mx-auto border border-solid border-primary rounded m-4 p-4">
-		<h1 class="text-3xl">Examples</h1>
+	<div class="mx-auto bg-neutral-200 rounded m-4 p-4">
+		<h1 class="text-3xl text-primary-content">Examples</h1>
 		<div class="grid gap-10 grid-cols-1 md:grid-cols-2">
-			<div class="">
+			<div class="text-primary-content">
 				<p>
 					<br />
 					<b>ONNX Runtime Web Demo</b> is an interactive demo portal that showcases live use of ONNX