Code & design review

[Naddybsx]

Alt teksten op afbeeldingen

pleasurable-ui/views/index.liquid

Line 5 in 5f095ee

<img class="intro-img" src="photos/rouwtaak-blue.svg">

Vergeet geen alt-tektsten toe te voegen aan afbeeldingen voor een goede toegankelijkheid. Ook als deze puur voor decoratieve doeleinden zijn kan je een alt-tekst toevoegen en deze leeg laten om screenreaders te laten weten dat deze genegeerd kan worden. Als de afbeelding informatief is, voeg je een beschrijvende alt-tekst toe.

// Decoratief
<img class="intro-img" src="photos/rouwtaak-blue.svg" alt="">

Het is handig om dit altijd even na te checken met bijvoorbeeld een html validator test!

[Naddybsx]

Wanneer gebruik je een button & wanneer een link?

pleasurable-ui/views/index.liquid

Lines 19 to 21 in 5f095ee

	<section class="intro-foot">
	<a href="/rouwtaak-demo"><button class="btn intro-btn">Starten</button></a>
	</section>

Ik zie dat er nu een button wordt gebruikt binnen een anchor. Dit werkt niet in HTML en kan ook leiden tot toegankelijkheidsproblemen.

Wat zegt mdn over anchors

The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Content within each should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the element will activate it.

Wat zegt mdn over buttons

The HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.
By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons' appearance with CSS.

Je gebruikt links dus voor navigatie en knoppen voor acties.

[Naddybsx]

HTML structuur & breakdownschetsen

pleasurable-ui/views/index.liquid

Lines 19 to 21 in 5f095ee

	<section class="intro-foot">
	<a href="/rouwtaak-demo"><button class="btn intro-btn">Starten</button></a>
	</section>

In deze code wordt een section gebruikt voor de knop “Starten”, maar deze heeft geen heading. Een section hoort altijd een heading te bevatten, zodat screenreaders weten waar dit blok over gaat. Zonder een heading verliest een section zijn semantische waarde. Waar is de section in dit geval voor bedoeld?

pleasurable-ui/views/index.liquid

Lines 7 to 17 in 5f095ee

	<div class="intro-text">
	<h1>
	<span>Drop</span>
	<span>& Heal</span>
	</h1>
	<p>
	Welkom bij Drop & Heal. Een veilige plek voor jouw reis door rouwverwerking.
	<br> <span class="spacing-s"></span>
	Er volgt eerst een introductie en kennismaking, hierna kan je op eigen tempo aan de slag in de omgeving.
	</p>
	</div>

Ook in dit blok gebruik je nu een div class="intro-text", maar er staat een duidelijke heading en beschrijvende tekst in. Dat betekent dat dit inhoudelijk een zelfstandig stuk is, en daarom semantisch beter als een section gemarkeerd kan worden.

Een section geeft aan dat het gaat om een op zichzelf staand inhoudsblok met een eigen thema of functie binnen de pagina. Een div heeft daarentegen geen semantische waarde. Het is dus voor screenreaders veel duidelijker als dit als section wordt opgezet.

Je kunt je hierbij ook afvragen: waar is de div voor bedoeld? Wat groepeer je hier eigenlijk? Door dit explicieter te maken, wordt de structuur van je pagina veel inzichtelijker.

In dit Artikel vind je alles over het gebruiken van semantische html, waar de elementen voor bedoeld zijn en wanneer je ze het beste kan inzetten.

Tip: Denk bij het maken van Breakdownschetsen ook alvast na over de gehele semantische structuur, in plaats van alleen de elementen. Dit maakt het makkelijker om vooraf alvast te bedenken hoe je bepaalde elementen bewust wil inzetten voor een duidelijke en semantische structuur.

[Recss68]

Bedankt voor je feedback, ik ga dit zeker oppakken!

Checklist:

• Alt teksten op afbeeldingen
• Button/A aanpakken
• HTML structuur fine tunen