Working With WordPress’s New Media Widgets While Using A Screen Reader

2017’s two major WordPress releases introduced several new widgets. Audio, video, gallery, and image, among others. Most of the new widgets are media-related, and require users to interact with WordPress’s media modal and media library.

The media modal has been a source of significant frustration in the past for screen reader users, unless you use a specific commercial screen reader and your version of that commercial screen reader is up-to-date. The level of frustration has been significant enough to discourage people who use screen readers to leave out media on their sites altogether and opt to use closed platforms to share their media instead.

And yet, you can’t build a modern site without some media included. Media like images can help break up walls of text, making your content easier to read. This means that the media modal is unavoidable. Thanks to incremental improvements in both the code used to build the WordPress media modal, as well as improvements in NVDA 2017.4, the frustration level has been significantly decreased, and while the experience isn’t completely frictionless, adding media to widgets, posts and pages is no longer something that’s a stretch to reach for people who use screen readers.

I decided to turn this section of the tutorial on widgets into its own separate post for easier reference, and because the general widgets tutorial is already long. This material will also come up again when we get to the sections on editing and creating posts and pages, and I’ll reproduce these steps in those sections so you don’t have to refer back to this post in order to find them. I’ll go through adding the audio widget step-by-step, from first adding the widget to selecting audio for it. Because the process is almost identical for the image, video, and gallery widgets, I’ll note the differences between these and the audio widget. With all of that said, let’s get started.

Help Keep This Series Free

$685 of $20,000 raised
Each post in this series takes a significant amount of time to research,
write, and edit. In order to make this effort sustainable, I would need to
charge a minimum of $100 U.S. per month in order to compensate for the time
it takes to write this material and the size of the screen reader users
market, which is around 5% of the total market of people with disabilities. This series benefits the whole WordPress community as we strive to create a
more open and more inclusive internet. The group of people who will benefit from this series the most are also the
least equipped to afford to pay a fee like this to access it. In the United
States, as of 2015, 58% of the blind
community is unemployed, and 29% live below the poverty line. Most of these people live
on a fixed income that is less than $1,000 per month.

Your sponsorship will ensure that everyone who uses screen readers
with WordPress get the same opportunity as those who do not use screen
readers: documentation they can freely use to learn WordPress, similar to
what exists in the WordPress Codex for mouse users.

This content has to stay free for screen reader users, and for everyone
else. There’s no flag you can set to detect if a site visitor is also a
screen reader user that can be used to then unlock content. And given the
horrible things being done with technology just in the last year alone,
being able to detect screen readers is technology that should never exist.

The amount of time It takes to maintain this is not something I can do for
free and so I’m asking, as an alternative to charging premium prices for
this documentation, for donations in order to keep this material free
to the WordPress community in general and people who use screen readers in
particular. Your financial assistance will ensure that each WordPress
administration screen is properly documented for people who use screen
readers, and that each post is updated when a change to WordPress requires
it. Every donation helps, and there are some sponsorship opportunities as
well.

In exchange for making this possible, the generosity of sponsors will be
acknowledged with the name, logo, and a link to their flagship product
several times in each post.

$
Personal Info

Donation Total: $5.00

The Audio Widget

From your widgets screen, with accessibility mode activated, navigate to the heading labeled “Audio”. Press the up-arrow key once until you encounter a link labeled “Add audio,” and then press enter on that. On the next screen, navigate to the heading labeled “Widget Audio,” or press your screen reader’s shortcut key for navigating to an edit field specifically, or a form control in general, to navigate to the “title” field for this widget. Using the shortcut key to navigate to an edit field specifically will be quicker, because if you navigate to form controls in general, you’ll have to move past the “expand/collapse menu”, “help”, and “screen options” buttons.

Once you’ve navigated to the “title” field, enter a title. If you decide that you don’t want a title for this instance of the audio widget, leave it blank. If you decide to leave the title blank, your audio widget will not have any heading associated with it. This can impair your site’s useability for some users, so if your audio widget contains a piece of content you’d rather your users not skip, consider giving it an enticing title that will grab attention and interest your users in exploring your audio content.

Directly below the “title” field, you’ll find a message that says “No audio selected”. This message will disappear once you’ve selected an audio file for the widget. Beneath the message, you’ll find a button labeled “Add Audio.” Press enter on this, and the fun begins.

Once you press enter on the “Add Audio” button, focus moves to the media modal. This modal appears at the bottom of the document object model, which means it appears after the “Thank you for creating with WordPress” message. Once you’ve navigated into the modal, the first thing you’ll find is the “Close media pannel” button. If you press enter on this, the media modal closes, and focus moves back to the “Add Audio” button. Press the “Add Audio” button again to re-open the modal if you’ve accidentally closed it.

Directly below the “Close media pannel” button, you’ll find two links:

  • “Add audio”, which is selected by default, and
  • “Insert from URL”, which you can select by pressing enter if you don’t want to or can’t host the media yourself, and you want to insert it into the widget from another source.

Next, you’ll find a heading at level one with the text” “Add audio”. This text will change to “Insert from URL” if that option is selected. Directly beneath the level-one heading, you’ll find two links:

  • Upload files, and
  • Media library, which is selected by default.

Below these two links, you’ll find a combo box that allows you to filter media by the date it was uploaded to your media library, and the default value is “All dates”. Below the date combo box, you’ll find a search form you can use to search for media. If you leave the search field blank, you’ll see a list of all audio you’ve uploaded to your site, shown according to filename. Each filename is a checkbox. Once you check the filename you want to insert, you’ll be dropped into browse/forms mode, and your screen reader will announce the URL of the file you’re inserting. The field you’re being dropped into is the search field. If you press tab, you’ll be able to navigate through the list of all the audio you’ve uploaded, and you’ll hear a message letting you know which filename you’ve selected, and that you can deselect it. Pressing tab again, you’ll hear “filename checkbox checked deselect button”, where “filename” is the name of the file.

We interrupt this important program to bring you a message of gladness and sincere thanks.

Wait, did you say we can select previously uploaded media?

Yes. You read that correctly. If you’ve already uploaded any kind of media to your WordPress installation, you can now select media you’ve already uploaded to be inserted into your widget, instead of having to re-upload the media again if you want to use it, and you can check and uncheck boxes without being in browse mode. For a while, you could only do this if you were using Jaws for Windows. If you were a VoiceOver or NVDA user, or you used another screen reader altogether, you had to switch to using Jaws for Windows in order to work with the media modal. Switching back and forth between screen readers is nothing new. People who use screen readers do this all the time. Switching back and forth while you’re in the middle of a task like adding content to your website is particularly frustrating though, and for some of us is a major interruption. I can’t speak for anyone else, but I’m extremely happy about the fact that this is no longer necessary when I’m adding media in WordPress. Happy as in jumping up and down like a kid at Christmas. The media modal has been a huge bugbear for the WordPress Accessibility Team, so much so that several of us have given up on it and have been just hoping that it would be completely eliminated. For me personally, this part of editing and creating WordPress sites is the only part I’ve hated. Now that I can do something as simple as check boxes to select already-uploaded media while using my favorite screen reader, I hate this process a lot less.

OK, we now return you to your regularly-scheduled program.

Once you’ve selected the file you want to insert, press your screen reader’s shortcut key to navigate to the next edit field. The first one you’ll find in this group is a read-only field listing the URL of the file. Next, you’ll find a field where you can change the title of the file. This doesn’t change the filename on the server, but it does change the title the media is stored with in your database. Once you’re done with the title, you can press tab and fill in the artist, album, caption, and description. All of this information is optional, and you can choose to do nothing with these fields. Beneath the “Description” field, you’ll find a button labeled “Add to widget”. Pressing this will add the audio you’ve selected to your widget. You can also upload new audio directly from this screen, and follow the same insertion proceedure. Once this is done, you’ll select a sidebar for the widget as well as its position, as with any other widget. The media modal will close once you’ve made your selection and inserted your media, and you’ll be back where you started. However, the button labelled “Add Audio” now has a label of “Edit Audio”, and the “No audio selected” message is replaced by a player you can use to preview your audio selection.

To remove the audio you’ve chosen, press enter on the “Edit audio” button. The media modal will re-open, and your focus will move to the “Close media pannel” button. Below this is a link labelled “Cancel edit.” This is followed by a link labelled “Audio details,” and this is selected by default. So the heading at level one on this page contains the text: “Audio details.” Directly below the “Audio details” heading is another player you can use to preview your audio, followed by an edit field containing the audio file’s URL which you can edit, and a button labelled “Remove audio source.” Pressing this button will remove your audio from the widget and return you to the “Add audio” button, with the message “No audio selected” above it.

Below the “Remove audio source” button, you’ll find a prompt advising you to add alternative sources for maximum HTML 5 playback. This is because not all browsers support every file format, and so for the most coverage, you either need to use a file format they all support, (like Mp3), or if you choose to use a file format only supported by some browsers, you can add alternate formats for the rest. To add an alternative format, press enter on the button below the alternative format prompt. This button is labeled “Ogg”, but once you’ve pressed enter on this and moved to the next screen, you can choose any format WordPress supports. If WordPress doesn’t support a particular format, you won’t see files with that extension when you’re either browsing through your media library or uploading a file.

