1 WEBDESIGN Eigen Site Evaluatie door: Y.S. Lubbers en W. Witvoet 12 Summary Summary Prefix 1. Content en structuur gescheiden houden 2. Grammaticaal ...
Summary Summary Prefix 1. Content en structuur gescheiden houden 2. Grammaticaal correcte en beschrijvende markup 3. Kopregels 4. Client-‐side script 5. Basistaal 6. Hardly reachable text for voice readers 7. Alt attribuut 8. Forms 9. Fieldset Conclusie
2
Prefix Onze top tien van de evaluatie op onze eigen site. De eerste vijf punten zijn gebaseerd op de resultaten van www.webrichtlijnen.nl/toetsen.
1. Content en structuur gescheiden houden 1.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum%203/verantwoording.html • http://www.witvoet.nl/practicum%203/sitemap.html De rest van de pagina’s vertoonde geen fouten of opmerkingen omtrent deze richtlijn. 1.2 Evaluatie Punt R-‐pd.1.1: Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of XHTML voor de structuur van de site en CSS voor de vormgeving ervan. 1.3 De Opmerkingen Het gebruik van de small-‐tag is niet toegestaan. Lettergrootte dient middels CSS te worden gespecificeerd. 1.4 Verbetering Ipv <small> hebben we
gebruikt en deze klasse een waarde gegeven in de CSS.
2. Grammaticaal correcte en beschrijvende markup 2.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum%203/index.html, • http://www.witvoet.nl/practicum%203/nav.html, • http://www.witvoet.nl/practicum%203/verantwoording.html, • http://www.witvoet.nl/practicum%203/wandeling.html, • http://www.witvoet.nl/practicum%203/bestel.html 2.2 Evaluatie Punt R-‐pd.3.1: Schrijf zowel grammaticaal correcte, als beschrijvende mark-‐up. 2.3 De Opmerkingen Deze pagina lijkt grammaticaal correcte mark-‐up te bevatten, maar bevat b of i elementen. Deze elementen beschrijven visuele aspecten van tekst, welke beter door CSS beschreven kunnen worden. 2.4 Verbetering We hebben besloten dit niet te veranderen daar dit geen toegevoegde waarde heeft d.w.z. niet de leesbaarheid van de HTML verbetert of bij zou dragen aan een betere scheiding van content en mark-‐up. gebruiken om iets nét een beetje te laten opvallen is nog altijd leesbaarder dan <span class=”dikgedrukt”>Hoi. Hier moet dan vervolgens ook weer ruimte voor gecreëerd worden in de CSS-‐file. 2.1 Aanmerkingen gevonden op de volgende subsites van onze website: 2.2 Evaluatie Punt 2.3 De Opmerkingen 2.4 Verbetering
3
3. Kopregels 3.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum%203/sitemap.html • http://www.witvoet.nl/practicum%203/index.html • http://www.witvoet.nl/practicum%203/nav.html • http://www.witvoet.nl/practicum%203/verantwoording.html • http://www.witvoet.nl/practicum%203/wandeling.html • http://www.witvoet.nl/practicum%203/bestel.html • http://www.witvoet.nl/practicum/%203/selectie.html 3.2 Evaluatie Punt R-‐pd.3.3: Sla in de markup geen niveaus in de hiërarchie van kopregels over. 3.3 De Opmerkingen In de kopregelhiërarchie lijkt een niveau te zijn overgeslagen (bijvoorbeeld van h1 naar h3 zonder een h2. Vaak wordt dit veroorzaakt door gebruik van kopregelelementen vanwege de wijze waarop het wordt weergegeven (grootte, nadruk), in plaats van de in de HTML-‐specificatie beschreven functie van het element: A heading element briefly describes the topic of the section it introduces. 3.4 Verbetering We hadden inderdaad gebruikt gemaakt van h3 en h4. We hebben dit veranderd in een structuur van h1, h2, h3 en h4.
4. Client-‐side script 4.1 Aanmerkingen gevonden op de volgende subsites van onze website • http://www.witvoet.nl/practicum%203/sitemap.html • http://www.witvoet.nl/practicum%203/index.html, http://www.witvoet.nl/practicum%203/nav.html • http://www.witvoet.nl/practicum%203/verantwoording.html • http://www.witvoet.nl/practicum%203/wandeling.html • http://www.witvoet.nl/practicum%203/bestel.html • http://www.witvoet.nl/practicum/%203/selectie.html 4.2 Evaluatie Punt R-‐pd.8.6: Bij het gebruik van client-‐side script in combinatie met een link: indien de link nergens naartoe leidt, confronteer de bezoeker zonder ondersteuning voor client-‐side script dan niet met een niet-‐werkende link. 4.3 De Opmerkingen Er zijn links gevonden die niet werken indien Javascript uitgeschakeld staat of niet aanwezig is. 4.4 Verbetering Het betreft hier onder andere bepaalde lijsten met informatie die wel of niet worden weergegeven afhankelijk van waar de user op klikt (collapsable list). Om hier echter binnen dit tijdframe nog een oplossing voor te vinden is niet mogelijk. Hier lopen we meteen tegen de reden aan waarom er bij websites soms minder aandacht besteed is aan accessibility. Men wil wel, maar heeft of de tijd niet meer óf dus vaak het budget niet meer als we over het bedrijfsleven praten.
4
5. Basistaal
5.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum%203/sitemap.html • http://www.witvoet.nl/practicum%203/index.html • http://www.witvoet.nl/practicum%203/nav.html • http://www.witvoet.nl/practicum%203/verantwoording.html • http://www.witvoet.nl/practicum%203/wandeling.html, • http://www.witvoet.nl/practicum%203/bestel.html • http://www.witvoet.nl/practicum/%203/selectie.html 5.2 Evaluatie Punt R-‐pd.15.6: Specificeer de basistaal van een pagina in de markup. 5.3 De Opmerkingen Er is geen basistaal voor de pagina gespecificeerd. 5.4 Verbetering We hebben een basistaal (NL) toegevoegd aan de website. Voorbeeld:
Dit waren de enige 5 verbeter punten tot dusver zijn gevonden door deze tool. We hebben daarom dus gebruik gemaakt van de Truwex 2.0 tool.
6. Hardly reachable text for voice readers 6.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum/%203/selectie.html • http://www.witvoet.nl/practicum%203/nav.html • http://www.witvoet.nl/practicum%203/wandeling.html • http://www.witvoet.nl/practicum%203/wandeling.html 6.2 Evaluatie Punt Percent of text, reachable by voice reader within a specified time limit, is less than the defined threshold. I.e. our estimation shows that less than 75% of page's text is reachable in 90 sec (these are the default values). In other words, it may take a long time for a user with a screen reader software to reach certain parts of a web page. Consider using hierarchical headers H1, H2 etc. and skip links to create shortcuts for users of screen readers. Note: the Map shows only 10 the most hardly reachable text fragments. 6.3 Verbetering Zoals al eerder aangegeven hebben we dus h1 en h2 elementen toegevoegd aan onze CSS en in onze HTML. Hierdoor moet het gemakkelijker worden voor screenreaders om met onze site om te gaan.
5
7. Alt attribuut 7.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum%203/wandeling.html 7.2 Evaluatie Punt OBJECT element contains no alternative content. Alternative content is text equivalent, image equivalent or any other elements inside Object tag, which provide alternative representations of Object's information. Alternative content is useful when user's browser does not support the object -‐ inner content of Object tag is rendered instead. Element Source URL OBJECT
2.3 Verbetering We zijn erg blij dat dit het enige object is dat er gevonden is wat geen alt attribuut heeft. Dit is ook het enige object waar we niets aan kunnen doen omdat het een ‘third party’ add-‐on betreft.
8. Forms 8.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum%203/bestel.html 8.2 Evaluatie Punt Form control should have non-‐empty explicit label, or at least non-‐empty title. Explicit label is a label tied with input by 'for'/'id' attributes. 8.3 Verbetering We hebben het label “totaal” toegevoegd aan ons bestelformulier. Voorbeeld:
9. Fieldset 9.1 Aanmerkingen gevonden op de volgende subsites van onze website: • http://www.witvoet.nl/practicum%203/bestel.html 9.2 Evaluatie Punt Logical groups of form controls should be broken into separate sections using FIELDSET groups and labeled using LEGEND tags. Number of inputs in FORM or FIELDSET FIELDSET exists but without LEGEND 71
0
9.3 Verbetering We hebben fieldsets en legends ingevoerd, zie onderstaand voorbeeld:
6
Conclusie We hebben echt moeten zoeken naar accessibility problemen. zo hadden we vroeg in het stadium van ontwikkeling al gezorgd voor de benodigde ‘alt’ tags. Deze staan dus ook in onze XML. We hebben nog wel wat punten waar de website op verbeterd kan worden maar deze vragen of heel veel tijd of zijn van marginale invloed op de leesbaarheid/accessibility. Onze site scoort beter dan de website van Leiden.nl, maar deze site is dan ook veel groter. 1. Zo zijn al onze pagina’s valide, die van Leiden niet. 2. CSS van Leiden niet valide. 3. Website Leiden maakt niet altijd onderscheid tussen mark-‐up en content en wij wel (inline style attributen etc.) 4. Slaan koppen over (h3 en dan h5). Wij eerst ook maar dit is inmiddels verbeterd. 5. Ook hebben ze sessies in de URLS, hierdoor kunnen er veiligheidslekken ontstaan. Wij maken geen gebruik van sessies. 6. Leiden.nl heeft geen basistaal, wij wel. 7. Leiden.nl opent links in een ander venster zonder waarschuwing, wij openen geen nieuw venster. 8. Leiden.nl heeft geen alt attributen bij de images. Wij hebben geen één image waar een alt attribuut mist. 9. Leiden.nl heeft geen labels bij invoervelden, wij hebben dit overal.
