From 49bc7be27fd22117bb506b878bc88f7b6c9ce4c4 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Thu, 30 Nov 2023 01:06:14 +0100
Subject: [PATCH] changed first header with visually hidden h1

---
 index.html        | 108 +++++++++++++++++++++++++++-------------------
 styles/global.css |  17 ++++++++
 2 files changed, 80 insertions(+), 45 deletions(-)
diff --git a/index.html b/index.html
index bb43d27..a92286f 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,64 @@
 	<body id="body">
 	<main>
 
+
+
+
+
+
+
+
+
+		<!--
+			TITLE AREA
+		-->
+<div id="title_area" class="section">
+	<h1 class="visually-hidden">hugo lamy - programmeur informatique</h1>
+	<div id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
+<pre aria-hidden="true">
+         
+                
+           
+               
+      
+</pre>
+<pre aria-hidden="true">
+               
+              
+             
+                 
+             
+</pre>
+	</div>
+	<div id="title" style="gap:10px 30px;" data-flex="horizontal center wrap">
+<pre aria-hidden="true">
+                         
+                                         
+                           
+                                             
+                                
+</pre>
+<pre aria-hidden="true">
+                         
+                                                 
+                                       
+                                                  
+                                 
+</pre>
+	</div>
+</div>
+		<!--
+			END TITLE AREA
+		-->
+
+
+
+
+
+
+
+
+
 		<!--
 			PROJECTS
 		-->
@@ -78,6 +136,8 @@
 
 
 
+
+
 		<!--
 			CV
 		-->
@@ -159,6 +219,9 @@
 
 
 
+
+
+
 		<!--
 			INFOS
 		-->
@@ -177,51 +240,6 @@
 
 
 
-		<!--
-			TITLE AREA
-		-->
-<div id="title_area" class="section">
-	<div role="heading" aria-level="1" title="hugo lamy" id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
-<pre aria-hidden="true">
-         
-                
-           
-               
-      
-</pre>
-<pre aria-hidden="true">
-               
-              
-             
-                 
-             
-</pre>
-	</div>
-	<div role="heading" aria-level="1" title="programmeur informatique" id="title" style="gap:10px 30px;" data-flex="horizontal center wrap">
-<pre aria-hidden="true">
-                         
-                                         
-                           
-                                             
-                                
-</pre>
-<pre aria-hidden="true">
-                         
-                                                 
-                                       
-                                                  
-                                 
-</pre>
-	</div>
-</div>
-		<!--
-			END TITLE AREA
-		-->
-
-
-
-
-
 
 		<!--
 			MOUSE 1
diff --git a/styles/global.css b/styles/global.css
index 17c543e..6975b0e 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,3 +1,20 @@
+/* https://stackoverflow.com/questions/62107074/how-to-hide-a-text-and-make-it-accessible-by-screen-reader */
+.visually-hidden { 
+	border: 0;
+	padding: 0;
+	margin: 0;
+	position: absolute !important;
+	height: 1px; 
+	width: 1px;
+	overflow: hidden;
+	outline: none;
+	box-shadow: none;
+	clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+	clip: rect(1px, 1px, 1px, 1px); /* maybe deprecated but we need to support legacy browsers */
+	clip-path: inset(50%); /* modern browsers, clip-path works inwards from each corner */
+	white-space: nowrap; /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space) */
+}
+
 
 /*
  DATA-FLEX
