Merge pull request #7 from Birkbeck2/accessibility

Accessibility
Birkbeck2 · Jan 1, 2024 · 47f6ce0 · 47f6ce0
2 parents 58fb74c + 516de37
commit 47f6ce0
Show file tree

Hide file tree

Showing 31 changed files with 422 additions and 284 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,25 @@
 [![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/59P2FRZS)
+
+
+This repository contains all the files necessary for the portfolio website Feast and Wonder. Feast and Wonder is a food travel blog with the design goal of creating a pleasurable user experience for the Blind and Visually Impaired. It contains five html documents, one CSS document and an image folder. 
+
+This portfolio website was made in the context of a homework assignment and is not for commercial use. It is submitted along a UX report via Turnitin. 
+
+# File content 
+The following HTML files are used to create the website:
+
+| File | Content |
+| --- | --- |
+| `index.html` | landing and home page |
+| `seoul.html` | gallery page for Seoul |
+| `paris.html` | gallery page for Paris |
+| `brussels.html` | gallery page for Brussels |
+| `contact.html` | Contact page containing the contact form |
+
+Additionally, a global stylesheet entitled `styles.css` is used to set styles for all five pages above.
+
+Comments have been provided in each document to provide further explanation on implementation details, the structure of the file (CSS file) and when references have been used.  
+
+All images and videos can be found in the `image` folder.
+
+The food images and videos were provided by Birkbeck University and are free to use. The social media icons (Instagram, Facebook, and Pinterest) were download from [Free Icons, Clipart Illustrations, Photos, and Music (icons8.com)](https://icons8.com/) for free through the developer’s personal account and following their [licensing requirements.](https://icons8.com/vue-static/landings/pricing/icons8-license.pdf)
diff --git a/brussels.html b/brussels.html
@@ -4,13 +4,17 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Food Travel Blog</title>
+    <title>Feast and Wonder</title>
     <link rel="stylesheet" href="styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
     <header>
+        <div class="skip-to-main">
+            <a href="#main">Skip to main content</a>
+        </div>
+
         <nav class="navbar">
             <ul>
                 <li><a href="index.html">Home</a></li>
@@ -21,7 +25,7 @@
             </ul>
         </nav>
 
-        <nav class="breadcrumbs"> <!--Installing breadcrumbs for usability and accessibility purposes. Screen reader reads outloud the breadcrumb and the nav tag gives semantic context. Need to add Aria label.-->
+        <nav class="breadcrumbs"> <!--Installing breadcrumbs for usability and accessibility purposes.-->
             <ul>
                 <li><a href="index.html">Home</a></li>
                 <li>Brussels</li>
@@ -30,33 +34,42 @@
 
     </header>
 
-    <main>
-        <div class="grid-second">
+    <main id="main">
+        <section class="grid-second">
             <h1 class="city-name">Brussels</h1>
 
-            <div class="flexbox-container"> <!--Justify here why flexbox and not grid-->
+            <div class="flexbox-container"> <!--Creating a div to style the layout in css-->
+
+                <div class="video-container">
+                    <video width="1280" height="720" src="images/chocolate.mp4" controls></video> <!--Source:https://www.w3schools.com/tags/tag_video.asp-->
 
-                <div class="video-container"> <!--Source W3C, make sure it meets accessibility criteria, have alt, height, width-->
-                    <video src="images/chocolate.mp4" type="video/mp4" controls></video>
+                    <article class="video-transcript" aria-labelledby="video-transcript"> <!--further comments on accessibility in the report-->
+                        <h2 id="video-transcript">At the chocolate shop</h2>
+                        <p>This short video shows a rotating pile of filled chocolates in a local chocolate shop -known as a chocolaterie.
+                            Shaped in the form of seashells, made from a mix of white and dark chocolate, and filled with praline -a nut and sugar paste- these
+                            chocolates are emblematic of Belgian chocolate.
+                        </p>
+                    </article>
                 </div>
 
-                <div class="image-container"> <!--make sure all images have have width, height, alt-->
-                    <img src="images/waffles.jpg" width="1920" height="1173" alt="x">
-                    <img src="images/christmas-cookies.jpg" width="1920" height="1146" alt="x">
-                    <img src="images/chocolate.jpg" width="1920" height="1275" alt="x">
-                    <img src="images/bread.jpg" width="1920" height="1286" alt="x">
+                <div class="image-container"> <!--providing width and height for loading space and alt text for accessibility-->
+                    <img src="images/waffles.jpg" width="1920" height="1173" alt="Freshly made waffles in the shape of a heart pictured with a bowl of flour, two eggs and a whisk.">
+                    <img src="images/christmas-cookies.jpg" width="1920" height="1146" alt="Star shaped spiced cinnamon christmas cookies surrounded by pine cones, whole walnuts in their shell, and cinnamon sticks.">
+                    <img src="images/chocolate.jpg" width="1920" height="1275" alt=" A close up picture of small differently shaped chocolates displayed in rows ; a combination of both filled and solid in white and dark chocolate.">
+                    <img src="images/bread.jpg" width="1920" height="1286" alt=" A close up picture of small bread buns -known in belgium as pistolet- coated with flour.">
                 </div>
             </div>
-        </div>
+        </section>
     </main>
 
     <footer>
         <h3>Want to see more?</h3>
         <hr>
         <ul class="socials">
-            <li><a href="http://www.example.org"><img src="images/instagram-icon.png" width="512" height="512" alt="Instagram icon"></a></li>
-            <li><a href="http://www.example.org"><img src="images/facebook-icon.png" width="512" height="512" alt="Facebook icon"></a></li>
-            <li><a href="http://www.example.org"><img src="images/pinterest-icon.png" width="512" height="512" alt="Pinterest icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-instagram-96.png" width="96" height="96" alt="Instagram icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-facebook-96.png" width="96" height="96" alt="Facebook icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-pinterest-96.png" width="96" height="96" alt="Pinterest icon"></a></li>
+            <li class="attribution"> <a href="https://icons8.com/icon/84884/instagram">Instagram</a>,<a href="https://icons8.com/icon/118487/facebook">Facebook</a>,<a href="https://icons8.com/icon/87072/pinterest">Pinterest</a>icons by<a href="https://icons8.com">Icons8</a></li>
         </ul>
     </footer>
 </body>

diff --git a/contact.html b/contact.html
@@ -4,13 +4,17 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Food Travel Blog</title>
+    <title>Feast and Wonder</title>
     <link rel="stylesheet" href="styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 
 <body>
     <header>
+        <div class="skip-to-main">
+            <a href="#main">Skip to main content</a>
+        </div>
+
         <nav class="navbar">
             <ul>
                 <li><a href="index.html">Home</a></li>
@@ -21,46 +25,50 @@
             </ul>
         </nav>
 
-        <nav class="breadcrumbs"> <!--Installing breadcrumbs for usability and accessibility purposes. Screen reader reads outloud the breadcrumb and the nav tag gives semantic context. Need to add Aria label.-->
+        <nav class="breadcrumbs"> 
             <ul>
                 <li><a href="index.html">Home</a></li>
                 <li>Contact</li>
             </ul>
         </nav>
     </header>
 
-    <main>
-        <h1 class="city-name">Contact me</h1>
-        <form method="post">
-            <div class="form-section" aria-labelledby="first-name">
-              <label for="first-name">Name</label>
-              <input id="first-name" name="first-name" type="text" placeholder="Enter your first name">
-            </div>
-            <div class="form-section" aria-labelledby="last-name">
-              <label for="last-name">Last Name</label>
-              <input id="last-name" name="last-name" type="text" placeholder="Enter your last name">
-            </div>
-            <div class="form-section" aria-labelledby="email">
-              <label for="email">Email address</address></label>
-              <input id="email" name="email" type="email" placeholder="Enter your e-mail address">
-            </div>
-            <div class="form-section" aria-labelledby="message">
-              <label for="message">Message</label>
-              <textarea id="message" name="message" placeholder="Enter your message"></textarea>
-            </div>
-            <div class="button">
-                <button aria-label="submit form" type="submit">Send</button>
-            </div>
-        </form>
+    <main id="main">
+        <section class="grid-contact"> <!--For the layout of the page-->
+            <h1 class="city-name">Contact me</h1>
+
+            <form method="post"> <!--setting the request method for the browser to use-->
+                <div class="form-section" aria-labelledby="first-name"> <!--Adding aria label for accessibility-->
+                    <label for="first-name">Name</label>
+                    <input id="first-name" name="first-name" type="text" placeholder="Enter your first name">
+                </div>
+                <div class="form-section" aria-labelledby="last-name">
+                    <label for="last-name">Last Name</label>
+                    <input id="last-name" name="last-name" type="text" placeholder="Enter your last name">
+                </div>
+                <div class="form-section" aria-labelledby="email">
+                    <label for="email">Email address</label>
+                    <input id="email" name="email" type="email" placeholder="Enter your e-mail address"> <!--type attribute for safety-->
+                </div>
+                    <div class="form-section" aria-labelledby="message">
+                    <label for="message">Message</label>
+                    <textarea id="message" name="message" placeholder="Enter your message"></textarea>
+                </div>
+                <div class="button">
+                    <button aria-label="submit form" type="submit">Submit</button>
+                </div>
+            </form>
+        </section>
     </main>
 
     <footer>
-        <h3>Want to see more?</h3>
+        <h2>Want to see more?</h3>
         <hr>
         <ul class="socials">
-            <li><a href="http://www.example.org"><img src="images/instagram-icon.png" width="512" height="512" alt="Instagram icon"></a></li>
-            <li><a href="http://www.example.org"><img src="images/facebook-icon.png" width="512" height="512" alt="Facebook icon"></a></li>
-            <li><a href="http://www.example.org"><img src="images/pinterest-icon.png" width="512" height="512" alt="Pinterest icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-instagram-96.png" width="96" height="96" alt="Instagram icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-facebook-96.png" width="96" height="96" alt="Facebook icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-pinterest-96.png" width="96" height="96" alt="Pinterest icon"></a></li>
+            <li class="attribution"> <a href="https://icons8.com/icon/84884/instagram">Instagram</a>,<a href="https://icons8.com/icon/118487/facebook">Facebook</a>,<a href="https://icons8.com/icon/87072/pinterest">Pinterest</a>icons by<a href="https://icons8.com">Icons8</a></li>
         </ul>
     </footer>
 </body>

diff --git a/images/Espresso.mp4 b/images/Espresso.mp4
diff --git a/images/Restaurant.mp4 b/images/Restaurant.mp4
diff --git a/images/Running Sushi.mp4 b/images/Running Sushi.mp4
diff --git a/images/artichoke.jpg b/images/artichoke.jpg
diff --git a/images/berries.jpg b/images/berries.jpg
diff --git a/images/canape.jpg b/images/canape.jpg
diff --git a/images/candies.jpg b/images/candies.jpg
diff --git a/images/facebook-icon.png b/images/facebook-icon.png
diff --git a/images/fresh-veggies.jpg b/images/fresh-veggies.jpg
diff --git a/images/icons8-facebook-96.png b/images/icons8-facebook-96.png
diff --git a/images/icons8-facebook-96.png:Zone.Identifier b/images/icons8-facebook-96.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
diff --git a/images/icons8-instagram-96.png b/images/icons8-instagram-96.png
diff --git a/images/icons8-instagram-96.png:Zone.Identifier b/images/icons8-instagram-96.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
diff --git a/images/icons8-pinterest-96.png b/images/icons8-pinterest-96.png
diff --git a/images/icons8-pinterest-96.png:Zone.Identifier b/images/icons8-pinterest-96.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
diff --git a/images/instagram-icon.png b/images/instagram-icon.png
diff --git a/images/mushrooms.jpg b/images/mushrooms.jpg
diff --git a/images/paris-brest.jpg b/images/paris-brest.jpg
diff --git a/images/party-cake.jpg b/images/party-cake.jpg
diff --git a/images/pinterest-icon.png b/images/pinterest-icon.png
diff --git a/images/shish-kebab.jpg b/images/shish-kebab.jpg
diff --git a/images/starch.jpg b/images/starch.jpg
diff --git a/images/tartine-fig.jpg b/images/tartine-fig.jpg
diff --git a/images/tomatoes.jpg b/images/tomatoes.jpg
diff --git a/index.html b/index.html
@@ -1,16 +1,20 @@
 <!DOCTYPE html>
 
-<html lang="en">
+<html lang="en"> <!--specifying language as english, understandable-->
 
 <head>
-    <meta charset="utf-8">
-    <title>Food Travel Blog</title>
-    <link rel="stylesheet" href="styles.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8"> <!--specifying character encoding-->
+    <title>Feast and Wonder</title> <!--specifying title to make the website operable-->
+    <link rel="stylesheet" href="styles.css"> <!--defines a default stylesheet and its source-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--setting the width of the page to follow the width of the viewport, with an inital zoom level of 1-->
 </head>
 
 <body>
-    <header>
+    <header> <!--using semantic html to create 3 distinct blocs: header, main, and footer-->
+        <div class="skip-to-main">
+            <a href="#main">Skip to main content</a>
+        </div>
+
         <nav class="navbar">
             <ul>
                 <li><a href="index.html">Home</a></li>
@@ -22,9 +26,9 @@
         </nav>
     </header>
 
-    <main>
+    <main id="main"> <!--Attributing an id to target it in CSS and also to allow skip to main to work-->
 
-        <div class="grid-main">
+        <section class="grid-main"> <!--creating a section to apply grid in css for the layout of the page-->
             <div class="title-container">
                 <h1><span class="larger">Feast</span><br><span class="between">&</span><span class="smaller">Wonder</span></h1>
                 <hr>
@@ -35,20 +39,22 @@ <h1><span class="larger">Feast</span><br><span class="between">&</span><span cla
                 Follow my travels through videos and pictures of typical cuisine around the world.
                 Through my portfolio, I hope that whenever you come accross some of these meals or 
                 ingredients in real life you are transported into the city associated with it. 
-                Alternatively, whenever you found yourself in one of these places please keep your 
+                Alternatively, whenever you find yourself in one of these places please keep your 
                 senses open to feel the wonderful culinary experiences available to you!
                 </p>
             </div>
-        </div>
+        </section>
     </main>
 
     <footer>
-            <h3>Want to see more?<br><hr></h3>
-                <ul class="socials">
-                    <li><a href="http://www.example.org"><img src="images/instagram-icon.png" width="512" height="512" alt="Instagram icon"></a></li>
-                    <li><a href="http://www.example.org"><img src="images/facebook-icon.png" width="512" height="512" alt="Facebook icon"></a></li>
-                    <li><a href="http://www.example.org"><img src="images/pinterest-icon.png" width="512" height="512" alt="Pinterest icon"></a></li>
-                </ul>
+            <h2>Want to see more?</h3>
+            <hr>
+            <ul class="socials">
+                <li><a href="http://www.example.org"><img src="images/icons8-instagram-96.png" width="96" height="96" alt="Instagram icon"></a></li>
+                <li><a href="http://www.example.org"><img src="images/icons8-facebook-96.png" width="96" height="96" alt="Facebook icon"></a></li>
+                <li><a href="http://www.example.org"><img src="images/icons8-pinterest-96.png" width="96" height="96" alt="Pinterest icon"></a></li>
+                <li class="attribution"> <a href="https://icons8.com/icon/84884/instagram">Instagram</a>,<a href="https://icons8.com/icon/118487/facebook">Facebook</a>,<a href="https://icons8.com/icon/87072/pinterest">Pinterest</a>icons by<a href="https://icons8.com">Icons8</a></li> <!--further comments on licensing in README.md-->
+            </ul>
     </footer>
 </body>