WordPress.org

Ready to get started?Download WordPress

Make WordPress Accessible

Category: Core Toggle Comment Threads | Keyboard Shortcuts

  • David A. Kennedy 7:47 pm on August 27, 2014 Permalink | Log in to leave a Comment
    Tags: 4.0   

    WordPress 4.0 Release Candidate Testing 

    The first release candidate for WordPress 4.0 is out. If you’re interested in testing for accessibility, here’s what to focus on:

    New features in 4.0

    1. Oembed
    2. Insert from URL
    3. Plugin installation
    4. Editor scrolling
    5. Media Library Grid
    6. Customize Panels

    Regressions from 3.9

    We don’t have a definitive list for this, but keep an eye out for anything that’s not working that you know worked in the last version.

    If you run into bugs, follow the instructions from the WordPress.org announcement post:

    Think you’ve found a bug? Please post to the Alpha/Beta area in the support forums. If any known issues come up, you’ll be able to find them here.

    To test WordPress 4.0 RC1, try the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”). Or you can download the release candidate here (zip). If you’d like to learn more about what’s new in WordPress 4.0, visit the awesome About screen in your dashboard ( → About in the toolbar).

    Things to Watch

    We want to keep things simple at this point. Look for any big blockers, like:

    • keyboard traps
    • confusing or non-existent tab order
    • content that can’t be accessed via keyboard
    • content that can’t be accessed via screen reader
     
  • Joe Dolson 8:01 pm on December 12, 2013 Permalink  

    Remove title attributes trac tickets 

    I’ve created all new tickets for each file referenced from the original remove title attributes trac ticket (http://core.trac.wordpress.org/ticket/24766). I originally split it up into 17 separate tickets, but closed 3 of them already, because they had already been committed into 3.8 or earlier.

    I’ve added comments and/or patches, as relevant, on all of the remaining tickets – so please chime in with opinions as relevant! Many of these incorporate situations where a 2nd opinion would be valuable, because the title attribute incorporates relevant information and some alternative handling may be necessary.

    Tickets:

    http://core.trac.wordpress.org/ticket/26547

    http://core.trac.wordpress.org/ticket/26549 – 2nd opinion
    http://core.trac.wordpress.org/ticket/26550 – 2nd opinion
    http://core.trac.wordpress.org/ticket/26551 – 2nd opinion
    http://core.trac.wordpress.org/ticket/26552 – 2nd opinion
    http://core.trac.wordpress.org/ticket/26553 – 2nd opinion

    http://core.trac.wordpress.org/ticket/26554

    http://core.trac.wordpress.org/ticket/26555 – 2nd opinion

    http://core.trac.wordpress.org/ticket/26557

    http://core.trac.wordpress.org/ticket/26558 – 2nd opinion

    http://core.trac.wordpress.org/ticket/26559

    http://core.trac.wordpress.org/ticket/26560 – 2nd opinion
    http://core.trac.wordpress.org/ticket/26561 – 2nd opinion
    http://core.trac.wordpress.org/ticket/26562 – 2nd opinion

     
  • Graham Armfield 11:30 am on November 28, 2013 Permalink
    Tags: , ,   

    Analysis of what gets into the alt and title attributes when adding an image into a page/post 

    There was some debate in last night’s IRC chat about trac ticket 26270 raised by @yaelkmiller. Her original point was that when adding images to pages and posts, the Alt text box should have more prominence than the Title box – the alt attribute being an important accessibility feature.

    Personally, I think the idea is a good one, but discussion and comments by @helen also revealed some interesting behaviour when inserting images concerning what text ends up in the title attribute of the image, and what text ends up in the alt attribute.

    I’ve done a series of tests using different use cases and they are presented in the tables below – including my expected results and the actual results.

    Uploading images

    Test No. Use Case Graham’s Expected Result Actual Result in Page
    1 Upload image, add it to page with no change to Title box or Alt text box Title attribute set to image name minus suffix Title attribute absent, alt attribute set to image name minus suffix – ie what the Title box was set to
    2 Upload image, add it to page but change Title box, not Alt text box Title attribute set to amended value Title attribute absent, alt attribute set to amended Title box value
    3 Upload image, add it to page but change Alt text box, not Title box Title attribute set to image name minus suffix, alt attribute set to amended value Title attribute absent, alt attribute set to amended Alt text box value
    4 Upload image, add it to page but change both Alt text box and Title box Both title and alt attributes set to amended values Title attribute absent, alt attribute set to amended Alt text box value

    Using images from media library (previously uploaded) without amendment

    Test No. Use Case Graham’s Expected Result Actual Result in Page
    5 Add image from media library that has Title box set but not Alt text box Title attribute set but not alt Title attribute absent, alt attribute set to whatever Title box was before
    6 Add image from media library that has Alt text box set but not Title box Alt attribute set but not title Alt attribute set but not title
    7 Add image from media library that has both Title box and Alt text box set Both attrubutes set Title attribute absent, alt attribute set to whatever Alt text box was before
    8 Add image from media library that has neither Title box nor Alt text box set Title attribute absent, alt attribute empty Title attribute absent, alt attribute empty

    Using images from media library (previously uploaded) but making amendments

    Test No. Use Case Graham’s Expected Result Actual Result in Page
    9 Add image from media library, that has just Title box set, update Title box Title attribute set but not alt Title attribute absent, alt attribute set to whatever Title box was amended to
    10 Add image from media library, that has just Alt text box set, update Alt text box Alt attribute set but not title Title attribute absent, alt attribute set to whatever Alt text box was amended to
    11 Add image from media library, that has neither Title box set nor Alt text box set, update Title box Title attribute set but not alt Title attribute absent, alt attribute set to whatever Title box was amended to
    12 Add image from media library, that has neither Title box set nor Alt text box set, update Alt text box Alt attribute set, no title attribute Title attribute absent, alt attribute set to whatever Alt text box was amended to
    13 Add image from media library, that has both Title box and Alt text box set, update Alt text box Both attributes set Title attribute absent, alt attribute set to whatever Alt text box was amended to
    14 Add image from media library, that has both Title box and Alt text box set, update Title box Both attributes set Title attribute absent, alt attribute set to whatever Alt text box was originally set to

    Looking at the results

    Using the Add Media Panel to insert an imageThe first revealing thing about these tests is that my own view of how I thought WordPress worked is at odds with the actual results in most cases.

    The second thing that’s become obvious is that it’s actually impossible to set the title attribute for an image whilst using the Add Media panel. The title attribute never appears in any of the results.

    Actually the only way to set a title attribute image within pages and posts is to use the older image edit dialogue box once the image is placed within the page (or to manually update the HTML obviously).

    I think the confusion comes from the labeling of the Title input field in the Add Media Panel. Helen refers to this in her comments on the trac ticket I believe. Maybe to avoid confusion this box should be given another label – ‘Image name’ maybe. I confess that I hadn’t noticed this change in WordPress behaviour – it did used to be possible to directly influence the title attribute of an image when uploading and adding it to a page/post.

    I’m sure that I’m not the only one who didn’t appreciate this situation. There is a plugin called Shutter Reloaded that I’ve seen on a couple of sites, which uses the title attribute from the image to provide a caption beneath the image when the full size is shown. Obviously this plugin is broken if site admins don’t realise the title attributes aren’t being written into the <img> tags – and the plugin author perhaps doesn’t realise either. I can’t comment on other lightbox plugins.

    What do you think? Is this what you expected? Is this the right way to go?

     
    • Rian Rietveld 3:23 pm on November 29, 2013 Permalink | Log in to Reply

      Hi Graham,
      The addition the title attribute to the element img was removed a few versions of WordPress ago, which is a improvement to my opinion.

      I use the title only for labeling the images in the Media Library, yes, maybe image name is a better description for that input field.

      And it seems logical to add the images name into the alt field if the alt field is empty, but that can result in alt texts like IMG_123. Maybe the best way is to leave the alt text empty unless a user entered a value there.
      An alt=””is always better than an alt=”IMG_123″.

      Rian

  • esmi 9:00 am on August 9, 2013 Permalink
    Tags: , ,   

    Title Attributes Galore 

    The patches for Trac ticket 24766 are slated for addition to WordPress 3.7. This is great news for assistive technology users who have been forced to wade through a sea of unnecessary title attribute verbiage. But we need to ensue that the patches cover all unnecessary title attributes and that those deliberately excluded from the patches do not present any accessibility issues.

    Currently, the excluded methods, functions and scripts are:

    • the_author_posts_link()
    • rss.php
    • wp_fullscreen_html()
    • get_adjacent_post_rel_link()
    • _walk_bookmarks()
    • get_image_tag()
    • the_shortlink()

    (More …)

     
    • David A. Kennedy 12:02 pm on August 9, 2013 Permalink | Log in to Reply

      I’m wondering if we missed any? I believe some functions, like

      get_the category_list

      and

      edit_post_link

      have title tags built in as well. I’m not as familiar with core so looking through the diff makes it hard to tell. Commenting here to get opinions and not junk up the ticket.

      • Amy Hendrix (sabreuse) 3:53 pm on August 9, 2013 Permalink | Log in to Reply

        Both of those functions are included in the patch that’s currently on the ticket — you can see the full list at the ticket link.

        The list in this post is just the ones that I left off the patch, either because they’re deprecated functions (which means aren’t actually used in core anywhere, and we normally wouldn’t make any changes to them unless it was for something like security), or because the title attributes are being used for help and not just labels (and in that case, they should get a better solution rather than just being deleted without any kind of fallback).

        It’s definitely not a problem to get this batch in, and still pick up any that were missed in subsequent patches.

        • esmi 4:16 pm on August 9, 2013 Permalink | Log in to Reply

          Understood, But my concern is how to handle wp_fullscreen_html()

          • Amy Hendrix (sabreuse) 5:08 pm on August 9, 2013 Permalink | Log in to Reply

            Yep, got that — I was just trying to answer David’s question about other functions that didn’t appear in this post.

            On with the wp_fullscreen_html() discussion, which is definitely a tougher case than most of these!

    • Joe Dolson 8:58 pm on August 10, 2013 Permalink | Log in to Reply

      I think we need to consider some alternatives for the wp_fullscreen_html labels and interface generally — this is definitely not a simple case of removing the title attributes alone. It should probably be pushed as a separate ticket; it’s related, but it seems sufficiently different that treating it independently is worth while. Thoughts on that?

    • Joe Dolson 5:55 pm on August 21, 2013 Permalink | Log in to Reply

      So, went to work on this to create the ticket, and decided that I first needed to create a ticket on keyboard focus — there are a lot of problems with keyboard focus in the full screen editor, so it’s nearly impossible to use with a keyboard. Ticket 25111.

  • Graham Armfield 4:56 pm on July 8, 2013 Permalink
    Tags:   

    Accessibility Objectives for WordPress – Initial Thoughts 

    Some of us have been talking recently about pulling together some accessibility objectives for WordPress. These are things that we feel could, or should, be happening to ensure that the profile of accessibility is enhanced with the WordPress community.

    Ultimately, in order to support Matt Mullenweg’s view on the democratisation of the web by web-related software we want as many WordPress websites as possible to be accessible to as many people as possible. We also need to ensure that the WordPress admin screens are not excluding certain user groups from key parts of functionality.

    With that in mind, here is our initial list of objectives. Please feel free to comment on these, and to suggest others that you think are also important.

    (More …)

     
    • _Redd 9:07 pm on July 8, 2013 Permalink | Log in to Reply

      Great list, and provides a great map for a path forward. Huge thanks for putting this together.

      Regarding,

      Development of formal education and outreach programs

      So that all WordPress core developers can gain a deeper understanding of the range of issues faced by disabled and elderly users.

      I personally don’t think this should be directed only at core developers, or even mainly at core developers. It should be much broader, so that those who support the supporters are educated. For a real-life example, take the instance in which a manager instructed that the words “text size” small, medium, and large from the web page because it interfered with design, or made color choices that would have made it impossible for those with color-blindness to actually read the web page. The outreach should extend not only to those who code or design, but to those who manage, approve, fund, or are otherwise beholden to the creation that is a web page. If managers understood the impact of their decisions, then that alone would enable designers to build accessible features even at the most basic level.

      Thanks again for what you’re doing here.

    • _Redd 9:19 pm on July 8, 2013 Permalink | Log in to Reply

      A couple more things to add.

      1. In the “providing resources” section, what’s the possibility of actually creating a new, accessibility forum in the support forums?

      2. I don’t know how to categorize this, but is it possible to visit “how” accessible themes are made available through WordPress.com and WordPress.org theme search? . I understand the “accessible-ready” tag is a seal of approval, but I’m concerned that the tag may be unfamiliar to a casual user. Perhaps, if we could find out how a casual user searches for such themes (I’m guessing accessible, or accessibility, or a11y) then we could make a point to include those tags so the themes come up better in searches. Right now, for what ever reason, it’s not easy to find them.

      Also, what’s the possibility of adding a pointer to accessible themes from this blog, or some highly visible location?

      Thanks again!

    • Joe Dolson 3:06 am on July 9, 2013 Permalink | Log in to Reply

      The visibility of accessible themes in the WordPress.org theme search is essentially non-existent, as it stands. The theme repository has a controlled tag structure: only the tags listed on the tag filter (http://wordpress.org/themes/tag-filter/) are allowed – there are no tags in the directory not on that list.

      So, we can’t just add random tags; every tag needs to be a unique way of associating that particular characteristic of a theme.

      We can encourage people to use whatever accessibility terminology they choose in their description of the theme; but the “accessibility-ready” tag would still be the only one of definitively pulling up all themes that include that characteristic.

      I’m not sure that the theme search tool is actually all that heavily used; but I don’t really know that. I’ve never used it other than to try and identify accessible themes; searching all terms I could think of.

    • _Redd 12:49 pm on July 9, 2013 Permalink | Log in to Reply

      Thankyou (as always!) Joe.

      Let me try to amplify my remarks a little, because I’m not trying to remove the “accessibility-ready” tag from the equation. Not at all. I just think we should be adding additional tags to address the common way in which people search.

      I guess at the heart of it, I ‘m unsure why adding “random” tags is in conflict with the need to have a unique identifier. The unique identifier of “accessibility-ready” is a seal of approval, and we should “market” it that way. But to FIND accessible themes is something else. Additional tags relative to accessibility would help those themes surface. In my mind, it’s no different than having a unique web-site, and using multiple meta-tags in the header for SEO purposes, or to assist in search, or in using #accessibility and #a11y in Twitter, yet having only one, authoritative Twitter site for the WordPress accessibility group.

      For the particular case where someone is logged into WordPress, and searches for a new theme, they go to the page tab, “Install Themes”. The first way they’ll look for the theme is through a keyword search, so the addtional meta-tags of accessibility, a11y, etc. would help there. But the next place they’ll look is the “Feature Filter”—they have themes organized by colors, columns, etc. Can we coordinate with whomever develops the interface so that we could have a section labeled, “accessibility-ready”, or “accessible”, or something like that?

      I hope I’m making sense. At any rate, thanks again, and I’m always looking forward to whatever further input you may have on the matter. Take care.

    • esmi 1:16 pm on July 9, 2013 Permalink | Log in to Reply

      I ‘m unsure why adding “random” tags is in conflict with the need to have a unique identifier.

      Because the whole theme repo system relies on a limited set pre-defined tags. Throwing it open to random tags would stop that system working effectively.

      Can we coordinate with whomever develops the interface so that we could have a section labeled, “accessibility-ready”, or “accessible”, or something like that?

      We already have someone. Well… two someones actually. Myself and Joe D. We both discussed this at length with the rest of the theme review team (who have been tremendously supportive). In order to develop an a11y audit that would work within the overall theme review system, we needed to come up with a single tag that didn’t “over-promise”. Tagging a theme as “accessible” was quickly dropped as – in reality – there is no such thing. A theme can only facilitate the creation of an accessible site. It is not “accessible” within itself. The tag “accessibility-ready” seemed to be the best option and the tag will be added as an option to the theme tag filter once the auditing process is fully up & running.

    • _Redd 4:01 pm on July 9, 2013 Permalink | Log in to Reply

      Thank you, much appreciated. I see I was ignorant of the mechanics of theme “tagging” in WordPress.

      And, if the accessibility-ready tag will be added to theme tag filter once the auditing process is up and running, then that fact alone will make the accessible themes more visible.

      Best regards, as always!

    • Aaron Jorbin 4:05 pm on July 9, 2013 Permalink | Log in to Reply

      Regarding appointing an accessibility lead, I’m going to strongly disagree with that. We are going to have much more success in the long run with WordPress if it’s not one person’s responsibility, but instead if everyone takes responsibility for it.

      I strongly support developing some common educational materials. Joe – I would love to see your slides from WCCHi converted into an accessible HTML slideshow and put up on github where others can contribute. We can then advocate that others use this base slideshow and present it at WordPress (and other) meetups around the world.

    • Joe Dolson 5:22 pm on July 9, 2013 Permalink | Log in to Reply

      I actually think that an accessibility lead is necessary. Not so much because it becomes one person’s responsibility, but because it means there’s one person in charge of the decision process. There are aspects of accessibility that are decidedly subjective; having a lead helps to reach decisions more quickly.

      Also, while the long-term depends on having a broader understanding of accessibility within the development community, short-term will benefit tremendously from having a go-to person to communicate with.

      Posting those slides and sharing them for contribution is a good idea; I actually have a few different WordPress A11y slide sets, dependent on type of audience, and I could share them separately.

      • Aaron Jorbin 3:07 am on July 10, 2013 Permalink | Log in to Reply

        The person in charge of the decision process is the release lead. If they aren’t an expert should they defer to someone else who is? Yes. Much like they generally do now.

        The problem I see with having an accessibility lead is that creates a situation where the entire team no longer feels responsible for accessibility. Every person that contributes to WordPress should own the accessibility of it.

        • _Redd 2:41 pm on July 10, 2013 Permalink | Log in to Reply

          Hi Aaron, speaking for myself only, I agree with you that each contributor should “own” the accessibility of my websites, but I feel just as strongly that there are many like me, who don’t have the expertise to do much of the significant work that needs to be done. It is precisely because there are “lead” members in the current group, who give of themselves not only with coding expertise, but with feedback, that I feel encouraged to work at learning the code that makes WordPress accessible. It would be too overwhelming for me otherwise.

          For me, an accessibility lead would provide the “backup” needed by beginner-level developers such as myself to enable contributions to the larger (and great) picture that is WordPress–and would directly facilitate growing the group with active members.

        • Joe Dolson 7:09 pm on July 10, 2013 Permalink | Log in to Reply

          Alternatively, not having a lead means that no one person feels specifically responsible for finding an answer to a question; a lead would simply mean a point person.

          I feel that for a release, there should be a single point of contact, so that there’s a clear chain of communication during that release cycle.

    • esmi 6:01 pm on July 9, 2013 Permalink | Log in to Reply

      I actually think that an accessibility lead is necessary.

      I agree with Joe but from a different perspective. I think each project/development needs one person who looks at all phases from an accessibility perspective during development. Otherwise, it’s all too easy for potential issues to get lost in the excitement of coding a new feature. I agree 100% that accessibility is everyone’s responsibility but, from a management pov, I think having one person keeping their eye on this particular ball would be tremendously beneficial.

    • After Gadget 10:13 pm on July 9, 2013 Permalink | Log in to Reply

      I really like what was said in the original post, and I’ve also learned a lot from the comments. For example, I did knows some themes were tagged as being more accessible than others. If there were a way to search for themes by accessibility I would have done that in the past and will probably do that in the future.

      One question I have, and I’m not sure if this is the appropriate place for it, and where it says about getting more people involved in that make WordPress accessible group. I tend not to be very involved because I’m not a developer. I don’t know about writing code, etc. I’m just a user so I’m often unsure what I can really contribute. I do have an idea of something that would make WordPress more usable for me as a blogger who uses Dragon, but I’m not sure where I should post that idea.

      Anyway, I’m really grateful that this group exists and that so much skill and care goes into making WordPress accessible. It really makes a huge difference. Using Blogger is a nightmare in comparison to WordPress in terms of access, both as a blogger with disabilities and as somebody who wants my blogs to be accessible to others with disabilities.

      One of the things I like best about what was suggested above is to have more obvious access tags and info/links on every WordPress site because it really feels welcoming and inclusive as the user was not as tech savvy as most of you are (all of you are?) And I think it encourages other people to think about access when it’s just included everywhere as a normal thing that you might want to be searching for.

      • Graham Armfield 7:06 pm on July 10, 2013 Permalink | Log in to Reply

        Hi @AfterGadget. Just wanted to underline what esmi and _Redd wrote. This group is for anyone who would like to see the accessibility of WordPress improve. And if you have any ideas for improvement we’d love to hear them. I’m especially interested to hear about your experiences with Dragon and WordPress – I think it’s an area that hasn’t received enough attention yet.

    • esmi 10:37 am on July 10, 2013 Permalink | Log in to Reply

      I don’t know about writing code, etc. I’m just a user

      That doesn’t matter. We’d love you to join. The whole point point of this group is that it isn’t just for coders. It’s for users as well. That way, if we pool our resources, we have the skills & experience to recognise potential problems, develop solutions and get them into WordPress core. As an experienced Dragon user, your input would be invaluable.

      • After Gadget 2:21 pm on July 18, 2013 Permalink | Log in to Reply

        I forgot to click “follow” so I could see the responses to my posts until now.

        I use Dragon for everything,including mousing. One of the things that is hardest to do when blogging with Dragon is formatting, such as block quotes, links, centering, inserting images, etc. One of the great things about WordPress for this is that there are keyboard shortcuts for most of those commands, so that I don’t have to click on icon to do them.

        However, to find out what they are I have to hover my mouse over the icon to learn that in the future I use alt shift A for making something into a link. There are two problems with this. One is that hovering a mouse over something is one of the hardest things to do with Dragon, and the other is that part of my disability is severe memory impairment so it’s hard for me to remember which things the keyboard command uses A or U or S, etc.

        So it would be really helpful to have those commands written out somewhere — either on the icons themselves or on some menu that could be visible in the same area as the text box, or ideally both.

        Because what I am doing now is needing to use my touchpad to hover over the thing first find out what the keyboard shortcut is— which is really hard on my wrists — and then write it down on a piece of paper that I can tape to my monitor (writing by hand is also problematic for me). And it will be difficult to get all of those formatting commands onto one small legible piece of paper.

        Maybe these are already written out somewhere and I just need to find them. I know blind users who use screen readers don’t use a mouse to click on icons necessarily, but I am guessing that the text reader reads the alt tag that tells the keyboard shortcut?

        I also am not sure if there is a keyboard shortcut for inserting media. Or for the various steps of inserting media. My memory is that including pictures has been harder for me since I’ve lost most use of my hands, but I can’t remember the specifics. Maybe some of you know what I’m talking about.

        I hope this is helpful and that this is the right place to post this.

    • _Redd 11:21 am on July 10, 2013 Permalink | Log in to Reply

      @After Gadget Your input is more valuable than you can even believe.

      I am NOT a programmer by any stretch of the imagination, but there are many simple things I can do to increase website accessibility. When I try to improve websites accessibility, I am stuck with the horrible option of either writing it on sheer faith that what I am doing is right, or clumsily and inexpertly trying to use assistive technology to test it. I’m not qualified to use that technology, because I am fully sighted and have full use of my hands. I really need the expertise of those who are real and true experts in the use of assistive technology for real and true feedback as to whether the code “works”. We need you, and we need your expertese.

    • David A. Kennedy 2:29 am on July 11, 2013 Permalink | Log in to Reply

      @Graham: Huge thanks for putting this together! There’s a ton of great stuff here.

      @After Gadget: Your feedback and involvement is essential! We developers need you to help ensure we do it right, and continue to get better! :)

      Regarding the team lead idea: I think a team lead, especially for each release, is vital. I agree with Aaron (and all of you) that accessibility is everyone’s responsibility, but I think a team lead would help keep communication tight. Yes, accessibility challenges center on code more often than not, but it’s also a communication issue many times. An accessibility challenge has to be explained effectively along with potential solutions and the benefits and drawbacks of each. I see the team lead not so much as being responsible for accessibility, but as the bridge between us and the developers and designers. So much of getting to good accessibility solutions is about trust between the accessibility advocates and the rest of the team. Perhaps rotating this slot would help too? A team approach might strike we balance we need.

      Regarding the accessibility statement: I would love to see this. In addition to the normal these are our standards, this is our process and here’s what to do if you have a problem, I would like to also see some “heart” put into it. That’s difficult to explain here, but I see a big opportunity to for the statement to serve as an entry point for people who know nothing about accessibility to learn something. I think it has to have some passion to it, tracing back to how the web’s initial vision was something that everyone could use easily. WordPress has a chance to reach a lot of people in this way because it’s so widely used!

      Regarding the coding and style guidelines/providing resources: I think creating documentation and resources that talks about how certain areas impact accessibility would be great. For example, if we’re developing theme resources, we might talk about how removing the underline on links effects things, etc. Again, I have some resources that might help, and I plan to do a blog series about the creation of Accessible Zen where I highlight some of this stuff. Happy to use that as a testing ground for some of this.

      Regarding education: this is the key. I think we have to really reach the designers and content creators. They are the front lines of accessibility. Yes, the code is vital, but if I’ve been handed a design with little or no thought given to accessibility, we’re in trouble. Similarly, if I have a site that has content in it that has challenge after challenge, we have a long road ahead of us.

      Those are my basic thoughts. Sorry for the long comment. :) Also, I would be happy to and super excited to help with any of this. :)

    • _Redd 9:54 pm on July 11, 2013 Permalink | Log in to Reply

      @David A. Kennedy AWESOME comments….I think we speak for all of us when I say that WE are happy and super excited that you’re here! :-) Please join us at our IRC meetings on Wednesdays, if you can, as well as continue to offer any more insights you may have on this blog!

      • David A. Kennedy 12:03 pm on July 12, 2013 Permalink | Log in to Reply

        Thanks, _Redd! I keep meaning to attend the IRC meetings, but always forget. I’ll have to set a reminder. :) I definitely plan to continue to help out wherever I can.

    • _Redd 1:30 pm on July 16, 2013 Permalink | Log in to Reply

      What’s the possibility of setting aside a special web page–or some other common online location–so that developers who need their code tested can put up the test sites in a central location, and those with the expertise to test the code can sign up for real-world testing?

      Something similar to the Khan academy’s page for volunteers, in which lessons that need to be close-captioned or translated are available for volunteers to do so?

      It would allow people who do not code a way to contribute–testing WordPress accessibility and giving the feedback that is so badly needed.

    • _Redd 4:57 pm on July 16, 2013 Permalink | Log in to Reply

      I’m embarrassed to say I wasn’t thinking deeply enough to recommend it for specifically themes, plugins, or core.

      That said, as someone working on a free, accessible theme, I (selfishly) think that a place to test accessibility for themes would probably be a great place to start. Much of our discussion right now is centered on creating accessible themes, so doing so would help us gain some traction in that regard.

      I think core has the trac system anyhow. That’s intimidating to a lot of people. Having a more benign interface for themes would give non-coders a place to contribute. Lessons learned from the “crowd-sourced” testing could benefit everyone. We wouldn’t have to keep re-inventing the wheel every time an accessibility problem is solved.

      And, if a solution works, then perhaps one of the more expert people in the group could take the solution to trac, for consideration of implementation into core.

    • esmi 7:22 pm on July 16, 2013 Permalink | Log in to Reply

      As themes and plugins are not “core”, they may not be suited for a Trac-like system anyway. From a purely personal perspective, I think it ultimately has to be down to the developers of these “3rd party add-ons” to take responsibility for a11y levels & issues in their own work. There’s only so much that WPORG can offer in the way of resources.

      Speaking from a theme developer perspective (as that’s the area that I have the most experience in and where the most centrally coordinated a11y outreach may be coming from), theme developers need to use their standard tools along with the Theme Unit Test data to check a11y levels. Longer term they’ll have the option of submitting their theme for an a11y audit as part of a WPORG theme submission – which should (hopefully) give them some valuable feedback. There’s also the theme reviewers mailing list for additional support – although if a11y-specific questions create too much traffic, there might be room later on to establish a better support resource,. Ideally that would be here.

      Does that help at all?

      • _Redd 1:44 pm on July 18, 2013 Permalink | Log in to Reply

        In light of last night’s meeting, what do you think of the idea of asking for non-coding volunteers, who use screen readers or other assistive technology, to test the survey forms for us?

    • _Redd 7:38 pm on July 16, 2013 Permalink | Log in to Reply

      That does help–and again, thank you.

  • esmi 8:01 pm on June 25, 2013 Permalink
    Tags: , ,   

    Next IRC Meetup 

    Just a quick reminder that the next IRC meetup will be on Wednesday, 26 June at 19:00 UTC in #wordpress-iu.

    Everyone welcome!

    If you have never attended an WordPress IRC meetup before, you can find all of the details you will need to join in the Codex’s IRC page.

    One topic for discussion is likely to be the development of a proposed accessibility statement for WordPress. To whet your appetite and give you an idea of what we could aim for longer term, have a look at Drupal’s accessibility statement.

     
  • Graham Armfield 10:31 am on April 4, 2013 Permalink
    Tags: , , , , , ,   

    Accessibility IRC Chat – 3rd April 2013 

    A few of us took part in the IRC chat yesterday (see transcript here). Not surprisingly the main subject was the Add Media Panel accessibility, and the format of the chat turned into a live screen reader test on the functionality performed by @_Redd and @arush (and myself).

    @lessbloat had kindly had a go at implementing my quick and dirty pragmatic ARIA solution – for which we are truly grateful. Once we’d got access to an environment where the changes were in effect we could see that vast improvements had been made to the accessibility.

    I’ll save the detail to the blog post about Add Media Panel but to summarise:

    • Keyboard-only users can now tab through the items in the media list and select/deselect using Enter key
    • Screen reader users were getting some useful information but possibly only the newest versions can fully use this functionality.
    • Voice recognition users can at least use the tab commands to move around the list and select them.

    The key decision now is whether the functionality is useful and solid enough to include in 3.6. A couple of extra enhancements would make the solution better for screen reader users – once again see previous post.

    My vote would be to run with it if we can get the small further enhancements. We can hopefully address the rest of the accessibility issues within 3.7.  But what do you think?

     
    • _Redd 11:39 am on April 4, 2013 Permalink | Log in to Reply

      RUN WITH IT! Enhancements are for plugins!!!

    • Joe Dolson 3:23 pm on April 4, 2013 Permalink | Log in to Reply

      This is great Graham. I’d agree with _Redd – this sounds like a great improvement. I don’t see any reason to wait for perfection; this is an important step forward.

    • _Redd 2:29 pm on April 5, 2013 Permalink | Log in to Reply

      I have the 3.6 beta up, and, as one who is ignorant of screen readers, I can at least say that my version of NVDA announces itself nicely in the Add Media area. Thank you, Graham and lessbloat, this is a jaw-dropping leap forward! :-)

  • Graham Armfield 12:37 pm on March 28, 2013 Permalink
    Tags: , , , , , , , ,   

    Add Media Panel and WordPress 3.6 – A Simple Solution? 

    The beta version of WordPress 3.6 is very close now and the chances of significant extra functionality being included must be slim. But, the Add Media Panel introduced in 3.5 is still inaccessible and the trac tickets raised on this are still untouched.

    This is a real problem as the Add Media Panel is such a key piece of functionality.

    However, from our IRC chat yesterday the germs of a simple solution may have emerged – a solution that could maybe make the functionality accessible to keyboard and screen reader users. We just need someone to give it a try.

    (More …)

     
    • _Redd 12:46 pm on March 28, 2013 Permalink | Log in to Reply

      Just to THANK you for the amazing work that went into this…..the path you’ve outlined here gives us a real way to pursue this, and to help out. More to come, but again, thank you!

    • Joe Dolson 3:02 pm on March 28, 2013 Permalink | Log in to Reply

      This is a great suggestion — and should be very simple to tackle.

      Do you think that the img should also use the aria-labeledby attribute to associate the label? I haven’t tested this, but I’m not sure offhand what behavior is exhibited by a screen reader in associating a label with a non-form field by ID.

      • GrahamArmfield 9:55 pm on March 28, 2013 Permalink | Log in to Reply

        I had thought about that Joe and it may be a better solution. The code I propose was based on an example within that Mozilla site, but the working example they link to did it using a different technique.

        One of the things I was keen to avoid was ‘double voicing’ by screen readers that I know can be annoying – hence the blank alt attribute too.

        I guess the key thing is to find someone who can prototype this like @lessbloat did with the Custom Menu solution. We can then test it with various AT.

    • Tony Scott 9:16 pm on March 30, 2013 Permalink | Log in to Reply

      Great work Graham – many thanks!

    • GrahamArmfield 1:31 am on April 3, 2013 Permalink | Log in to Reply

      There has been some action on this issue. See the discussion and revised proposal on trac #23560.

      • _Redd 3:02 pm on April 3, 2013 Permalink | Log in to Reply

        Graham, what you and lessbloat have done on ticket #23560 is nothing short of amazing, absolutely amazing.

        Do I understand that there’s a possibility this can go into 3.6?

        Are you going to be able to make it to the IRC chat today?

        • Graham Armfield 3:10 pm on April 3, 2013 Permalink | Log in to Reply

          I’m really hoping we can get this into 3.6 with @lessbloat‘s help. It doesn’t address all the potential accessibility issues but at least it’s going to be a lot more accessible than it is now.

          Yes, I’m intending to be in IRC chat later.

          • _Redd 3:25 pm on April 3, 2013 Permalink | Log in to Reply

            When I last saw the ticket, you still hadn’t been able to have one to test. I can’t “see” the ticket now, so I don’t know if you’ve been able to test. As a person who is really, really stupid to this, I tried to incorporate his diffs into my 3.6 alpha test site….would you like to get into it to look around?

            I don’t know enough about screenreaders to even approach this…

            No promises that I did anything right, but due to the time crunch, I’m offering it to you for screenreader evaluation….

            Test Site

          • _Redd 3:26 pm on April 3, 2013 Permalink | Log in to Reply

            Looks like I set up the hyperlink wrong

            http://red-hound.com/test/addmedia/

            Let me know if you want to get in there, I know EVERYONE is short on time….

            • Graham Armfield 3:32 pm on April 3, 2013 Permalink

              That would be superb if you could let me have access to the site. Please email me the logon details – graham.armfield@coolfields.co.uk and I’ll give it a go.

              One day I’ll have to see if I can get a suitable environment together but it’s a little daunting from a standing start.

            • _Redd 3:33 pm on April 3, 2013 Permalink

              Coming your way, standby

            • _Redd 3:42 pm on April 3, 2013 Permalink

              You should have an email from me….when I tried to create you as a user and give you a password, it said the name was reserved….I think it is waiting for your confirmation email….let me know how it goes,

            • Graham Armfield 4:14 pm on April 3, 2013 Permalink

              OK I’m in. Will test shortly.

            • _Redd 7:44 pm on April 3, 2013 Permalink

              Hi Graham, I’ve redone the media-views.js file, and it is yours to test. I sent you email with a file called “modified-media-views.js” so you can double check it if you like. Not sure if your spam folder will kick it back.

              I’m watching for your response with baited breath!

            • _Redd 7:56 pm on April 3, 2013 Permalink

              OK, thank you Graham, at least, know that you have a server to play with. We’ll work it out. I’ll see you on the IRC chat.

      • Graham Armfield 4:04 pm on April 4, 2013 Permalink | Log in to Reply

        @lessbloat has made some further changes after our testing yesterday which have further contributed to the accessibility.

        It is now possible to select/deselct with the space bar as well as the Enter key. This should enable (hopefully) all screen reader users to select the items as if they were checkboxes – without having to rely on the ‘pass-through’ keystrokes.

        Also, he has improved the visibility of keyboard focus on the media files so that anyone using keyboard, or voice recognition users emulating tabbing will be easily able to see where they are.

        Within the trac ticket #23560 I have asked him to make one further change – that is to place the image title within the aria-label attribute rather than the file name. That way, if you’ve given the file a meaningful title or alternate text when the file was first uploaded it will be presented to the screen reader.

        So far, comments received have indicated in favour of getting these changes included within 3.6. I’m not sure how this is achieved – is it automatic, or is there a further process that needs to occur.

        If anyone has objections then now is the time to express them I guess.

    • _Redd 5:25 pm on April 4, 2013 Permalink | Log in to Reply

      Only writing here to say we can’t thank the two of you (lessbloat and yourself) enough. This is mind-blowing! What a huge accomplishment!

  • esmi 12:29 pm on February 14, 2013 Permalink
    Tags: , links   

    Spawning New Windows/Tabs 

    Sorry for the flurry of posts but there’s an important discussion going on in re-opened Trac ticket #20839. The current discussion is focusing on:

    1. Should the “Visit plugin site” offsite link (in Plugins → Installed Plugins open in a new window/tab? (A no-brainer?)
    2. The best way to pre-warn users of an offsite link

    Some practical suggestions for the latter might come in very useful right now.

     
    • _Redd 1:07 pm on February 14, 2013 Permalink | Log in to Reply

      From a student use perspective, it seems that no matter WHAT I do to flag a link, students will simply use a “back button” on the browser. If they click on the link and it’s not something they want to see, they just hit a back button, not a bread crumb. Opening in a new window robs them of that back button functionality

      And, of course, I’m not saying its right or wrong, I’m just passing an observation when I ran tests with students. My carefully crafted links were ignored….

      As far as perhaps using icons to signal a way back home, I was stunned that the little “home” icon meant nothing to them….they just thought it was a decoration.

    • esmi 2:10 pm on February 14, 2013 Permalink | Log in to Reply

      Opening in a new window robs them of that back button functionality

      Exactly! And when you're a switch user, that means you're effectively left stranded in the new window. And the never-ending problem with trying to use conceptual icons is that not everyone "gets" the concept that you're trying to imply.

      • _Redd 2:12 pm on February 14, 2013 Permalink | Log in to Reply

        What is a “switch” user?

        • esmi 2:54 pm on February 14, 2013 Permalink | Log in to Reply

          Switch access. Think of it like a single button tab key. Used by people with severe mobility problems and can be operated by the hand, foot or elbow. Switch users often use onscreen keyboard software to carry out actual typing (eg completing a form) but, in all other areas of web surfing, can be considered as sighted keyboard navigators with access to just a TAB key.

    • GrahamArmfield 12:12 pm on February 15, 2013 Permalink | Log in to Reply

      @esmi my view is that links should ideally never open a new window, even on links that point to external sites – you should always give the user a choice.

      There are times however when that may break a transactional flow – eg creating a payment on an online banking site, and it may be desirable for a new window/tab to be opened.

      But how to warn users if a link poitns to external site and/or is going to open a new window?

      An icon with an appropriate alt attribute would work for screen reader users as long as it was part of the link. However, yours and @_Redd‘s comments about people ignoring or not understanding visual icons is so true.

      I would not recommend using the title attribute – that is only guaranteed to work for mouse users, and the duplication of data is not always welcomed in screen readers that do voice title attributes – either by default or as a result of user settings.

      • esmi 12:32 pm on February 15, 2013 Permalink | Log in to Reply

        how to warn users if a link poitns to external site and/or is going to open a new window?

        Ideally, in clear text as part of the link text itself.

        yours and @_Redd’s comments about people ignoring or not understanding visual icons is so true.

        One possible way around this is to incorporate a warning message at the top pof the relevant page along the lines of “Please note that links in this page highlighted by [icon image] will open in a new window”.

        or as a result of user settings

        It’s long been my understanding that experienced JAWS users turn off its Verbose mode, so will not hear any title attributes. It could be argued that is their choice and that developers should not be responsible if they (the devs) are using correct & appropriate markup. But there’s no suh “get-out” when it comes to sighted keyboard navigators — such as switch or voice recognition users,

  • esmi 12:19 pm on February 14, 2013 Permalink
    Tags: ,   

    Post Revisons Update 

    I managed to drop into the Core IRC meeting yesterday and was told that the our recent feedback on the new concepts for post revisions was very helpful. New screenshot mockups have now been created to incorporate fixes for the issues that we raised.

    Coding on the new post revisions may begin shortly, so let’s keep an eye on the outstanding tickets and new developments. In the meantime, thank you to everyone who took part in the post revision discussion and let’s keep up the good work.

    We can make a difference! :)

     
    • _Redd 12:54 pm on February 14, 2013 Permalink | Log in to Reply

      That latest mockup is AWESOME!!! It removes ambiguity in so many ways, and, it is easy to digest, cognitively speaking! Woo woo!

      • tady 4:55 pm on February 14, 2013 Permalink | Log in to Reply

        I know it’s just a mock up, but as a fully able person, I actually find the text behind the delete hard to read now. Will this render similar to the example you created above Esmi? If this is the case, then my point is moot and it’s just a symptom of the wireframing tool.

        • _Redd 6:15 pm on February 14, 2013 Permalink | Log in to Reply

          @tady, I sure understand why you find the text behind the delete hard to understand, but you may want to keep in mind that deleting whole paragraphs is not necessarily typical when editing documents. In one of my former jobs, I was basically a document editor, and I had to share those edits with others located at remote points of the globe. The edits would typically be by word or by sentence, not by whole paragraphs, and that strikeout feature (used in Word documents) came in extremely handy for finding edited areas fast.

        • _Redd 6:27 pm on February 14, 2013 Permalink | Log in to Reply

          @tady Although, that may bring up a point for consideration–is the intent to COMPARE versions (no need for deletion marks) or to REVISE versions (deletion marks are expected)–that may make a difference in how the text is emphasized.

          And again, thank you, thank you, thank you, for everything you are doing!

          • tady 8:11 pm on February 14, 2013 Permalink | Log in to Reply

            Yeah, I got this reply on my phone and found myself asking “Good point, what DO I actually mean?!?”

            I suppose for me, as a developer, I expect to see revisions for comparison. I would rarely expect the system to make decisions about which version I wish to chose without my input. Therefore, I suppose in that context, it makes more sense to me to have the content available for comparison WITHOUT the strike through. However, having said that, it is not always programmatically that one might be looking at this feature (I recently had to point out to a journalist who uses WordPress every day for their news site, how to find revisions. To say I was popular as a result would be an understatement!). In this instance, it would make more sense to see them in the context of their title (i.e. as a REVISION) and in that situation, the strikethrough makes perfect sense.

            On the whole, I like the strikethrough as an idea and I do believe, based on Esmi’s examples, it will still be legible. My comments were really, solely based on the wireframes which, having drawn them up myself in the past, I figure is just a factor of the wireframe implementation, than on real life representations of the same.

            Possibly still up for discussion a bit, as I haven’t really answered any questions proper here, but hopefully this gives a bit of clarity on my stance and the context of my original point.

    • esmi 5:12 pm on February 14, 2013 Permalink | Log in to Reply

      Will this render similar to the example you created above

      Yes — see the latest screenshots. I know what you mean but, as far as I am aware, strikethrough is the default treatment for the del tag in graphical browsers since about 1998. Not sure if we should mess around with that too much.

      • Joe Dolson 6:08 pm on February 14, 2013 Permalink | Log in to Reply

        There are some sneaky things that can be done with CSS to modify the apparent weight of strikethrough that can make it a little easier to read:

        del{
        position: relative;
        }

        del::after{
        content: ”;
        border-bottom: 1px solid red;
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        }

        I don’t know whether that’s a good idea, but it would be possible. As I understand it, IE and Firefox increase the weight of the line with the font-weight and size, and this would prevent that from obscuring the text.

        • _Redd 6:23 pm on February 14, 2013 Permalink | Log in to Reply

          @joe, (I want to call you AWESOME Joe for that plugin work you’re doing!!)

          Before pursuing that, let me try to reproduce a problem I had earlier with fancy text-I recall that when manipulating text with some fancy CSS, I found out that the text would not print!

          It was bizzare!

          I promise, I could not or would not make this stuff up. I’ll try and find my old records to see what I did to cause that to happen, but I don’t think it was anything more fancy than adding a border on the bottom to simulate a shadow. I was stunned to see that it caused text not to print.

        • tady 8:16 pm on February 14, 2013 Permalink | Log in to Reply

          Yeah, I’d avoid this on the basis of experience. I’ve never had much joy in replacing a typeface representation with a graphical equivalent. An example would be trying to make the underline on links as a dashed element as opposed to a solid line. It just never really works cross browser with the same stability as the actual (text-decoration:underline, etc) typeface formatting. There’s also the question that the difference or revision may not just be a whole paragraph, but could be a word or a phrase. Applying positioning to this element inline won’t always layout the best. I really can’t emphasise how much I’d shy away from this substitution.

          • Joe Dolson 11:09 pm on February 14, 2013 Permalink | Log in to Reply

            For clarity, it’s not the del element that’s being positioned, it’s a dynamically created element with an independent border being overlayed. Regardless, I don’t disagree: and it’s not certain it would really be any improvement, if the font in use is of average size and weight, anyhow. Although I suppose you could reduce the opacity, as well.

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel