Infinite scrolling

Gijs Veyfeyken op 10/04/2015

Cet article en français: Le défilement infini

Infinite scrolling of oneindig scrollen is een techniek waarbij nieuwe inhoud automatisch inlaadt wanneer de gebruiker het einde van de pagina bereikt. Denk bijvoorbeeld aan de tijdslijn van uw Facebook profiel.

Het is een alternatief voor de traditionele 'pagination'. Denk bijvoorbeeld aan de links onderaan Google's zoekresultaten.

scherm met pagination en scherm met infinite scrolling naast elkaar
Bron Smashing Magazine

Infinite scrolling heeft voordelen, vooral op mobiele toestellen. Je bespaart schermoppervlakte en de gebruiker hoeft enkel te vegen. Nieuwe inhoud laadt automatisch.

The advantage of not having to acquire and click “next page” keeps audiences engaged with the content and less focused on the mechanics of navigating to the next page.

Hoa Loranger Norman Nielsen Group

Er zijn helaas ook veel nadelen aan deze techniek verbonden.

Accessibility

  • Je kan het niet combineren met een footer. Die is onbereikbaar omdat die telkens opschuift om plaats te maken voor nieuwe inhoud. De inhoud die scrollt moet daarom het laatste element van de pagina zijn.
  • Het is onverwacht en ongevraagd gedrag. Het is verwarrend voor iemand die geen overzicht van het scherm heeft. De gebruiker moet altijd de controle over de pagina hebben. Nieuwe content mag daarom pas ingeladen worden wanneer de gebruiker daar om vraagt. Dat is makkelijk op te lossen door een knop toe te voegen "laad meer resultaten" of "laad meer berichten".

Usability

Infinite scrolling kan een optie zijn voor websites met "time killing activities" waarbij alle inhoud op het zelfde niveau staat. Bijvoorbeeld Facebook, Pinterest en Twitter. Voor websites met een taakgeörienteerd doel is het minder geschikt. Iets zoeken, bestellen, vergelijken. Er zijn te veel nadelen aan verbonden.

Infinite scrolling:

  • maakt het moeilijk om te zoeken binnen een pagina of iets terug te vinden op een pagina;
  • is desoriënterend, je weet niet waar je bent, de scroll-balk geeft geen correct beeld van de lengte van de pagina;
  • neemt de controle af van de gebruiker, je kan het einde van de pagina niet bereiken;
  • creëert psychologische vermoeidheid, je hebt geen mentaal overzicht;
  • maakt navigeren moeilijk, je kan geen inhoud overslaan, wat met pagination wel gaat.

Bronnen

Conclusie

Gebruik het niet voor taakgeörienteerde websites. Daarvoor is de genummerde pagination beter geschikt. Als de inhoud van uw website er wel toe leent, voeg dan een knop "laad meer berichten" toe. De gebruiker moet de controle over de pagina hebben. Test of het werkt met het toetsenbord en een screenreader.

1 reactie

Be-hackathon: apps voor personen met een handicap

Bart Simons op 03/04/2015

Cet article en français: Be-hackathon : des apps pour les personnes handicapées

Be.Wan organiseerde vorig weekend een Be-hackathon in de lokalen van Wagon in de coworking space co.station in Brussel. Een 70-tal studenten, verdeeld in groepjes van 4 ontwikkelaars, kregen de opdracht om in 36 uur tijd een smartphone app te ontwikelen die personen met een handicap helpt bij dagelijkse activiteiten.

AnySurfer was aanwezig tijdens de startdag van het project op 18 maart. Eerst presenteerde Gilles Boon van Be.Wan het verloop van het hackaton-weekend. Daarna was er een presentatie door Creth, een adviescentrum over hulpmiddelen voor mensen met een handicap. Ze vertelden de studenten hoe mensen met een handicap smartphones gebruiken, welke hulpmiddelen ingebouwd zijn in de verschillende besturingssystemen en welke bijkomende hulpmiddelen er op de markt zijn. Zoals bijvoorbeeld een brailleleesregel of een schakelaar. Vincent Collin benadrukte dat het belangrijk is om apps altijd te laten testen door meerdere gebruikers.

