Om de content van een website te controleren gebruik ik aangepaste CSS-stijlen. Deze stijlen gebruik ik samen met de browserextensie Stylus (download voor Firefox of Chrome). Hiermee kun je de stijlen gemakkelijk aan- en uitzetten.
- Controleer koppen
- Controleer lijsten
- Controleer tabellen
- Controleer tekst
- Controleer landmarks
- Controleer ARIA
- Maak focus zichtbaar
- Pas tekstafstand aan
Of importeer het JSON-bestand (JSON, 18KB) in Stylus.
Controleer koppen
h1,
h2,
h3,
h4,
h5,
h6,
[role="heading"] {
outline: 4px dashed #d91f11 !important;
}
h1:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h1>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h2:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h2>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h3:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h3>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h4:before {
background: #d91f11 !important;
color: #ffffff ! important;
content: "<h4>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h5:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h5>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
h6:before {
background: #d91f11 !important;
color: #ffffff !important;
content: "<h6>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Controleer lijsten
ul,
ol,
dl,
[role="list"] {
outline: 4px dashed #3c7d0e !important;
}
ul:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<ul>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
ol:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<ol>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
dl:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<dl>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
li:before {
background: #3c7d0e!important;
color: #ffffff !important;
content: "<li>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
dt:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<dt>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
dd:before {
background: #3c7d0e !important;
color: #ffffff !important;
content: "<dd>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Controleer tabellen
table,
tr,
th,
td,
[role="table"] {
outline: 4px dashed #067a91 !important;
}
table:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<table>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
display: table-caption;
}
tr:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<tr>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
th:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<th>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
td:before {
background: #067a91 !important;
color: #ffffff !important;
content: "<td>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Controleer tekst
p,
strong,
em,
blockquote,
code {
outline: 4px dashed #f5c518 !important;
}
p:before {
background: #f5c518 !important;
color: #000000 !important;
content: "<p>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
strong:before {
background: #f5c518 !important;
color: #000000 !important;
font-weight: normal;
content: "<strong>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
em:before {
background: #f5c518 !important;
color: #000000 !important;
text-decoration: none;
content: "<em>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
blockquote:before {
background: #f5c518 !important;
color: #000000 !important;
content: "<blockquote>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
code:before {
background: #f5c518 !important;
color: #000000 !important;
content: "<code>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
a[href],
[role="link"],
button,
[role="button"] {
outline: 4px dashed #186ade !important;
}
a[href]:before {
background: #186ade !important;
color: #ffffff !important;
content: "<a>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
button:before {
background: #186ade !important;
color: #ffffff !important;
content: "<button>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
Controleer landmarks
header,
[role="header"],
nav,
[role="navigation"],
main,
[role="main"],
aside,
[role="complementary"],
section,
[role="region"],
article,
[role="article"],
footer,
[role="contentinfo"] {
outline: 4px dashed #cc1d92 !important;
}
header:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<header>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
nav:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<nav>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
main:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<main>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
aside:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<aside>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
section:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<section>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
article:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<article>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
footer:before {
background: #cc1d92 !important;
color: #ffffff !important;
content: "<footer>" !important;
width: auto !important;
height: auto !important;
position: relative !important;
}Controleer ARIA
[role=toolbar],
[role=tooltip],
[role=feed],
[role=math],
[role=presentation],
[role=none],
[role=note],
[role=application],
[role=article],
[role=cell],
[role=columnheader],
[role=definition],
[role=directory],
[role=document],
[role=figure],
[role=group],
[role=heading],
[role=img],
[role=list],
[role=listitem],
[role=meter],
[role=row],
[role=rowgroup],
[role=rowheader],
[role=separator],
[role=table],
[role=term],
[role=alertdialog],
[role=dialog],
[role=banner],
[role=complementary],
[role=contentinfo],
[role=form],
[role=main],
[role=navigation],
[role=region],
[role=search],
[role=scrollbar],
[role=searchbox],
[role=separator],
[role=slider],
[role=spinbutton],
[role=switch],
[role=tab],
[role=tabpanel],
[role=treeitem],
[role=combobox],
[role=menu],
[role=menubar],
[role=tablist],
[role=tree],
[role=treegrid],
[role=alert],
[role=log],
[role=marquee],
[role=status],
[role=timer],
[aria-busy],
[aria-live],
[aria-relevant],
[aria-atomic],
[aria-autocomplete],
[aria-checked],
[aria-disabled],
[aria-errormessage],
[aria-expanded],
[aria-haspopup],
[aria-hidden],
[aria-invalid],
[aria-label],
[aria-level],
[aria-modal],
[aria-multiline],
[aria-multiselectable],
[aria-orientation],
[aria-placeholder],
[aria-pressed],
[aria-readonly],
[aria-required],
[aria-selected],
[aria-sort],
[aria-valuemax],
[aria-valuemin],
[aria-valuenow],
[aria-valuetext],
[aria-activedescendant],
[aria-colcount],
[aria-colindex],
[aria-colspan],
[aria-controls],
[aria-describedby],
[aria-description],
[aria-details],
[aria-errormessage],
[aria-flowto],
[aria-labelledby],
[aria-owns],
[aria-posinset],
[aria-rowcount],
[aria-rowindex],
[aria-rowspan],
[aria-setsize],
[aria-dropeffect],
[aria-grabbed]{
outline: 3px dashed #8f49de !important;
}Maak focus zichtbaar
Blauw
a:focus,
*:focus {
outline: 4px solid royalblue !important;
outline-offset: 1px !important;
}Groen
a:focus,
*:focus {
outline: 4px solid limegreen !important;
outline-offset: 1px !important;
}Rood
a:focus,
*:focus {
outline: 4px solid crimson !important;
outline-offset: 1px !important;
}Pas tekstafstand aan
* {
line-height: 1.5 !important;
letter-spacing: .12em !important;
word-spacing: .16em !important;
}
p {
margin-bottom: 2em !important;
}