Improving accessibility of image alternative text in 4.7

WordPress 4.7 includes a change to the way image alt attribute values are generated. Formerly, any time WordPress created the markup for an image with an empty alt value, it would attempt to use either the caption text or the image title—in that order—as a fallback value.

In 4.7, we have removed this fallback behavior.

To ensure your images having meaningful alternative text, you should make sure to set a value for alt text in your media library.

How removing fallbacks improves accessibility

The intent of the fallbacks were to ensure each image included alternative text. In practice however, this fallback behavior often resulted in poor user experiences for people using screen readers. As counterintuitive as that may seem, let’s take a look at some common examples.

Consider a situation where we’ve uploaded an image named “edbc4ef7.jpg” without changing any additional information. WordPress will generate the image title from the file name as shown in the following screenshot of the insert media modal.

Attachment details for an image shown in the insert media modal.

Formerly, inserting this image in a post would result in HTML similar to this (simplified slightly for clarity):

<img src="https://example.wordpress.org/wp-content/uploads/2016/11/edbc4ef7-1024x683.jpg" alt="edbc4ef7" width="700" height="467" />

A person using a screenreader on this page would end up hearing the file name read to them, which is not the most helpful experience, and can be quite frustrating when the file name is lengthy.

For another example, setting a caption value but no alternative text would result in markup that looks something like this:

<figure id="attachment_1741" style="width: 660px" class="wp-caption alignright">
    <img src="https://example.wordpress.org/wp-content/uploads/2016/11/edbc4ef7-1024x683.jpeg" alt="This is a caption." width="660" height="440">
    <figcaption class="wp-caption-text">This is a caption.</figcaption>
</figure>

Notice that the alt value and the figcaption text are redundant? WebAIM describes two ways of presenting alternative text:

  • Within the alt attribute of the img element.
  • Within the context or surroundings of the image itself.

The same article goes on to explain that an alt attribute value may be omitted when an identical figcaption is present, to avoid redundancy; but best practice when using a figcaption is to provide a separate and different alt attribute to describe that image to users of screen readers.

In each case, omitting the alt attribute entirely may result in screen readers reading the file name from the src attribute, so WordPress includes an alt attribute with an empty value, i.e. alt="", whenever the alternative text hasn’t been explicitly set—a technique that is common when an image is decorative.

This change will not affect content already published, but will be the expected behavior for any new content published after upgrading to 4.7. For more background on this issue, see ticket #34635.

#4-7, #accessibility, #dev-notes, #media

Media Weekly Update (Oct 14)

This post serves to jump-start discussion before the weekly check in, which takes place in #core-media on Slack. The next meeting is Friday, October 21 at 17:00 UTC and agenda for these meetings includes moving priority tasks forward, providing feedback on issues of interest, and reviewing media focused tickets on Trac.

Summary from last week

The last meeting was Friday, October 14 at 17:00 UTC. You can read the entire chat log in the #core-media channel on Slack.

