Progressive Enhancement: JavaScript-functieherkenning en fallbacks voor een wereldwijd web

Het internet is een wereldwijd platform, en als webontwikkelaars is het onze verantwoordelijkheid om ervaringen te creëren die voor iedereen toegankelijk en functioneel zijn, ongeacht hun locatie, apparaat, browser of technische mogelijkheden. Progressive enhancement, gecombineerd met JavaScript-functieherkenning en passende fallbacks, is een krachtige strategie om dit doel te bereiken.

Wat is Progressive Enhancement?

Progressive enhancement is een webdesignstrategie die prioriteit geeft aan de kerninhoud en -functionaliteit, zodat deze toegankelijk is voor alle gebruikers met elke browser. Vervolgens worden er stapsgewijs lagen van verbetering toegevoegd op basis van de capaciteiten van de browser van de gebruiker. Zie het als het eerst bouwen van een solide fundament en later de versieringen toevoegen.

Het kernprincipe is dat iedereen toegang moet hebben tot de essentiële inhoud en functionaliteit van een website. Als een gebruiker een oudere browser heeft of JavaScript uitschakelt, moet hij of zij nog steeds in staat zijn om de site te navigeren, de tekst te lezen en basistaken uit te voeren.

Progressive Enhancement is geen vervanging voor 'graceful degradation'. 'Graceful degradation' is een strategie waarbij u eerst de meest feature-rijke ervaring bouwt en vervolgens fallbacks biedt voor oudere browsers die de nieuwste functies niet ondersteunen. De focus van 'graceful degradation' ligt meer op functionaliteit en minder op inhoud. Terwijl Progressive Enhancement erom draait dat de inhoud er eerst is.

Waarom is Progressive Enhancement belangrijk voor een wereldwijd publiek?

Overweeg deze factoren die het belang van progressive enhancement voor een wereldwijd publiek benadrukken:

• Variërende browserondersteuning: Verschillende regio's hebben verschillende niveaus van adoptie voor de nieuwste browsers. Sommige gebruikers gebruiken mogelijk oudere browsers vanwege hardwarebeperkingen, netwerkbeperkingen of gewoon persoonlijke voorkeur.
• Diverse apparaten: Gebruikers bezoeken het web op een breed scala aan apparaten, van high-end smartphones tot eenvoudige feature phones. Progressive enhancement zorgt ervoor dat uw website op allemaal goed werkt.
• Netwerkomstandigheden: Netwerksnelheden en betrouwbaarheid variëren sterk over de hele wereld. Progressive enhancement zorgt ervoor dat uw website snel laadt en functioneert, zelfs op trage of onderbroken verbindingen.
• Beschikbaarheid van JavaScript: Sommige gebruikers schakelen JavaScript mogelijk uit om veiligheidsredenen of vanwege prestatieproblemen. Een website die progressive enhancement toepast, moet ook zonder JavaScript bruikbaar zijn.
• Toegankelijkheid: Progressive enhancement helpt ervoor te zorgen dat uw website toegankelijk is voor gebruikers met een beperking die afhankelijk zijn van ondersteunende technologieën.

JavaScript-functieherkenning

JavaScript-functieherkenning is het proces waarbij wordt vastgesteld of een bepaalde browser een specifieke JavaScript-functie of API ondersteunt. Hiermee kunt u code voorwaardelijk uitvoeren op basis van de capaciteiten van de browser.

Vermijd 'Browser Sniffing': Het is cruciaal om 'browser sniffing' te vermijden, wat berust op het identificeren van de browser op basis van zijn user-agent-string. User-agent-strings kunnen gemakkelijk worden vervalst en weerspiegelen niet nauwkeurig de capaciteiten van de browser. Functieherkenning is een veel betrouwbaardere aanpak.

Hoe implementeert u functieherkenning

Hier zijn enkele veelgebruikte technieken voor JavaScript-functieherkenning:

• `typeof` Operator: Gebruik de `typeof`-operator om te controleren of een globaal object of eigenschap bestaat.

            if (typeof window.localStorage !== 'undefined') {
  // localStorage wordt ondersteund
  localStorage.setItem('myKey', 'myValue');
} else {
  // localStorage wordt niet ondersteund
  console.log('localStorage is niet beschikbaar in deze browser.');
}

            

              
                Copy
              
            
          

• Controleren op objecteigenschappen: Controleer of een object een specifieke eigenschap of methode heeft.

            if ('geolocation' in navigator) {
  // Geolocation API wordt ondersteund
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Latitude: ' + position.coords.latitude);
    console.log('Longitude: ' + position.coords.longitude);
  }, function(error) {
    console.error('Fout bij het ophalen van geolocatie:', error);
  });
} else {
  // Geolocation API wordt niet ondersteund
  console.log('Geolocatie is niet beschikbaar in deze browser.');
}

            

              
                Copy
              
            
          