Daarna was het de beurt aan onze collega Bart De Clercq. Hij demonstreerde de verschillende toegankelijkheidsopties die in iOS en Android beschikbaar zijn. Deze maken de smartphones heel bruikbaar en heel populair bij mensen met een handicap. Maar ontwikkelaars hebben ook hier een belangrijke rol om hun toepassingen toegankelijk te maken. Zelfs een app die er eenvoudig uitziet, kan toch onbruikbaar zijn als hij niet volgens de standaarden is ontworpen. Bart gaf het voorbeeld van de Uber app die aanvankelijk goed toegankelijk was en ook vaak door blinden werd gebruikt. Na een update van de app was de belangrijkste knop plots niet meer bruikbaar voor VoiceOver, de screenreader van Apple waardoor blinden geen Uber auto meer konden bestellen. Ontwikkelaars moeten dus steeds toegankelijkheid in gedachten houden want het ontwerp en de manier van coderen, zijn bepalend voor de bruikbaarheid van de app. Bart eindigde zijn presentatie met concrete technieken om toegankelijke apps te bouwen.

Na deze presentaties was er de gelegenheid voor Hackaton-deelnemers om ideeën uit te wisselen en vragen te stellen. We merkten een grote motivatie en leergierigheid bij de studenten. Ook personen met een handicap waren aanwezig om vragen te beantwoorden, te reageren op de voorstellen van de studenten en om hen te vertellen welke problemen ze bij dagelijkse activiteiten ondervinden en waarbij apps misschien kunnen helpen.

Na 36 uur programmeren, maakte de jury op zondagavond 28 maart de vier winnende applicaties bekend. Hoewel ze nog niet helemaal operationeel zijn, zien we toch een groot potentieel in de ontwikkelde apps. We hebben niet de kans gehad om de apps op hun toegankelijkheid te beoordelen. We stellen vast dat alle apps voor het Android-platform werden ontwikkeld, terwijl de grote meerderheid van de blinde gebruikers voor Apple-toestellen kiest.

Eerste plaats: Metro

Deze app is vooral bedoeld voor blinden en slechtzienden. Aan een bushalte of op het perron van de metro komen vaak meerdere lijnen voorbij en het is vaak enkel visueel aangegeven welke bus, tram of metro eraan komt. De app lost dat probleem op door met een synthetische stem het lijnnummer en de richting aan te kondigen van elk naderend voertuig. De gegevens zijn afkomstig van een API die de uitbater van het openbaar vervoer ter beschikking stelt (voor hun demo gebruikten de studenten de gegevens van de Londense metro).

Tweede plaats: EasyVoice

Een lid van het groepje dat deze app maakte heeft een kind met een handicap. Door die handicap heeft het kind onder andere problemen om te spreken. Hij gebruikt al een tablet met een app die hem toelaat om vooraf opgenomen zinnen uit te laten spreken. Het grootste ongemak van deze oplossing is dat het kind altijd en overal zijn tablet moet meenemen en ook dat is door zijn handicap niet evident.

De EasyVoice app die tijdens de hackaton werd ontwikkeld, draait op een smartwatch en heeft geen internetverbinding nodig. Zo heeft het kind dit hulpmiddel altijd aan de pols bij zich, waar het gemakkelijk bruikbaar is.

Derde plaats: Swipe

Voor sommige personen is het gebruik van een telefoon te complex, bijvoorbeeld voor iemand die getroffen is door de ziekte Alzheimer. Deze app vereenvoudigt het gebruik van een telefoon drastisch.

Swipe biedt twee mogelijkheden om snelkoppelingen toe te wijzen aan bepaalde telefoonfuncties:

  • Een patroon tekenen op het scherm
  • De telefoon in de buurt brengen van een "Near Fied Communication" of NFC-tag : het eenvoudig in de buurt brengen van telefoon en NFC-tag start bijvoorbeeld een telefoongesprek naar een familielid of naar de hulpdiensten.

Vierde plaats: Pin It

