Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Tips
voor toegankelijke
WordPress-sites
(Paul van Buuren –
Rotterdam, 20 juni 2016)
Paul van Buuren
• @paulvanbuuren
• 1998
• 2007
• Accessibility
• Interactie ontwerp
• Freelance
Stukje publieksparticipatie
Een
website…
It's Easy
M'kay?
Gebruikers
(dus niet: bezoekers)
Soorten gebruikers (1)
• Beginnelingen
Soorten gebruikers (2)
• Gevorderde gebruikers
Soorten gebruikers (3)
• De make-up artists
Soorten gebruikers (3)
• Betweters
?
?
Voor elke gebruiker:
Voor beginnelingen
• De basics
• IRL
• WP-rol: author
• Herhalen
• Herhalen
• En nog eens herhalen
Voor gevorderde gebruikers
• Video
• Ruimte voor experiment
• WP-rol: editor / administrator
Voor make-up artists
• Gek op vormgeving
• Foto’s
• Structuur en beperking
• Heel nuttig woord voor hen:
Voor betweters
• “Iets heel simpels”
• Structuur
• Speeltuin
• WP-rol: editor / administrator
Toegankelijkheid
• Waarneembaar
• Bedienbaar
• Begrijpelijk
• Robuust
See: Introduction to Understanding WCAG 2.0
Developers:
Check:
"An Alphabet of
Accessibility Issues"
Content
creators:
Check ook:
"An Alphabet of
Accessibility Issues"
En betweters..
Voor jou zeker:
"An Alphabet of
Accessibility Issues"
Aandachtspunten en
tips
Leesniveau, structuur, links, images, animaties,
Leesniveau
https://www.accessibility.nl/kennisbank/tools/leesniveau-tool/leesniveaus
Leesniveau
Taalniveau B1:
• duidelijke titel en tussenkoppen;
• actieve schrijfstijl met voorbeelden;
• eenvoudige woorden...
Paginastructuur
Paginastructuur
Paginastructuur
Paginastructuur
Hack de editor
Standaard WYSIWYG editor
Tip 1: herkenbare fonts
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style> body, td, ...
Tip 2: een stylesheet voor de editor
add_action('init', 'my_theme_add_editor_styles');
function my_theme_add_editor_styles...
Filter
add_filter('tiny_mce_before_init',
'admin_set_tinymce_options');
[…]
https://codex.wordpress.org/Plugin_API/Filter_...
Tip 3: weg met H1
function admin_set_tinymce_options(
$settings ) {
$settings['theme_advanced_blockformats
'] = 'p,h2,h3,h...
Tip 4: weg met onnodige opties
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['theme_advanced_disable']...
Tip 5: slechts 1 optiebalk
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['toolbar1'] =
'italic,|,bulli...
Tip 5: slechts 1 optiebalk
function admin_set_tinymce_options(
$settings ) {
[...]
$settings['toolbar2'] = '';
[...]
}
Tip 6: pas de editor aan:
beschrijvingen
function admin_set_tinymce_options(
$settings ) {
[...]
$settings[block_formats']...
Tip 7: extra opmaakmogelijkheden
function admin_set_tinymce_options(
$settings ) {
$settings[style_formats'] = '[
{title: ...
Voor & na
Voor & na
Handige plugin
Bij tip 2: waarschuwing in de CSS
span[style="color: #800080;"],
span[style="color: #880080"] {
&, a {
color: red !importa...
Bij tip 2: waarschuwing in de CSS
Bij tip 2: waarschuwing in de CSS
Bij tip 2: waarschuwing in de CSS
Links
• Ehm, click here?
• Hreflang attribuut
• :focus
:active
:hover
• outline
Plaatjes
• Illustratief
• Niet alleen uitleggen met plaatjes
• Alt-attribuut
Plaatjes
• Beschrijvingen
• Alt-attribuut
Plaatjes
Redesign van
internet.nl
(HTML preview at: internet.nerdnerd.nl)
Plaatjes
• Geen plaatjes
Plaatjes
• Hoog contrast
Plaatjes
• Geen JavaScript
Animaties
• See gist for code (or: wbvb.nl/animation)
• Live: https://www.ibewustzijnoverheid.nl
Kort & goed:
• Gebruikers
• Beginnelingen / gevorderde gebruikers / make-up artists / betweters
• Toegankelijkheid
• Waarn...
Even iets anders
• Chantal: 1900 kilometer fietsen voor KWF
• Doel: 1900 euro
• STEUN
acties.kwf.nl/bebravebeepicfightcanc...
Vragen?
• Zie:
wbvb.nl/hit-any-user-to-
continue/
/contact
• Site: wbvb.nl
• Twitter: @paulvanbuuren
• Mail: paul@wbvb.nl
tegelizr.nl
Hit any user to continue (nld)
Hit any user to continue (nld)
Hit any user to continue (nld)
Hit any user to continue (nld)
Hit any user to continue (nld)
Upcoming SlideShare
Loading in …5
×

Hit any user to continue (nld)

678 views

Published on

Tips en trucs om WordPress-gebruikers te leren toegankelijke content te maken.

Published in: Technology
  • Be the first to comment

Hit any user to continue (nld)

  1. 1. Tips voor toegankelijke WordPress-sites (Paul van Buuren – Rotterdam, 20 juni 2016)
  2. 2. Paul van Buuren • @paulvanbuuren • 1998 • 2007 • Accessibility • Interactie ontwerp • Freelance
  3. 3. Stukje publieksparticipatie
  4. 4. Een website… It's Easy M'kay?
  5. 5. Gebruikers (dus niet: bezoekers)
  6. 6. Soorten gebruikers (1) • Beginnelingen
  7. 7. Soorten gebruikers (2) • Gevorderde gebruikers
  8. 8. Soorten gebruikers (3) • De make-up artists
  9. 9. Soorten gebruikers (3) • Betweters
  10. 10. ?
  11. 11. ? Voor elke gebruiker:
  12. 12. Voor beginnelingen • De basics • IRL • WP-rol: author • Herhalen • Herhalen • En nog eens herhalen
  13. 13. Voor gevorderde gebruikers • Video • Ruimte voor experiment • WP-rol: editor / administrator
  14. 14. Voor make-up artists • Gek op vormgeving • Foto’s • Structuur en beperking • Heel nuttig woord voor hen:
  15. 15. Voor betweters • “Iets heel simpels” • Structuur • Speeltuin • WP-rol: editor / administrator
  16. 16. Toegankelijkheid • Waarneembaar • Bedienbaar • Begrijpelijk • Robuust See: Introduction to Understanding WCAG 2.0
  17. 17. Developers: Check: "An Alphabet of Accessibility Issues"
  18. 18. Content creators: Check ook: "An Alphabet of Accessibility Issues"
  19. 19. En betweters.. Voor jou zeker: "An Alphabet of Accessibility Issues"
  20. 20. Aandachtspunten en tips Leesniveau, structuur, links, images, animaties,
  21. 21. Leesniveau https://www.accessibility.nl/kennisbank/tools/leesniveau-tool/leesniveaus
  22. 22. Leesniveau Taalniveau B1: • duidelijke titel en tussenkoppen; • actieve schrijfstijl met voorbeelden; • eenvoudige woorden die iedereen kent; • korte en duidelijke zinnen.
  23. 23. Paginastructuur
  24. 24. Paginastructuur
  25. 25. Paginastructuur
  26. 26. Paginastructuur
  27. 27. Hack de editor
  28. 28. Standaard WYSIWYG editor
  29. 29. Tip 1: herkenbare fonts add_action('admin_head', 'my_custom_fonts'); function my_custom_fonts() { echo '<style> body, td, textarea, input, select { font-family: "Lucida Grande"; font-size: 12px; } </style>'; }
  30. 30. Tip 2: een stylesheet voor de editor add_action('init', 'my_theme_add_editor_styles'); function my_theme_add_editor_styles () { add_editor_style( 'css/editor-style.css' ); }
  31. 31. Filter add_filter('tiny_mce_before_init', 'admin_set_tinymce_options'); […] https://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
  32. 32. Tip 3: weg met H1 function admin_set_tinymce_options( $settings ) { $settings['theme_advanced_blockformats '] = 'p,h2,h3,h4,h5,h6,q,hr'; [...] }
  33. 33. Tip 4: weg met onnodige opties function admin_set_tinymce_options( $settings ) { [...] $settings['theme_advanced_disable'] = 'underline,forecolor,justifyfull'; [...] }
  34. 34. Tip 5: slechts 1 optiebalk function admin_set_tinymce_options( $settings ) { [...] $settings['toolbar1'] = 'italic,|,bullist,numlist,blockquote,|,lin k,unlink,|,spellchecker,|,formatselect,sty leselect,paste,removeformat,cleanup,|,undo ,redo,hr,fullscreen'; [...] }
  35. 35. Tip 5: slechts 1 optiebalk function admin_set_tinymce_options( $settings ) { [...] $settings['toolbar2'] = ''; [...] }
  36. 36. Tip 6: pas de editor aan: beschrijvingen function admin_set_tinymce_options( $settings ) { [...] $settings[block_formats'] = ’Header H2 =h2;Header H3=h3;Header H4=h4;Paragraph=p;Quote=q'; [...] }
  37. 37. Tip 7: extra opmaakmogelijkheden function admin_set_tinymce_options( $settings ) { $settings[style_formats'] = '[ {title: "Streamer", block: "aside", classes: "pullquote"}, {title: "Infoblok", block: "div", classes: "infoblock"}]'; [...] }
  38. 38. Voor & na
  39. 39. Voor & na
  40. 40. Handige plugin
  41. 41. Bij tip 2: waarschuwing in de CSS span[style="color: #800080;"], span[style="color: #880080"] { &, a { color: red !important; background: black; } &:before { content: 'Achtung baby!!! You are doing it wrong. '; [...] } }
  42. 42. Bij tip 2: waarschuwing in de CSS
  43. 43. Bij tip 2: waarschuwing in de CSS
  44. 44. Bij tip 2: waarschuwing in de CSS
  45. 45. Links • Ehm, click here? • Hreflang attribuut • :focus :active :hover • outline
  46. 46. Plaatjes • Illustratief • Niet alleen uitleggen met plaatjes • Alt-attribuut
  47. 47. Plaatjes • Beschrijvingen • Alt-attribuut
  48. 48. Plaatjes Redesign van internet.nl (HTML preview at: internet.nerdnerd.nl)
  49. 49. Plaatjes • Geen plaatjes
  50. 50. Plaatjes • Hoog contrast
  51. 51. Plaatjes • Geen JavaScript
  52. 52. Animaties • See gist for code (or: wbvb.nl/animation) • Live: https://www.ibewustzijnoverheid.nl
  53. 53. Kort & goed: • Gebruikers • Beginnelingen / gevorderde gebruikers / make-up artists / betweters • Toegankelijkheid • Waarneembaar, bedienbaar, begrijpelijk, robuust • Hack de editor • CSS, minder = meer • Leesniveau, paginastructuur, links, images, animaties
  54. 54. Even iets anders • Chantal: 1900 kilometer fietsen voor KWF • Doel: 1900 euro • STEUN acties.kwf.nl/bebravebeepicfightcancer
  55. 55. Vragen? • Zie: wbvb.nl/hit-any-user-to- continue/
  56. 56. /contact • Site: wbvb.nl • Twitter: @paulvanbuuren • Mail: paul@wbvb.nl tegelizr.nl

×