Front end Developer – Rich Text Editor

Functieomschrijving

Voor ICTU zoeken wij een Front end Developer – Rich Text Editor. Je werkt aan de verbetering van de digitale overheid door bij te dragen aan de ontwikkeling en doorontwikkeling van het NL Design System. Je verzamelt en creëert richtlijnen, componenten en voorbeelden om robuuste, gebruiksvriendelijke en toegankelijke websites en webapplicaties voor de overheid mogelijk te maken. Het NL Design System wordt open source gedeeld via GitHub en Figma, zodat iedereen deze kan toepassen in de onlinedienstverlening.
Samen met een multidisciplinair team werk je aan concrete oplossingen waarmee overheidsorganisaties eenvoudiger toegankelijke websites en webapplicaties kunnen aanbieden. Je draagt zo bij aan de verbetering van de toegankelijkheid in Nederland en ondersteunt het expertteam bij het realiseren van hun missie.

Jouw belangrijkste opdracht is het ontwikkelen van een gebruiksvriendelijke content management interface en een rich text editor, zodat contentmakers eenvoudig toegankelijke content kunnen publiceren volgens de componenten en richtlijnen van het NL Design System.

• Je ontwikkelt een toegankelijke front-end applicatie met een rich-text editor.
• Je ontwikkelt herbruikbare front-end webcomponenten.
• Je maakt een variant van een rich-text editor, gebaseerd op bestaande applicaties zoals TipTap of BlockNote, waarmee content volgens een strikt schema kan worden opgeslagen in CMS-systemen zoals Drupal, WordPress en TYPO3.
• Je ontwikkelt contentdefinities, zoals JSON Schema's of TipTap node types, voor componenten als Image, Table, Accordion en anderen.
• Je ontwikkelt server-side templates, bijvoorbeeld Twig templates, om de content te tonen.
• Je ontwikkelt duidelijke foutmeldingen voor ontoegankelijke content.
• Je ontwikkelt transformaties van datastructuren om ontoegankelijke content automatisch toegankelijk te maken, zoals het omzetten van Bold Table Cells naar Table Heading Cells, Table Row naar Table Caption, Paragraph naar Heading, enzovoorts.
• Je ontwikkelt complexe front-end webcomponenten, zoals comboboxen, modal dialogs, drawers met formulieren en floating toolbars.
• Je ontwikkelt real-time client side validatie van content ter beoordeling van de toegankelijkheid.
• Je werkt volgens de architectuur van het NL Design System.
• Je stelt testplannen en testscenario’s op om de werking van de software te verifiëren met veelvoorkomende content.
• Je ontwikkelt een koppeling met de REST API van contentmanagementsystemen.
• Je schrijft geautomatiseerde end-to-end tests en unit tests.
• Je verbetert de software op basis van feedback van toegankelijkheidsspecialisten, het kernteam en gebruikersonderzoek.
• Je signaleert kansen voor verbetering en legt technical debt vast op de backlog van het project.
• Je houdt de front-end applicatie actueel en veilig door maandelijks code dependencies te updaten.
• Je ontwikkelt en begeleidt (online) workshops over het realiseren van een toegankelijke huisstijl in samenwerking met andere professionals uit het expertteam.
• Je valideert en breidt templates, patronen en documentatie uit samen met andere professionals uit het expertteam.
• Je neemt deel aan sprint planningen (eens per twee weken).
• Je voert indien nodig refinements uit in een privé Slack Huddle met het expertteam.
• Je reviewt pull requests van andere experts binnen het project en geeft vroegtijdig feedback vanuit jouw expertise.
• Je deelt de voortgang in het privé Slack kanaal van het expertteam en tijdens de NL Design System Heartbeat.
• Je neemt deel aan publieke Huddles voor het bepalen van nieuwe aanpakken voor templates, patronen of componenten.

De resultaten die je concreet dient op te leveren zijn:

• Contentdefinities en validatieregels waarmee je de toegankelijkheid van componenten test en ontoegankelijke content herkent.
• User stories voor scenario’s rond het maken en herstellen van toegankelijke content, inclusief implementatie en testautomatisering van een rich text editor voor de meest voorkomende variaties van ontoegankelijke content.
• Geautomatiseerde tests om de kwaliteit van de software te waarborgen.
• User stories voor het controleren van content op toegankelijkheid met previewschermen voor specifieke aspecten als koppenstructuur, linkteksten, alt-teksten en visuele informatieoverdracht via kleur.

Aan het einde van de opdracht lever je het volgende op:

• Een website met een rich-text editor waarmee gebruikers de meestgebruikte rich-text componenten van het NL Design System kunnen invoeren en begeleid worden naar een toegankelijk resultaat.
• Een open source rich-text editor in een npm package, die integreerbaar is met CMS’en als WordPress, Drupal en TYPO3.
• Documentatie waarmee het beheer van de website kan worden overgedragen.

Jouw profiel

• Je hebt uitgebreide ervaring met toegankelijke content in HTML: koppenstructuur, alternatieve teksten, video en audio met ondertitels en transcriptie, linkteksten, complexe tabellen, lijststructuren en onderdelen in andere talen.
• Je hebt ervaring met veelvoorkomende soorten ontoegankelijke content, zoals semantische elementen gebruiken voor opmaak en vice versa.
• Je bent gewend verantwoordelijkheid te dragen voor de toegankelijkheid van een website, ook als de content door anderen wordt gemaakt.
• Je hebt ervaring met het meetbaar verbeteren van de toegankelijkheid van content die door derden wordt aangeleverd.
• Je hebt ervaring met het aanpassen van rich text editors via JavaScript API’s.
• Je hebt ervaring met het maken van schema’s voor rich text data.
• Je hebt ervaring met het renderen van content uit een CMS met toegankelijke templates.
• Je hebt ervaring met het ontwikkelen van client-side meerstapsformulieren met state management in JavaScript.
• Je hebt ervaring met het bouwen van front-end code met TypeScript en ES Modules, bijvoorbeeld met tsc of Vite.
• Je hebt ervaring met het toepassen van herbruikbare componenten uit Design Systems of Component Libraries.
• Je werkt pragmatisch en kunt werk opdelen in kleine stappen en fases.
• Je kunt zonder code-duplicatie onderdelen hergebruiken, zodat verbeteringen zowel op bestaande als op nieuwe websites doorgevoerd kunnen worden.
• Je hebt uitgebreide ervaring met CSS, waaronder layouts met Grid en Flexbox, CSS logical properties, CSS custom properties, CSS variables, calc() voor fluid font sizes en container queries.
• Je hebt uitgebreide ervaring met ECMAScript, zoals ES Modules, import(), URL, async/await, Map, Set, map/filter/reduce, nullish coalescing, class, import.meta, Promises, Object entries en destructuring.
• Je hebt ervaring met het gebruiken van npm packages, werken in monorepositories en het publiceren van npm packages met semantic versioning.
• Je hebt ervaring met TypeScript in Node.js.
• Je hebt ervaring met het gebruik van REST APIs voor het vullen van webpagina’s met data.
• Je hebt ervaring met unit tests en end-to-end tests voor front-end code, bijvoorbeeld met Jest, Vitest, Cypress of Playwright.
• Je beschikt over goede mondelinge en schriftelijke communicatieve vaardigheden.
• Je werkt zelfstandig en bewaakt je eigen voortgang als onderdeel van de scrum planning.
• Je bent accuraat, werkt gedisciplineerd en kan prioriteiten stellen binnen een divers takenpakket, in afstemming met de Product Manager.
• Je hebt ervaring met open source werken en deelt proces en resultaat op een open en transparante wijze.

Goede beheersing van de Nederlandse taal in woord en geschrift is vereist voor deze functie.