accessibility for theme switcher

  • marcy

    (@marcy)


    20 years, 4 months ago

    I would like my site, http://mp-dulcimer.com/blog, to be as accessible as possible. Right now, one of my concerns is that I’m using Ryan Boren’s Theme Switcher 0.5 with the drop-down menu option.

    I don’t know enough about forms and scripts and JavaScript to know how to adapt this plugin so that a) people who use keyboards instead of a mouse and b) people who don’t have JavaScript enabled will still be able to use the theme switcher.

    I think what I need is first of all to use a submit button instead of the onchange command — how do I do that?

    And secondly a form and script that does the same thing as the JavaScript — how do I do that?

    Or is there anything else I should consider?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter marcy

    (@marcy)

    20 years, 4 months ago

    apologetic bump?

    Kassad

    (@kassad)

    20 years, 4 months ago

    Intriguing problem on more than one account.

    If you are using the standard keyboard navigation then using Alt-DownArrow rolls down the dropbox.

    Using only the arrow keys (after you got focus of the dropdown box) allows you select without changing. You still need to press Enter or do something what triggers the OnChange event.

    Unfortunately, I do not know JavaSript so I have no idea what could be done about it. Though, there is a wealth of information on the subject if you google.

    Accesskeys might be your option e.g.:

    http://www.alistapart.com/articles/accesskeys/

    An important thing is how to get focus of your dropdown box. Right now, it is almost the last one and needs a lot of tabbing to get to it. A rude way is to incude the dropdown into the first few in the list of elements.

    Well, accessibility is not one of my interests so I cannot help much but you can get much information on the subject using well defined queries.

    Thread Starter marcy

    (@marcy)

    20 years, 4 months ago

    Kassad,

    Thank you very much. Accessibility is something I know very little about. Now I understand how to get to the Theme Switcher via tabbing and using the arrow keys and enter to trigger the onchange — so at least I know it can be done by keyboard only, even if it takes annoyingly long to tab through everything else to get to it.

    Anyone else who might know about creating alternatives to JavaScript — I don’t have time right now to learn everything, so if there’s just one bit I can learn to create an alternative form for the theme switcher that would be great.

    (Likewise, the monthly archives plugin…)

    Kassad

    (@kassad)

    20 years, 4 months ago

    Well, it is really intriguing problem as I spent some time exploring this issue 🙂

    I was not able to find what you requested.
    There are numerous solutions switching “styles” but not “themes”.

    Regarding your theme, you should restructure it to get the focus for the theme switcher the first.
    Either floating the sidebar to the left or applying tabindex.
    Hm…
    I would like to suggest you a freshly baken theme which was created with accessibility in mind.

    MoTown Accessible WordPress Theme
    http://weblog.wargrounds.de/wordpress-themes/

    The second tab gets you into the sidebar.
    You either combine, customize or get ideas.

    Next, I made some experiments just how to avoid the onchange event that is still javascript.
    I used link reference to the themes and as far as I can see, it works.
    You may see it action at my experimental blog:

    http://love-unlimited.net/workshop

    At the top of the sidebar there are these “links” to switch themes.
    Use mouse as you would still need several tabs to get there, though if you apply the motown theme you would be there pressing tab twice.

    The code, simply is:

    <ul>
    <li><a href="http://love-unlimited.net/workshop/index.php?wptheme=WordPress+Default" title="<?php _e('Make Shift Theme Switcher'); ?>"><abbr title="Default">Default Theme</abbr></a></li>
    </ul>

    The key is the wptheme=…. what comes from the stylesheet header. (It is case sensitive!)
    Note, there is a slight hitch at the Pink Lilies theme. As it is using the Classic theme templates, it will not switch.
    You select default and you can then switch to other themes.

    Well, it is not dropdown but perhaps it is close to your requirements.

    Thread Starter marcy

    (@marcy)

    20 years, 4 months ago

    Kassad,

    Thanks for the MoTown link — sounds like it will be a good idea, but it’ll have to wait until I have some big chunks of time to try to make it look like my existing layout.

    I think I understand what you’re talking about with the theme switcher and the focus problem. I’m not sure I’d want to mess with tabindex or a left sidebar, because I think content should come first. A regular visitor would only need to set the theme once, and in subsequent visits I think they would be more interested in visiting post links or making comments than in switching themes again.

    I think I understand your theme link list idea — it seems like something obvious I should have thought of. I don’t mind it not being drop-down because I don’t have that many themes.

    I went to your workshop site, and I didn’t see the theme links anywhere, though.

    About themes vs. styles — I really only use the theme switcher to address the variable width problem — I currently have one version of my theme designed for 800×600 res, and another for 1024×768. I’ve thought about adding larger and smaller versions, too.

    If I could do all that by switching styles instead of themes, that would be nicer — after all, the only differences (I think) are in the CSS.

    And then there’s the monthly archive plugin, found here: http://www.oneofthosedays.org.uk/projects/plugin-archives

    I understand tables can be a problem for some browsers — maybe it’s as simple as adding some alt text or something? –Okay, that seemed too simple so I looked it up and found out about WAVE
    http://www.wave.webaim.org/index.jsp
    which is an accessibility validation tool. Looks like this plugin is a properly set up data table and not a problem for accessibility.

    On the other hand, I found out I need form labels.

    I do wonder why the plugin puts a list of all the monthly archive links in the head of the document…

    Gotta go make dinner now…

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘accessibility for theme switcher’ is closed to new replies.