NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Leeshulp: contrast, tekst groter, voorlezen New

Toolbar for care and public sector: high contrast, three text sizes and read-aloud via the Web Speech API (speechSynthesis, nl-NL) highlighting the paragraph being read. Settings are remembered in localStorage with try/catch; without the speech API the button is disabled with an explanation.

Zorg thuis · Wijkverpleging

Wijkverpleging aanvragen

Heeft u hulp nodig bij wassen, aankleden, medicijnen of wondzorg? Dan kan een wijkverpleegkundige bij u thuis komen. U heeft hiervoor geen verwijzing van de huisarts nodig.

Wij komen eerst bij u langs voor een kennismaking. Samen bespreken we welke zorg u nodig heeft en wanneer. Wijkverpleging valt onder de basisverzekering. U betaalt geen eigen risico.

Wij werken in Nieuwegein, IJsselstein, Vianen en Lopik. Vaak kunnen wij binnen twee werkdagen starten.

Liever even bellen?

030 123 45 67

Elke dag bereikbaar, ook ’s nachts voor spoed.

Zorg aanvragen

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Leeshulp: contrast, tekst groter, voorlezen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tgb">
  <div class="tgb__bar" role="toolbar" aria-label="Leeshulp">
    <span class="tgb__brand"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M14 24s-9-5.5-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-9 12-9 12z"/></svg>Zorggroep Lekstroom</span>
    <div class="tgb__tools">
      <div class="tgb__grp" role="group" aria-label="Tekstgrootte">
        <button type="button" class="tgb__btn tgb__size" data-s="1" aria-pressed="true">A<span class="tgb__vh"> normale tekst</span></button>
        <button type="button" class="tgb__btn tgb__size tgb__size--2" data-s="1.18" aria-pressed="false">A<span class="tgb__vh"> grotere tekst</span></button>
        <button type="button" class="tgb__btn tgb__size tgb__size--3" data-s="1.36" aria-pressed="false">A<span class="tgb__vh"> grootste tekst</span></button>
      </div>
      <button type="button" class="tgb__btn tgb__hc" aria-pressed="false"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><path d="M10 2.5v15a7.5 7.5 0 0 0 0-15z" fill="currentColor"/></svg>Hoog contrast</button>
      <button type="button" class="tgb__btn tgb__read" aria-pressed="false"><svg class="tgb__ic-play" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 7v6h3l5 4V3L6 7zM14 7a4 4 0 0 1 0 6M16 4.5a7.5 7.5 0 0 1 0 11"/></svg><span class="tgb__read-lbl">Lees voor</span></button>
      <button type="button" class="tgb__btn tgb__stop" hidden>Stop</button>
      <button type="button" class="tgb__btn tgb__btn--plain tgb__rst">Herstel</button>
    </div>
  </div>
  <p class="tgb__status" aria-live="polite"></p>
  <div class="tgb__page">
    <div class="tgb__main">
      <p class="tgb__crumb">Zorg thuis · Wijkverpleging</p>
      <h2 class="tgb__h tgb__r">Wijkverpleging aanvragen</h2>
      <p class="tgb__r">Heeft u hulp nodig bij wassen, aankleden, medicijnen of wondzorg? Dan kan een wijkverpleegkundige bij u thuis komen. U heeft hiervoor geen verwijzing van de huisarts nodig.</p>
      <p class="tgb__r">Wij komen eerst bij u langs voor een kennismaking. Samen bespreken we welke zorg u nodig heeft en wanneer. Wijkverpleging valt onder de basisverzekering. U betaalt geen eigen risico.</p>
      <p class="tgb__r">Wij werken in Nieuwegein, IJsselstein, Vianen en Lopik. Vaak kunnen wij binnen twee werkdagen starten.</p>
    </div>
    <div class="tgb__card">
      <p class="tgb__ct">Liever even bellen?</p>
      <a class="tgb__tel" href="tel:0301234567">030 123 45 67</a>
      <p class="tgb__cs">Elke dag bereikbaar, ook ’s nachts voor spoed.</p>
      <a class="tgb__go" href="#">Zorg aanvragen</a>
    </div>
  </div>
</div>
</div>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →