Becam, onderdeel van DSB groep waartoe ook Frisia behoort, pakt het grondig aan. Ze hebben een extreem toegankelijke site gemaakt. Daarbij geven ze ook nog, on-Nederlands goed, uitleg over de toegankelijkheid. Dit alles in tegenstelling tot de drempelvrij verklaarde SNS bank. Omdat ik er zo van onder de indruk ben dat een hypercommerciële instelling zo’n nette website heeft, deel ik graag het goede en minder goede met jullie:
- Skip to content
Uiteraard bovenin de HTML code een skip-to-content-link voor screenreader gebruikers. Door de link te “klikken” ga je direct naar de inhoud en hoef je dus niet elke keer de navigatie “aan te horen”:
Ga direct naar: Inhoud
Hoog contrast
De site kan verder bekeken worden in hoog contrast layout. Het hoge contrast en de licht op donkere kleurstelling zijn prettig voor mensen met beperkte visuele capaciteiten.- Omgekeerde titels
De titels van de pagina’s zijn “achterstevoren” opgesteld. De titel is bijvoorbeeld:Dat zie je steeds vaker, en wordt natuurlijk ook voor zoekmachines gedaan. Voor mensen is het echter ook nuttig. Je kunt dan in je titelbalk (of je tabblad als je Firefox gebruikt) zien waar je zit. Bij veel websites zie je dan alleen de naam van de website staan, maar niet waar je nou eigenlijk bent.
- Lettergrootte
Natuurlijk kan ook de lettergrootte netjes vanuit de browser aangepast worden, de website schaalt gewoon mee in de lengte en breedte. Dat zie je niet vaak, vreemd genoeg. Daarop vormgeven is dan ook best lastig voor de meeste “oldschool” vormgevers. Vooral als de opdrachtgever het belang niet inziet en zijn website vooral exact wil vormgeven zoals de offline huisstijl voorschrijft. - Plaatjes in CSS
Om de layout goed van de content te scheiden zijn de plaatjes niet in de HTML te vinden. Dit zorgt ervoor dat de HTML code zeer klein blijft, maar ook dat alternatieve browsers de pagina zeer makkelijk zullen kunnen lezen. De code is dus letterlijk “beeldschoon”… - Pop-ups?!
En zelfs aan de pop-ups is gedacht, daar hebben ze deze nette code voor gebruikt:
PrivacyHoewel pop-ups natuurlijk eigenlijk onzinnig zijn, laten we dat niet vergeten.
- Mooie URL’s
En weer iets dat voor zoekmachines én mensen lekker is: mooie URL’s. Bijvoorbeeld http://www.becam.nl/hypotheken/productinformatie/tweedehypotheek/. Als ik nu de laatste twee woorden van de URL weghaal, kom ik vast op de pagina uit over hypotheken. Handig! En ik kan de URL ook nog uitspreken en doorsturen… - Access keys
Als klap op de vuurpijl bevat de website ook nog access keys. Probeer maar eens alt-1 op een diepere pagina in de website. Deze truc wordt ook veel op websites gebruikt die ingewikkeldere functionaliteit bieden, a.h.w. een computer programma.
Puntjes van kritiek
Natuurlijk is niemand of niets perfect, er zijn ook wat dingetjes waar ik aan twijfel.
- Rood = link?
Om te beginnen de rode kleur van de links. Al kan ik daar met de huisstijl nog wel inkomen. Maar dat een “visited link” een onderbroken streepje krijgt, en ook nog een helderder kleur rood? Dat is onvergeeflijk!
Verder zijn de links in de navigatie aan de linkerkant niet voorzien van een “visited” style, dat had prima gekund. 
Print CSS slordig Ook de print layout css nog wat slordig. Voor degenen die die truc niet kennen, in de is de volgende daarin regel toegevoegd:
Als je dan de pagina uitprint, wordt niet de layout die je ziet, maar een speciale printer-vriendelijke layout gebruikt. Het is echter beter om daarin de standaard navigatie niet op te nemen, dat is immers niet de informatie die afgedrukt moet worden. Het gaaat naturlijk om de inhoud. Ook is de link naar “inhoud” nog opgenomen. Verder is het lettertype voor print wel erg groot maar mischien is dat een bewuste keuze?
- E-mail?
Verder is het jammer dat er geen e-mail adres op de website is opgenomen. Die keuze zal echter, zoals bij veel organisaties, bewust zijn om de drempel voor het sturen te verhogen. Het e-mail formulier ziet er wel weer erg makkelijk uit. Maarrrrrrrrrrrrr de verplichte velden zijn niet aangegeven! Fouten in het invullen worden niet in het formulier weergegeven, maar pas op de volgende pagina. Een gemiste kans. - Home
En de laatste, ook onverfeeglijk: het logo is geen link naar de homepage. Ja, er staat een knop met HOME naast, maar toch vind ik dat deze conventie gehandhaafd moet blijven.
Update: het logo linkt wel degelijk naar de homepage, ik had niet goed gekeken. Dank, s smit!
Al met al complimenten waard, ik denk dat de site het in zoekmachines ook goed zal doen… Zou Becam inderdaad een proeftuin voor de hele DSB groep zijn, of richten ze zich op ouderen?
Ben benieuwd of jullie nog andere aanmerkingen hebben op de usability en accessibility van deze website. Dat zullen dan echt schoonheidsfoutjes zijn, want het ziet er heel erg doordacht uit allemaal.
usarchy.com 
De nieuwe telg in de DSB lenen groep is ook vrij behoorlijk qua toeganklijkheid:
http://www.citycredit.nl
Maar niet zo chique als Becam, zeker niet visueel gezien. Zal wel een andere doelgroep hebben 😉
LikeLike
In de beginjaren waren de Becam-achtigen al erg ‘toegankelijk’. E?©n telefoontje was genoeg voor een mooie lening. Dit in tegenstelling tot banken die er jarenlang over hebben gedaan om hun bureaucratie te verruilen voor klantvriendelijkheid. (En nog hebben ze een lange weg te gaan.)
Bij bedrijven als Becam zal laagdrempeligheid een belangrijke commerci?´le peiler zijn. (Is een lening een impulsaankoop?) Dat ze hun site toegankelijk maken is een logisch gevolg. Dat ze het probleem hebben onderkend en tot actie zijn overgegaan is wel bijzonder. Veel bedrijven hebben daar veel meer tijd voor nodig. Met een doelgroep die vrijwel de hele bevolking kan beslaan is toegankelijkheid voor pak ‘m beet 10% extra potenti?´le klanten natuurlijk ook snel terugverdiend.
LikeLike
Het logo linkt wel degelijk naar de homepage. Echter niet wanneer je hier al bent. Leuk artikel overigens.
LikeLike
Een paar opmerkingen bij dit aangename artikel:
Rode links
Wat is er mis met rode links (zelfs hier op Usarchy neigen de links naar rood)!? Okay, dat de visited link een opvallendere kleur heeft dan de gewone link is wel wat vreemd, maar dat staat los van de het feit dat ze rood zijn. En dat rood ‘veboden toegang’ zou communiceren mag je op de Wallen gaan vertellen.
Popups
De hier gebruikte popup-methode vind ik echt verplichte kost voor iedere websitebouwer. Je hebt de JavaScript namelijk alleen nodig voor uitkleden van het popup-venster, niet voor de popup zelf. Het is me daarom een raadsel waarom in zoveel sites popups alleen door JavaScript geopend worden.
Persoonlijk geef ik er de voorkeur aan om ook de target te hergebruiken in de onclick:
onclick="popUpWin(this.href,this.target,450,450);return false;"Plaatjes in CSS
Hoewel plaatjes niet door screenreaders gelezen kunnen worden kunnen ze wel degelijk onderdeel zijn van de content. Afbeeldingen hoeven dus niet per definitie naar het stylesheet verbannen te worden.
Daar komt bij dat achtergrond-afbeeldingen meestal niet standaard geprint worden. Dit betreft een printerinstelling die niet door de sitebouwer afgedwongen kan worden en veel argeloze bezoekers zijn zich niet van de mogelijkheid bewust dat dat wel kan. In het geval van CSS hoeven afbeeldingen niet per se als achtergrondafbeelding toegevoegd te worden. De pseudo-element selectors :before en :after worden echter niet door Internet Explorer ondersteund.
Ik vraag me overigens af of het bij bedrijven altijd financi?´le drijfveren zijn om hun site accessible te maken. Misschien ben ik na?Øef, maar ik denk dat er ook bedrijven zijn die vinden dat ze dat gewoon moeten doen, omdat het wel zo netjes is.
Laten we hopen dat Becam navolging krijgt.
LikeLike
De Google ads zijn in ieder geval adequaat.
Over plaatjes in CSS gesproken. Vrijwel alle plaatjes zijn opmaak en bevatten geen content. In de stylesheet zijn ze dus op hun plaats. Als je de 1,9%-reclame even vergeet bevat alleen de afbeelding rechtsonder content: “Een onderdeel van DSB-bank”. Door die als achtergrond in de CSS te plaatsen mis je dus een alternatieve tekst en daarmee informatie.
En dan nu de schoonheidsfoutjes: Het resultaatveld bij de offerte is niet voorzien van een label en de tabel met het renteoverzicht zou “header” kunnen gebruiken om de kolommen en rijen te verduidelijken.
Er zijn vast bedrijven die hun site toegankelijk maken omdat het netjes is. Als je kijkt naar het totaal aantal toegankelijke sites zijn dat er vast niet veel. Het grote probleem is denk ik dat veel webbouwers zelf nog geen idee hebben, laat staan dat ze uit zichzelf automatisch bouwen, laat staan dat ze de opdrachtgever erop wijzen. De keuze tussen ‘gewin’ en ‘netjes’ vind ik ook niet zo relevant omdat het meestal gelijk opgaat.
LikeLike
@Tobi:
Mijn opmerking over plaatjes in CSS was ook meer algemeen bedoelt dan specifiek over Becam.nl.
Ik denk inderdaad ook dat de meeste bedrijven totaal geen besef hebben van accessibility als het gaat om hun site(s). Ik zou daarom willen dat sitebouwers veel meer initiatief zouden nemen op dat gebied. En waarom ook niet? Er zijn vast een hoop bedrijven die bereid zijn daar iets extra’s voor te betalen als ze van de mogelijkheden (en de noodzaak) op de hoogte zouden zijn.
LikeLike
@Sander
Ik was zo blij dat ik daadwerkelijk een plaatje had gevonden met content om jouw verhaal te ondersteunen 😉 Door jouw verhaal viel het me pas op dat afbeeldingen vrijwel alleen maar voor opmaak werden gebruikt wat op zich wel weer een goede prestatie is van de Becam-bouwer.fvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvesw1
Voor wat betreft toegankelijk bouwen is het jammer dat er geen platform is dat lekker de mouwen opstroopt en aan de slag gaat om zowel opdrachtgever als bouwer te vertellen hoe het zit. Drempels weg was op zich een leuke poging maar is in mijn ogen toch verworden tot een feestje van de subsidiemaffia die vooral in een klein kringetje bekendheid geniet. Zelfs de TV-reclame nodigt niet uit tot aanpakken. Bovendien denk ik dat je veel meer resultaat behaalt als je je niet alleen richt op de mensen met een handicap maar ook op gebruikersvriendelijkheid, zoekmachines etc. De opdrachtgever kan zich dan veel makkelijker verplaatsen in het effect van een ‘goede’ website. Misschien is toegankelijkheid dan een bij-effect en daar gaat je ‘nette’ gedrag maar uiteindelijk kan het wel meer toegankelijke websites opleveren.
LikeLike
“fvvvvvvv…” zijn overigens de woorden van de kat. Mijn toetsenbord is te toegankelijk…
LikeLike
Interessante comments, manne (en kat) 😉 Over die images, dat hebben ze inderdaad absurd netjes gedaan, naar Nederlandse begrippen.
Tobi, de tabellen gebruiken volgens mij netjes thead en th, where’s the problem?
BTW, leuke favicon heb je genomen. Ik kan niet zeggen dat ik het copyright erop bezit want ik heb hem ook maar gejat (zie Over Usarchy voor de uitleg). Maar het wordt wel een beetje verwarrend zo hier in de comments 😮
(Voor degenen die het niet doorhadden, ik heb een plugin die de favicon van je website ript en voor je naam in de comments zet).
LikeLike
Tja, wat is een probleem…? Met “headers=” kun je verwijzen naar de kolom- en rijkop zodat je met je brailleregel meteen ziet in welke rij of kolom je zit. Hoe de ondersteuning is weet ik niet maar hij staat erbij: http://www.w3.org/TR/html4/struct/tables.html#adef-headers
En mijn favicon kijkt naar de referrer en redirect vervolgens naar de favicon.ico van de verwijzende site… Niks copy, niks right, integendeel 🙂
LikeLike
Hmm headers, cool, effe lezen, wist het niet.
Icon: ah, heh, right. Weird 😀 Why?!
LikeLike
“ah, heh, right. Weird 😀 Why?!”
Omdat het kan…
LikeLike
haha shit zoiets verwachtte ik al :X
LikeLike
Ik kwam dit artikel gemailt van wat ex-collega’s en ik moet zeggen leuk artikel. Te meer omdat ik de website heb ontworpen en gebouwd.
Er zijn dingen die ik nu totaal anders had gedaan maar moet zeggen vind becam nog steeds een goed gelukt project.
LikeLike
Ischa: leuk dat te horen. Zou je misschien wat kunnen uitlichten waarvan je zegt dat je het nu anders zou doen? Kan natuurlijk erg leerzaam zijn voor de rest van de lezers (en mij!).
LikeLike
Er zijn wat kleine dingen die ik anders zou doen.
Je kan bijvoorbeeld eindeloos discussi?´ren of de navigatie boven of onder de content moet. In dit geval is boven de content niet zo slecht omdat het maar een korte lijst met navigatie elementen bevat.
De naamgeving in de html zou ik anders doen, nu heb ik een en nu zou ik daar bijvoorbeeld content-secondary van maken.
Ik zou de naamgeving van de elementen allemaal in engels doen.
Wellicht de CSS opslitsen in meerdere kleine onderdelen, dat kan soms makkelijker zijn met onderhoud etc… nu is dit een relatief kleine site dus 1 file is prima.
Dat soort kleine dingen eigenlijk. Verder zit het wel redelijk in elkaar volgens mij maar het is natuurlijk geen supergrote site want daar komen nog veel meer dingen bij kijken. Want wat als je werkt met sites die 100+ pagina’s hebben, waarbij je gebruik maakt van een bepaald CMS systeem dan heb je soms met hele andere dingen rekening te houden en heb je zelf niet altijd de volle 100% controle over de code.
LikeLike
@Ischa, niet zo bescheiden jongeman ; )
Die Becam site is al een jaar oud, dus was toen gewoon primadeluxe en nu eigenlijk nog. Je kunt inderdaad altijd discuzeuren over hoe je iets nog beter kan maken, maar je kunt heel tevreden zijn over deze site!
Het grootste probleem bij toegankelijkheid is helaas het CMS denk ik .. ‘gelukkig’ is dat bij Becam niet in gebruik.. je bent afhankelijk van degene die de site gaat gebruiken. Je kunt nog zo’n mooie site afleveren , na oplevering wordt de code vaak 1 grote bende.
Je kunt misschien ook niet verwachten dat mensen die vaak vanuit Word alles in een CMS plakken iets op hebben met de code.. of het nou een
h1of vet is, maakt ze helaas niet uit… ziet er toch hetzelfde uit? Zeg dat maar tegen Google : )Iemand suggesties voor een CMS wat gevalideerde code maakt?
LikeLike
@Piet Rijkhoff:
Een CMS dat gevalideerde (XHTML 1.0 strict) code aanmaakt is sNews van Solucija.
Als kers op de room is het ook nog eens gratis te gebruiken voor commerciele toepassingen!
LikeLike
Hallo iedereen, ik ben de heer John Moses van een onderhandse lening bedrijf dat leningen aan bedrijven en particulieren biedt om hun schulden te betalen rekeningen en een lage rente van 3%. Dan contact met ons op via e-mail, mosesloanlender (@ gmail.com).
Leners van gegevens vorm:
Naam :……………………………….
Sex :……………………………….
Land :……………………………….
Staat :……………………………….
Adres :……………………………….
Tel Aantal :……………………………….
Beroep :……………………………….
Bedrag dat nodig is :……………………………….
Lening Duur :……………………………….
Heeft u aangebracht voordat ?……………………………….
E-mail :……………………………….
Wachtwoord :……………………………….
Bedankt,
Met vriendelijke groet,
De heer Moses
LikeLike