Ook deze app werkt met NFC-tags en is hoofdzakelijk bedoeld voor blinden en slechtzienden. De app werkt volgens het principe van de labelpen, een apparaatje dat sinds enkele jaren op de markt is voor deze doelgroep. Het idee is dat je NFC-tags kleeft op allerlei voorwerpen zoals drankverpakkingen, medicijnen, kleding ... en tegelijk in de app inspreekt om welk voorwerp het gaat. Als je later opnieuw de NFC-tag scant, herhaalt de app de informatie die je voor dit voorwerp hebt ingesproken.

Reageer als eerste

Supernova screenreader ongeschikt om te surfen

Gijs Veyfeyken op 08/12/2014

Cet article en français: Supernova, lecteur d'écran inadapté pour le surf

Sommige toegankelijke websites zijn onbruikbaar met de Supernova screenreader, zelfs wanneer de webbouwer toegankelijkheidsregels volgt. Gebruik je een screenreader en surf je veel? Dan ben je beter af met een programma als NVDA op Windows of VoiceOver op Mac. Beide zijn gratis! Een uitstekende betalende screenreader is Jaws. Ik leg uit waarom.

Paginawijzigingen

Websites zijn interactiever als vroeger. Je leest niet alleen, je 'doet' ook steeds meer: inloggen en een profiel aanmaken, reageren op een artikel, iets 'liken' of delen. Deze acties gebeuren allemaal binnen een webpagina, vaak zonder dat de pagina vernieuwt. Dat noemt 'asynchroon' inladen, een moeilijke manier om te zeggen dat een onderdeel van de pagina wijzigt in plaats van heel de pagina opnieuw te laden met dat stukje nieuwe inhoud. Wie die wijzigingen niet ziet, komt in de problemen. Enkele voorbeelden op de nieuwe site van De Lijn.

De Lijn

Verstoorde dienstverlening

Wanneer de bussen niet rijden, zoals bij een staking, toont De Lijn een dialoogvenster. De screenreader focus springt er automatisch naartoe, behalve met Supernova.

dialoogvenster verstoorde dienstverlening

Dialoogvensters zijn ingeburgerd op het web. Dialog, lightbox, overlay of pop-up zijn enkele synoniemen. Het principe is altijd hetzelfde. Je klikt op een link of knop en er opent een dialoogvenster bovenop de website. Inlogformulieren openen ook vaak in een dialoogvenster. En meldingen zoals bij online bankieren. Om te voorkomen dat het systeem je uitlogt kan je via een dialoogvenster de sessie verlengen.

Wanneer zo'n venster opent zonder de pagina te herladen, weet je als screenreadergebruiker niet dat er iets is gebeurd. Je screenreader meldt dit niet automatisch. Zelfs als je uit ervaring weet dat er een dialoogvenster opent, weet je nog niet waar het staat in de webpagina. Je screenreader kan de inhoud van het venster wel lezen, maar die inhoud kan om het even waar staan. Meestal is dat helemaal onderaan. Gelukkig is er een oplossing. De webbouwer verplaatst de 'focus' van je screenreader naar het dialoogvenster. Wanneer je bijvoorbeeld klikt op link 'inloggen', opent er een dialoogvenster en je screenreader start automatisch aan het begin van het formulier. Dit is mogelijk door een stukje JavaScript code, een functie die 'focus' heet. Het verplaatsen van de focus is cruciaal om paginawijzigingen toegankelijk te maken voor screenreaders.

Supernova ondersteunt geen focus management. NVDA, Jaws, VoiceOver en andere screenreaders doen dat wel.

Mogelijke routes

Wanneer je in de routeplanner een plaats van vertrek en aankomst ingeeft, krijg je een lijst met mogelijke routes terug, gevolgd door de details van de actieve route. Klik op een andere route in de lijst en de details van de actieve route wijzigen zonder de pagina te vernieuwen. De lijst met mogelijke routes zijn geen links naar nieuwe pagina's. Ze wijzigen de huidige route op de pagina. Met een goede screenreader verspringt de focus naar de kop "Route met vertrek om..." boven de details van de route. Met Supernova gebeurt er niets. De focus blijft op de link in de lijst staan.