• Modernizr gebruiken: Modernizr is een populaire JavaScript-bibliotheek die functieherkenning vereenvoudigt. Het biedt een uitgebreide set tests voor verschillende browserfuncties en voegt klassen toe aan het ``-element die aangeven welke functies worden ondersteund.

            <!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title>Modernizr Voorbeeld</title>
  <script src="modernizr.js"></script>
</head>
<body>

  <p>Dit voorbeeld gebruikt Modernizr om te detecteren of de browser WebGL ondersteunt.</p>

  <script>
    if (Modernizr.webgl) {
      console.log('WebGL wordt ondersteund!');
      // Initialiseer WebGL hier
    } else {
      console.log('WebGL wordt niet ondersteund.');
      // Bied een fallback aan
    }
  </script>

</body>
</html>

            

              
                Copy
              
            
          

Fallbacks aanbieden

Zodra u hebt vastgesteld dat een browser een bepaalde functie niet ondersteunt, is het essentieel om een fallback te bieden. Een fallback is een alternatieve implementatie die vergelijkbare functionaliteit biedt met behulp van andere technieken.

Soorten fallbacks

• Polyfills: Een polyfill is een stukje JavaScript-code dat de functionaliteit van een nieuwere functie biedt in oudere browsers. U kunt bijvoorbeeld een polyfill gebruiken om ondersteuning voor de `fetch` API te bieden in oudere browsers die dit niet standaard ondersteunen.

            // Voorbeeld met een fetch-polyfill
if (!('fetch' in window)) {
  // Voeg de fetch-polyfill toe
  var script = document.createElement('script');
  script.src = 'fetch.js';
  document.head.appendChild(script);

  script.onload = function() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));
  };
} else {
  // Gebruik de native fetch API
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));
}

            

              
                Copy
              
            
          

• Alternatieve inhoud: Als een browser een bepaald mediaformaat niet ondersteunt (bijv. WebP-afbeeldingen), kunt u een alternatief formaat aanbieden (bijv. JPEG of PNG).

            <picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Mijn afbeelding">
</picture>

            

              
                Copy
              
            
          

• Vereenvoudigde functionaliteit: Als een functie niet wordt ondersteund, kunt u een vereenvoudigde versie van de functionaliteit bieden. Als een browser bijvoorbeeld geen geavanceerde CSS-animaties ondersteunt, kunt u in plaats daarvan eenvoudige JavaScript-animaties gebruiken.

• Server-side rendering: Als JavaScript is uitgeschakeld of niet laadt, kan server-side rendering ervoor zorgen dat de kerninhoud nog steeds toegankelijk is. Dit houdt in dat de HTML op de server wordt gegenereerd en naar de browser wordt gestuurd.

Voorbeeld: Formuliervalidatie

Neem een formulier met client-side validatie met behulp van JavaScript. Als JavaScript is uitgeschakeld, moet de validatie nog steeds aan de server-side plaatsvinden.

            <form action="/submit" method="post" id="myForm">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Verzenden</button>
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', function(event) {
    const emailInput = document.getElementById('email');
    if (!emailInput.checkValidity()) {
      event.preventDefault(); // Voorkom het verzenden van het formulier
      alert('Voer een geldig e-mailadres in.');
    }
  });
</script>

            

              
                Copy
              
            
          

In dit voorbeeld valideert de client-side JavaScript het e-mailadres voordat het formulier wordt verzonden. Als JavaScript echter is uitgeschakeld, wordt de `checkValidity()`-methode niet uitgevoerd. Daarom moet u ook server-side validatie implementeren om ervoor te zorgen dat het e-mailadres geldig is voordat de formuliergegevens worden verwerkt.

Voorbeeld: Interactieve kaart

Stel, u wilt een interactieve kaart insluiten met een JavaScript-kaartbibliotheek zoals Leaflet of Google Maps. Als JavaScript is uitgeschakeld, kunt u een statische afbeelding van de kaart als fallback aanbieden.

            <div id="map">
  <noscript>
    <img src="map-static.png" alt="Kaart van de locatie">
  </noscript>
</div>

<script>
  // Initialiseer de kaart als JavaScript is ingeschakeld
  if (document.getElementById('map')) {
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([51.5, -0.09]).addTo(map)
      .bindPopup('Een mooie CSS3 popup.<br> Eenvoudig aanpasbaar.')
      .openPopup();
  }
</script>

            

              
                Copy
              
            
          

In dit voorbeeld bevat de `<noscript>`-tag een statische afbeelding van de kaart, die wordt weergegeven als JavaScript is uitgeschakeld. Als JavaScript is ingeschakeld, initialiseert het script de interactieve kaart met Leaflet.

Best practices voor Progressive Enhancement

