Greg ipsum

Kouign Amann in my blood

0 notes &

Accessibilité clavier : Round 2.

Salut!

La dernière fois j’ai écris sur l’accessibilité au clavier des menus de mon header, en utilisant quelques rôles ARIA: menubar, menu, memnuitem, et évidemment grâce à l’attribut tabindex.

Cette fois c’est un peu différent, nous allons voir ensemble la navigation clavier pour les onglets !

Contexte

J’ai à présent un menu de header accessible avec des sous menus en cascade (dropdown).

Sur une page specifique je veux pouvoir gérer les sous-parties et différents formulaire avec des onglets, pour plus de clarté.

Le code

Le template de vue utilise SLIM:

J’ai simplifié un peu le code pour le confort de lecture.

    
  .row
    .col-lg-12.col-md-12
      .widget.widget-tabs
        .header
          ul.nav.nav-tabs role="tablist"
            li.active role="tab" aria-controls="#projects" id="tab-projects" tabindex=0
              a data-toggle="tab" href="#projects"
                = t(:title, scope: :projects)
            li role="tab" aria-controls="#team" id="tab-team" tabindex=0
              a data-toggle="tab" href="#team"
                = t(:team, scope: :accounts)
            li role="tab" aria-controls="#edit" id="tab-edit" tabindex=0
              a data-toggle="tab" href="#edit"
                = t(:settings, scope: :accounts)
            li role="tab" aria-controls="#subscription" id="tab-subscription" tabindex=0
              a data-toggle="tab" href="#subscription"
                = t(:title, scope: :subscription)

        .body.tab-content
          #projects.tab-pane.active role="tabpanel" aria-labeled-by="tab-projects"
            = render partial: "account_projects"
          #team.tab-pane role="tabpanel" aria-labeled-by="tab-team"
            = render partial: "account_team"
          #edit.tab-pane role="tabpanel" aria-labeled-by="tab-edit"
            = render partial: "account_edit"
          #subscription.tab-pane role="tabpanel" aria-labeled-by="tab-subscription"
            = render partial: "account_subscription"
    

Le code CoffeeScript:

J’écoute les évenements keypress pour chaque onglet, et gère la “flèche droite” comme le TAB, et la “flèche gauche” comme le SHIFT+TAB: passer au prochain/précédant contenu d’onglet respectivement.

  
  # Tabbed menu with tablist, tab, tabpanels.
  first_tab = $("li[role='tab']:first").attr 'id'
  $("li[role='tab']").on 'keypress', (ev) ->
    link = $(this).find('a:first')
    this_id =  $(this).attr 'id'
    if !((ev.key is 'Tab') && ev.shiftKey && this_id == first_tab)
      if ev.key is 'Tab'
        if ev.shiftKey
          if this_id != first_tab
            $("li[role='tab']:focus").prev().focus().find('a[data-toggle="tab"]:first').trigger("click")
        else
          $("li[role='tab']:focus").next().focus().find('a[data-toggle="tab"]:first').trigger("click")
      else if ev.key is 'Right'
        $(this).next().attr("aria-selected", "true").focus().find('a[data-toggle="tab"]:first').trigger("click")
      else if ev.key is 'Left'
        $(this).prev().attr("aria-selected", "true").focus().find('a[data-toggle="tab"]:first').trigger("click")

      ev.preventDefault() && ev.stopPropagation()

      $(this).attr "aria-selected", "false"
      tabpanid = $("li[aria-selected='true']").attr("aria-controls")
      tabpan = $(tabpanid)
      $("div[role='tabpanel']").attr "aria-hidden", true
      tabpan.attr "aria-hidden", false

    return
  

Comme on utilise Twitter bootstrap le passage d’un onglet à l’autre est fait par un simple click sur le lien de l’onglet.

Le truc est à la 6ème ligne, vous devez ne rien faire si vous êtes sur le premier onglet et qu’un SHIFT+TAB à lieu, pour permettre de retourner sur les menus précédant le panneau d’onglet. C’est pour cela que j’enregistre le premier onglet à la 2ème ligne.

Conclusion

Comme précédement le résultat est sur https://www.orbitalboard.com, une fois connecté.

Comme toujours, si vous avez des remarques, des questions, et évidemment une meilleur solution un un meilleur code je serais ravis de le lire ! :)

Classé dans coffeescript accessibility keyboard

0 notes &