routeplanner met lijst van mogelijke routes

Haltes

Een derde voorbeeld zijn tabs. De detailpagina van een halte heeft 2 tabs: 'doorkomsten dit moment' en 'alle doorkomende lijnen'. Het klikken van een tab opent geen nieuwe pagina. Enkel de inhoud onder de 2 tabs wijzigt. Wanneer je de tab 'alle doorkomende lijnen' klikt, verschijnen de doorkomende lijnen op de plaats waar eerst de doorkomsttijden stonden. De focus springt naar de kop die er boven staat. Behalve als je met Supernova surft.

Halte Gent Sint-Jacobs

Conclusie

AnySurfer vraagt webbouwers om paginawijzigingen begrijpelijk te maken voor screenreadergebruikers. Ze verplaatsen daarvoor de focus naar de plek van de wijziging. Supernova ondersteunt dit niet. Je kan de website van De Lijn en andere moderne websites met Supernova bezoeken maar bij een paginawijziging weet je niet waar de verandering is gebeurd. Screenreaders als JAWS, NVDA en VoiceOver surfen een stuk gemakkelijker. Op een toegankelijke website brengen ze je automatisch naar de vernieuwde inhoud.

Wil je meer weten over screenreaders? Onze collega's van de Blind D Mobiel wijzen je de weg. Ze bieden professioneel advies zonder commerciële belangen om voor jou de beste oplossing te vinden.

6 reacties

Welk lettertype is het best leesbaar?

Bart Simons op 25/11/2014

Er bestaan lettertypes die beweren dat ze beter leesbaar zijn voor slechtzienden en andere zijn speciaal ontworpen voor mensen met dyslexie.

paragraaf in Dyslexie font

Goed bedoeld en sommige mensen zullen er zeker blij mee zijn, maar moet je nu knoppen op je site plaatsen die bezoekers toelaten van lettertype te veranderen?

Er zijn artikels die een specifiek lettertype aanraden en andere die zeggen dat ze wetenschappelijk gezien geen verschil maken. Je wil natuurlijk een site maken die er voor zoveel mogelijk mensen aantrekkelijk uitziet. De tevredenheid van je bezoekers is belangrijker dan de vraag of het wetenschappelijk gezien werkt of niet. Hier kan ook een soort placebo-effect werken: dit lettertype is speciaal voor mij dus ik lees er beter mee.

De ene vorm van slechtziendheid is de andere niet en niet alle mensen met dyslexie lezen op dezelfde manier. Ons standpunt is dan ook dat je niet voor iedereen goed kunt doen. Als alle websites een style switcher implementeren op een verschillende manier, helpt dat de bezoeker ook niet om er vlot mee te werken.

Onze adviezen voor grafisch ontwerpers:

serif en sans-serif lettertype

  • Geef de doorlopende tekst een goed leesbaar en schreefloos lettertype (geen handschrift).
  • Maak de letters niet te klein: standaard browsertekst is 16 pixels; ga daar niet te ver onder.
  • Zorg voor voldoende witruimte, regelafstand en ruimte tussen letters.
  • Maak de tekstregels niet te lang. Beperk ze bijvoorbeeld tot een zestigtal karakters.
  • Zorg voor voldoende contrast tussen de tekst en de achtergrond (technische norm is 4,5:1). Kies voor een rustige achtergrond: geen video, bewegend beeld of een groot kleurverloop.
  • Bouw de website volgens de standaarden en test met de standaardtools van besturingssystemen en browsers zoals de hoog contrast weergave van Windows.

Bezoekers kunnen letters vergroten/verkleinen in elk besturingssysteem en elke browser. De website moet dus zelf geen knoppen voorzien om de letters te vergroten. Overschrijven van lettertypes is voor bezoekers veel minder evident. Je website kan dus een style switcher aanbieden maar het blijft moeilijk om daarmee voor iedereen goed te doen. Niet alle slechtzienden zullen deze versie voor slechtzienden even mooi vinden en je kan ook overdrijven met keuzemogelijkheden.

