Het is maandag 14 september en tijd voor de JUG Eindhoven meeting van deze maand. Vanwege de nog geldende RIVM maatregelen zijn we ook dit keer nog niet in onze vaste locatie in de Trafalgar Pub in Eindhoven maar wordt het de vijfde online meeting van onze JUG. En ditmaal wederom met Google Meet.

WebAccessibility, oftewel webtoegankelijkheid, oftewel a11y

A11Y is de afkorting van accessibility. De letter A, 11 karakters en dan de letter Y. => a11y

Met webtoegankelijkheid maak je het voor mensen met een beperking makkelijker je website te zien, te horen en te gebruiken. Op de vraag of de groep voor dat dan geldt groot is kan simpelweg gezegd worden: JA. Wellicht herken jezelf in een of meer van onderstaande punten:

  • Fel zonlicht op je scherm zorgt voor een beperking van zicht;
  • Je grote duim op en klein scherm in een trein of auto op een hobbelig traject zorgt voor een motorische beperking;
  • Een luide omgeving, zoals een festival, zorgt voor beperking van gehoor;
  • Alcohol leidt to verminderde cognitief vermogen
  • Vermoeidheid of stress leidt to verminderde focus
  • En leeftijd leidt tot alles wat hierboven staat. :-)

Toegankelijkheid is belangrijk voor iedereen. Ontwerp / verbeter je website voor iedereen. Altijd!

bron: vrij vertaald vanuithttps://axesslab.com/statistics-on-disabilities/

source:https://axesslab.com/statistics-on-disabilities/

Kleurcontrast

Wetende waarom a11y belangrijk is kun je er rekening mee gaan houden. Je hoeft niet je gehele website in één keer om te bouwen naar een toegankelijke website. Elke keer een beetje en voor zover je daar de mogelijkheden toe hebt draagt al bij aan een toegankelijker web. Uiteindelijk zul je schonere code voor je site op leveren, hetgeen je site sneller zal maken en daardoor ook potentieel beter vindbaar door de zoekmachines. En prettiger om te bezoeken.

De kleurcontrast is een verhouding van voorgrond en achtergrondkleur. Des te hoger het getal, des te groter het contrast en dest te beter je de voorgrondkleur van de achtergrondkleur kunt onderscheiden. Welke score je wil behalen hangt af van het level dat je wil behalen. De WCAG heeft een aantal levels opgesteld, waarvan AA en AAA de meest relevante zijn. AA is acceptabel en AAA is nog een stapje beter.

AA Level

  • contrast ratio van 4.5: voor normale tekst
  • contrast ratio van 3: voor grote tekst (24px of groter) of dikgedrukte tekst groter dan 19px.

AAA Level

  • contrast radio van 7: voor normale tekst
  • contrast ratio van 4.5: voor grote tekst (24px of groter) of dikgedrukte tekst groter dan 19px.

Meten van de contrastratio

Je kunt de contrast ratio meten via de developer tools in je browser, maar ook via een externe website.

Meten via de developer tools in de browser:

  • open in Chrome de website waarvan je de contrast ratio wil meten.
  • gebruik de sneltoets CMD+SHIFT+C (Mac) of CTRL+SHIFT+C (Windows)
    • hiermee worden de DevTools geopend en met de cursor kun je onderdelen van je site inspecteren.
  • klik een onderdeel op de site om te inspecteren
  • klik de kleur bij de CSS om te zien wat de kleurcontrast is en de mogelijkheid om aanpassingen te testen

Animated GIF van bovenstaand =>https://umaar.com/dev-tips/236-accessible-colour-suggestions/

Meten via een externe website:

Om het kleurencontrast te meten via een externe site zul je de kleurcodes van je website moeten weten. Deze kunnen via de DevTools gevonden worden, maar staan ook netjes in je CSS bestand.

  • Contrast-Ratio - Lea Verou:https://contrast-ratio.com/
    Links wordt de ene kleur geplaatst, rechts de andere en in het midden zie je het resultaat van de berekende ratio. Leuke tool, maar wat je vooral wil weten als het contrast niet goed is, is wat je zou kunnen doen om de ratio te verbeteren.
  • Color Contrast Checker - Polypane.app:https://polypane.app/color-contrast
    Wederom links de ene kleur, rechts de andere kleur en in het midden het resultaat in AA / AAA. En bij een falend resultaat verschijnen suggesties van kleurcombinaties die wel slagen.
  • Color Review - Anton Robsarve:https://color.review/
    Een gehele website in de te testen kleuren. Met een kleurpikker waarmee je kunt spelen en direct het resultaat ziet in ratio score, maar ook het resultaat zien in de kleuren van de pagina. Alles wijzigt namelijk mee.

