1

Onderwerp: Material design en webrichtlijnen

Ik ben aan het kijken naar de mogelijkheden voor het toepassen van material design binnen gemeentelijke websites. Dit betekent echter ook dat het moet voldoen aan de webrichtlijnen.

De combinatie van material design en webrichtlijnen levert bij mij vragen op. Zoals ik begrijp uit de documentatie wordt bij material design betekenis gegeven aan elementen met behulp van visuele aspecten (bijvoorbeeld animatie of schaduw) en dat lijkt me in strijd met de webrichtlijnen, met name het punt m.b.t. het scheiden van opmaak en markup.

Veel nuttige informatie kan ik niet vinden over dit vraagstuk en vroeg me af of iemand van jullie hier wellicht iets meer van weet. Is material design überhaupt toe te passen op een website die aan de webrichtlijnen moet voldoen?

2

Re: Material design en webrichtlijnen

Hi Liza,

Waar zitten dan volgens jou de problemen tussen MD en webrichtlijnen? Ik zie in de documenten van Google niet 123 zaken die goede toegankelijke markup in de weg zitten.

3

Re: Material design en webrichtlijnen

Material design is mogelijk in combinatie met de webrichtlijnen.

Maar om material design goed toegankelijk te maken, is wel meer werk nodig.

Als je bijvoorbeeld een popup maakt, dan mag je niet onder de popup kunnen doorgaan met tabben. Ook moet bijvoorbeeld de voorleessoftware van een blinde gebruiker naar de popup gebracht worden. Als je een widget maakt waarin je kunt bladeren, dan zou je dat ook met de cursortoetsen moeten kunnen doen.

Het is jammer dat de webrichtlijnen WAI-ARIA niet vermelden, want een toegankelijke website met material design zou daar gebruik van moeten maken. Het probleem van WAI-ARIA is dat als je een website maakt volgens de specificatie, het in verschillende browsers nog steeds niet goed werkt. Dat geldt ook voor voorleesbrowsers zoals JAWS. Een dergelijke site moet dus goed met dergelijke software getest worden, door de gebruikers van deze software.

Als je wilt dat de site ook goed werkt als CSS of JavaScript niet beschikbaar is, kost het nog meer werk om material design toe te passen.

Hier vind je ook wat interessant leesmateriaal: Web applications and ARIA FAQ

4

Re: Material design en webrichtlijnen

Er is niks anders of lastiger met material design in combinatie met Webrichtlijnen ten opzichte van elk ander design voor je website. Animatie en schaduw worden in alle moderne browsers al heel goed ondersteund via CSS3. Het scheiden van opmaak en markup mag geen probleem zijn mits je de juiste front-end developer in huis haalt.

@Edwin Martin binnen Webrichtlijnen wordt ook rekening gehouden met WAI-ARIA. Je moet dan echter dieper de richtlijnen induiken. Je komt dan in de technieken van WCAG2 terecht.

5

Re: Material design en webrichtlijnen

En toen keek ik even verder en kwam hier
https://www.polymer-project.org/docs/el … dow-effect
daar staat het volgende:
<paper-button raised>Raised button</paper-button>

Tja, en dan krijg ik kriebels. Er zijn volgens mij andere manieren om op te lossen. Daar kan je met een echte HTML-knop en wat CSS direct iets toegankelijks van maken.

Afijn: polymer is nog sterk in ontwikkeling (v0.5.x) en wordt nog niet door alle nieuwste versies van browsers volledig ondersteund. Weet iemand hoe met oude browsers de ondersteuning is?
De beschrijving van Material Design lijkt me herbruikbaar.
Mijn advies: zet een designer en front-ender aan het werk en maak er wat moois van met toegankelijke HTML.

6

Re: Material design en webrichtlijnen

Liza, je vraag levert wat onduidelijkheid op. Want wat bedoel je precies? Material Design is volgens mij een manier van tonen, en niet zozeer van hoe het gebouwd is. Had je deze ook gelezen http://www.google.com/design/spec/usabi … lity.html?

Dus als je knoppen visueel zichtbaar maakt met een schaduw, let er dan wel op dat het contrast goed is, dan is het niet in strijd met de webrichtlijnen, dacht ik.
Kijk dus erg goed naar welke code je gebruikt om de boel te bouwen.
Zie ook https://twitter.com/stommepoes/status/5 … 9908671489

7

Re: Material design en webrichtlijnen

Het grootste potentiële probleem dat ik zie met material design is dat het kan uitnodigen om informatie alleen op een visuele manier (bijvoorbeeld d.m.v. animatie) over te brengen. (Ik zie dit niet als inherent aan material design, maar wel als een risico eraan.) Elementen reageren bijvoorbeeld op aanraken, en je zou dus bijvoorbeeld een "activeerbaar" element anders kunnen laten reageren op aanraken dan een niet-activeerbaar element, en alleen op die manier kenbaar kunnen maken dat een element activeerbaar is. Een niet-visuele bezoeker zou die informatie niet meekrijgen, dus er moet daar ook een fallback (puur semantische) manier zijn om diezelfde informatie door te geven, bijvoorbeeld door het interactieve element een <button> te maken.

Vergelijkbaar, dat een element een "schaduw" heeft, en visueel "boven" een ander element staat kan prima door middel van de volgorde in de DOM worden weergegeven.

Zie overigens ook de Accessibility pagina op die website van Google, waar bijvoorbeeld staat:

Do all interactive controls have associated text labels, tooltips, or placeholder text to indicate their purpose?

8

Re: Material design en webrichtlijnen

Ten eerste: ontzettend bedankt voor alle reacties! Sorry voor mijn late reactie... het griepvirus had me te pakken :-)

Mijn vraag was wellicht wat onduidelijk, maar ik zag zelf door de bomen het bos ook niet meer. Inmiddels ben ik tot de conclusie gekomen dat Material Design op zich niet ontoegankelijk hoeft te zijn, maar dat je dan geen gebruik kan maken van een bestaande library.

Bij Polymer heb je te maken met custom elementen (webcomponents) en daarmee kom je niet eens door de HTML5 validator, laat staan alle andere accessibility issues waar je tegen aan kan lopen. Andere libraries, zoals Angular Material Design, maken ook gebruik van custom elementen en zelfs custom attributen.

Mijn vraag had betrekking op een toepassing binnen een CMS, waar voor een deel gebruik wordt gemaakt van Bootstrap. Daarvoor bestaat ook een Material Design theme en die maakt geen gebruik van custom elementen, dus de markup blijft netjes. Wel voegt de bijbehorende javascript her en der <div> elementen toe om bepaalde effecten visueel weer te kunnen geven, maar dat hoeft niet altijd een probleem te zijn.

Buiten zelf een toegankelijke Material Design library te maken, heb ik op dit moment geen andere opties. Qua planning is zelf het wiel opnieuw uitvinden niet haalbaar, dus hebben we besloten om in eerste instantie ons vooral te richten op het toepassen van de Material Design guidelines bij invulformulieren, met als basis het Bootstrap Material Design theme.

De praktijk zal uitwijzen hoe dit uitpakt, maar daar zijn R&D trajecten dan ook voor bedoeld :-).

9

Re: Material design en webrichtlijnen

Mijn ervaring met de keuze: het achteraf toegankelijk maken van dit soort code zal meer kosten als op toegankelijke wijze zelf aan de slag gaan met dit design (mits er een goede frontend ontwikkelaar beschikbaar is). Of nog erger de code is helemaal niet toegankelijk te krijgen (waarna er een aparte toegankelijke versie gemaakt wordt).