Make WordPress Accessible

Tagged: images Toggle Comment Threads | Keyboard Shortcuts

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

    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 | 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 | 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 | 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 | Reply

      Great work Graham – many thanks!

    • GrahamArmfield 1:31 am on April 3, 2013 Permalink | 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 | 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 | 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 | 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 | 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 | 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 | 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!

  • Graham Armfield 10:01 am on February 25, 2013 Permalink
    Tags: , , images, ,   

    Add Media Panel – Accessibility Issues 

    I’ve raised this post as I feel that the issue of the Add Media panel accessibility needs some debate amongst the accessibility community.

    Last week I raised three WP trac tickets covering my take on the problems from the keyboard access, screen reader and VR aspects. They are: #23560 and #23561.

    The main problem as I see it is that it is not possible to select/deselect any of the media without using a mouse.

    The functionality primarily acts like a group of checkboxes – selecting one or multiple elements, with feedback that they have been selected. However, that is not how the functionality has actually been implemented – it’s a series of divs contained within an unordered list. There appears to be nothing to receive focus. There are links for each file, but the links appear empty although they are used to show the selected icon. These links are also initially invisible using CSS techniques that hide them from screen readers – hence the no tabbing into the images issue.

    Is the use of ARIA going to really be able to help here?

    When mouse users select an image they can update the attribute values for that image using the panel to the right – which updates its content automatically. Allowing keyboard users to quickly reach the attributes boxes would obviously be desirable – the alternative being tabbing through all the previously uploaded files.

    The media selector panel has been implemented with infinite scrolling, so on mature and/or larger sites with many images/files (I have one) the list of images gets bigger and bigger. From an accessibility perspective I’d favour paging over infinite scrolling, but what’s your take on that?

    Is this another area where bending the new functionality to include accessibility might be too much? Is this another place where an accessibility mode is going to be required?

    What do you think?

     

    • _Redd 2:24 pm on February 25, 2013 Permalink | Reply

      So, first of all, thank you for your breakdown as to exactly what is going on with the Add Media panel. I had no idea.

      1. I am not finding great support for ARIA in my other efforts. We should use it where ever possible, of course, but I think it is a mistake to depend on it.

      2. I am learning that, so much, too much, is mouse-dependent. It’s not just about making it accessible for the blind, it’s about the other users who can’t use a mouse, so this is something critical. How hard would it be to add a:focus to the CSS?

      3. While those who are blind may not need to see “images”, there is certainly a need to “see” the accessible pdf files, which are considered images. (Now I wonder if WordPress is stripping off, or blocking access from, the accessibility features that can be enabled in Adobe pdf files). So definitely, some sort of alphabetical sorting capability would be in order. That can’t be too hard with WordPress’s order_by functions, can it?

    • Donna W. Hill 10:00 pm on February 25, 2013 Permalink | Reply

      I recently purchased a domain from WP in order to have an online vehicle for promoting my upcoming novel, The Heart of Applebutter Hill. I am blind and use the Jaws screen reader and have both the IE9 and Firefox browsers. I have spent over a hundred hours in the past few weeks trying to figure out how to use WP efficiently and am starting to se some results. I’m not clear about the connection between WP.org and WP.com; some of the help files seem similar. If there is a connection, I thought you might be interested in my feedback. If not, I hope you will know to whom this information should be forwarded.

      The issue that has taken most of my time has to do with Media. My first suggestion for WP is to put together a concise Tutorial/Help topic addressing the definitions and description of the various types of images – header image, profile image, featured image, images inserted into posts and pages, attached and unattached images, permalink vs. File URL, the settings options for image size, which are editable, alternative options for uploading and inserting images and explainations of the difference between and the purpose of the file title, caption, alt tag and description. Currently, what WP has is incomplete, poorly described and scattered. That would help everyone. Beyond that, there should be a concise and easily located section about how WP currently works (or not) with access technology.

      When I realized that the Header image has such a weird width/heighth ratio, I opted for one of WP’s. In terms of uploading images, I find that the uploader, though squirlly, works. The option to upload media via e-mail is much better, but doesn’t work for all photos, though I haven’t yet figured out why.

      The next thing I got bogged down with was “Featured Image/Set Featured Image.” It’s so prominent in the image edit area, that I thought it was something that would show up inside the post or page. Once I realized that it was not, I moved on.

      Using the “Add Media” option from the edit field of a post or page brings up a page where you are supposed to be able to select and insert an image from those you have already uploaded into the body at the point of the cursor. This displays differently in IE and Firefox. In IE, there is a list of links, and Jaws says, “Link, deselect” for all of them, giving no indication what picture it’s talking about. In Firefox, there is a list which says it contains the proper number of image files, but only one is visible to Jaws. For instance, Jaws will say, “List of 9 items” and then, Link, Dog in Autumn Leaves,” followed by nothing else other than “list end.” For some reason, Jaws does read the file name in Firefox. Nevertheless, neither browser can actually be used to insert an image using Jaws.

      Since WP’s tutorials give this option pride of place, Jaws users may think it’s the only option. The best way to insert images in posts and pages that I have found is to use the alt m command from inside the edit field of the body of the post or page. It may seem at first that this option couldn’t possibly work. Using it causes Jaws to immediately jump out of forms mode, but WP apparently knows where the cursor was. Instead of going to the Media Library, “Alt m” opens a dialog in which WP requests certain information.

      The first thing it wants is the URL of the picture being inserted. It’s important to let screen reader users know that they should collect this information from the Media Library ahead of time and keep it in a document you can easily find offline. The next thing you need to know is that, despite the fact that in the Media Library the permalink for the image is right under the name and you really have to go on a hunt to find the File URL, it is the File URL that Word Press wants. Once it’s in the editfield and is Ok’d, another edit field appears requesting the alt tag. Even when the alt tag has been defined in the Media Library, it is not visible to Jaws in this edit field. I don’t know if it’s a Jaws or WP issue. Nevertheless, this is another use for the file information document, and when I copy the alt tag and paste it in, it works.

      The matter is further complicated for screen reader users by the fact that whether you use the permalink, which seems most obvious, or the File URL, which is correct, Jaws will recognize a graphic on the post or page, complete with alt tag. This promotes the illusion that you have been successful. Only when viewed by a sighted person do you find out that the permalink version is an empty box.

      The Media Library itself seems to be working for me better than you indicate in this post. The checkboxes at the top of each image’s section can be accessed with “x” or “shift x,” and one downarrow gets you to the link for the full list of edit options for that image. The search field also works.

      The other thing that would help navigation is to change the configuration of the major area of the Dashboard. If I downarrow through the page, I can tell that it is divided into sections with a major link followed by a list of corresponding links. It would be easier for screen reader users an no bother for anyone else to change this by making headings out of the primary link in each section — Posts, Pages, Media, Appearance, Settings and so on. If you don’t realize that “Media” shows up as both a section and under Settings, for instance, you can quickly get lost by using Jaws’ links list.

      • _Redd 1:07 pm on February 26, 2013 Permalink | Reply

        @Donna this feedback is amazing….thank you so much. For the record, as a totally sighted user, I also had trouble with understanding the featured image feature in WordPress. In fact, there is a ticket to that very problem for which developers are creating a fix.

        link to ticket for Featured Image

        Regarding the following:

        It would be easier for screen reader users an no bother for anyone else to change this by making headings out of the primary link in each section — Posts, Pages, Media, Appearance, Settings and so on. If you don’t realize that “Media” shows up as both a section and under Settings, for instance, you can quickly get lost by using Jaws’ links list

        I also encountered that same confusion as a totally sighted user, so I think there is real merit in what you are saying.

        @Graham @ceo I wonder if we can somehow work with UI team, docs team to address some of these problems? What are your thoughts on it?

        • ceo 1:27 pm on February 26, 2013 Permalink | Reply

          For the record, as a totally sighted user, I also had trouble with understanding the featured image feature in WordPress. In fact, there is a ticket to that very problem for which developers are creating a fix.

          I find it gets even more confusing because not all themes utilize featured images in the same manner. Some display them only on specific views while others display the image on all pages (post, archives, excerpt, etc.). Sometimes having a featured image and the same attached/inserted will show you a double image and other times not. This alone makes documenting what exactly a featured image is rather difficult since there’s no single treatment for what to expect depending on how the theme utilizes them.

          As to the links, that’s been brought up before (and I think there’s probably a ticket somewhere, though of course I can’t find one now). More descriptive links would be very beneficial given the sheer number of links present in the admin. And actually is somewhat part and parcel with the accessibility of the Media Panel, too, because when arrowing down you can move outside of the media window and not realize that what you are editing is actually back into your post or a link that will take you away from the edit screen entirely.

          • _Redd 1:32 pm on February 26, 2013 Permalink | Reply

            Great points, as always, ceo…

            …and I forgot totally about the theme issue……

            That said, I think this group, through its discussions, is in the process of nailing down the particulars and the details that developers need to develop accessible features. I’m sure learning a LOT just by being here. I’m betting the conversations here are the kernel to a next generation of WordPress that incorporates accessibility, not just add to it.

            Thank you (yet again) ceo

        • _Redd 2:01 pm on February 26, 2013 Permalink | Reply

          @graham @ esmi @ceo @joe and anyone else involved in the accessibility efforts, regarding Donna’s recommendation:

          The issue that has taken most of my time has to do with Media. My first suggestion for WP is to put together a concise Tutorial/Help topic addressing the definitions and description of the various types of images – header image, profile image, featured image, images inserted into posts and pages, attached and unattached images, permalink vs. File URL, the settings options for image size, which are editable, alternative options for uploading and inserting images and explainations of the difference between and the purpose of the file title, caption, alt tag and description

          I have to put together a tutorial for my workcenter on just these items. Let’s talk (maybe in IRC meeting) whether I could volunteer to help out with this, or coordinate on some level to assist. We could accomplish multiple tasks simultaneously; getting a tutorial out there, while incorporating accessibility issues.

          My only concerns would be my own competence (or lack of it), and whether or not I would be stepping on someone else’s territory. I absolutely rescind any request to do this if someone else is already working on it, or has plans to.

    • esmi 3:05 pm on February 26, 2013 Permalink | Reply

      A tutorial would be better handled by the Support group as it’s not really accessibility-specific. In fact, there might already be something available in the new User Guide.

    • _Redd 4:15 pm on February 27, 2013 Permalink | Reply

      Did you see the awesome ticket here?
      Hooray!

      3.6-Nav Menus Tracking Ticket

      It references ticket 14045 Give the menus page an accessibility mode option, like the widgets screen.

      Terrific, super! Appreciation for this!

    • Leslie Goldman 3:28 pm on March 4, 2013 Permalink | Reply

      I updated to the latest version. I cannot figure out how to resize my photos. I am up against a conference deadline. I had no problem the a previous version where I could designate what size photo I wanted. I am very stymied my work now. How to you edit the size of a photo for insertion into a post or pages?

      http://plantyourdream.net/?page_id=15535

  • Jen Mylo 11:06 pm on January 3, 2012 Permalink
    Tags: alt, images   

    Hey @esmi et al With the new plugin… 

    Hey @esmi et al: With the new plugin page headers (see http://wordpress.org/extend/plugins/buddypress/ http://wordpress.org/extend/plugins/bbpress/ http://wordpress.org/extend/plugins/login-logo/ for examples), what if anything should we be doing around alt tags for those images?

     

    • Graham Armfield 12:04 pm on January 4, 2012 Permalink | Reply

      Hi Jane, happy new year.

      In the examples you quote the images are mainly decorative – certainly in the case of BuddyPress and bbPress – so they should have an alt attribute set as empty string – eg alt=”".

      In the case of the Login Logo one, the image contains more information (although it’s available elsewhere) so perhaps the alternate text should contain more. But it’s not a good idea to stuff the alt attribute with a long string.

      As a general rule, alt text should describe what the image shows or represents. If an image is a link then the alt text should describe the link destination. If the image is purely decorative then the alt text should be an empty string.

      Images should never be presented without the alt attribute as this will cause some screen readers to voice the entire path to the image – often a verbose, obscure or meaningless experience.

      So to determine what the alt text should be for these header images, whoever is supplying them should also supply appropriate alt text to go with them.

      Hope that helps

    • asdjqwueqwep 4:07 am on January 13, 2012 Permalink | Reply

      Good job Sven.
      Now, insert this function:void ht1632_clear()

      for (int i=1; i<=4; i++)
      ht1632_clear(i);
      and leave the #define cls ht1632_clear in place, together will all calls to cls.
      Basically, we re-defined the old ht1632_clear (with no parameters) function.(As before, I did not test this.)

  • esmi 9:34 pm on October 17, 2011 Permalink
    Tags: images   

    Try to figure out why it was considered necessary to add the title of an image as a title attribute to the image markup when inserting images into a post. Whose idea was that? The image’s title attribute serves no real purpose for sighted users but creates a whole load of completely unwanted noise for some screen reader users. Additionally, the title attribute is completely inaccessible to sighted non-mouse users.

    So what’s the point of it?

     

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