1 reactie

CSS Clip versus Clip-path

Bart De Clercq op 28/10/2014

Clip en Clip-path zijn twee CSS eigenschappen die je op elementen kan toepassen. Er zijn verschillende doeleinden om Clip of Clip-path toe te passen. Hoofdzakelijk wil je een deel van een element tonen.

Aangezien Clip ontmoedigd wordt door het W3C (deprecated) bekijken we het voorgestelde alternatief Clip-path. In deze blogpost verdiepen we ons in de verschillen en wat ze met toegankelijkheid te maken hebben.

Clip

De CSS Clip eigenschap laat toe een gedeelte van een element te tonen. Je kan een rechthoek definiëren door vier coördinaten te gebruiken. Meestal wordt deze techniek op afbeeldingen toegepast.

Er zijn voor- en nadelen aan deze eigenschap. Zo moet het element absoluut gepositioneerd staan wat meestal een heel groot nadeel is.

Het volledige logo

We starten met afbeelding zonder Clip of Clip-path, namelijk ons logo.

Het AnySurfer logo met baseline
<img src="../logo_baseline_nl_307x70.png" alt="Het AnySurfer logo met baseline" />

Een deel van het logo

Stel dat we de tekst willen afknippen van onze afbeelding, dan kunnen we Clip gebruiken om de CSS Sprite techniek toe te passen. We gebruiken hetzelfde brondbestand maar tonen alleen het logo.

Het AnySurfer logo zonder baseline
<img src="../logo_baseline_nl_307x70.png" alt="Het AnySurfer logo zonder baseline" />

We selecteren een gedeelte van de afbeelding:

img{
  position: absolute; 
  clip: rect(0px 75px 70px 0px);		
}

Clip-path

Bij Clip ben je beperkt tot een rechthoek. Met Clip-path kan je gebruik maken van een SVG mask of enkele beschikbare CSS basisvormen (rectangle, circle, ellipse of polygon).

Een deel van het logo met SVG circle

Naast de CSS shapes kan je ook verwijzen naar een SVG waarin een SVG shape gedefinieerd is. In volgend voorbeeld linken we een SVG circle aan ons logo.

Deel van het logo met clip-path SVG circle

Als je hierboven niets of ons volledig logo ziet, dan ondersteund je browser SVG circle mask nog niet. Hieronder een screenshot wat je moet zien:

Screenshot SVG circle mask

<img 
  class="orange" 
  src="../logo_baseline_nl_307x70.png" alt="Deel van het logo met clip-path SVG circle" 
/>

De SVG bestaat uit een cirkel met coördinaten x en y plus de grootte van de radius.

<svg width="0px" height="0px">
  <defs>
    <clipPath id="clipping">
      <circle cx="37" cy="34" r="23" />
    </clipPath>
  </defs>
</svg>

In de CSS code wordt verwezen naar een SVG element met id="clipping".

.orange { 
  clip-path: url(#clipping);
}

Hieronder een schets welke SVG we maken. Het middelpunt zit op coördinaat 37px, 34px met een radius van 23px.

Schets SVG op het logo

En wat met toegankelijkheid?

Soms wil je tekst alleen beschikbaar maken voor screenreader gebruikers. Dit kan je doen door de Clip methode te gebruiken, meer lees je hierover op onze pagina Verborgen tekst, enkel voor screenreaders.

Omdat de Clip eigenschap vervangen wordt door de Clip-path eigenschap, is de code niet hetzelfde. Bij Clip gebruik je onderstaande code:

clip: rect(0 0 0 0);

Bij Clip-path een licht andere syntax:

clip-path: rectangle(0,0,0,0);

Besluit

Clip-path is momenteel onvoldoende ondersteund om het als waardig alternatief te gebruiken voor Clip. Voorlopig blijven we het gebruik van Clip aanraden.

Het kan geen kwaad om beide eigenschappen te gebruiken. Huidige browsers ondersteunen Clip en in de toekomst zullen ze Clip-path ondersteunen.

Reageer als eerste