• Begin met de kerninhoud: Focus eerst op het aanbieden van de essentiële inhoud en functionaliteit. Zorg ervoor dat deze toegankelijk is zonder JavaScript.
• Gebruik semantische HTML: Gebruik semantische HTML-elementen om uw inhoud te structureren. Dit maakt uw website toegankelijker en gemakkelijker te onderhouden.
• Onopvallend JavaScript: Houd uw JavaScript-code gescheiden van uw HTML-structuur. Dit maakt uw website beter onderhoudbaar en gemakkelijker bij te werken.
• Test op verschillende browsers en apparaten: Test uw website grondig op een verscheidenheid aan browsers, apparaten en netwerkomstandigheden om ervoor te zorgen dat deze naar verwachting werkt. Tools zoals BrowserStack of Sauce Labs kunnen helpen bij cross-browser testen.
• Prioriteer toegankelijkheid: Volg toegankelijkheidsrichtlijnen (bijv. WCAG) om ervoor te zorgen dat uw website toegankelijk is voor gebruikers met een beperking.
• Monitor en itereer: Monitor continu de prestaties en gebruikerservaring van uw website. Gebruik analytics om verbeterpunten te identificeren en itereer op uw ontwerp en implementatie.
• Inhoud eerst: Structureer de inhoud zodat deze leesbaar is wanneer CSS en JavaScript niet zijn geladen.
• Gebruik CSS voor verbetering: Gebruik CSS om het visuele uiterlijk van uw website stapsgewijs te verbeteren. U kunt bijvoorbeeld CSS3-functies zoals verlopen, schaduwen en overgangen gebruiken om visuele flair aan uw ontwerp toe te voegen. Maar zorg er altijd voor dat de kernlay-out en inhoud toegankelijk zijn zonder deze verbeteringen.

Overwegingen voor internationalisering (i18n) en lokalisatie (l10n)

Bij het bouwen van websites voor een wereldwijd publiek is het cruciaal om rekening te houden met internationalisering (i18n) en lokalisatie (l10n). Internationalisering is het proces van het ontwerpen en ontwikkelen van uw website op een manier die het gemakkelijk maakt om aan te passen aan verschillende talen en regio's. Lokalisatie is het proces van het aanpassen van uw website aan een specifieke taal en regio.

• Taalkeuze: Bied gebruikers een manier om hun voorkeurstaal te selecteren. Dit kan via een taalschakelaar in het navigatiemenu of door automatisch de taal van de gebruiker te detecteren op basis van hun browserinstellingen.
• Tekstrichting: Ondersteun zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) tekstrichtingen. Sommige talen, zoals Arabisch en Hebreeuws, worden van rechts naar links geschreven.
• Datum- en tijdnotatie: Formatteer datums en tijden volgens de locale van de gebruiker. Verschillende regio's hebben verschillende conventies voor het formatteren van datums en tijden.
• Valutanotatie: Formatteer valuta's volgens de locale van de gebruiker. Verschillende regio's hebben verschillende valutasymbolen en noteringsconventies.
• Getalnotatie: Formatteer getallen volgens de locale van de gebruiker. Verschillende regio's hebben verschillende conventies voor het formatteren van getallen, zoals het gebruik van komma's en punten.
• Vertaling: Vertaal alle tekstinhoud naar de doeltalen. Gebruik professionele vertalers om ervoor te zorgen dat de vertalingen accuraat en cultureel passend zijn.
• Karaktercodering: Gebruik UTF-8-karaktercodering om een breed scala aan tekens uit verschillende talen te ondersteunen.

Voorbeelden van Progressive Enhancement in de praktijk

• Responsieve afbeeldingen: Gebruik het `<picture>`-element en het `srcset`-attribuut om verschillende afbeeldingsformaten voor verschillende schermgroottes te bieden. Browsers die deze functies niet ondersteunen, vallen terug op het `<img>`-element.
• CSS Grid Layout: Gebruik CSS Grid Layout om complexe lay-outs te maken. Browsers die CSS Grid Layout niet ondersteunen, vallen terug op oudere lay-outtechnieken zoals floats of flexbox.
• Web Animations API: Gebruik de Web Animations API om performante animaties te maken. Browsers die de Web Animations API niet ondersteunen, kunnen CSS-transities of JavaScript-animaties als fallback gebruiken.

Conclusie

Progressive enhancement is een waardevolle strategie voor het creëren van inclusieve en toegankelijke webervaringen voor een wereldwijd publiek. Door prioriteit te geven aan de kerninhoud en -functionaliteit, JavaScript-functieherkenning te gebruiken en passende fallbacks te bieden, kunt u ervoor zorgen dat uw website voor iedereen goed werkt, ongeacht hun locatie, apparaat, browser of technische mogelijkheden. Het omarmen van progressive enhancement verbetert niet alleen de toegankelijkheid, maar draagt ook bij aan een robuuster en veerkrachtiger web voor iedereen.

Vergeet niet uw website grondig te testen op verschillende browsers en apparaten, en de prestaties en gebruikerservaring continu te monitoren. Door deze best practices te volgen, kunt u een website creëren die echt toegankelijk en plezierig is voor gebruikers over de hele wereld.