Join 3,542 other smart freelancers!

Sign up to learn how to keep your skills up to date on the tech that matters most and confidently sell your skills to a growing customer base.
I will never spam you. You can unsubscribe at any time.

Reader Interactions

Comments

  1. Hi Carrie, thank you for this article. It was me that raised the question on your Genesis Office Hours the other week and the reason was because I am currently working on a site that needs to be accessible and I was surprised at how inaccessible WordPress & Genesis is. I have found 2 plugins that have helped me:

    http://genesis-accessible.org/ which I used to add skip-links, change widget headings from H4 to H2 and add the post title to ‘Read More’
    http://www.joedolson.com/articles/wp-accessibility/ which I used to add an accessibility toolbar

    Also the Fast Secure Contact Form Plugin is great as it adds form labels.
    Once my site is ready I will be posting some more detail about what I did so I will post you a link.

    • Angie,
      Thank you for bringing the accessibility issue to light and sharing those links -great info! I look forward to hearing more about your project once it’s complete.

      Have you worked with Gravity Forms? They also use the label tag, if that’s what you’re referring to?

      Cheers,
      Carrie

    • Hi all,

      Angie, thanks for mentioning my plugin Genesis Accessible.

      To add to the discussion:

      Joe Dolson gave accessibility advice to Copyblogger when they developed Genesis 2.0 and they made some adjustments to the framework. Joe is also in the Make WordPress Accessible team.
      But these changes where not enough to make the framework WCAG 2 accessible.
      I wonder if this ever will happen, because the H4 widget heading is hard to change without breaking the layout of older themes I guess. So therefore I wrote the plugin.

      As for the contact forms:

      Lately Contact Forms 7 has made some huge changes to improve it’s accessibility changes, like adding WAI-ARIA roles and adding accessible error messages. The writer of this plugin is open to all a11y suggestions.
      How to use this plugin for accessible forms is described here: http://blog.rrwd.nl/2014/03/01/how-to-set-up-an-accessible-form-using-contact-form-7-in-wordpress/
      Extra bonus: the backend/admin is also fully accessible.

      Gravity Forms has a label-input relationship, but not for all kind of input fields. The address, that contains several input fields, only has one label. And when adding more than amount field the input/label relationship is also a mess. But for simple accessible forms Gravity Forms is a good plugin.

      I tried Fast Secure Contact Form Plugin, but I don’t like the admin interface very much.
      For me Contact Forms 7 is a good choice.

      Carrie, thanks for digging into Genesis and accessibility. The more attention from Genesis developers the better.

      • Hi Rian,
        Thanks for joining in the conversation. So glad to know your Genesis Accessible plugin exists! As for moving Genesis forward with accessibility, I know StudioPress (and WordPress) have always gone out of the way to be backward compatible, so I can see how certain structural changes would need to be implemented with great care. That’s where a plugin like yours makes a lot of sense.

        Thanks for chiming in on the contact forms. I’ve learned a lot more about accessibility just reading the conversations in the comments.

        Thank you!

        Carrie

  2. Hi Carrie! I took the plunge and opened an account with Bluehost, and bought a theme and the Genesis framework from Studiopress. Then I set up three (3) WordPress sites just to get my “feet wet”. Here’s the thing: most of the stuff on your blog is more advanced that I can understand. Can you recommend a good place to learn HTML 101? I read you blog and glean some nuggets of wisdom, but have a hard time trying to apply it because I don’t know where to find the code bits you talk about.
    Really, I wanted to let you know that I am moving forward inspired, in no small part, by your recommendation of starting with the Studiopress product line and…I think I got your link to work, not sure if you got affiliate credit or not, hope you did, you deserve it.

    • Hey Phillip,
      Glad to hear you’re up and running with some WP sites! For learning basic HTML/PHP/CSS as it relates to working with WordPress, I can’t recommend Lynda.com enough. Morten Rand-Hendriksen teaches the WP classes and does a great job. There are also some intro HTML courses that you could dip into.

      I’m also working with Lynda to produce a couple of Genesis-specific courses that will (hopefully) be available late summer. 🙂

      I haven’t used Codeacademy.com, but it looks like a good free resource for learning HTML, among other things.

      Cheers,
      Carrie

  3. I’ve essentially followed most of these tips, mostly out of some unrelated sense of ‘that seems right’, but I was under the same bad assumption about link title attributes. This was also good to learn something about screenreaders. You almost need to consider them to be another browser to accommodate in design/build work. This is also something to pass on to clients to help themselves and to help others.

    Also important: Carrie fixed that Genesis Framework link. Go ahead. Click it. You know you want to.

  4. There is a problem with responsive design (or accessing your website through a smartphone, tablet, etc.) and buyer response (conversion rate). People are just not buying complex type of sales through their smartphone. This will change in the ‘near’ future as the smartphone basically is becoming your phone, computer plus credit/debit card.

    Hey Carrie, any plans on making your Genesis Office Hour available as a podcast version (MattReport) using Soundcloud?

    • I’ve considered extracting the audio from GOH for a podcast, but frankly haven’t had the time. If anyone wants to volunteer (hint, hint), I’m open to the help!

      • Open your video with Camtasia, there should be two layers/channels. One for video the other for audio. Then upload it to Soundcloud. I think that is the easiest way to do it. You will quickly need a premium Soundcloud account though. Free account is limited to 120 mins play time.

        • Done and done. Each podcast/audio file (mp3) is around 45mb though. I’ll temporarily upload everything to Mediafire and send you the download address using your contact form in the next two days.

  5. Hi Carrie,
    Thanks for writing this post and drawing attention to accessibility within WordPress. Every Little bit helps. And thanks for the shoutout to the WordPress Accessibility Team. I am the co-lead of that team, and of course I love Genesis and design and develop with it exclusively with it now and have done so for the past year on my own and all my client sites. I would love to help make the Genesis framework itself more accessible, and am wondering if StudioPress is looking for help with this task, but I don’t know who to contact to ask about this. Do you have any ideas? I hate to take up your combox with this, so if you want you can ping me at the email address that comes packaged with this comment, or on Twitter at megarush1024.. Thanks, and I love your work. Oh, and I haven’t had a chance to catch Genesis Office Hours yet, but it’s on the list.
    Amanda

  6. LOVE, love, love seeing you talk about accessibility. I’m newer to Genesis and WP overall but with two legally blind guys in the house I’m always aware of it. One thing that most good business site owners don’t do anymore (but I still find) are the flashing links, images, or entire sections of a page – even a slideshow set on a fast transition can flicker excessively or a video with high contrast that auto plays, can prompt a seizure response in a photosensitive epileptic. While most business owners don’t want those flashing links, they don’t think about how fast the transition might be on a slideshow or some other site elements, causing the fast flicker.

    These don’t fall under traditional accessibility but I think for true accessibility all site owners should be aware of it!

    • I still sometimes find a website with a counter on it. To show how many people visited the website. Takes me back to the 90s…

  7. Thank you so much for this article! It’s definately helpful.
    I’m a total newbie to a lot of things and I’m still learning my way around the Genesis Framework. Although I will say I find it easier to learn how to develop using Genesis over any other company I’ve used in past (several).

    I was wondering if you could demonstrate how one would go about implementing the html in one of the Genesis child theme. I know this may sound like a dumb question, but when you’re learning sometimes the best way is to see visuals of examples applied. At least this is the case with me. Thanks for your great tips and tutorials, I appreciate it.

    Cheers!

  8. This is all so good to know.

    I used to work with a blind man who relied on JAWS for computer access. I remember hearing it read links and other content rather awkwardly and the confusion it created for him. This was maybe ten years ago, so I’m sure awareness on the developers’ end has considerably improved.

    As someone who loves drop caps, I’ve been concerned not just about browser compatibility, but also accessibility. P:first-child is handled well by readers and is recognized by most modern browsers, but falters with older ones. Span class is another option, and I used to use that quite a bit, until I learned it’s not accessibility friendly. The spanned letter is read as a standalone letter instead as part of the word it belongs to.

    Not quite knowing how to get p:first-child working properly in certain areas on a website I just made, I resorted to span classes. But this is just a placeholder while I get some help and figure it out.

    Thanks for this nice post, Carrie.

  9. Hi, I just started following your articles. I have a question about navigating through a site using a keyboard only. I know that the WP Accessibility plugin helps to add an outline to elements on keyboard focus. These are links or forms only though. Is it actually possible to go to each element on a website (headings, text and so on), using the keyboard?

    • Using a screen reader, yes – because a screen reader is designed to navigate the entirety of the content of a site. But that navigation is a special feature of the screen reader. Standard keyboard navigation only navigates “focusable” elements of the page. “Focusable” elements of a page are any part of the page that you can actually interact with.

      There may be a tool that would allow you to navigate all elements using the keyboard without using a screen reader, but I’m not sure what purpose that would serve.

      • Ok, that makes sense. Thank you for clarifying this!

        On a different note do you by any chance know a good WordPress plugin that allows for items in a drop down menu to be accessible with a keyboard? It seems to me that without a special plugin for this purpose, sub menu items are not accessible.
        Thanks again!

Trackbacks

Leave a Reply