When “Insert from URL” is selected, the “Add media” pannel becomes much simpler, at least for audio. You’re given a field to input a URL to an audio file, and an “Add to widget” button. You’ll still need to make sure you link to a file format supported by WordPress, and to keep things simple, I’ll suggest again that you stick to mp3, since everyone supports it. You do not have the opportunity to add any meta data to your audio if you insert from URL.

The Image and Video Widgets

To add an image or video widget in WordPress, you’ll follow the same process as you followed to add the audio widget. The differences will be the file format you can choose from, which will differ for both image and video, and the types of meta data you’ll enter for the image or video will be different: Alternative text for example instead of artist. With the image widget, you also have the ability to link the image to nothing, directly to the media file, to the image’s attachment page so people can view all the details of the image, or to a custom URL. These options are contained in a combo box. You’ll also be able to choose an image size: Small, medium, medium-large, and large. The specifics of each size are dictated by your theme, and when you upload images to your media library, WordPress generates all necessary sizes so that different sizes can be served to different browsers depending on screen size. Mobile devices get a smaller image size, for example. When inserting an image from a URL, you have the option to link to the image itself, a custom URL, or no URL at all. On this screen, these options are buttons and not a combo box. When inserting video from a URL, you can insert from any of the providers WordPress supports, including Youtube. This means that you can host your videos on Youtube, (as long as you follow their content guidelines), and have the player show up on your site, without having to work directly with embed code.

Once you’re done editing your image or video details, press enter on the “Add to widget” button, and the media modal will close. You can then choose the sidebar for the widget and save it.

The Gallery Widget

With WordPress’s gallery widget, you’ll add images just as you would for the single image widget, and you’ll edit each image’s details before you insert it into the gallery. As you’re adding images and editing details, WordPress will let you know how many images you’ve selected with a prompt that appears just below the “description” field for the image you’re editing. Directly below this prompt, you’l find a button labeled “Edit selection”, which you can use to remove images you’ve already selected. To clear the entire selection, press enter on the button labeled “Clear” just beneath the button labeled “Edit selection”. Once you’re done adding all your images, you’ll insert the whole gallery into the widget, and then choose its sidebar as usual.

Help Keep This Series Free

$685 of $20,000 raised
Each post in this series takes a significant amount of time to research,
write, and edit. In order to make this effort sustainable, I would need to
charge a minimum of $100 U.S. per month in order to compensate for the time
it takes to write this material and the size of the screen reader users
market, which is around 5% of the total market of people with disabilities. This series benefits the whole WordPress community as we strive to create a
more open and more inclusive internet. The group of people who will benefit from this series the most are also the
least equipped to afford to pay a fee like this to access it. In the United
States, as of 2015, 58% of the blind
community is unemployed, and 29% live below the poverty line. Most of these people live
on a fixed income that is less than $1,000 per month.

Your sponsorship will ensure that everyone who uses screen readers
with WordPress get the same opportunity as those who do not use screen
readers: documentation they can freely use to learn WordPress, similar to
what exists in the WordPress Codex for mouse users.

This content has to stay free for screen reader users, and for everyone
else. There’s no flag you can set to detect if a site visitor is also a
screen reader user that can be used to then unlock content. And given the
horrible things being done with technology just in the last year alone,
being able to detect screen readers is technology that should never exist.

The amount of time It takes to maintain this is not something I can do for
free and so I’m asking, as an alternative to charging premium prices for
this documentation, for donations in order to keep this material free
to the WordPress community in general and people who use screen readers in
particular. Your financial assistance will ensure that each WordPress
administration screen is properly documented for people who use screen
readers, and that each post is updated when a change to WordPress requires
it. Every donation helps, and there are some sponsorship opportunities as
well.

In exchange for making this possible, the generosity of sponsors will be
acknowledged with the name, logo, and a link to their flagship product
several times in each post.

$
Personal Info

Donation Total: $5.00

I have no idea who exactly is responsible for the fixes to NVDA and WordPress that produced the alignment of stars which allows people who use screen readers to use already-uploaded media when adding widgets or content within posts. Maybe these changes are tiny in the grand scheme of both projects, and whoever made them is thinking they’re not very impactful. Spoiler alert: They’re huge. I have a feeling I know who made the changes in WordPress. If I’m wrong, please feel free to correct me. But if it’s who I think it is, Andria, I owe you at least one drink if we ever meet in person. On the NVDA side, I’ve searched the 2017.4 issues, and I’m not coming up with anything. All I know is this wasn’t possible with 2017.3 when I was writing the original widgets tutorial. That’s part of the reason why this content isn’t part of that. I sent a direct message to one NVDA regular contributor asking about this, and I haven’t heard back. So whoever you are on the NVDA side, thank you for whatever you did. You’ve helped make my life a whole lot easier, and, (along with those who work on making WordPress more accessible), opened up the possibility for me to do at least two things. First, I can haz photoblog now yay. Second, when I’m building sites for clients, I now have a choice to decide whether or not to hire someone else to handle the media portion. So, whoever you are, a thousand thanks, and if we ever happen to meet in person, I also owe you at least one drink.

Everyone else, you can now start adding media to your sites now without a ton of frustration and anger. Go forth and make your sites rich and pretty.

WordPress Widgets: A Comprehensive Guide

To one extent or another, widgets are part of most WordPress sites. They’re typically added and rearranged by dragging them around and then dropping them where you want through either the “Widgets” screen or the Customizer in the administration side of your WordPress installation. Along with the drag-and-drop interfaces in both the main “Widgets” screen and the WordPress customizer, there’s also an accessibility mode for controlling WordPress widgets that isn’t very well documented.

In this guide, I’ll give you a brief history of how WordPress widgets came to be, document the “Widgets” screen’s accessibility mode, show you how to add and arrange widgets on your site, provide some tips on widget placement when you don’t have perfect vision, and discuss the fundamental shift that is coming to WordPress and how that will effect WordPress widgets.

The What and Why of WordPress Widgets

WordPress widgets are self-contained areas of a web page that perform a specific function. They were created to allow WordPress.com users to customize their sidebars without touching a line of code. After an overwhelmingly positive response by WordPress.com users, WordPress widgets became a WordPress plugin. Widgets became a core WordPress feature in version 2.2.

Two years after WordPress widgets were introduced to core, accessibility mode was added so that keyboard users and people with disabilities could control the widgets on their sites. Accessibility Mode was one of the WordPress project’s first forrays into web accessibility, having been added to core about three years before there was a dedicated accessibility team.

Although they were originally developed to help customize just the sidebar of a theme, WordPress widgets are now used to build the home pages of many premium as well as free WordPress themes. They are an indespensible tool for building WordPress websites, and you can get pretty far without knowing any code by using them. So let’s go through how to add and configure them accessibly, step by step.

Activate accessibility mode

From your WordPress dashboard, select the “Appearance” submenu, and within that submenu, select “Widgets”. Once you’re on the “Widgets” screen, expand the “Screen Options” tab by pressing enter on it. Press enter on the “Enable Accessibility Mode” link. Collapse the “Screen Options” tab by pressing enter on it again, and you’ll return to the mane “Widgets” screen.

An Overview of the Widgets Screen

When you enable “Accessibility Mode,” the appearance of the “Widgets” screen changes significantly. The first thing you’ll encounter once you’re in the main content area of the screen is a heading at level one that says: “Widgets”. Directly under the “Widgets” heading is a link to manage them in the customizer with live preview. Ignore that for now. We’ll discuss using the Customizer in a later post. Below this link, you’ll find any administration notices currently visible on your dashboard.

Next, you’ll find a heading at level two containing the text: “Available Widgets”. Directly below this, you’ll find a link with the text: “Add”, folowed by the widget title. All widget titles on this screen are contained in headings at level two, and below each title is a brief description of what the widget does.

How many widgets?

The number of widgets you have on this screen depends on the widgets your active theme and active plugins have added. Both themes and plugins often add their own widgets since they’re so integral to customizing WordPress sites. Each widget will have its own configuration options on the add-widget screen.

Below all the available widgets, you’ll find a heading at level two with the text: “Inactive widgets”. This section stores any widgets you’ve previously used, in case you want to resume using them along with the configurations you’ve set. There’s also a “clear inactive widgets” button you can use to empty this section. Clearing inactive widgets deletes them permanently from this section along with their configurations, so if you visit this section after you’ve cleared it and find you need to use one of the widgets you previously stored here again, you’ll need to go through the process of re-adding and reconfiguring it. Each widget title in this section is wrapped in a heading at level three.

Below the “Inactive Widgets” section, you’ll find each of your theme’s widgetized areas with its title wrapped in a heading at level two. Above each widget title in this section, you’ll find a link with the text: “Edit”, followed by the widget title. When you press enter on any “Edit” link, you’ll be taken to the widgets configuration screen where you can make and save changes. The number of widgetized areas depends exclusively on your theme. The name given to any widgetized area also acts as a brief description of that area. Below each “edit” link, you’ll find the widget title wrapped in a heading at level three.

WordPress’s Default Widgets and Widget Configuration

Aside from the widgets provided by your active theme and plugins, WordPress comes packaged with several default widgets. I’ve listed all of the default widgets below, and, (because I’ve been around the WordPress block a time or two), any experience and/or opinions I may have about each one.

  • Akismet Widget: Display the number of spam comments Akismet has caught. In my experience, this widget doesn’t have a practical use. Displaying the number of spam comments caught is merely a vanity metric, and is not likely to increase the trust of your site’s visitors.
  • Archives: A monthly archive of your site’s Posts. This widget is useful if you run a blog with a lot of excellent content that people may want to re-visit.
  • Audio: Allows you to easily display an audio player without knowing HTML. This widget is useful if you’re a musician and you want to showcase tracks you may have for sale.
  • Calendar: A calendar of your site’s posts, in a data table. In my experience, this widget also has no practical use, since a site’s visitors won’t typically browse a site’s posts by month.
  • Categories: A list of links to all of your site’s categories, (excluding any attached to custom post types), or a dropdown, (combo box) of all of your site categories, (excluding any attached to custom post types).
  • Custom HTML: Allows you to add text marked up with HTML. This widget is infinitely useful, in my opinion. It often forms the backbone of the text on home pages, and is also useful for things like displaying banners, badges, one-time advertisements or advertisements controled by a third party, site announcements that don’t merit their own blog post, the list of possibilities for this widget is close to endless.
  • Custom Menu: Allows you to add a WordPress menu to areas of your site without those areas needing to be defined as menu locations by your theme. This widget is useful if your theme is stingy about navigation menu sections.
  • Gallery: Provides a graphical user interface for adding a gallery of images to a widgetized area on your site.
  • Image: Provides a graphical user interface for adding a single image to a widgetized area, including any image attributes such as alternative text and captions.
  • Meta: Login, RSS, & WordPress.org links. In my experience, this widget is also useless in practical terms. Most sites will not want to display links back to WordPress.org, and I’m not a fan of displaying a log-in link on the front-facing portion of a site for anyone to be tempted by. This last bit could just be me having a get-off-my-lawn moment.
  • Pages: A list of your site’s pages. This widget could be useful, although it displays a list of every page on a site, and I recommend adding important pages to your navigation menu instead.
  • Recent Comments: Your site’s most recent comments. This widget is useful if you run a site that gets a lot of user engagement in the form of comments, typically large blogs.
  • Recent posts: Your site’s most recent posts. This widget is useful if you’re using a static front page as your home page, but you want to highlight recent posts in a side bar.
  • RSS: Entries from any RSS or Atom feed. This widget can be useful if you run more than one site and want to quickly display content from that site on another site.
  • Search: A search form for your site.
  • Tag Cloud: A cloud of your most used tags.
  • Text: Allows you to add any text to a widgetized area using the standard WordPress content editor. The aim of this widget is to make adding arbitrary text easier for those who don’t know HTML. The custom HTML widget was added after enough of us expressed our displeasure at having our favorite widget contaminated with a WYSIWYG editor. This widget also supports adding an image to a text widget, using the “insert image” button in the editor tool bar.
  • Video: Displays a video from the media library or from YouTube, Vimeo, or another provider.

Common Configurations Among WordPress Widgets

Every widget has configuration options specific to it, but there are parts of every widget configuration that are the same no matter which one you’re adding or editing. Each screen will ask you to choose the following:

  • Widgetized area: Labeled as “Sidebar”, this refers to any widgetized area of your theme, including dynamically generated pages.
  • Position: The position of the widget you’re adding within the widgetized area. Each area commonly has two positions, although I’ve seen situations where there are more than two.

All the widgetized areas and their positions are displayed within a table. Select the radio button for your preferred area and choose the position of the widget from the combo box below the radio button you’ve selected. Once you’ve chosen the widgetized area and the widget’s position within that area, save your configuration choices by pressing the “save” button. If you’re editing a widget, and you want to delete it, press the delete button without changing any configuration options instead. Your deleted widgets will then appear within the “Inactive Widgets” section until you clear the section of its contents. After you’ve added or edited your widgets, you’ll be redirected back to the widgets screen after you press the “save” or “delete” buttons. If you decide while editing or adding that you’ve changed your mind about the widget, there’s a link labeled “Cancel” directly above the “Save” button. Press enter on that and you’ll be redirected back to the widgets screen and your changes will not be saved.

Some Tips On WordPress Widget Placement

When adding widgets to your site, there are some things you’ll want to keep in mind as a visually-impaired or blind person. Firstly, not only does your theme define what widgetized areas are available, it may also style specific widgets. Alternatively, a theme’s CSS may need to be modified to accommodate a widget the theme has no styling for.

Secondly, widgetized areas themselves will be styled, and this will determine which widgets may be suitable for a particular area, even if the theme doesn’t require specific styling for the widget. It can be helpful to read through your active theme’s CSS to get a sense of what’s going on visually. This is why I prefer the Genesis framework and its child themes when building sites for myself or for clients. The CSS is very well-organized and well-commented, which makes it easy to read.

If you’re not sure about how a widget is going to look with your theme, ask for help. The help you need could be as simple as someone advising you on a more suitable area for the widget, or as complicated as someone customizing your theme for you. Be aware that the former can be readily had for free, while the latter will cost you. Any investment on your part will be necessary though if you’re selling products or providing services to the public. A well-designed website is just as important as the clothes you wear to a job interview. If it’s your personal blog and you want your sighted friends to read what you’re writing, then design also matters, if for no other reason than avoiding a poor user experience for your sighted visitors. It doesn’t have to be anything fancy. It just needs not to be an eyesore. Finally, when you change themes, you’ll need to go back in and edit your widget placement. The new theme you’ve chosen may have different widgetized areas, and/or the widgets you used with your old theme may be part of the theme itself. If they’re part of the theme, they’ll disappear from your available widgets once you deactivate the theme by switching to the new one.

Change is coming to WordPress, and this will effect WordPress widgets

Before wrapping up this guide, I want to talk a bit about the changes coming to WordPress in the near future, because they will have an effect on WordPress widgets. The changes I’m referring to are code named Gutenberg, and the goal of the project is to change the way content is created in or added to WordPress. This includes widgets. The aim of the Gutenberg project with regard to widgets is to make them portable, meaning that they’re no longer dependent on widgetized areas, and can be added to anywhere on a site. This will help site owners more easily create dynamic pages, for example. In the future, it will also mean that wordPress doesn’t need to maintain three separate interfaces for controlling widgets: The customizer, the main widgets screen, and accessibility mode. It will mean that site owners wil be able to add widgets to their sites accessibly while taking advantage of the same interface that everyone else gets to use, thus eliminating the separate-but-equal status of assistive technology users. Widgets will become portable, so site owners won’t necessarily need to worry about reconfiguring widgets when they change themes. All of this is in flux, and is not slated to be released until it’s ready. There are accessibility kinks still being worked out. But Gutenberg promises to be a better experience for everyone, and despite my current concerns, I’m fully on board with the idea. It will, however, mean some adjustment for those who have been using WordPress for a while. The content creation experience, (including editing and controlling widgets), is going to become richer, and initially there will be some discomfort on the part of those who are used to the old way of doing things. Because those of us who are blind or visually impaired have never had complete access to the way the rest of the world does things when it comes to creating sites, I think the jump will be initially hard to make, because we’re going to need to get comfortable to a whole new set of concepts we’ve never experienced before. But I’m looking forward to the challenge, and I’ll be updating this guide so that you’ll be able to navigate them as well.

Widgets have been a staple of customizing WordPress sites for a long time now. This guide should help you more confidently experiment with them to make your site your own creation. There are as many widgets as there are WordPress plugins and themes, so there’s a lot of variety for you to explore when customizing your site, all without touching any code. Go forth and build cool things.

A Comprehensive Guide To Manual WordPress Backups With A Screen Reader

Keeping regular backups of any website is critically important, and WordPress backups are no different. In this tutorial, I’ll show you how to back up WordPress properly so that your content, files, and WordPress settings remain intact should you ever have to restore your website. This tutorial assumes that you are using a shared host, and that you do not have easy access to command line tools.

Why Are WordPress Backups So Important?

You’ve probably heard more than once in your life that backing up your hard drive is very important. Hard drive backups are important because if backups don’t exist, and something happens to your hard drive or the computer it runs in, all your documents, photos, music, books, and any other data you have stored is gone, with no easy way to get it back. Your hard drive doesn’t care how sensitive your data is, or how sentimental you are about those photos, or that music, or those books. If your hardware fails, or you get a virus, or even if you just accidentally delete something, there’s no easy way to get it back without a backup.

The same holds true for WordPress backups. Web servers are, (or in the case of virtual private ones, run on), computers, and the computers that store and allow other people to access your website are just as vulnerable to hardware and other failures as the computer sitting on your desk or packed in your bag.

WordPress backups are specifically important because it’s the first step recommended during the WordPress update process. WordPress backups are a fail-safe in case an update doesn’t install properly, or if you’ve edited your theme and mistyped something and broken your site. They’re also important when you’re switching hosts. In order to move your site, you need to have a copy of it before you shut down your old hosting account and move to the new one.

Help Keep This Series Free

