Looking back on 2015 and forward to 2016

Last year I changed the focus of my company. I wanted to do web accessibility related work only. The plan was to:

  • build and maintain accessible websites only
  • give accessibility training to web developers and graphic designers
  • help developers and companies fixing accessibility issues
  • give talks on WordCamps and Meetups
  • keep contributing to WordPress

So, what became of my plans?

Accessible websites only

This year I build game-accessibility.com, doofblind.nl and rebuild oogvereniging.nl. All accessible and oogvereniging.nl is officially certified WCAG 2 AA by the Dutch Accessibility Foundation.

Homepage website game accessibility

But to keep the wolf from the door, I needed more work. Therefore I’ve build several websites as accessible as possible, but had to make (sometimes huge) concessions to meet the customers wishes. No I’m not listing them here.

Web accessibility training

The developers of Yoast, Yard Internet and Geev all got a training. That was so much fun to do. It strengthens me in the opinion that developers and designers do care account accessibility, they just don’t have a clue what’s important. Letting Apple VoiceOver read their website out loud, is always a good eye opener and a way to create awareness.

Fix accessibility

CopyBlogger asked Graham Armfield and me to improve the accessibility of the Genesis Framework. We set as standard: Genesis and the Sample Theme needs to be WCAG 2 AA accessible. Graham did an audit and I made the code fixes, with the help of many other Genesis developers. In August Genesis 2.2 and a new Sample Theme were released with all the necessary  a11y changes.

Contributing to WordPress

Last year Andrea Fercia joined the accessibility team. His extensive work on WordPress core gave us a big boost. He asked for testers with different assistive technology and we assembled a team of 75 volunteers who regular test WordPress on a11y issues. For this work Andrea and I got recent rockstar credits for the 4.3 release, Andrea became a core committer, and even Matt Mullenweg knows our names apparently. The team grew and works well now.

Ryan D. Sullivan from WP Site Care was very generous and payed for Andrea’s and my trip to WordCamp US in Philadelphia, where we attended the Community Summit with the rest of the accessibility team.

summit-2015.png

We wrote the accessibility code standards for WordPress core and got the support of several core developers. This means that everything that gets into WordPress core, needs to be WCAG 2 AA accessible. A result I’m really proud of.

Furthermore, this year I gave talks at:

Lessons learned

For a new website I will only work with a project / content manager I trust and a web designer that knows accessibility or wants to be trained to be one.

Never ever let a graphic designer do wireframes or take decisions with the client without me, because this results in me struggling to code stuff I strongly disagree with.

Maintaining over 30 WordPress websites (and discussing stuff with 30 website owners) is too much noise in my head. I need to consider handing over the maintenance of some websites to other WordPress agencies.

Make more time to maintain and give support for the plugin Genesis Accessible. This takes up more time than I thought, therefore I need to include it’s support and development into my weekly routine.

Plans for next year

Focus even more what I really like to do:

  1. Train and educate WordPress developers with the WPDC
  2. Code accessible websites with a good project manager
  3. Maintain the plugin Genesis Accessible
  4. Be part of the WordPress accessibility team
  5. Give talks on WordCamps and Meetups
  6. Finish my book on accessible theme development with Genesis
  7. And study my ass of… duh…

The website oogvereniging.nl is expanding and growing. I love to work on this site, so I will keep doing this. I will look at my other websites and decide this year which ones I keep and which ones I will hand over to other agencies.

The need for accessible websites is increasing in the Netherlands, so this year I plan to do accessible sites with a project manager I know and trust.

The work on Genesis Accessible and the WordPress accessibility team will also stay an important part of my work. It costs time but it’s fun, necessary and good for my PR. Just like giving talks on WordCamps and Meetups and writing a book. Let’s see if I can find the courage of speaking at WordCamp US this year, need to think about that.

Last year has been a good year. I hope 2016 will bring me even further on the path I decided to take: let’s get WordPress accessible and make money on the way.

Happy New Year everyone!

Fix the accessibility of your Genesis responsive menu

The Genesis Framework is my favorite tool to build a WordPress website. And with the next update (version 2.2) a lot of accessibility features and fixes will be added. But a framework is no child theme.
The HTML5 themes you can purchase with StudioPress have a beautiful responsive menu for the primary navigation. And that menu is completely inaccessible for keyboard and screen reader users.

What’s wrong?

The HTML code to show the responsive menu is:

 <div class="responsive-menu-icon"></div>