Attendees: @mikeschroder, @karmatosed@adamsilverstein@paaljoachim, @mapk, @flixos90, and @azaozz.

  • Media organization improvements:
    • Last week, we chatted about starting up design for Media organization improvements. @paaljoachim and @flixos90 started sketching flows in GitHub.
    • @karmatosed mentioned focussing on documenting the current flows this week.
  • Add new core media widget (#32417) – No progress was made this week and it’s now too late for 4.7, but work should continue so it’s ready for a future release.
  • Rotate Full Size Images on Upload (#14459) – @mikeschroder planned to do additional profiling re: complete resize+rotate times for upload vs editing.
  • Better PDF Upload Management (#31050) – @mikeschroder is putting more attention on trying to get this in this release after chatting with @helen.
  • Drag/Drop Ordering of Media Does Not Work in Chrome on touch enabled devices (#31652) – @adamsilverstein noted that the patch to enable sortable on touch devices was ready to commit, which was handled in [38793] this week. Additional discussion about reducing reliance on `wp_is_mobile()` is happening on #33704.
  • Accents in attachment filenames should be sanitized (#22363) – @gitlost has been working on updates for this ticket, which is now closely related to fixing #24661 (`remove_accents()` is not removing combining accents”).
  • Usage of `image_size_names_choose` breaks JS attachment model attributes (#34981)@azaozz suggests using srcset in the media library to make sure full size images aren’t used if a smaller image is available (as described in the ticket description).
  • Responsive images (srcset) can include images larger than the full size (#36477) – The latest patch, which utilized `Imagick::getImageColors` adds a significant performance concerns. @mikeschroder punted this out of the current milestone for now.

Agenda for the next meeting

This week, discussion will continue on priority projects for the 4.7 release. If you have specific tickets that you want to have discussed, feel free to leave a comment on this post or reach out on Slack in the #core-media channel.

#4-7, #media

Media Weekly Update (Oct 7)

This post serves to jump-start discussion before the weekly check in, which takes place in #core-images on Slack. The next meeting is Friday, October 14 at 17:00 UTC and agenda for these meetings includes moving priority tasks forward, providing feedback on issues of interest, and reviewing media focused tickets on Trac.

Summary from last week

The last meeting was Friday, October 7 at 17:00 UTC. You can read the entire chat log in the #core-images channel on Slack.

Attendees: @karmatosed, @joemcgill, @mikeschroder, @swissspidy, @flixos90, @desrosj, @azaozz, @paaljoachim, @markoheijnen, @adamsilverstein, @jorbin, @designsimply

  • Media organization improvements:
    • @joemcgill opened up conversation about a feature project to start work on this, explaining that we have the chance to take a UI/UX first approach.
    • @karmatosed is going to head up the UI/UX side of things.
    • @joemcgill thinks the likely first step is exploration of base taxonomy support, and a review on how it is currently broken with media.
    • @karmatosed asked all those interested in working on this to create sketches of their ideal media categorization flow for review by next week.
  • Add new core media widget (#32417)@joemcgill noted that the runway for 4.7 is ending, but work can continue for a future release. @designsimply to refresh the current patch on the ticket by Monday (October 10), and may target images specifically as a first step (this is still missing a refreshed patch).
  • Rotate Full Size Images on Upload (#14459)@mikeschroder profiled this and found that while the clock time for checking and setting orientation is minimal, it took ~230ms for an iPhone 7-sized image to be rotated (total 5.6s resize time) on a shared test server. He thinks total resize time should be reduced before this is added, and that #37140 is a better step for 4.7. After discussion with @markoheijnen and @azaozz, consensus seems to be that benchmarking of upload vs manual rotation should be done to prove the UX case for #37140 over #14459.
  • Accents in attachment filenames should be sanitized (#22363)@joemcgill pointed out the new patch here from @gitlost, which looks promising. @swissspidy to take a look over the weekend (feedback is on ticket now, but could use more eyes).
  • Better PDF Upload Management (#31050) – Everyone likes this, but time running out for 4.6. @markoheijnen to target next patch by Wednesday (Oct 12) (this was moved out of the milestone, as it’s currently missing a refreshed patch).
  • Responsive images (srcset) can include images larger than the full size (#36477)@mikeschroder didn’t have time to performance test the patch. To do so shortly and post feedback on the ticket (feedback is on ticket now).

Agenda for the next meeting

This week, discussion will continue on priority projects for the 4.7 release. If you have specific tickets that you want to have discussed, feel free to leave a comment on this post or reach out on Slack in the #core-images channel.

Edit: Updated post per status on Wednesday, Oct 12.

#4-7, #images, #media

Media Weekly Update (Sept 30)

This post serves to jump-start discussion before the weekly check in, which takes place in #core-images on Slack. The next meeting is Friday, October 7 at 17:00 UTC and agenda for these meetings includes moving priority tasks forward, providing feedback on issues of interest, and reviewing media focused tickets on Trac.

Summary from last week

The last meeting was Friday, September 30 at 17:00 UTC. You can read the entire chat log in the #core-images channel on Slack.

Attendees: @joemcgill, @mikeschroder, @swissspidy, @flixos90, @azaozz

  • Unexpected change to media title behavior in WP 4.6.1 (#37989)@joemcgill noted that @sergey found a fix for the remaining UTF-8 issues and it has been committed to trunk, but needs to be backported still. @joemcgill working on getting this done. Test please!
  • Downscale to only smaller images with srcset (#36477) – It looks like a true fix is not likely to land in 4.7, since this would have likely been part of changing the way WordPress handles full size images. @mikeschroder and @joemcgill to test the current patch for performance and SSIM.
  • Better PDF thumbnails (#31050)@markoheijnen was not able to attend, but previously noted that he is continuing work on this for a week or two to try to make 4.7.
  • WordPress image’s title is not alt (#34635)@joemcgill chatted with the Accessibility team about this, and the suggestion is that WordPress should no longer guess at an appropriate alt if the user hasn’t explicitly added one. He notes that this shouldn’t be that difficult to patch, but the change will need to be well communicated.
  • image_send_to_editor filter is not fired when an Image is edited or replaced in TinyMCE (#34823) – Based on @adamsilverstein‘s feedback, it looks like the ticket should be closed, as there’s a different filter intended for this purpose.
  • Usage of image_size_names_choose breaks JS attachment model attributes (#34981) – Chatted about a bit of background. @azaozz took a look and posted a new patch for review.
  • Sanitize accents in attachment filenames (#22363) – From @gitlost’s comments, it looks like there are fixes in remove_accents() necessary that should happen first, and would likely fix the base bug here. His work on it is mostly in #24661. @mikeschroder to dig into the progress of Safari’s support of these filenames. Feedback from those who have strong knowledge in UTF/character encodings would be appreciated.
  • Rotate Full Size Images on Upload (#14459 and #37140) – Would rather not destroy EXIF/IPTC in full size images (with GD), so may be better to fix this in Imagick first. Needs performance testing. Comment left on ticket.
  • Add new core media widget (#32417) – No updates here. May not be 4.7 at this point, but @joemcgill reaching out to @designsimply for status.
  • Media organization improvements:
    • Make media library searchable by filename (#22744) – @joemcgill added a patch to fix a JOIN issue found by @flixos90. Please continue testing this, especially with large media libraries.
    • @flixos90 opened a GitHub repo to work on media taxonomies/UI, and is organizing a feature project around it. @joemcgill suggests an initial meeting with @karmatosed for high level direction, followed by changes in the plugin, or core directly where appropriate.

Agenda for the next meeting

This week, discussion will continue on priority projects for the 4.7 release. If you have specific tickets that you want to have discussed, feel free to leave a comment on this post or reach out on Slack in the #core-images channel.

#4-7, #images, #media

Media Weekly Update (Sept 22)

This post serves to jump-start discussion before our weekly check in, which takes place in #core-images on Slack. Our next meeting is Friday, September 23 at 17:00 UTC and the agenda for these meetings include moving priority tasks forward, providing feedback on issues of interest, and reviewing media focused tickets on Trac.

Summary from last week

Our last meeting was Friday, September 16 at 19:00 UTC. You can read the entire chat log in the #core-images channel on Slack.

Attendees: @joemcgill, @paaljoachim, @markoheijnen, @helen, @flixos90, @afercia

  • Unexpected change to media title behavior in WP 4.6.1 (#37989) – This is a regression, which has been partially fixed.
  • Sanitize accents in attachment filenames (#22363)@mike and @markoheijnen were planning to work on #22363 in person this past week and will decide on next steps.
  • Better PDF thumbnails (#31050)@markoheijnen tested out plugins that claim to handle this and found that all suffer from the same “corrupted image” issues that have blocked this ticket. The strategy is to see if we can detect which PDFs will fail and fall back to a default PDF icon when that is the case.
  • Media organization improvements:
    • Make media library searchable by filename (#22744) – This was fixed in [38625].
    • We had a lengthy discussion about the potential for adding a default taxonomy to attachments, including identifying some related tickets that would need to be addressed (e.g., #22938)
    • @paaljoachim shared the results of some research into how non-WP image applications handle media organization in the form of this Google doc.

Agenda for our next meeting

This week, we will continue discussion on our priority projects for the 4.7 release. If you have specific tickets that you want to have discussed, feel free to leave a comment on this post or reach out on Slack in the #core-images channel.

Priority Tickets:

HTTPS Update: @johnbillion recently posted a call for an HTTPS Working Group on the make/core blog. Meetings will be on Fridays (time TBA).

#4-7, #media

Media Weekly Update (September 9)

This post summarizes the most recent media meeting, which takes places weekly in #core-images on Slack.

Our next meeting is Friday, September 16 at 19:00 UTC and the agenda for these meetings include moving priority tasks forward, providing feedback on issues of interest, and reviewing media focused tickets on Trac.

It was brought up that the current meeting time is not great for @swissspidy or @flixos90, and they’d prefer to meet earlier, which we would start next week at Friday, September 23 at 17:00 UTC or alternatively on Thursday, September 22 at 17:00 UTC. Please sound off in the comments as to whether you’d be able to make either of the above to help decide on whether the meeting time will change.

Agenda for the next meeting

This week, we will check in on the priority projects for the 4.7 release. If you have specific tickets that you’d like to have discussed, please leave a comment on this post or reach out on Slack in the #core-images channel.

Recap of the last meeting

Our last meeting was Friday, September 9. You can read the conversation log in #core-images on Slack.

Attendees: @mikeschroder, @markoheijnen, @flixos90, @adamsilverstein, @swissspidy, @paaljoachim, and @achbed.

Media library organization improvements

  • @joemcgill and @swissspidy are working on adding the ability to search the media library by filename (#22744).
  • Following the meeting, @joemcgill posted some great notes on his thoughts regarding process for forming a roadmap for these improvements. You can read them on Slack.
  • Separately, we would like to engage members of the design team in initial conversations about what UI/UX improvements can be made to the media library to make it easier for people to organize and find their media. It’s likely that any UI changes in 4.7 would be relatively light, but we want to begin planning now and focus work during this release on getting as much infrastructure in place as we can.

Improved full size image optimizations (#37840)

Good conversation around ways to solve or work around the issue of increased CPU time/HTTP failures for image resizing.

  • Proposed closing #36534, and creating tickets from the issues found. It was great for gathering information, but has become a dropbox for all HTTP Error related tickets.
  • This is related closely to the full size image task because we want to avoid making the timeout issue worse when adding another resize.
  • In addition to running additional profiling to find what’s now taking the most time, one thing @joemcgill and @mikeschroder discussed in particular is a “try again” or “continue” button as a first jump into making it easier to recover when these failures happen. At the moment, this isn’t a thing because WP only saves meta after creating all sizes is completed successfully, and also because the code doesn’t support creating “the sizes that are left” (related: #15311).
  • @mikeschroder would also like to see investigation into making the HTTP Error more specific, but this could be part of the above project or solved without users needing to know the details, when WP can recover by itself.

Core Media Widget (#32417)

No Update. Reached out to @designsimply and @fab1en.

HTTPS fixes

No Update. Reached out to @johnbillion to see what plans are for 4.7.

PDF Thumbnails (#31050)

No time last week due to travel. @markoheijnen to send update this week.

Accents in attachment filenames should be sanitized (#22363)

@gitlost provided great feedback on the ticket (thanks!), but it looks like it’s going to need additional work before an initial commit.
@mikeschroder looking into this with @markoheijnen at WC Tokyo this week.

#4-7, #media, #weekly-update

Media Weekly Update

This post serves to jump-start discussion before our weekly check in, which takes place weekly in #core-images on Slack. Our next meeting is Friday, September 9 at 19:00 UTC and the agenda for these meetings include moving priority tasks forward, providing feedback on issues of interest and reviewing media focused tickets on Trac.

Agenda for our next meeting

This week, we will continue discussion on our priority projects for the 4.7 release. If you have specific tickets that you want to have discussed, feel free to leave a comment on this post or reach out on Slack in the #core-images channel.

Recap of our last meeting

Our last meeting was Friday, September 2. You can read the conversation log in #core-images on Slack.

Attendees: @joemcgill, @mike, @kkoppenhaver, @lukecavanagh,@paaljoachim, @markoheijnen, @swissspidy, and @azaozz.

Media library organization improvements

  • @joemcgill and @swissspidy are working on adding the ability to search the media library by filename (#22744).
  • @paaljoachim compiled a lists of WordPress plugins that exist to extend/improve media management and a document comparing features of these plugins.
  • Next step will be to compare the list of current plugins and decide on an initial approach for adding a default taxonomy structure for attachments.
  • Separately, we would like to engage members of the design team in initial conversations about what UI/UX improvements can be made to the media library to make it easier for people to organize and find their media. It’s likely that any UI changes in 4.7 would be relatively light, but we want to begin planning now and focus work during this release on getting as much infrastructure in place as we can.

Improved full size image optimizations (#37840)

No real update this week, should pick up once filename search is finished.

Core Media Widget (#32417)

@designsimply was traveling. We’ll plan on an update at the next meeting.

HTTPS fixes

@johnbillion is planning a make/core post outlining the plan for this release. In the mean time, the list of HTTPS related issues can be found in this report.

PDF Thumbnails (#31050)

@markoheijnen is reviewing the issue and looking into how plugins have addressed some of the remaining bugs.

Accents in attachment filenames should be sanitized (#22363)

@mike is reviewing feedback on this issue, but is planning on committing an initial fix soon.

Rotate full size images on upload (#14459 and related #33051)

@markoheijnen is looking at this issue for 4.7.

#4-7, #media

Media kickoff meeting recap (August 26)

This is a recap from the the Media Component kickoff meeting last Friday, August 26. The main goal of this meeting was to discuss potential focus areas for 4.7. Read the conversation log in #core-images on Slack. Our next meeting is Friday, September 2 at 19:00 UTC. The agenda will be to continue discussion on priority projects and review media focused tickets on Trac.

Attendees: @joemcgill, @bravokeyl, @mike, @azaozz, @nonproftechie, @designsimply, @johnbillion, @iseulde, and @paaljoachim.

Media library organization improvements

Defining scope for this project is important in order to make meaningful progress. Here is an outline of the plan that was discussed:

  • Start simple by addressing #22744
  • Begin discussing a default taxonomy structure for media in Core
  • Research existing plugins that address media organization and review approaches to taxonomy/data structure and UX/UI (@paaljoachim volunteered to put together an initial list in this Google Doc)
  • Research non-WP apps for UX/UI inspiration

We may only do bits of this in 4.7, but the research should result in an initial proposal/road map for the media library including any recommendations about data structure, API, or UI changes that may be required.

PDF thumbnails (#31050)

@markoheijnen is leading this effort. People can get involved with testing and knocking out the final bugs/edge cases. Assistance from people with existing PDF/ImageMagick experience would be grand.

Add WP_Image and/or WP_Attachment (#23424)

Core could benefit from a standard way of modeling attachment data, including methods for generating/retrieving pieces of that data without redundant calls to lower level functionality. However, as @johnbillion pointed out, this should start with a well defined set of use cases which demonstrates the problems we would be addressing by adding new classes.

This is probably a lower priority for this release unless there is increased interest.

Better full size image optimization (#37840)

Many authors upload and embed unoptimized full size images in their content. We may be able increase front end performance by optimizing full size uploads. Some initial suggestions to this end include:

  • Look into creating an official ‘full’ or ‘master’ size which would replace uncompressed uploads on the front end and could potentially be used to speed up additional edit operations.
  • It’s important that the original upload be stored as is and not affected at all so we always retain a “gold standard” backup.
  • We would need to account for times where users are optimizing their images before uploading, i.e., this new method shouldn’t add page weight.
  • If adding a new size is required for this, it will likely require optimizing the time and memory it takes to resize to avoid the dreaded “HTTP Error” (#37853)
  • Additionally, could we be smarter about creating intermediate sizes and only do so when an intermediate size would reduce file size and not just dimensions?
  • We may want to define maximum dimensions for the “full” size.

Core media widget (#32417)

A lot of progress has already been made on this feature, but it seems to have gotten stuck in a complexity/decision rut. The media component team may be able to help shepherd this project in 4.7 by supporting those already working on it.

@designsimply suggests simplifying the approach to only support images for a V1 may help move things forward. Either way, decisions need to be made about what should be supported in an MVP and a plugin should probably created for testing.

HTTPS issues

We fixed many HTTPS bugs in 4.4 and 4.5, but there are still many remaining issues.

@johnbillion is planning on leading a working group to pick this effort back up fo 4.7, with a focus on:

  1. Fixing HTTPS bugs, and
  2. Aiding users switching from HTTP to HTTPS, in whatever form that takes.

Copy/paste images directly into the editor (#27970)

This request gained some interest in the wishlist post. @azaozz and @iseulde have looked into this in the past and it seems the concerns outlined in the original ticket remain, so this is probably still a wontfix for now.

#4-7, #media

Media Kickoff Meeting for 4.7

We’re planning to have weekly meetings in the #core-images Slack channel throughout the 4.7 release cycle. The kickoff meeting is set for today, August 26, at 19:00 UTC. We will use these meetings to keep projects moving forward and to discuss any priority tickets that require discussion.

Meeting Agenda

The main purpose of the kickoff meeting is to identify the priority projects for 4.7 and to determine who is available to work on those projects. We will also review the current meeting schedule to see if a different time would be better for those wanting to be involved.

Potential Focus Areas for 4.7

  • Improve media library management (#22744, explore default taxonomy structure, UX issues)
  • Better PDF management (#31050)
  • Create a standard WP_Image or WP_Attachment class (#23424)
  • Better optimization of full size images (#37840).
  • Core media widget (#32417)
  • Address HTTPS issues with media (#34109, #25449, #35182, etc.)
  • Improve responsive image defaults.
  • Support responsive images in WP_Customize_Media_Control (#36191)
  • Support responsive images in the editor.

Wishlist Tickets

Additional issues that were mentioned in the comments of the 4.7 wishlist post include:

  • Return option for media_sideload_image()  (#19629)
  • Add hook in wp_ajax_save_attachment() for additional attachment fields (#23148)
  • Updating link URL on image within admin with gallery (#13429)
  • Accents in attachment filenames should be sanitized (#22363)
  • Reconsider SVG inclusion to get_allowed_mime_types (#24251)
  • Dynamic image sizes in the editor (#35094)
  • Paste images into content area (#27970)
  • Add a drop zone to the the featured image meta box.
  • Revisit the Image Flow project.
  • Improve documentation/instruction for the WP media modal.
  • Address inconsistencies in the media library UI (see comment).

 

#4-7, #media

Editor changes in 4.6

In WordPress 4.6 TinyMCE is upgraded from version 4.3.10 to 4.4.1. There are numerous bug fixes and several new features, most notably a new inline theme (changelog).

The wpview editor plugin (that is responsible for showing gallery, video, audio, and oEmbed previews) was updated to use the TinyMCE API for non-editable elements. This brought some small changes and improvements in the UI, for example “views” are draggable now. On the back-end the wp-mce-view-unbind event was removed as it doesn’t exist in the API. It was intended for cleanup/unloading but was never very reliable. If a plugin needs to unload instance dependent scripts, it can use mutation observer to monitor when the view node is deleted. See #36434 for more information.

wpview remains an experimental API, though with each iteration it is getting closer to being finalized. As an experimental API, breaking changes are expected. As always, please test your plugin now if it modifies or depends on the editor, especially if you use experimental features like wpview.

#4-6, #dev-notes, #editor, #media, #tinymce