$685 of $20,000 raised
Each post in this series takes a significant amount of time to research,
write, and edit. In order to make this effort sustainable, I would need to
charge a minimum of $100 U.S. per month in order to compensate for the time
it takes to write this material and the size of the screen reader users
market, which is around 5% of the total market of people with disabilities. This series benefits the whole WordPress community as we strive to create a
more open and more inclusive internet. The group of people who will benefit from this series the most are also the
least equipped to afford to pay a fee like this to access it. In the United
States, as of 2015, 58% of the blind
community is unemployed, and 29% live below the poverty line. Most of these people live
on a fixed income that is less than $1,000 per month.

Your sponsorship will ensure that everyone who uses screen readers
with WordPress get the same opportunity as those who do not use screen
readers: documentation they can freely use to learn WordPress, similar to
what exists in the WordPress Codex for mouse users.

This content has to stay free for screen reader users, and for everyone
else. There’s no flag you can set to detect if a site visitor is also a
screen reader user that can be used to then unlock content. And given the
horrible things being done with technology just in the last year alone,
being able to detect screen readers is technology that should never exist.

The amount of time It takes to maintain this is not something I can do for
free and so I’m asking, as an alternative to charging premium prices for
this documentation, for donations in order to keep this material free
to the WordPress community in general and people who use screen readers in
particular. Your financial assistance will ensure that each WordPress
administration screen is properly documented for people who use screen
readers, and that each post is updated when a change to WordPress requires
it. Every donation helps, and there are some sponsorship opportunities as
well.

In exchange for making this possible, the generosity of sponsors will be
acknowledged with the name, logo, and a link to their flagship product
several times in each post.

$
Personal Info

Donation Total: $5.00

WordPress backups happen in two stages

There are two stages to WordPress backups:

  • backing up the files
  • Backing up the database

The files

WordPress is built with PHP, JavaScript, CSS, and HTML code. This code lives in files, which then live in directories on your host’s server. Your plugins and themes are also PHP, JavaScript, CSS and HTML files, and they add to the files that already come with WordPress.

The database

The database is where WordPress stores all your settings and content. This includes the settings and options for your themes and plugins. It also stores the user accounts you use to log into and add content to your WordPress site.

If either the files or the database are left out of your backup, you don’t have a working version of WordPress, and will have to rebuild your site. Granted, replacing the files is easier than replacing the content and settings in the database, but you’ll still have to rebuild. For smaller sites, this can be accomplished relatively quickly. But for bigger sites, including sites that have a lot of content, this can become very painful very quickly. So it’s extremely important that you make sure both parts of your WordPress installation are backed up regularly.

Backing up the files

Although WordPress backups don’t have to be performed in any particular order, I usually start with backing up the files first. This is because it’s one of the easiest tasks, and, if there are a lot of files, (you’ve got a lot in your uploads directory, for instance), this part of the backup process can run in the background while you move on to the next step.

To back up your WordPress files, you’ll need an FTP client. Any accessible client will do the trick. I prefer WinSCP, but there are others, and you can use whichever one you prefer.

Configuring your FTP client

Once you have an FTP client installed, you’ll need to add a new entry so that you can access the files stored by your host. The specific information you’ll need will vary from host to host, so make sure you have this handy. However, the types of information you’ll need are the same across all setups. The pieces of information you need to have in order to connect to your host are:

  • Hostname: The address you’ll be connecting to.
  • Username: The name you’ll use to log in.
  • Password: The FTP password your host supplied you with, or that you set up yourself. This is not necessarily the same as your login credentials for your hosting account, although sometimes it will be. Consult your web host’s documentation for details.
  • Port number: Usually, this is port 21, which is the standard FTP port. Some web hosts on the smaller end do not provide secure FTP, and so this is the port you’ll likely use. If you’re connecting via secure FTP, you’ll most likely use port 22, although I have seen some hosting situations where a different port, (like 2222, for example), is used.
  • Protocol: Some clients, (like WinSCP), will ask you to choose a protocol during the account-adding process. You’ll need to check with your host to find out which protocols they support. If you can, choose either SFTP or SCP. FTP will do, but the two former protocols allow you to transfer data securely, while FTP does not.

Once I’m connected, which files do I need to back up?

You can always download a copy of WordPress’s core files directly from WordPress.org’s download page, and since this is the case, you don’t need to worry about making a copy of those files. You do, however, need to back up your wp-content directory, your wp-config.php file, and your .htaccess file.

wp-content

The wp-content directory is where all the content you’ve generated that isn’t stored in the database lives. This includes the themes and plugins you have installed, regardless of whether or not they are activated, and your media uploads. Depending on how much is in this directory, it can get quite large. It’s typically not themes and plugins that increase the size. What usually bulks up your wp-content directory is media, including audio, video, images, and any of the other file types WordPress supports.

wp-config.php

Your wp-config.php file contains your site-specific configuration. It tells WordPress everything it needs to know about your database, and contains any configuration customizations you’ve made. If you haven’t made any customizations, and you’d like to find out how far you can take wp-config.php, click here for a complete list of all the values you can edit. But before you make any changes, make sure you back this file up, because if you miss-type something, things will go wrong and you’ll either have to manually fix the errors, or revert back to your original version.

.htaccess

.htaccess, (pronounced “HT Access”), is a configuration file used by your host’s web server software. It is directory-specific, and it is used to alter configurations such as basic redirects, (such as redirecting requests for files that don’t exist to a “file not found” page), basic content password protection, and image or other media hotlinking prevention. The most common use of the .htaccess file in WordPress is to handle permalink settings. If your .htaccess file is lost or compromised, you can copy the basic .htaccess file for WordPress from the Codex. However, since this is a base copy, it will not take into account any customizations you’ve made, so you also need to ensure that you regularly back up any .htaccess files that are part of your WordPress installation. This can be done while you’re backing up your wp-content directory, via FTP/SFTP.

The Database

If you’re running your WordPress site on a shared host, creating a backup of your database can be a minefield when you’re also using a screen reader. This is because there are two types of intervening software you need to work with.

First, there’s your host’s control panel. Most hosts use cPanel, and while it’s not the most accessible experience, it’s useable, depending on the version. The version, however, can change between hosts, and there are at least five dozen of them. To add to the variation between versions, as far as I am aware, no one is working on the accessibility of cPanel, so the common apprehension experienced by every person with disabilities for whom accessibility is not optional upon hearing the word “update” is very real.

The second type of software that you have to interact with is one of two possible graphical user interfaces for managing your databases, cPanel’s built-in backup feature, or phpMyAdmin, a PHP script for interacting with MySQL databases. Like cPanel, there are multiple versions of phpMyAdmin, and the useability for screen readers varies between versions. As with cPanel, I am not aware of any accessibility work being done on phpMyAdmin.

First, I’ll cover cPanel’s built-in backup feature, specifically for cPanel version 56.0.38, although this is not the latest version. The latest version is 60, and so your milage may vary. and then, I’ll cover phpMyAdmin.

WordPress Backups With CPanel

CPanel provides a graphical user interface for managing just about every aspect of your hosting, including your databases. You can use it’s backup feature to create a downloadable copy of your WordPress database. You can also use it to generate a full backup of your entire site, but these backups are strictly for archival purposes. Relying on cPanel’s backup feature as part of your maintenance strategy is not recommended. It doesn’t provide any kind of scheduling, and you will need to create two partial backups, (one for your files and one for your database), in order to be able to restore from those backups should the need arrise. However, until you impliment a backup strategy, it’s better than not backing anything up at all.

To create a backup of your database, first log into cPanel. Next, look for “Backup Wizard” in the “files” section. You can do this by either arrowing through the page, or by using your screen reader’s find command. There are no headings on the page, so it’s arrow keys all the way down, coupled with heavy use of the find command. Once you’ve located “Backup Wizard”, press enter on that. On the next screen, you can navigate by headings. The only heading on the page is “Backup Wizard”, and you can skip past all the other links on the page by pressing “H”.

The next section on the page gives you a quick overview of the steps for creating a cPanel backup. It also lets you know what’s included in a full backup, delivered in a zip file for your convenience. Skim through this section, and press enter on the “backup” link. On the next screen, press “H” until you hear “Select partial backup”. Then, press enter on the “MySQL Databases” link. On the “MySQL Databases” screen, press “H” until you hear “Download a MySQL Database Backup”. Under this level-four heading, you’ll find a table that lists all of the databases that have been created, either by you or by install scripts. Find your WordPress database name, and press enter on that link. When you press enter on the linked database name, you’ll be presented with a standard file download prompt. Save the database file to your computer, but do not uncompress it. You’ll need to use the compressed copy if you ever need to restore the database.

If you’d like to avoid FTP or SFTp, or if for some reason you’re unable to log into your host using FTP, you can also use these steps to backup the files that make up your WordPress installation. Instead of choosing the database partial backup option, choose the files partial backup option, and continue as you would with the instructions for backing up your database. This feature creates a full backup of all your website files, not just the WordPress files. You don’t have the option of selecting the files that get backed up. Once again, this is better than no backup at all, but creating a full backup every time you create a backup isn’t necessarily the best long-term solution.

PHPMyAdmin