Rendre une appli web accessible au clavier.

Hello,

Comme vous le savez je bosse sur Orbital Board et souhaite en faire un produit accessible à tous.

Aujourd’hui je vais donc vous parler de la navigation d’une appli web au clavier !

Prenons pour aquis que nous sommes tous d’accord sur le fait que l’accessibilité est importante et qu’on fait tous de notre mieux à notre niveau :)

Contexte

Sur Orbital Board j’ai utilisé un framework CSS : Twitter bootstrap, ajouté un peu d’ARIA là où il faut (labeled-by, described-by, roles, etc), fait 2-3 tests avec Fangs, le lecteur d’écran de mon OS et les validateurs existants (w3C, wave, opquast, etc).

Évidement tout cela ne remplacera pas des spécialistes de l’accessibilité pour auditer et améliorer ce qui doit l’être, mais tout se paye et quand on est sans moyens, y compris ceux de se payer soi-même, on fait comme on peut ;)

La navigation au clavier

Par défaut, les headers menus avec dropdown de Twitter bottstrap sont très bien, responsive et tout, mais ne fonctionnent pas avec le clavier.

Les seuls éléments navigables au claviers sont les boutons déclarés comme tel et les “inputs” de formulaire.

Après quelques recherches je suis tombé sur https://github.com/paypal/bootstrap-accessibility-plugin mais ça ne fonctionnait pas pour ce projet.

Peut être parce que j’utilise un thème Bootstrap et que la structure du header n’est plus celle par défaut.

Toujours est-il que j’en suis vite venu a faire ça moi même avec des tabindex et quelques rôles ARIA : aria-expanded, menu-item, menubar, menu.

Voici le code de mon header : (simplifié et en SLIM)

    
header.page-header role='banner'
  nav.navbar role='navigation'
    ul.nav.navbar-nav.navbar-menu.navbar-left.pull-left role='menubar'

      li.dropdown role='presentation' tabindex=0 aria-haspopup="true" aria-expanded="false"
        a.dropdown-toggle data-toggle="dropdown" href="#" role='menuitem' tabindex=-1
          i.fa.fa-rocket
          span.hidden-xs
            | 
            = t(:title, scope: :projects)
        ul.dropdown-menu.support role="menu" aria-labelledby=t(:title, scope: :projects) tabindex=-1
          li role="presentation"
            a role="menuitem" tabindex=-1
              strong Menu 1
          li.divider role="presentation"
          li role="presentation"
            a role="menuitem" tabindex=-1
              strong Menu 2
          li.divider role="presentation"
          li role="presentation"
            a role="menuitem" tabindex=-1
              strong Menu 3
          li.divider role="presentation"
          li role='presentation
            a role="menuitem" tabindex=-1 Another Menu
      li.divider
      li role='presentation' tabindex=0
        a role: 'menuitem' Yet another Menu
    
    

Et le CoffeeScript associé :

  
    $ ->

      $('li[role="presentation"]').on 'keypress', (e) ->

        if e.key == " " || e.key == "Enter"
          link = $(this).find('a:first')
          if link.attr('data-toggle') == 'dropdown' || link.attr('data-method') == 'delete'
            link.trigger ("click")
          else
            window.location = link.attr 'href'

          e.preventDefault() && e.stopPropagation()

          if $(this).hasClass('open')
            $(this).attr('aria-expanded', true)
          else
            $(this).attr('aria-expanded', false)

        else if e.key == "Tab"
          $("li.dropdown").removeClass('open').attr('aria-expanded', false)
    

Maintenant mon header et ses menus dropdown sont “focusables” au clavier, et la barre d’espace permet de déplier le menu pour naviguer dedans et en déclencher les liens.

Ce code peut surement être amélioré et la solution elle même peut ne pas être idéale. Je gravis les échelons de l’accessibilité pas à pas, alors soyez indulgents ;)

Si vous avez des idées / suggestions avec code à l’appui je suis super preneur !

Sources

http://www.w3.org/TR/wai-aria/roles

http://a11yproject.com/

Classé dans accessibility keyboard coffeescript

0 notes &

robbyrussell/oh-my-zsh

It’s been a while that in my zshrc terminal always started with got this error :

compdef: unknown command or service: rails

Today is the day of solution :

compaudit | xargs chmod g-w

compaudit | xargs chown root

rm -f ~/.zcompdump*; compinit

That’s it !

Classé dans zsh