Modern Front End Fundamentals

☕ Grab some coffee and settle in

kapers.dev/pre-workshop

kapers.dev/html-game

Workshop Rules

Ask Questions 🙋‍♀️

Talk

Get Comfortable

Intros

  • Name
  • Role
  • When you first learnt HTML
  • When you last wrote HTML or CSS
  • What do you want out of the workshop
  • What code do you typically work with
Semantic HTML

Part 1:

Semantic HTML

HTML is the foundation

Semantic HTML introduces meaning to content

<!-- Semantic Button -->
<button onclick="doSomething()">Click Me!</button>

<!-- Non-Semantic Button -->
<div class="button" id="doSomethingButton">Click Me!</div>
<script>
document.getElementById('doSomethingButton').addEventListener('click', () => {
	doSomething();
});
</script>

<!-- Presentational Element -->
<b>This text is bold</b>

<!-- Semantic Element -->
<strong>This text is bold, and screen readers will tell the user it's important</strong>

kapers.dev/workshop

htmlreference.io
	<h1>Page Title</h1>
	<p>Lorem ipsum dipsum squiggily hokey pokey.</p>
	<a>Click here!</a> 
	<img src="my-image.jpg"> 
	<ul>
		<li>List Item</li>
	</ul> 
	<ol>
		<li>Numbered list item</li>
	</ol>

<header> <!-- Content is here --> </header>

<main> <!-- Content is here --> </main>

<footer> <!-- Content is here --> </footer>

<article></article>

<section></section>

<aside></aside>

<nav></nav>

<header>
	<h1>Site Title</h1>
	<nav>
		<a>Menu item</a>
	</nav>
	<form>
		<input name="search">
		<button>Search</button>
	</form>
</header>

<footer>
	<p>© Copyright @amys_kapers 2021</p>
</footer>

<main>
	<h2>Heading</h2>
	<p>Content here</p>
	<img src="my-image.png" />
</main>

<body>
	<header></header>

	<main></main>

	<footer></footer>
</body>


<article>
	<h2>Post title</h2>
	<p>Post content is here. It's really interesting, you should definitely keep reading</p>
</article>



<section>
	<h2>Section Title</h2>
	<p>This section makes sense all by itself.</p>
	<p>But it also makes sense as part of the whole page.</p>
</section>


<aside>
	<p>This content is related to the article it's in, and is probably off to the side of the page.</p>
</aside>


<nav>
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

ARIA Accessible Rich Internet Applications

<div role="header"> </div>

<div role="button" aria-label="Click me"> </div>

<div aria-hidden> </div>

<div class="nav_menu" role="navigation">
	<!-- Navigation links go here -->
</div>

<nav>
	<!-- Navigation links go here -->
</nav>

First rule of ARIA use: If you can use a native HTML element with the semantics and behavour already built in, instead of repurposing an element and adding an ARIA role, state or property then do so.

W3C ARIA Guidelines

Lunch Time 🍔!

CSS Layouts and Modern CSS

  • CSS Grid
  • Flexbox
  • Floats

kapers.dev/workshop-css

kapers.dev/workshop

File: ./styles/main.css

/* Turn on CSS Mode then write your CSS styles here */

Day 1 Completed 🥳

Accessibility

Part 3:

Accessibility

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect

Tim Berners-Lee, Inventor of the internet

Why is Accessibility Important?

For better or worse, the people who design the touchpoints of society determine who can participate and who is left out, often unwittingly

Kat Holmes Mismatch: How Inclusion Shapes Design
Inclusion makes us more-effectivemore innovativebetterhappier

Accessibility is a human right

It’s easier to do it right now

Every inaccessible webpage tells [people with an impairment] “you aren’t welcome in this world”.

If you don’t know whether your website or app is accessible, it’s not. Start learning.

Larene Le Gassick, Accessibility Engineer

Who Benefits from Accessibility?

Global Population with a Permanent Impairment

Who benefits from Accessibility?

Everyone.

  • Broken arm/hand
  • Ear Infection
  • Migraine
  • ESL
  • Dyslexia
  • Loud environment
  • Sunlight/Glare
  • Glasses
  • Colour Blind
  • ADHD
  • Autism
  • Epilepsy
  • Old browser/Device
  • Reading Mode/Small Screen
  • Slow Internet
  • Holding Child/Pet
  • Multi-tasking
  • Virtual Assistant
  • AI
  • Carpel Tunnel
  • No Headphones
  • Big Fingers
  • Night Mode
  • Limited Fine Motor Control
  • Easily Distracted
  • Broken arm/hand
  • Ear Infection
  • Migraine
  • ESL
  • Dyslexia
  • Loud environment
  • Sunlight/Glare
  • Glasses
  • Colour Blind
  • ADHD
  • Autism
  • Epilepsy
  • Old browser/Device
  • Reading Mode/Small Screen
  • Slow Internet
  • Holding Child/Pet
  • Multi-tasking
  • Virtual Assistant
  • AI
  • Carpel Tunnel
  • No Headphones
  • Big Fingers
  • Night Mode
  • Limited Fine Motor Control
  • Easily Distracted

The Hard Data

1 million views/day → €2.3 million/year

15% of the world

1.2 billion people

$13 trillion each year

1,000,000 sites

49,991,225 accessibility issues

96.3% failed

Little Steps

Web Content Accessibility Guidelines

WCAG 2.2

A - AA - AAA

smashingmagazine.com/2023/10/roundup-wcag-explainers

A little can go a long way

49,991,225 accessibility issues

96.1% easy fixes

48,041,567 easy fixes

  • Colour Contrast
  • Missing Alt Text
  • Empty Links/Buttons
  • Missing Form Labels
  • Missing Document Language
<!DOCTYPE html>
<html>
	<!-- Page Content -->
</html>

Colour Contrast

whocanuse.com
whocanuse.com
abc.useallfive.com

Alt Text

<img src="my_dog.jpg" />

<img src="/img/3c87e3e6bd8aa927c30257a/07cf2d3891f54ca470d1d9f0.jpg" />

<img src="image.jpg" alt="{content}" />

<img src="image.jpg" alt="" />

Captions & Descriptions

	<canvas aria-labelledby="label" >
		<!-- Chart Here -->
	</canvas>
	<p class="hidden" id="label">
		Bar chart that shows that revenue for quarter 4 has doubled from $1 million to $2 million compared with the previous quarter due to accessibility improvements that helped widen customer base.
	</p>

Form Labels

<label for="i_1"> 
	Enter Information
</label>

<input id="i_1" name="info" placeholder="Info"/>

Screen Readers

youtu.be/q_ATY9gimOM
youtu.be/q_ATY9gimOM

Automated Testing

overlayfactsheet.com