Introduction

This is the first in a series of tutorials on using WordPress’s block editor with a keyboard. We’re assuming that you’re using a screen reader as well, but we’ve also tried to include keyboard navigation tips for times when a screen reader is not present.

Inserrting a new block

When starting a new page or post, a dialog appears welcoming you to the block editor. Move to the “close this dialog button” and press either spacebar or enter to dismiss this welcome dialog.

From the blocks toolbar choose to add a new block, by either pressing the spacebar or enter key on the appropriate button. A place holder for a new block is inserted into the content area which prompts the user to start typing or press the slash (/) key to choose a block type.

Choosing the heading block

With focus on the block place holder, press the slash (/) key to choose a block. A list appears with 81 items in which to choose the option you need. The number of items in this list may change, however, at the time this was being documented only 81 items were available in WordPress 5.5.1.

Use your up and down arrow keys to navigate this list until you get to the heading item and then press the enter key. Do not attempt to use first letter navigation in this list as it does not work, only the arrow keys.

Changing your block layout

As you continue to compose your page or post, the blocks are enumerated 1 of 10, 2 of 10, and so on.

To move your block up or down in the hierarchy, first make sure you’re focused on the block and then press Alt + F10 to bring up the block editing menu.

Use your right and left arrow keys to navigate this menu. As you press the right arrow keys, the first two (2) options on this menu bar is the buttons to move either up or down one (1) block at a time. Choose the appropriate button, and press the spacebar or enter key to maneuver the block into the position of the hierarchy you desire.

Choosing your heading level

By default when a heading block is inserted into the content area it is automatically designated . as a heading level two (2) element.

To change the heading level, first make sure to be focused on the block and press Alt + F10 to bring up the menu bar, and right arrow to the button for heading level.

Press your spacebar on this button. A list of buttons appears for each heading level, to navigate this list, however, you will need to use the left and right arrow keys to choose the heading level you desire.

Once you have the heading level, press either your spacebar or enter key to confirm your choice.

Inserting text into the heading block

To insert text into the heading block, just simply start typing if you have your focus on this block. Screen reader users will need to make sure that their screen reader of choice is in either forms mode or editing mode.

Editing text in the heading block

Editing text in the heading block can be a little tricky at first with a keyboard, however, it can be done with practice.

Make sure you have the heading block focused, then use your arrow keys to navigate to the text you wish to edit. Use your keyboard commands for selecting text and make your modification.

This post is the result of a quick discussion on Twitter that I think should be saved for later bookmarking/reference. Also, my Twitter client has some weird focusing issues which means the first part of the reply was sent to the wrong person. (Sorry about that Adrian). Lastly, Twitter seriously broke the thread so if you try to search for related posts you’re missing half of it.

Wendy Delfosse asks on Twitter:

Best places to start for learning to use WordPress with visual impairment? A user wants to know how to pick a great theme since he won’t be able to verify the design himself. Any tips greatly appreciated.

(Source).

More specifically, the user Wendy is asking on behalf of is looking for help with making sure their site looks good with background images, fonts, ETC. I responded in multiple replies with several tips based on my experience. Here are those tips.

Picking a great theme is very much dependent on what you consider great, including visually. Also, in the case of visually impaired, blind specifically, whether you have visual elements like images, for example, to help make a theme look like the demmo, except with your content/site.

So, to start with, does this user have a concept of what they’re looking for visually in a site? If not, I’d say start with an accessibility ready theme and then, once you’ve figured out branding/colors/images ETC., go from there.

Also keep in mind that no out-of-box theme will have everything you want. So make a list of things that are essential in a theme, then nice-to-haves, and then, once ready to grow, decide on budget for hiring out the visual work of site building/design.

Find a sighted person you can trust. Looks good is also unfortunately one of those things that to a large extent is in the eye of the beholder. Knowing what you want from a site in terms of who the audience is for the site is also helpful in this, because it helps narrow down the “looks good” part.