PhpMyAdmin is a free software tool written in PHP intended to handle the administration of MySQL and MariaDB databases on the web. As with cPanel, there are accessibility concerns, and the version of phpMyAdmin your host is running will impact how you interact with it. The version number is especially important if you’re a screen reader user. This is because, up until the 4.0 branch, phpMyAdmin wasn’t an accessible experience, but it was useable as long as you were willing to forego all the screen reader specific features like link lists, form fields lists, and headings lists, because all of them would actually decrease your productivity. It’s faster just to arrow through the screen. As of the 4.0 branch, the experience has gotten worse. I’ll be covering phpMyAdmin versions 3.8.5.1 and 4.7.5 in this tutorial. You can find the version your host is running by logging into phpMyAdmin, and using your screen reader’s find command to search for “Version information:”. Even though the 3.0 branch of phpMyAdmin is useable, you do not have the luxury of navigating by headings on most screens, and you do not have the luxury of a skiplink. There are a few dropdowns in the form of comboboxes, and some unlabeled form fields, but for the purposes of exporting your database as well as importing it should you need to restore from a backup, those dropdowns and form fields are not what you’ll be working with. You’ll be dealing with a couple of frames, lots of linked graphics, and you’ll need to pay careful attention to where you are within phpMyAdmin’s interface, since you won’t receive any feedback from your screen reader when you’ve activated a link unless you’ve specifically set it to automatically read the page content upon page load. So, with anger management powers activated, let’s get started.

To access phpMyAdmin, log into your host’s control panel, and navigate to the databases section. You can do this by either arrowing down the page, or using your screen reader’s find command to search for “DATABASES”. Directly below this text, you will find two links to phpMyAdmin. Press enter on one of them. phpMyAdmin will open a new browser window. If you attempt to force it to open in a new tab instead of a new window, you will be asked to log into it directly, so unless you have specific login credentials for that application, it’s best to just allow it to open in a new window. To ensure this happens, if you’re blocking popups in the browser, temporarily turn this off, and, once you’re done with phpMyAdmin, turn it back on again.

For phpMyAdmin 3.8.5.1, once you’re inside the phpMyAdmin interface, you’ll encounter two frames, neither of which have titles. The first frame contains navigation links specific to phpMyAdmin, as well as links for accessing your databases. The second frame is where all the operations happen.

In the first frame, find the link labeled with the name of your WordPress database. The list of database links will appear in an unordered list beneath the dropdown for selecting from recent database tables. Once you’ve found the link labeled with the name of your WordPress database, press enter on that.

Next, arrow down until you find a link labeled “export” in the second frame, and press enter on that. Once you’re on the next screen within the second frame, use your screen reader’s heading navigation keystroke to navigate to the heading labeled “Exporting tables from “db_name” database” where db_name will be replaced with the name of your WordPress database. On this screen, you can choose to perform a quick export, or a custom export. For the purposes of a full database backup, a quick export will be fine, and this is the default option.

After choosing the type of export you want to create, the next step is to choose the file format. PhpMyAdmin allows you to export all or part of a database in several formats, one of which, for some unexplained reason, is Microsoft Word 2000 (doc). The default is .sql, and i would recommend sticking with this unless you have a specific reason to change the format.

Once you choose the file format, press the “go” button. This is a true button, and will behave accordingly. When the “go” button is pressed, you’ll be presented with the standard “file download” dialog, and you can save the file to your PC.

Using phpMyAdmin 4.7.5, instead of content being separated into frames, you’ll find a series of lists on the page. Once you’ve launched the phpMyAdmin instance, navigate to the second list on the page, and find the link labeled with the name of your WordPress database. Once you’ve located the link, press enter. You’ll receive no feedback from your screen reader letting you know you’re on the next screen, so you’ll have to trust that you are. Next, either navigate to the fourth list on the page and then arrow down until you hear “Graphic Export Export” and then press enter, or use your screen reader or browser’s find command to search for “export” on the page, and then press enter on the linked graphic. You’ll once again receive no audible feedback that you’ve navigated to the desired screen, but you most likely have. Once you’re on the “export” screen, use your screen reader’s heading command to navigate to the first heading on the page. It’s a heading at level two. Alternatively, you can navigate to the first radio button on the page, labeled “Quick – display only the minimal options” and ensure that this is checked. Below the set of radio buttons, you’ll find a heading at level three designating the “format” section. Choose your preferred format from the dropdown and then press the “go” button. As with phpMyAdmin 3.5.8.1, this is a true button, and will act accordingly. You’ll be presented with the standard file download dialog, and you can proceed as you normally would from here.

Performing a manual WordPress backup while using a screen reader wil initially be a huge headache. However, it’s a fundamental skill worth having. I’ll cover some partially and fully automated methods for creating wordPress backups in upcoming posts, but knowing how to perform a manual backup is crucial should any of the automated methods be unavailable or should problems arise while using them. The process of performing a manual backup is daunting at first, but like any other technical skill, it gets easier with time and practice. If you’re tempted to skip learning this skill in order to avoid the headache and frustration, don’t yield to that temptation. Backups are fundamental to any security strategy. The best security tactics in the world will not help you if you’re not performing regular backups. Don’t throw away the investment you’ve made in your website by neglecting them. Doing so will result in a lot more headaches and frustration down the line.

Help Keep This Series Free

$685 of $20,000 raised
Each post in this series takes a significant amount of time to research,
write, and edit. In order to make this effort sustainable, I would need to
charge a minimum of $100 U.S. per month in order to compensate for the time
it takes to write this material and the size of the screen reader users
market, which is around 5% of the total market of people with disabilities. This series benefits the whole WordPress community as we strive to create a
more open and more inclusive internet. The group of people who will benefit from this series the most are also the
least equipped to afford to pay a fee like this to access it. In the United
States, as of 2015, 58% of the blind
community is unemployed, and 29% live below the poverty line. Most of these people live
on a fixed income that is less than $1,000 per month.

Your sponsorship will ensure that everyone who uses screen readers
with WordPress get the same opportunity as those who do not use screen
readers: documentation they can freely use to learn WordPress, similar to
what exists in the WordPress Codex for mouse users.

This content has to stay free for screen reader users, and for everyone
else. There’s no flag you can set to detect if a site visitor is also a
screen reader user that can be used to then unlock content. And given the
horrible things being done with technology just in the last year alone,
being able to detect screen readers is technology that should never exist.

The amount of time It takes to maintain this is not something I can do for
free and so I’m asking, as an alternative to charging premium prices for
this documentation, for donations in order to keep this material free
to the WordPress community in general and people who use screen readers in
particular. Your financial assistance will ensure that each WordPress
administration screen is properly documented for people who use screen
readers, and that each post is updated when a change to WordPress requires
it. Every donation helps, and there are some sponsorship opportunities as
well.

In exchange for making this possible, the generosity of sponsors will be
acknowledged with the name, logo, and a link to their flagship product
several times in each post.

$
Personal Info

Donation Total: $5.00

WordPress Updates With A Screen Reader

WordPress updates are a very important part of any WordPress site’s upkeep. They ensure that you can take advantage of the latest features WordPress has to offer, a lot of which are accessibility enhancements. WordPress updates also help you decrease the risk of your site being compromised. In this tutorial, I’ll walk you through the WordPress updates screen and show you how to keep WordPress and your themes and plugins up-to-date while using a screen reader.

The WordPress Updates screen

To get to the WordPress Updates screen, navigate to the “dashboard” section of the WordPress administration menu and press enter on “Updates”. The first heading on this screen is WordPress updates. navigate to that, because once you’ve landed on this screen, the administration menu won’t be important again until you’re done updating.

Last checked on

WordPress will let you know when it last checked for updates. There are two occasions when it will do this: when you first load this screen, and, in the background, twice a day.

Check again

After WordPress tells you the last time it checked for updates, you have the opportunity to manually check again. Most of the time, this isn’t necessary, but if you have a lot of themes and plugins installed, or you’re running a huge multisite network, or you haven’t made it a point to update in a long time, you may need to do this. Either way, checking again won’t hurt.

If you haven’t updated in a while, don’t feel bad

While I’m on the subject of site owners who haven’t updated in a while, I want to pause to let you know that you shouldn’t feel bad for doing this. At least not in the sense that you might be the only one putting off updating. Roughly thirty-six percent of sites running WordPress are running the latest version as of this writing. The statistics for popular plugins are worse. Sites running the latest version of Jetpack come in at almost forty percent of the total.

I’m by no means saying that this is a good thing. I am saying that you shouldn’t beat yourself up necessarily because you’re not updating regularly. I will caution, however, that you should make this a regular practice. It’s part of running any website, (powered by WordPress or not), and out-of-date themes and plugins account for just over fifty percent of hacked WordPress sites.

So if you’ve been putting off your WordPress updates, don’t beat yourself up for doing that. Start updating instead.

Getting back to the technical part of the update process, the next thing you’ll see, wrapped in a level-two heading, is a very short status report on your current version of WordPress. WordPress will either tell you you have the latest version installed, or that there is a new version available. Under this heading, wrapped in a list element, you have two options depending on whether or not you have the latest version already installed, or need to install it.

If you have the latest version installed, you have the opportunity to redownload WordPress either automatically or manually. You can either press the “Redownload WordPress” button, or press enter on the link to download the latest zip. If you don’t have the latest version installed, the “Redownload WordPress” button is instead a “Download now” button, and doesn’t say anything about the version number.

Updating plugins