https://polypane.app/color-contrast

Voor designers kan het handig zijn een overzicht te hebben welke kleurcombinaties voldoende contrast geven:

Dr Joomla

vraag:Op de site klokkenbouwen.nl heb ik het forum van Kunena met template Blue star. Als leden een MP4 in de forum blog plaatsen verschijnt dit filmpje 2x: nl in het bericht en als bijlage (full) bij het bericht. Foto's komen gewoon 1x in het bericht ( en als thumbnail onder het bericht). Hoe kan voorkomen worden dat de attachments getoond worden?
antwoord: omdat via de settings niet gevonden kan worden hoe getoonde attachments uitgeschakeld kunnen worden kun je of de PHP code wijzigen, of de CSS aanpassen. Laatstgenoemde wordt hieronder beschreven:

  • publiekelijk toegankelijke Kunena post met attachments:https://www.kunena.org/forum/general-questions-archive/133954-remove-option-needed-for-attachments-when-editing-topics
  • Gebruik de sneltoets CMD+SHIFT+C (Mac) of CTRL+SHIFT+C (Windows) om vervolgens het HTML block met de attachments te selecteren.
  • De attachments zitten in een div element met className = kattach. Op de site van de klokkenbouwer zitten de attachments in een div element met className = kmsgattach
  • De twee genoemde elementen moeten middels css verborgen worden voor iedereen. Gebruik hiervoor css display: none
  • Open via Joomla Administrator Template Styles de user.css / custom.css en voeg aldaar je css wijziging toe
#kunena .kmsgattach,
#kunena .kattach {
  display: none;
}

vraag: Tabel van Excel naar HTML geconverteerd met https://tableizer.journalistopia.com het resultaat is te zien in
https://schijndelfilm.nl/638-vertoonde-films Ik wil in die webpagina ook de kolommen kunnen filteren. Is jQuery een start?

antwoord: Vanuit de FAQ van Tableizer worden twee suggesties gedaan. De integratie met https://www.datatables.net/ lijkt ons de meest prettige om te verwerken. 

Stappenplan om een statische tabel om te zetten naar eentje met filter en sorteringmogelijkheden:

  • Voeg de volgende twee bestanden toe aan je template:
    CSS
    //cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css
    JS
    //cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
  • Voorzie de tabel van een id (bijv. id="myTable"). Deze heb je nodig in de volgende stap.
  • Koppel de tabel aan de dynamische code met volgend stukje code.
    $(document).ready( function () {
    $('#myTable').DataTable();
    } );

Tip: voorzie de output van de Tableizer HTML tabel van Bootstrap classes, zodat het uiterlijk mooi met de site overeen komt. De site is immers ook met een versie van Bootstrap gemaakt. denk hierbij aan minimaal de class="table"

Andere handige links die nog werden genoemd in de Dr. Joomla

  1. Ontwikkeltool voor Frontend Development vanuit JoomlaTools.: Joomlatools Mason, the tool you didn't know you needed 
  2. Ontwikkeltool voor Frontend Development: https://prepros.io/

Volgende keer

Volgende JUG Eindhoven is op dinsdag 13 oktober. We melden zo snel mogelijk het onderwerp wat we dan bespreken. Online, bij elkaar of een combinatie... hier komen we op terug.

Vragen voor Dr. Joomla kun je kwijt als reactie onder de aankondiging.

3 reacties

EasyDiscuss Avatar
Houten JPM
Hoi,
Dank dat het onderwerp 'Tabel van Excel naar HTML' is behandeld ook al kon ik er zelf niet bij zijn.

Groeten Jac


1
EasyDiscuss Avatar
Houten JPM
Menig uurtje bezig geweest m.b.t. het filteren in een tabel maar het wil nog niet lukken.
Ik doe blijkbaar iets principieel fout (dat krijg je als je niet kunt programmeren).
Twee probeersels uitgevoerd.
1. Ik heb de twee bestanden (CSS en JS) in template.css gezet.
Gaf geen oplossing.
2. Ik heb de twee bestanden (CSS en JS) toegevoegd aan mij artikel
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<p>$(document).ready( function () {
$('#myTable').DataTable(); });</p>
<table id="myTable">
<tbody>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
</tbody>
</table>
Gaf geen oplossing.
Wie kan een handreiking bieden om verder te gaan.
Dank.

0
EasyDiscuss Avatar
Robert
Ter aanvulling op het onderwerp 'toegankelijkhei d': Joomlashine heeft vandaag een artikel gepubliceerd over toegankelijkhei d in Joomla 4
https://www.joomlashine.com/blog/joomla-4-accessibility-support-make-your-joomla-website-accessible.html

1

Reageer

1000 Resterende tekens