Accessible custom styled form elements

HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible? Here’s my point of view.

The challenge

HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, based on two different approaches:

  1. Hide the form elements from sight and apply the styling on a container or related element
  2. Hide the form elements from sight and rewrite the functionality, using styleable elements like <div>s and JavaScript

Continue reading “Accessible custom styled form elements”

Accessibility in the Age of the Headless CMS

 Intro

A few months ago I asked in the Human Made general Slack channel: “What shall I talk about at WordCamp Europe?”
And the honourable Ant Miller replied: “Accessibility in the age of the headless CMS.”

React logoGreat, I thought. A new subject, much to learn and tell about, I started to read up on the subject. And then I realised: oh no, I have to learn React!

Continue reading “Accessibility in the Age of the Headless CMS”

WordPress, state of the Accessibility 2016

How accessible is WordPress now (2016), which improvements were made in the last years and what still needs to be done? Where can you find help and documentation to improve your code? What are the new Accessibility Standards, added to the WordPress Coding Standards?

How accessible is WordPress now, which improvements were made in the last years and what still needs to be done? Where can you find help and documentation to improve your code? What are the new Accessibility Standards, added to the WordPress Coding Standards?

This post is written for my presentation at WordCamp Europe 2016 in Vienna. You can find the Slides at Slideshare and the video on WordPress.tv. Continue reading “WordPress, state of the Accessibility 2016”

Workshop Keyboard Navigation

Short workshop on how to navigate a website with a keyboard only.

The basics

  • Tab: Move forward from link to link or to controls
  • Shift + Tab: Move backward from link to link or to controls
  • Enter: Activate links, buttons, or other interactive elements
  • Arrow: Navigate radio buttons and select boxes and scroll up and down a page
  • Spacebar: Activate radio buttons and check boxes and buttons

Continue reading “Workshop Keyboard Navigation”