The next section on this screen is the “Plugins” section. It contains two “Update plugins” buttons, and a table that contains a checkbox for each plugin that has an update, as well as a “select all” checkbox. Although you can check the “select all” box and update all plugins at once, best practice is to update them one at a time. this is so that, if anything goes wrong during the update process, you can remove the plugin that caused the problem and continue updating the rest. While WordPress will do its best to make sure that a broken plugin doesn’t break your site by deactivating it when it fails, it’s best to get in the habit of updating plugins one at a time, because you’ll definitely want to do this for themes.

Once you start the update process, WordPress will output status messages within a frame. It will tell you that the update process is starting, and, if you haven’t activated the “show details” link, will give you an overview of how things are going: either the update succeeds or fails.

First, WordPress will enable maintenance mode. Maintenance Mode is a WordPress core feature that suspends access and functions during updates and installations. These updates require some backend processes to stop for a short period of time (usually seconds), so the first thing WordPress does when starting the update process is put your site in maintenance mode by creating a file, .maintenance, to alert front end users and administrators who are not already logged into the install that updates  are happening. During the WordPress update process, if everything goes smoothly, the file is deleted and the site goes back to normal.

The next part of the status message lets you know which plugin is being updated, which number it is among the plugins that are being updated, and whether or not the update was successful. Once the update is complete, you’ll see a message letting you know the update completed successfully, and you’ll then be presented with a choice: Go to the “plugins” section of your administration screens or return to the WordPress updates screen and continue installing updates.

I usually never go to the “Plugins” screen when I’m updating because there are almost always more updates to install. So I’ll return to the WordPress updates screen instead. But nothing’s wrong with going to the plugins screen if you want to check on things.

A detailed look at a plugin update

If you activate the “Show Details” link within this frame, you’ll see how a plugin update happens. First, WordPress downloads the latest zipped copy of the plugin from the plugins repository. It then unpacks the update and installs the latest version. Next, it removes the old version of the plugin, and, if everything completes successfully, it finally lets you know the update completed successfully and gives you the choice to go to the “Plugins” screen or to return to the WordPress updates screen.

Rinse and repeat

To update the rest of the plugins you have installed, simply repeat these steps. Make sure to update all the plugins you have installed, not just the active ones. Better yet, delete the plugins you’re not using. By doing this, you can ensure that you have less updates to install, and you decrease the risk of your site being hacked.

Updating Themes

Updating themes works pretty much the same way updating plugins does, complete with the same section layout, information within a frame, maintenance mode, ETC. When you’re updating your themes, run each update one at a time. For inactive themes you can get away with running them all at once, but for the active theme, if something goes wrong with the update, you will bring upon yourself the”White Screen of Death”. This is fixable, but if you update all your themes at once, and if you have a lot of them installed, (yes, it happens), and further if you don’t remember which theme you have active, finding the problem theme can become a real chore.

In this tutorial, I’ve shown you around the WordPress Updates screen, and I’ve walked you through the WordPress updates process. By following this tutorial step by step, keeping your WordPress site up-to-date should be a more familiar process. The next time you need to update WordPress and your plugins and themes, feel free to have this handy for reference.

Up next: Amanda RushPosted on Kind ArticleSeries Tags 33 Comments on WordPress Updates With A Screen Reader

How to be More Productive with your WordPress Dashboard and a Screen Reader

This post appears in its original form on Torque, but there have been a lot of changes in the direction of accessibility since this was first written, so it’s time for an updated version. In the original version, I focused on Jaws for Windows alone, while in this version I’ll include the Jaws information as well as NVDA-specific tips.

When it comes to accessibility and usability with screen readers, WordPress has made some enormous strides in the right direction over the past several versions.
Nonetheless, there are some techniques screen reader users can use to find what they want and get things done quickly within WordPress.

Find what you want and skip the rest

When you log into your Menu Humility plugin. It ensures that any settings page stays in the “settings” submenu of the WordPress administration menu. It still works on current versions of WordPress.

Collapse the menu if you’re not using it

The last thing I’ll usually do to increase productivity is to collapse the administration menu when I’m not using it. While I can navigate using headings, I’ll collapse the menu so that, when a page reloads, the screen reader doesn’t read all the links. Stopping speech with the “control” key is always an option, but keeping the menu collapsed and expanding it only when I need it is one less keystroke.

Tame admin notices

Admin notices can get out of hand incredibly quickly, because they’re often used by themes and plugins in ways that were never intended by WordPress. Admin notices don’t have their own heading either, and they show up on every administration screen of your WordPress site. To keep them under control, you’ll want to install a plugin called Dobby. This plugin takes all your admin notices and hides them behind a reveal button so you can deal with them at your convenience. Each notice is given a color code, which won’t be useful for most screen reader users. But hiding all the admin notices behind one button is useful in and of itself, and I recommend that you install this plugin along with Menu Humility before you install any other plugin or theme on your site.

The WordPress dashboard can become very cluttered very quickly as you start adding plugins. Clutter can be manageable if you spend all your time in WordPress, but since you probably don’t, using these tips will make working with your WordPress site less time-consuming, and therefore, less of a hassle.

Get To Know Your WordPress Dashboard With A Screen Reader

The WordPress dashboard is the first screen you encounter after you log into WordPress. In this tutorial, I’ll help you learn your way around it while using a screen reader by providing a detailed tour, and showing you how to customize it so that the WordPress dashboard shows you all of what you need to see, and none of what you don’t.

We’re going to cover a lot of ground

This tutorial covers a lot of material. The WordPress dashboard is the hub of all the activity that happens on your site, and so it presents a lot of information. Think of it as Grand Central Station for your WordPress installation. Since this is a tutorial on the hub of your site, in order for it to be useful, it has to cover a lot. So grab something to sip on because this is going to be a long read.

What is the WordPress dashboard?

Think of the WordPress dashboard as the home screen or desktop of your WordPress installation. It’s the first place you land when you log in to WordPress, and it gives you an overview of your site and its activity at a high level. It also gives you a glance at what’s going on with WordPress development, as well as some of the things going on in the wider WordPress community.

First contact with the WordPress dashboard

There are six things that every WordPress administration screen has in common, and the WordPress dashboard is no different. These are:

  • The skip links
  • The administration menu
  • The tool bar
  • The help tab
  • The screen options tab
  • Admin notices

The skip links

After you log into WordPress, the first thing you’ll find when navigating with a screen reader is a set of skip links. The first skip link allows you to skip past the menu and move straight to the main content of the screen. The next item down is a skip link that allows you to skip to the tool bar. We’ll go into what the tool bar is in more depth later on, but for now keep in mind that this is the second in a series of two skip links.

While skip link usage is very mixed among screen reader users, WordPress includes skip links for users who navigate with a keyboard alone, whether out of necessity or preference, or who use other assistive technology that mimics keyboard interaction. The WordPress community strives to make WordPress as accessible and usable for as wide a population as possible, so skip links are included as part of the accessibility effort since accessibility is not just about screen reader users.

If you prefer not to use the skip links, you can use your screen reader’s headings navigation shortcut key to navigate to the first heading on the screen. This command may vary from screen reader to screen reader, so if you’re not sure how to navigate by headings, check your screen readers documentation for specifics.

The WordPress administration menu

Next, you’ll find the WordPress administration menu. This menu, along with the two skip links just covered, is part of every WordPress administration screen, and it contains everything you need to add content to, and configure, your WordPress-powered site.

The WordPress administration menu is collapsible, and contains collapsible submenus. It is also responsive, meaning that it will respond to the screen size of the device you’re viewing it on and collapse or expand accordingly.

What if I want to make sure the menu is expanded?

If you’re accessing your WordPress dashboard from a desktop, and you want to make sure the menu stays expanded, along with the submenus, first make sure that your screen is maximized. This will give you complete access to the menu as well as all its submenus. If you decide later on that you want to collapse the menu to get it out of the way, there’s a handy link you can use to expand and collapse the menu whenever you want. Secondly, make sure that your display is configured for landscape mode instead of portrait mode.

Why does it matter how my computer’s display is configured?

As previously mentioned, the WordPress dashboard is responsive, meaning that it will resize to fit the screen on which it’s being displayed. Screens set to display in portrait mode don’t provide very much space, and the WordPress dashboard as well as other WordPress administration screens contain a lot of content. So on smaller screens, the side menu is collapsed by default, and since there’s not enough room to keep it expanded without making the rest of the content invisible, the menu and submenus are collapsed to ensure that everything in the main content area can be displayed, and that the menu is unobtrusive.

As a screen reader user, (at least on Windows), it’s very easy to accidentally switch your screen from landscape to portrait on most modern laptops without knowing you’ve done so, because screen readers typically don’t provide any feedback that your screen orientation has changed. For example, if you run one of the blindness-specific Twitter clients, (which use ctrl+left, right, up and down arrows on Windows 8 or below), and you either don’t have the client running or you’re waiting on the client to finish starting because you have an extra large database of tweets, the likelihood is that you’ll change this setting, because these are common shortcuts for changing screen orientation, and this will in turn effect how the WordPress dashboard and other administration screens are displayed. This is a minor annoyance when it comes to the menu being collapsed or expanded, but it begins to matter when it comes to the “Screen Options” and “Help” tabs, because they are not displayed when the WordPress back end is displaying in mobile view. The specific steps you need to take to re-orient your screen using the Windows graphical user interface will depend on the version of Windows you’re running, but the settings are typically found under “Display” in your control panel. So if you log into WordPress, and you find that your menu is collapsed, you may want to check to ensure that your screen is oriented in landscape mode.