A div is not focusable, if you tab though a page the menu is skipped and you have no way to open it, only by using a mouse. And also the div is an empty container, with no content.

What needs to be changed?

  1. Change the <div> to a <button>, a button is focusable and clickable
  2. Add some text inside the  <button></button> to tell a screen reader user what the button is about. You can make this visibly hidden by using the screen-reader-text class
  3. Tell a screen reader user if the menu is open or closed by adding dynamically aria-expanded=”false” or aria-expanded=”true”

How can you do that?

The Genesis child themes use js/responsive-menu.js (GitHub) to show the responsive menu.
Change this JavaScript into for example:

jQuery(function( $ ){

 $(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<button class="responsive-menu-icon" aria-expanded="false"><span class="screen-reader-text">Menu</span></button>');

 $(".responsive-menu-icon").click(function(){
 var _this = $( this );
 _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
 $(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").slideToggle();
 });

 $(window).resize(function(){
 if(window.innerWidth > 768) {
 $("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
 $(".responsive-menu > .menu-item").removeClass("menu-open");
 }
 });

 $(".responsive-menu > .menu-item").click(function(event){
 if (event.target !== this)
 return;
 $(this).find(".sub-menu:first").slideToggle(function() {
 $(this).parent().toggleClass("menu-open");
 });
 });

});

See an other accessible example of an Accessible Genesis responsive-menu.js at GitHub. With the visual text “Menu” (I hate hamburgers) and a leading heading.

You have to add the screen-reader-text class and maybe change the CSS .responsive-menu-icon to style the button so it fits your theme.

So: by changing a few lines of JavaScript and adding a few lines of CSS you turn your responsive menu into a perfectly accessible awesome responsive menu.

Discussion

Yes, this is a quick and dirty fix. There’s now untranslatable hardcoded text in the JavaScript, this could be done way better and cleaner. But you’ve got the picture of what needs to be changed. If you are a JavaScript pro: all help is welcome 🙂

Teaching WordPress to 23 visually impaired content managers

The Oogvereniging (Eye association) has a WordPress WCAG 2.0 AA website that is maintained by more than 20 volunteers, all with different visual impairments. Teaching them in one afternoon how to use WordPress for adding and maintaining content was not an easy task. Continue reading “Teaching WordPress to 23 visually impaired content managers”

Uitgaande links meten met Google Analytics

Hoe Kun je in Google Analytics uitgaande links bijhouden, bijvoorbeeld voor adverteerders die willen weten hoe vaak op hun banner is geklikt? Een hele eenvoudige manier is via een trackingcode in de JavaScript van Google. Vervolgens kunt aan de betreffende link een stukje JavaScript toevoegen om de teller te activeren.

Continue reading “Uitgaande links meten met Google Analytics”

Waarschuwing: Geef niet zomaar je advertentietarieven weg

Als je een website hebt waarop je advertenties plaatst, is het altijd fijn een mail te krijgen waarin een bedrijf vraagt op de site te mogen adverteren. Maar pas op. Deze belangstelling kan ook misleiding zijn.

Als je een website hebt waarop je advertenties plaatst, is het altijd fijn een mail te krijgen waarin een bedrijf vraagt op de site te mogen adverteren. Maar pas op. Deze belangstelling kan ook misleiding zijn.
Sommige bedrijven willen alleen uitvissen wat je tarieven zijn, ook dat is geld waard. Leuk is anders. Ook zo’n mail gekregen? Vraag dan eerst meer informatie: om welke advertenties of persberichten gaat het? Adverteert het bedrijf ook op andere websites? Pas als je serieus antwoord krijgt kun je overwegen de tarieven te sturen. Een ander idee is om op de website een globale indicatie te vermelden en daarnaar te verwijzen, met de mededeling dat je voor meer informatie wilt opbellen. Continue reading “Waarschuwing: Geef niet zomaar je advertentietarieven weg”

Keywords of zoekwoorden analyseren

Ranks.nl bied een groot aantal tools voor het controleren van de inhoud van een website op keywords

Ranks.nl biedt een groot aantal tools voor het controleren van de inhoud van een website op keywords. Hoe ziet de zoekmachine de inhoud van je website, welke keywords zijn blijkbaar belangrijk?
Vul de url van je website in en Rank.nl analyseert de inhoud.
Continue reading “Keywords of zoekwoorden analyseren”