Fix accesibility issues

index.html

@@ -33,25 +33,26 @@
 		<div id="faq" class="faq__component">
 			<figure id="faq__decorations" class="faq__decorations">
 				<img class="faq__decorations-woman" src="./images/illustration-woman-online-desktop.svg"
-					alt="illustration-woman-online-desktop">
-				<img class="faq__decorations-box" src="./images/illustration-box-desktop.svg" alt="">
+					alt="illustration of a woman on a whiteboard">
+				<img class="faq__decorations-box" src="./images/illustration-box-desktop.svg"
+					alt="illustration of a Box">
 			</figure>
 			<section id="faq_main" class="faq__main">
 				<h1 class="faq__header">FAQ</h1>
-				<article id="article__01" class="faq__article" tabindex="1" accesskey="1">
+				<article id="article__01" class="faq__article" tabindex="0" accesskey="1" title="accesskey [1]">
 					<h2 class="faq__article-title">How many team members can I invite?</h2>
 					<div class="faq__article-answer">
 						<p>You can invite up to 2 additional users on the Free plan. There is no limit on team members
 							for the Premium plan.</p>
 					</div>
 				</article>
-				<article id="article__02" class="faq__article" tabindex="2" accesskey="2">
+				<article id="article__02" class="faq__article" tabindex="0" accesskey="2" title="accesskey [2]">
 					<h2 class="faq__article-title">What is the maximum file upload size?</h2>
 					<div class="faq__article-answer">
 						<p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
 					</div>
 				</article>
-				<article id="article__03" class="faq__article" tabindex="3" accesskey="3">
+				<article id="article__03" class="faq__article" tabindex="0" accesskey="3" title="accesskey [3]">
 					<h2 class="faq__article-title">How do I reset my password?</h2>
 					<div class="faq__article-answer">
 						<p>Click “Forgot password” from the login page or “Change password” from your profile page. A
@@ -67,13 +68,13 @@ <h2 class="faq__article-title">How do I reset my password?</h2>
 							eligendi. Beatae, hic doloremque.</p>
 					</div>
 				</article>
-				<article id="article__04" class="faq__article" tabindex="4" accesskey="4">
+				<article id="article__04" class="faq__article" tabindex="0" accesskey="4" title="accesskey [4]">
 					<h2 class="faq__article-title">Can I cancel my subscription?</h2>
 					<div class="faq__article-answer">
 						<p> Yes! Send us a message and we’ll process your request no questions asked.</p>
 					</div>
 				</article>
-				<article id="article__05" class="faq__article" tabindex="5" accesskey="5">
+				<article id="article__05" class="faq__article" tabindex="0" accesskey="5" title="accesskey [5]">
 					<h2 class="faq__article-title">Do you provide additional support?</h2>
 					<div class="faq__article-answer">
 						<p>Chat and email support is available 24/7. Phone lines are open during normal business hours.

js/behavior.js

@@ -5,7 +5,8 @@ const faqArticles = document.getElementsByClassName("faq__article");
 
 // add Event listener
 for (let article of faqArticles) {
-	article.addEventListener("click", setActiveArticle, false);
+	// article.addEventListener("click", setActiveArticle, false);
+	article.addEventListener("focus", setActiveArticle, false);
 }
 
 /* Clear & hidde all active articles */