The order of the menu

Out of the box, the WordPress administration menu is arranged as follows.

Dashboard

The first section you’ll encounter when moving through the administration menu is the “Dashboard” section. This submenu gives you a way to get to your WordPress dashboard from any place within your WordPress administration screens. It also is the submenu you’ll choose when you need to update WordPress and the themes and plugins you have installed.

Posts

“Posts” is the submenu you’ll choose when you want to add or edit posts on your WordPress-powered site. It’s also where you’ll be able to add or edit categories and tags.

Media

The next submenu within the WordPress administration menu is “Media”. Like “Posts”, this submenu gives you a quick way to access all of your media, (meaning everything you’ve uploaded to your media library), as well as add new media to your site. “Library” is where you’ll go to access all your media, and “Ad new” is where you’ll go to add new media.

Pages

“Pages” is the submenu you’ll choose when you want to add or edit pages on your site. Unlike posts, pages are static content. They are not displayed chronologically like posts are, and they stand on their own, unlike posts, which are arranged in descending chronological order on your site’s blog and other archive pages.

Comments

Next comes the “Comments” section. Here is where you’ll go to work with any comments left on your posts and pages. From here, you’ll be able to moderate comments, edit them, reply to them or delete them.

Appearance

This section is where you’ll go to make any visual changes to your site, including choosing or uploading a theme, customizing a theme, adding widgets, and, if your theme supports them, adding background and header images. You’ll also add menus to your site from this section. Finally, you’ll find the theme editor, which allows you to edit individual templates as well as the CSS for your theme from your WordPress administration screens.

Plugins

“Plugins” is the submenu you’ll use to view the plugins you have installed, add new ones, and edit plugin files from the WordPress administration screens.

Users

“Users” is the section of your WordPress administration screen where you’ll be able to view all user accounts for your site, add new ones, or edit your user profile.

Tools

The “Tools” submenu is where you’ll find what you need to do things like setting up the “Press This” bookmarklet, converting tags to categories and vice versa, and importing and exporting the content of your site.

Settings

Finally, the last section you’ll encounter in the WordPress administration menu is the “settings” section. While everything else overviewed here provides settings for specific aspects of your site, the “settings” submenu is where you’ll find all the configurations that effect your site as a whole. This section includes general settings, settings for how content is written, settings for how content is displayed, and settings for comments. It also includes settings for how media is handled, and lastly, how permalinks are handled.

Your Milage May Vary

This is the order of the WordPress administration menu when your WordPress installation is fresh. However, this order can and will change, and there are three reasons for this.

  • themes and plugins add things,
  • The type of WordPress installation effects what you’ll see,
  • and the permissions you have as a user determines what you’ll see.

Themes and plugins add things

First, both plugins and themes can, (and often do) add things to the menu. so your menu may not look like this one at all. In fact, it likely won’t. This is because plugin and theme authors will add either top level menus, or items within already-existing submenus, so that users can take advantage of a plugin or theme’s features. If the plugin doesn’t have a lot of features, then its author will add a settings page to the “settings” submenu and leave it at that. But the more features a plugin has, the more settings and other options it needs. The same goes for theme authors, except themes packed with features will always require more than just a page of options added to the “settings” submenu. Ideally, theme authors will add their customization options to the customizer, but this assumes that their theme doesn’t include every option under the sun. Sadly, lots of themes do. All of this means that the WordPress administration menu’s layout can vary widely, and you’ll either need to be very familiar with what you have installed, or, if someone else has built the site for you, you’ll want to make sure they’ve shown you around before turning it over to you.

Single or multisite

The second reason the order of the WordPress administration menu can change depends on which kind of installation you have. This tutorial covers a single-site installation, but there’s also multisite to consider. WordPress multisite adds some additional options to the administration menu on a per-site basis, and it adds other options that you’ll only see if you’re logged in as a network administrator.

Who can do what

Finally, what you see in the WordPress administration menu is determined by the capabilities you have as a user. If you’re an administrator, you see everything. But every other user role restricts privileges to one degree or another, and so users designated with a role other than administrator will only see the items that match the capabilities they have.

The Tool Bar

Think of the tool bar as a series of quick links for your WordPress-powered site. It contains links to pages about WordPress, including credits and freedoms, links to create new posts and pages, add new plugins or users, review comments, and update alerts for the themes and plugins you have installed. As a screen reader user, I don’t find myself using the tool bar at all, since I’m familiar with where things are in the administration menu, but it’s there if you decide you want to add it to your workflow.

The help tab

The help tab is where you’ll go to get help and documentation specific to whichever administration screen you happen to be on. It provides links to the full documentation for each screen, as well as a link to the support forums. Think of the help tab as context-sensitive help for WordPress. Each administration screen has one, and themes and plugins will often add them as well so their authors can provide specific documentation.

The screen options tab

The screen options tab is where you’ll go to make any customizations to your administration screens without having to add any code. What you can customize depends on what screen you’re on. We’ll discuss what you can customize on the WordPress dashboard a bit later on in this tutorial.

Admin notices

Admin notices) are a way for plugin authors, theme authors, and WordPress itself to let you know that something’s changed and you may need to take action. There are three types of admin notices:

  • Update complete or success notices
  • update and other prompts
  • errors

Update complete or success notices

These notices let you know that a theme, plugin, or WordPress itself needs to be updated. On other screens, they also let you know that a task has been completed successfully, such as publishing a post, for instance.

Prompts

Prompt messages let you know that there’s an update available and you should install it, or advise you that there’s something else you might want to take care of. Commercial plugins and themes will sometimes use this type of message to let you know that your subscription has expired. These messages will also be used by plugin and theme authors, (commercial or free), to let you know that there are new features, and provide a way for you to view a changelog.

Errors

Error messages let you know something is wrong, although these are not always catastrophic. Plugin and theme authors, as well as WordPress itself, try to make these as friendly as possible so we don’t freak people out. They’ll alert you to things like problems with updates, but they’ll also alert you to needed settings changes in the case of plugins and themes so that all the features you’ve implemented on your site work together properly.

As of WordPress 4.2, admin notices can be made dismissible, and with a little work on the part of plugin and theme authors, WordPress will remember that you dismissed the notice.

The Meat of the WordPress Dashboard

Now that we’ve covered all the items each screen has in common, we can turn to the meat of the WordPress dashboard. This is where you’ll find all the high-level statistics about your site, and some quick ways to do things like moderate comments and write posts. It’s also where you can get a glance at what’s going on in the wider WordPress world if you choose.

The WordPress dashboard is broken into five sections called widgets.

  • At a Glance
  • Activity
  • Quick Draft
  • WordPress News and Events
  • Welcome

At a glance

The At a Glance widget provides a summary of the number of Posts, Pages, and Comments on your site. Each of these content types are displayed in the form of a link and, when the link associated with a particular type of content is activated, you’ll be directed to the specific area to manage that content.
A statement at the bottom of this widget tells you what WordPress Version you’re running on and the current theme you have activated on your site.

Activity

The “Activity” widget shows any upcoming scheduled posts, recently published posts, and the most recent comments on your posts. It also gives you the ability to moderate any of the comments shown. The title of the “Activity” widget is contained in a level-two heading, and this widget is divided into sections, with each section’s title contained in a level-three heading.

“Scheduled posts” shows you five of the posts you’ve scheduled for later publication. For most, this section will not show up, but if you’re working on a multi-author site, or you write content and schedule it according to an editorial calendar, this section is one you’ll see pretty regularly. Once there are no more scheduled posts, this section will disappear.

Recently Published” shows you the last five posts that have been published, with a link to each one that allows you to edit the post. The “Recent comments” section shows you the last five comments left on your site, with an excerpt of each one inside a block quote. Beneath the block-quoted text is a list of six links.

  • Approve (or unapprove) this comment
  • Reply to this comment
  • Edit this comment
  • Mark this comment as spam
  • Move this comment to the Trash
  • View this comment

By activating any of the above links, you’ll be able to take the action specified “View this comment”, for example, will take you to the comments section of the WordPress administration portion of your WordPress site so you can read the comment in its entirety before deciding what to do with it.

After this set of links, you’ll find a section that allows you to view more contents. It will give you an overview, like the “At a glance” widget does, of the number of comments you have and what state they’re in: all of them, or how many you have pending, for example.

Quick Draft

The “Quick Draft” widget allows you to easily add a post in draft form to your site. This widget contains a form with two fields. The first field is labeled “Title”, and this is where you’ll enter your draft’s title. The second field is labeled “What’s on your mind?”, and here is where you’ll enter the body of your post. Since this widget is only meant for you to be able to jot something down quickly and save it for later as a draft, you can’t do anything like add categories or tags. But it’s a great way to capture ideas for later posts. Think of it as a scratch pad for WordPress.

WordPress News and Events

This widget lists “the latest news from the official WordPress blog”.
Here you can find out what the WordPress developers have been up to recently and keep up with the latest WordPress related news. In addition to software developments, such as version announcements and security notices, news about the WordPress community in general is periodically posted.