If it’s something like a personal site though, I’d go with picking an accessibility ready theme, and then, after that, don’t worry so much about how it looks to others except for basic contrast issues, which accessibility ready themes will cover adequately. In short, if it’s a personal site, just be yourself.

One last thing. When picking a sighted person to trust with this stuff, stick with one person. Be careful about second opinions as sighted people who are not designers/familiar with design principles/accessibility will give you widely varrying and often conflicting results. It’s kind of the same thing as asking a random sighted person how your clothing looks.

Off the top of my head, I think this covers the basics from this perspective. But, if there’s something I haven’t thought of, feel free to leave it in the comments, and I’ll update this post accordingly.

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

$845 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

$845 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.

the WordPress widgets screen
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.

Hashtags are used to organize and group social media posts so they can be searched for by topic. When used with care, hashtags can increase the reach of the content you publish. If you’re using the Jetpack Publicize feature to share your content to social media, sharing that content with hashtags is not natively supported. I found this out when attempting to add appropriate hashtags to my post for National Blog Posting Month, (#NaBloPoMo). Fortunately, extending Jetpack’s Publicize feature is as simple as installing a plugin.

To add hashtag support to the Publicize feature, download the Publicize with Hashtags plugin from WordPress.org, or visit the plugins section of your WordPress dashboard and install and activate the plugin from there.

Publicize with Hashtags allows you to automatically append hashtags when you share your content through the Jetpack Publicize feature with the use of post tags. for instance, if you’re writing a roundup of a recently attended conference, you can tag the post with the conference’s hashtag, (excluding the # sign), and your tag will be automatically appended to what the Publicize feature posts, without exceeding the 118-character limit of the social message text.

Jetpack’s Publicize feature is far from the only way you can share content to social media using WordPress. But if you’re using Jetpack, and you have this feature activated, appending hashtags that are taken from your post’s tags is an excellent way to increase the reach of the content you’re creating. I hope you find this as helpful as I have.

There are several writing events going on this month. National Blog Posting Month, hosted by BlogHer, National Novel Writing Month, the event that started it all back in 2006, and Nanopablano, a fun take on BlogHer’s yearly event, to name a few. Participating in any one of these is a huge demand on time and attention, but they’re also a great way to meet new people and find new things to read and gain inspiration from.

All of the content being produced, (with the exception of the content that lives only on social media), is consumable through a feed, which is either RSS or some other compatible technology. Consuming content through its feed means that you don’t have to keep your eye on social media, and can catch up on the content you want on your own terms.

What is this RSS you speak of? What’s a feed?

RSS stands for “Really simple syndication”, and it’s the mechanism through which everything from blog posts to podcasts are delivered and consumed. A podcatcher, (that thing you listen to your favorite podcasts with), is a feed reader with built-in ability to process audio and video. But at its heart, it’s still a feed reader.

Anyway, back to those writing events. Of course you can consume the content through Facebook and Twitter, but what if you don’t want to open up your social media client to find out what’s going on with the writing event you’re participating in?

Enter a feed reader

This is where RSS, (and an RSS reader), comes in. You can add either all the feeds from all the lists of links associated with your event, or just the ones you’re interested in, and browse through them at your leisure.

Yeah but I thought WordPress.com was a blogging platform.

It is, but your WordPress.com account also gives you access to a feed reader that allows you to consume, and even export and import, the feeds you keep up with. It’s not the only feed reader you can use. there are plenty of apps for both iOS and Android, as well as for Windows and OSX. But the advantage to using something like WordPress.com is that all your feeds are stored in one place, and can be accessed from any device. And with a little work, you can use it with a screen reader. More on that below.

Getting Started

The Standard Signup Process

In order to use the WordPress.com reader, you’ll need a WordPress.com account. You may already be familiar with this if you’re running a self-hosted installation of WordPress and the Jetpack plugin, because in order to authorize Jetpack, you need a WordPress.com account.

To sign up, visit WordPress.com and click or press enter on “sign up”. Next, you’ll be presented with a screen that asks you what kind of site you’re creating. Choose an option and you’ll be taken to the next step in the account setup process.

The next screen asks you to describe your site. Enter a brief description in the box. Once that’s done, you’ll see a “continue” button, and you can move to the next step in the process by pressing that.

The next screen asks you what you want your site to look like, and presents several options:

  • A list of my latest posts
  • A welcome page for my site
  • A grid of my latest posts
  • An online store

Choose one of these options to move to the next screen.

Next, you’ll be given the option to choose a theme, which you can change later. The themes WordPress.com shows you are based on the kind of look you’ve chosen for your website. You can pick a theme now, or skip this step and choose later on.

The next screen will walk you through picking a domain. A domain is what people type into their web browser’s address bar to reach your site. You can type a keyword into the search box, and you’ll then be shown which domains/keywords are available. The free options will have WordPress.com at the end, and there are paid options without WordPress.com included. Select the one you want, and move to the next screen.

You’ll be asked to pick a plan on the next screen. Pick the free one, unless you want to pay for one of WordPress.com’s other plans. If you’re a screen reader user, you can press “b” to move directly to the “select free” button, and press enter or space on that.

Next, you’ll be asked for your email address, a username, a password, and you’ll be asked to agree to WordPress.com’s terms of service. Enter the information requested, check the box, (after reading the terms of service to make sure you are willing to agree to them), and click on or press enter on “create my account”.

Signing Up for An Account Without A Blog

If you already have a self-hosted blog, or a blog on another platform, you might not want to create a second blog on WordPress.com. That’s fine, because there’s an alternative process you can follow if you just want to take advantage of the WordPress.com Reader without creating another blog or website. Fill in your email address, choose a username and password, agree to the terms of service, and then click on or press enter on “create my account”.

Using the WordPress.com Reader to Consume Content

Once you’ve either signed up for a wordPress.com account, or logged in with the account you already have, you can begin taking advantage of the WordPress.com Reader to consume content. It’s the first thing you’ll see when you log in. Screen reader users should note that, for the time being, it works best with Firefox and NVDA, the only free (as in freedom) and free (as in freely-available) screen reader on the market. The reader will work with Jaws for Windows and Internet Explorer 11, but I’ve found that Firefox and NVDA are the best browser and assistive technology combo to use.

The WordPress.com Reader, as with all other sites, looks very different to a person who doesn’t use assistive technology than it does to a person who is an assistive technology user. Both groups of users start at the same place, a listing of posts from the sites you follow, in chronological order, with the newest at the top. Both also see the headline of the post, an excerpt if available, an image if available, and thumbnails of any other images in the post. From this point onward is where the differences come in.

Following sites

For those who are not assistive technology users, there are a series of tabs on the left side of the screen. For assistive technology users such as those who use a screen reader, these tabs appear as a list of links under the heading “Streams” at heading level two. If you’ve already got posts appearing in the “following” section of your reader, you’ll need to press ctrl+end to exit the infinite scroll, and navigate backwards through the headings, until you get to “streams”.

Once you’re within the list of links under the “streams” heading, press enter on “manage” to follow new sites or edit the ones you’re already following. This includes sites you’ve subscribed to by email. Sticking with our example of this month’s writing events, the process to add sites to follow looks similar to this.

First, visit the official blogroll (list of links) for your preferred writing project. With that tab open, you can right-click on each link, navigate back over to your WordPress.com “manage” tab, and paste the link into the search box. Once you press enter, if the site has an RSS feed, it will be added to the “followed sites” section of your WordPress.com reader. If you’re looking for sites to follow, The NaBloPoMo list will be published on November 7, and the NaBloPablano list has already been published.

Whether or not you’re participating in a writing event this month, keeping track of the sites you like to read is a lot easier when you’re doing it from one place that’s not your favorites list in your browser on one computer. This tutorial references specific lists of links for specific events, but you can also apply it when you’re browsing social media and you come across a site or six hundred you’d like to follow, and be able to access whether you’re on your computer or on the go. To everyone else participating in writing events this month, good luck, and to the rest, happy reading.