> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Aangepaste opmaak met CSS voor Web Accessibility

Met onze app kun je het uiterlijk van de webtoegankelijkheid volledig aanpassen met **custom CSS**. In de instellingen van Web Accessibility vind je onder de tab Style een **CSS editor** waarin je je eigen stijlen kunt toevoegen. Deze stijlen worden rechtstreeks toegepast op de webtoegankelijkheidscomponenten die op je website of in je app worden geladen.

In dit artikel lees je hoe webtoegankelijkheid is opgebouwd en hoe je elk element met CSS-selectors kunt benaderen.

### Overzicht van de bannerarchitectuur

Het hele toestemmingssysteem wordt geladen als een **Web Component** met de volgende roottag:

```html
<pandectes-a11y></pandectes-a11y>
```

Alle webtoegankelijkheidselementen bevinden zich binnen deze component. Wanneer je CSS schrijft, kun je je regels optioneel onder pandectes-a11y scopen, zodat andere delen van je site niet worden beïnvloed.

Voorbeeld:

```html
* {
  font-family: Arial, sans-serif;
}
```

### Bannerelementen die je kunt opmaken
Webtoegankelijkheid bestaat uit twee**&#160;hoofdelementen**, die elk onafhankelijk van elkaar kunnen worden opgemaakt.

###### 1. Dialog

Dit is het dialoogvenster waarin alle functies van je widget beschikbaar zijn.

**Selector**

```
.a11y-option-tile {

}
```

**Voorbeeld van aanpassing**

```
[data-role="notice"] {
  background-color: #ffffff;
  color: #333333;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}
```

###### 2.  Widget – Button Icon

Dit is de zwevende of ingebedde knop waarmee gebruikers het toegankelijkheidsvenster opnieuw kunnen openen.

**Selector**

```
button.widget {

}
```

**Voorbeeld van aanpassing**

```
button.widget {
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
```

### Conclusie

Met de bovenstaande selectors heb je volledige controle over het uiterlijk van elk onderdeel van de webtoegankelijkheid, zodat het past bij je merk en designsysteem.