Each article is linked, with its title as the link text, but there are no extra headings in this widget, so you’ll either need to tab through it or use your arrow keys to move through the list.

Along with the official WordPress blog, you’ll find links to selected talks from WordPress TV, which is where all WordCamp talks are posted and freely available for anyone to download and watch. You’ll also find links to information on WordPress’s mobile apps from WordPress.com, as well as the latest news from the WordPress Tavern, which is the biggest news source outside of WordPress.org itself.

As of WordPress 4.8, you can now search for local or semi-local WordPress-related events from the WordPress dashboard. WordPress has a thriving offline community, with people meeting in over four hundred cities around the world. Inclusiveness, (and yes, this includes accessibility), is an integral part of WordCamps as well as WordPress meetups, and these events can be an excellent way to network with the wider WordPress community, whether you’re just starting out or are a seasoned community member. The events section of the “WordPress News and Events” widget allows you to enter a city and find WordPress meetups and WordCamps near you.

Welcome

The last widget you’ll encounter on your WordPress dashboard is the welcome widget. While you may think “Welcome” is the first thing you should encounter, this widget should be thought of as a sort of quickstart guide for WordPress. It gives you quick links to the areas of your WordPress administration panel so you can take care of any first steps for building your site. Picture it as that moving checklist you get from your landlord when you first move into your new place combined with the inventory you get from the moving company, on top of going through your boxes to find the things you absolutely need right now. That’s the “welcome” widget in a nutshell.

Customizing your WordPress dashboard

The detailed tour above will help you find your way around your WordPress dashboard, but what if you don’t need all the widgets we talked about? What if you don’t care about WordPress news, or don’t think you’ll want to compose draft posts using the “Quick Draft” widget, or what if you want to hide the admin notices?

Fortunately WordPress provides several ways for you to quickly customize which widgets are displayed. This only applies to dashboard widgets, so you won’t be able to do something like remove the administration menu, but customizing what is displayed when you log into WordPress can be a great way to reduce clutter.

Screen options revisited

Earlier in this tutorial, we went over the “screen options” tab,, and I explained that this is where you’ll go to customize your WordPress dashboard.

To expand the screen options, press enter on the button that says “Screen options button collapsed”. Once you’ve done that, the contents of this tab will appear directly above the “Dashboard” heading.

This section of the screen has no headings of its own, so you won’t be able to use your headings navigation keys to move to it. You’ll either need to use the skip link at the top of the page, or navigate by region. Depending on which screen reader you’re running, as well as the version you’re running, you may have a keystroke for navigating by regions Check your screen reader’s documentation for specifics.

If you have a keystroke for navigating by region, the region you’re looking for is “Main”. Once there, you’ll see the “screen options” tab content. If you don’t have a keystroke for navigating by region, the skip link is an excellent fallback.

The “Screen options” tab contains several checkboxes. Each checkbox is labeled with the name of the widget or box it controls, and you can uncheck the boxes for the widgets you don’t want displayed. If you decide you want to display them again at some point, you can always go back in and check them again.

Once you’re done checking and unchecking boxes, press enter on the button that says “Screen options button expanded”, and the tab will collapse.

Mouse users can rearrange widgets, keyboard users cannot

There is one aspect of customizing the WordPress dashboard that keyboard users, (including screen reader users), cannot take advantage of. The ability to rearrange widgets so that they appear in a different order than the one that ships with WordPress. As a screen reader user, you may be tempted to contact the WordPress Accessibility Team, as a whole or individually, and ask that this be fixed. But before you advocate or criticize because you’re frustrated or angry that you have to get sighted assistance, please keep the following in mind.

We are already aware of the problem

The WordPress Accessibility Team is already aware that rearranging widgets on the WordPress dashboard is a problem, because it’s aware that almost every feature in WordPress that requires dragging and dropping is a problem. Drag-and-Drop functionality is a problem because it relies on a JavaScript library for which there is no accessible alternative, and which the WordPress Accessibility Team will have to fix. Since the team is working on WordPress accessibility voluntarily and on its own time, this is a slow process. So this will be fixed eventually, but it’s going to take time, and for now, you’ll have to get sighted assistance if you want to rearrange the order of the widgets on the dashboard.

Customizing the WordPress dashboard with a plugin

The “Screen Options” tab allows you to check and uncheck boxes to hide or display widgets. But if you want to add things to your dashboard that aren’t included with either WordPress or your active theme or plugins, you have the option of installing a plugin that will allow you to completely customize what’s seen on your dashboard. Dashboard Widgets Suite is an up-to-date plugin which provides a useful set of widgets that are helpful when it comes to managing your WordPress installation, including a PHP error log widget and a system info widget. There’s also a whole pile of free plugins that will allow you to do almost anything imaginable to the WordPress dashboard, including hiding it. And speaking of hiding,

Hiding Admin Notices

WordPress admin notices can be and often are useful, because as mentioned above, they let you know when you’ve successfully completed a task in WordPress, or that you have new updates to install. But they’re also used by themes and plugins that you can get for free in the WordPress repositories to do things like present upsells. This is fine in moderation, but it can get out of control very quickly, turning what is a clean and simple dashboard when you first start out into a hellscape of advertisements which can present some serious cognitive overload even if you don’t use any assistive technologies. Fortunately, there’s a plugin that fixes this by grabbing all your admin notices and hiding them away for you to view and take care of at your own convenience. Dobby rolls up all of your WordPress admin notices and keeps them hidden behind a “Reveal” button that toggles a color-coded list of notices into view. The plugin will post an admin notice if any notices have been captured. While the color coding won’t be useful to screen reader users, the hiding of everything behind one notice, (thereby decluttering your dashboard), definitely will. In fact, I’m thinking of installing this out of the box on every site I build for clients.

In this tutorial, I’ve provided a detailed tour of the WordPress dashboard, and shown you how to customize it with a screen reader. This should help you get started on managing your WordPress site more effectively.

Up next: manually backing up and updating WordPress, plugins and themes with a screen reader.

How to Post to WordPress using Windows Live Writer and a Screen Reader

There’s been some discussion happening on Twitter about different ways to post to WordPress powered sites. one of the recommendations that came in was to use Windows Live Writer to do this. So I thought I’d post a tutorial on the basics of using Windows Live Writer with a screen reader in the hope that it will make writing and posting easier for those who are blind and who don’t necessarily want to use the standard WordPress add new post screen.

 

What’s wrong with the editor that comes with WordPress?

 

There’s nothing wrong with the standard editor, but sometimes it’s easier to write in a truly distraction-free space, which is something that can’t be offered by the WordPress content editor due to the fact that you have to enter forms/browse mode if you’re using a screen reader. This means that you’re stuck writing in what is normally viewed as an input field, which has the effect of limiting your writing, even if it is just psychological.

 

Having a distraction-free writing space means you can focus on your writing and not on the unintended distraction of an input field. So in this tutorial, I’m going to show you the basics of Windows Live Writer, and how to get around it with a screen reader. I’m using Jaws in this case, but it will work reasonably well with NVDA as well. I haven’t tested with Window Eyes or System Access. It also goes without saying that this is a Windows-specific application. For the Mack, there’s MarsEdit.

 

Getting Started with Windows Live Writer

 

The first thing you’ll need to do, if you haven’t done so already, is download Windows Live Writer and install it. Next, you’ll need to set up your blog. This screen is useable with Jaws, although if you want to read the whole dialog you’ll need to do some cursoring. You’ll enter in your blog/site’s address, without the we-admin, and then the username and password for the site.

 

Next, Windows Live Writer will ask you if you want to download your blog’s theme so that you can preview what your post is going to look like. You can try this, but I didn’t have any luck, and the preview doesn’t appear to be accessible at all.

 

Once you’ve gone through all the setup, you’re ready to start writing. There are a couple of things to note. First, the title and body fields aren’t labeled, but you’ll be able to arrow up and down to get in and out of them. Yeah, this is weird. At first I assumed I could tab between the two, and you actually can’t. So first, you’ll type your title, and if you want to change that at any point, you can arrow up from the body section and change that, which will then reflect in the title bar of the window. The next thing to note is that you have ribbons, just like you would in any other modern Microsoft application. These are completely navigable with the keyboard, and you can insert hyperlinks, images and everything else, as well as interact with everything else in the ribbons.

 

To deal with categories, tags, and scheduling, you’ll need to use your screen reader’s specific cursor to navigate above the title field, and find the “categories”, or “tags” or whichever field you want to modify and then left-click on it. Once you’re in the field, everything is tabbable and you can edit away.

 

After you’ve done all your writing/editing, you can either save as draft or publish from the ribbons. If you’re using WordPress SEO by Yoast, you’ll probably want to save as draft so you can go back and enter your keywords and further optimize the post. But for the writing aspect, Windows Live Writer does the trick, and it’s not as heavy as Microsoft Word when it comes to the system resources it consumes. I haven’t tested this on Windows 8 yet, but it works at least up to Windows 7.

 

So far, the only thing I don’t like is that there doesn’t seem to be an easy way to see the word count of the post. But I suppose this isn’t a deal-breaker.

 

This tutorial should get you started on using something other than the standard WordPress post editor to write, and hopefully, it will encourage you to write more and write/post more often.