HTML

Validation

Lighthouse

Open the developer tool --> Press "lighthouse" --> Press Generate report

Web accessibility

mages, audio tracks, videos, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand.

Images Concepts

Images have alternative text on as an attribute, why does you use it?

Informative images

Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image

<img src="dog.jpg" alt="Dog with a bell attached to its collar.">
Example 1.8.1
Dog with a flower
Example 1.8.2

Functional images

The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.

<a href="https://www.w3.org/"> 
<img src="w3c.png" alt="W3C home">
</a>
Example 1.8.3
Dog with a flower

Decorative Images

Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.

<img src="background.png" alt="">
Example 1.8.4

Best pratice: Always add a alternative text (alt="")

Picture

The picture element helps you with responsive web design, specifically responsive images. The element lets you define multiple image sources, which allow users on mobile browsers to download a low-res version of a image, while users on desktop can see a larger version.

<picture>
<source media="(min-width:650px)" srcset="https://images.unsplash.com/photo-1606166325695-ce4d64e3195f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Unsplash Sigmund">
<source media="(min-width:465px)" srcset="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2200&q=80" alt="Unsplash Rahul Chakraborty>
<img src="https://images.unsplash.com/photo-1561154464-82e9adf32764?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" alt="Unsplash Roberto Nickson" style="width:auto;">
</picture>
Example: 1.8.5
Unsplash Roberto Nickson
Visuel example of 1.8.5

Videos

Up until late 2000z and early 2010s, multimedia content on the Web was for the most part placed in web pages by means of third-party plugins or applications.
The most popular way to embed video and audio on web pages was by Adobe's Flash Player Plugin. When HTML5 came, did that change. It made multimedia a seamless part of a web page, the same as the img element.
With HTML5, there’s no need for the user to download third-party software to view the content. The video or audio player is easily accessible via scripting.

Understand the needs

User experiences of people with disabilities have other media accessibility requirements. For example, a person who is Deaf can’t hear the audio, so you need to provide important audio information in another form.

Deaf people
- can still read text, so add transcripts or captions. Some people prefer sign language.
Hard of hearing
- like to listen to the audio, but wants captions to fill in what they can’t hear adequately
Blind or low vision
- They use audio description of visual information to understand what’s going on visually
Deaf-blind
- use a screen reader and braille to read descriptive transcripts that include the audio and visual information as text

Video local from your computer

The video element embeds a media player which supports video playback into the document.

<video controls width="320" height="240">
<source src="video/movie.mp4" type="video/mp4">
<p>Your browser does not support the video tag. </p>
</video>
Example 1.8.6
Visuel example 1.8.6
Video by Anna Nekrashevich from Pexels

The controls from HTML 5 video tag are not keyboard-accessible in most browsers, i.e. you can't tab between the controls inside the native player.
Opera and Chrome provide this to some degree, but it still isn't ideal. Different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide.

Add video text tracks

You can get subtitles to your video

<video controls width="320" height="240">
<source src="video/movie.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
<p>Your browser does not support the video tag. </p>
</video>
Example 1.8.6

Video attributes

autoplay
- the video automatically begins to play back as soon as it can do so without stopping to finish loading the data (Note! This can be an unpleasant experience for users).
controls
- the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
loop
- the browser will automatically seek back to the start upon reaching the end of the video.
muted
- the audio will be initially silenced.
src
- the URL of the video to embed.

Example of video attributes - loop

<video controls width="320" height="240" loop>
<source src="video/movie.mp4" type="video/mp4">
<p>Your browser does not support the video tag. </p>
</video>
Example 1.8.8
Visuel example 1.8.8
Video by solod_sha from Pexels

Example of video attributes - autoplay

<video controls width="320" height="240" autoplay muted>
<source src="video/movie.mp4" type="video/mp4">
<p>Your browser does not support the video tag. </p>
</video>
Example 1.8.9
Visuel example 1.8.9
Video by Melike Benli from Pexels

The autoplay attribute will only work with the mute attribute

Video from youtube

You can insert a file from youtube

<iframe allowfullscreen 
width="560" height="315"
src="https://www.youtube.com/embed/9NTrwrfI-X4"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"><iframe>
Example 1.8.10
Visuel example of 1.8.10

The iframe tag represents a nested browsing context, embedding another HTML page into the current one.

Audio

Lets look an audio on the web

<figure>
<figcaption>Listen to the this sound:</figcaption>
<audio
controls
src="/media/video.mp3">
Your browser does not support the audio element.
</audio>
</figure>
Visuel example of 1.8.11

The audio HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable on

Listen to the T-Rex:

Spotify music

How can you insert music from spotify?

Example of 1.8.8

  • To go spotify
  • Find a playlist
  • Copy Link or Copy Spotify URI
  • Paste the link or URI in the on the spotify developersite
  • Copy the code below and paste the printed on your website
You can see a guide here
<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="380" allowtransparency="true" allow="encrypted-media"> </iframe>

Google Maps

You can insert a Google Maps with some help of JavaScript and API

Visuel example of 1.8.9

You can't see it, because you need to pay for Google Maps to be showing

Google pricing

HTML

<body> 
<main>
<h1>My Google Maps</h1>
<!--The div element for the map -->
<div id="map"></div>
</main>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly&channel=2"></script>
</body>

CSS

/* Set the size of the div element that contains the map */ 
#map {
height: 400px;
width: 100%;
}

JS

<script> 
// Initialize and add the map
function initMap() {
// The location of a location
const location = { lat: 55.4903995, lng: 9.4721651 };
// The map, centered at the location
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: location,
});
// The marker, positioned at the location
const marker = new google.maps.Marker({
position: location,
map: map,
});
}
</script>
Example 1.8.

Find the latitude and longitude for cities

POUR

Accessibility in product design; To make something accessible is to make it usable. But what is Web accessibility?
The Web Content Accessibility Guidelines (WCAG) are what the name implies. These are universally accepted standards describing how to make products more accessible to people with disabilities.
We have some principles, when we talk about web accessibility

P for Perceivable

Information and user interface components must be presentable to users in ways they can perceive.
- W3C

The first principle says that you need to remove any barriers when accessing your website. An example: if you have low vision, then give the user the ability to resize text.

Some guidelines

What can we do?

O for Operable

“User interface components and navigation must be operable.” - W3C

You need to make sure that your website can be controlled through a variety of tools for example, through keyboard.

Some guidelines

What can we do?

U for Understandable

“Information and the operation of user interface must be understandable.” - W3C

What you’re being asked to do, is to use language and functionality that is easy to comprehend.

Some guidelines

What can we do?

R for Robust

“Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.” -W3C

This means that your website of app should work well across different platforms, technologies and devices within reasonable limits

Some guidelines

What can we do?