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 🙂

Storytelling in HTML: practical accessibility

A web page can be perfectly WCAG 2 proof, but if it doens’t tell a story, it’s still a puzzle for people that depend on a braille line or a screen reader.
Set yourself in the place of someone who get’s your web page read out loud linearly and the only clue she has on what the structure is, are headings and links.

For my work I build sites for blind people. They use a braille line and screen reader to read and navigate a website. During the development of those websites I learned that blind people read a web page differently than I do.

Blind web users read a page linearly and depend on headings and links to navigate.

This changed the way I build site dramatically, I changed from visual coding to story telling coding. Continue reading “Storytelling in HTML: practical accessibility”

How to set up an accessible form using Contact Form 7 in WordPress

Recently I discovered Contact Form 7 (CF7) by Takayuki Miyoshi. A plugin to create forms on a WordPress website. I was looking for an accessible alternative for Gravity Forms, and discovered that Contact Form 7 does an excellent job! Continue reading “How to set up an accessible form using Contact Form 7 in WordPress”

Literatuurstudie: hoe maak ik een HTML tabel responsive

Om een HTML tabel goed leesbaar weer te geven (responsive) op een tablet of smartphone is er een aantal technieken mogelijk:

  1. Voeg een horizontale scrollbalk toe
  2. Verberg minder belangrijke kolommen
  3. Verander de layout van de tabel
  4. Of een combinatie van deze technieken

Continue reading “Literatuurstudie: hoe maak ik een HTML tabel responsive”

Geen sifr, geen cufon maar Font-face!

De laatste bijdrage van onze (nu ex-)stagiaire Rick Leyten: Na de fijne ervaring met sifr *ahum* besloot ik om te gaan zoeken naar een vervanging en die vond ik!
De makers van font-face maken het zo makkelijk dat echt het geen flash nodig heeft om te functioneren. Sterker nog iedereen met een geupdate browser (op Opera na.. dit komt binnenkort) ziet deze fonts. Continue reading “Geen sifr, geen cufon maar Font-face!”

Gravity Form met een dynamische input

Voor een project bij RRWD web development, moest ik een functionaliteit bedenken i.v.m. het ontwerp van een nieuwe WordPress website. In dit grafisch ontwerp stond in de sidebar een drop down menu met een submit button. Je kunt in dit geval een afspraak maken en alvast aangeven waar het over gaat. Dus zou het mooi zijn als de aangegeven reden van afspraak onthouden zou worden en meegestuurd werd naar het afspraak-formulier. Dit staat niet standaard in Gravity Forms, dus moest ik uit zoeken hoe we dit voor elkaar krijgen. Continue reading “Gravity Form met een dynamische input”

Toegankelijke tabelgenerator bij accessibility.nl

Een goede toegankelijk kolom is altijd weer een hele klus, vooral als je het niet dagelijks doet. Genereer online de HTML-code voor een geode, gevalideerde tabel.

Een goede toegankelijk kolom is altijd weer een hele klus, vooral als je het niet dagelijks doet. Genereer online de HTML-code voor een goede, gevalideerde tabel.
Op accessibility.nl kun je in drie stappen de HTML maken.

  1. Geef het aantal rijen en kolommen
  2. Vul de caption, summary en de titels van de kolom en rijkoppen in
  3. Copy-paste de HTML

Mooi tooltje.

Integreren YouTube filmpjes volgens XHTML strict

Hoe zet ik een YouTube filmpje op mijn website en maak ik de code XHTML 1.0 Strict valide

Als je een YouTube-fimpje in de XHTML wilt integregen kun je van de de code die YouTube verstrekt kopieren in de XHTML. Deze code valideert echte niet omdat de tag embed geen deel uitmaakt van de specificaties. Embed wordt uitgelezen door niet Explorer browsers. Maar het kan ook alleen met de object-tag.

Drew McLellan heeft op A List Apart uitgelegd hoe het wel voor alle browsers werkt.

xhtml voor veergave youtube

Je kunt de grootte via het stylesheet definieerden met de class “youtube”

Gerelateerde links en bronnen

Fix outlook

E-mailprogramma Outlook 2010 zal Microsoft Word gebruiken om e-mails met HTML te maken en af te beelden. Dat is al het geval in Office 2007.  Dus: opmaak in tabellen, geen floating divs… Nu Microsoft ook in de volgende versie Word gaat gebruiken, is er een protest ontstaan. Kun je eindelijk wat zinnigs doen met je twitter-account, protesteer! Of zeg het rechtstreeks tegen Bill.

Continue reading “Fix outlook”