need keyboard instruction

  • Author
  • #1641964

    Read your instructions on building a site- they are for sighted mouse users.
    I have problem building my site using only KEYBOARD. NO mouse.
    So I cannot ‘drag & drop’. Can you please provide instruction on doing the following tasks using Keyboard ONLY?
    (Theme: Mini magazine; Images uploaded to Media Library already)

    1- Install image in header

    2- Associate Image in media library with Image Widget.

    3- Re-order links in Category Widget

    4- Transfer a widget from sidebar to ‘Inactive Widget’.

    I am blind and know some basic HTML-CSS. If I can use the ‘text editor’, it should be more user friendly than a ‘visual editor’ but I can’t find the option to switch to that mode.

    Appreciate your help
    VK Cookrih

    The blog I need help with is



    We try to make our functionality accessible, but not all features currently are, so I appreciate you taking the time to write in. Let me see if I can assist you with these points.

    Are you aware of the Accessibility Mode for the widget area? You can enable it under Screen Options, and it provides some additional keyboard actions.

    1. You can upload an image using the keyboard, but I’m not sure you can edit the crop box. Let me know if you need assistance with that.
    2. If you know the direct URL of the image (which you can get from the media library under edit) you can enter the URL into the Image Widget via copy/paste.
    3. There isn’t a way to reorder categories in the Category widget. If you meant the Links widget, it looks like that may not be not fully accessible. Again, let me know if I can assist you with settings there.
    4. In accessibility mode, it looks like you can delete a widget, but not make it inactive

    I hope this is helpful. I appreciate you pointing out areas where can improve its accessibility.


    thanks Jackie,
    is there a list of keyboard controls in one place i can refer to? can’t find it.

    you mentioned ‘screen option’. could you give me the path to said option?
    thanks for your response



    To enable “Enable accessibility mode”

    When at

    Dashboard >> Appearance >> Widgets >> Screen Options is a Drop Down section – at the top of the screen on the right side of the screen is the “Screen Options” – click on it and “Enable accessibility mode” is the only option available – at the top of the screen on the left side just to the right of the Sidebar – click on it


    Thank you for your instruction. I have rewritten instruction for ‘keyboard user’. Perhaps you can add it to your tutorial section for other blind keyboard user to reference in future.

    (screenreader users read information in the order a page is coded, not as laid out by CSS. A button on the top right of a page may be on line189 on the HTML coded page. Another button on the left bottom of a page may be on line 20 on the same page. The most user friendly, efficient way for us to navigate a page is by heading levels. In this instance I have to listen to the page line by line to find the info. Below I have written the more efficient way to get to the link by keyboard.)

    Turn on accessibility option:
    • Dashboard >> Appearance >> Widgets >>
    • Press ’L’ to skip from list to list till you jear ‘HELP’. Alternatively, press ‘landmark’ command once to get to ‘NAVIGATION MENU’.
    • Arrow down you will hear ‘screen option – collapsed’
    • Presss ‘ENTER’ to open dropdown menu.
    • click on it and “Enable accessibility mode” is the only option
    • available.


    Are you using NVDA perhaps? Just curious. Another thing I do quite often when I know the name of the link I’m looking for is hit insert F7 which will bring up a list of links. Then hit S for screen options.


    yes, I am using NVDA. how wonderful to meet another blind member here! could you tell me how to insert an image into a post with text article as well? i had written a post, published it, then decided to insert an image. i used edit post option but could not figure out how to insert image into the post at cursor point despite numerous tries. in one of my tries, i noticed the tag <b> so i thought the post was in ‘HTML’ mode so i went to media library to copy short code of the image and pasted into the article and publish. but instead of picture, the pasted code appeared so i deleted the post.

    another problem is after i pasted my article in the ‘content’ box, i cannot tap out of the box. have to use firefox keystroke to go to locationbar, then tap back into the webpage.

    what is your website called? would like to pay a visit to your site.




    Thanks so much for the additional information. I have updated our Widgets support documentation with your instructions:


    Ah, unfortunately I don’t do much with images. It sounds like you’re using the visual editor, which as you have discovered, does not work well with screen readers. Switch to the text editor and you won’t have the problem with NVDA getting stuck in the edit box. You may also find a hint about inserting images from the buttons on the text editor. Click on my username and you’ll be taken to my site. I’m in the process of restructuring it, so it’s a bit of a mess right now.


    Hi Bob, I visited your site and left a comment on Microsoft article page. How do I switch to ‘text editor’?

    Hi Jackie,
    If I use ‘text editor’, I should be able to paste the <img src…’ code into the editor, right?
    – Can I add in a bit of code to make the image to float right?

    I typed a caption for the image in the media library. If the caption did not appear with the picture, (which happened to my header image- no alt text although it is in the media library); how do I ensure to caption and image appear together in the webpage?
    If you could not provide keyboard instruction on how to do it, may I put image and caption in a right floating div in the ‘contents’ box? That means I shall write an inline line of code for the div in the article itself to float right. Is that allowed? I checked your allowed code page and div is allowed.



    Thanks for leaving that comment. As for switching editors, the easiest thing to do would probably be once you’re on the posts page press insert F7 to bring up a list of links, then press V for visual editor, it may just be labeled visual I can’t remember. The next link down should be text. Click that and you will notice that a number of buttons have now appeared between the title and body boxes. Now your screen reader won’t get stuck in the box and you may even be able to insert the image where you want.



    Hi vkrecipev1ck13,

    Yes, you may add any HTML code to your site using the Text editor, including < img > tags and < div > tags.

    The easiest way (usually, anyway) to add a caption is to do so in the Media Library, but navigating the Media Library may be difficult if you are unable to see the contents. Let me know if you have questions about that.


    Thanks Jackie,
    I have created a post successfully but am not sure it is done with ‘Visual editor’ or ‘Text editor’. Hope you can enlighten me. Actually I have a sub-heading in the article I’d like to tag as h3 but since I am not sure which editor I am using , I’d check with you first.

    -After clicking ‘onscreen option’, found ‘text’ and ‘visuals’

    -chose ‘text’ and pasted article in ‘contents’ box. Saved as draft.
    The confusing part is there is no tags for paragraph, lists etc.

    – Chose ‘Visuals’ and option to use photo already uploaded to ‘Media library’. Although the photos I uploaded appeared, clicking on it did not select it. Finally re-upload from PC successfully, added caption and to flush right options. This time, the code <img src…’ appear and tag for caption as well (what one expect in an html document).
    – BUT the original text article below the ‘Visuals’ are not tagged like an HTML document.

    ?? So did I use a text editor or a visual editor?

    If it is a ‘text editor’, can I manually type in <h3> tags to my heading manually or will the tags appear visually in the published article like what happened in my previous deleted attempt?




    If you can see HTML in your post, you are in the Text editor. If you can’t, or if you type HTML code and it displays improperly on the actual post, then you are in the Visual editor.

    Looking at your post, it appears you were indeed in the Text editor as everything appears correct.

    You can use pretty much any HTML tag you wish in the Text editor including tags for paragraph, headings and lists. We have a drop-drop menu option and buttons to help with HTML formatting, but those are simply shortcuts, not essential for composing a new post.


    hi Jackie,
    i created the ‘about this blog’ over the ‘about’ page but this time couldn’t add any photo. direct upload didn’t work and when i tried writing my own code, it didn’t work either. i have deleted previous photo and uploaded a new one called ‘food.jpg’ but didn’t work either.

    is this the proper way to code it?

    <img src=”” width=”278″ height=”186″
    alt=”Plate of food” />

    if not, can you please upload the ‘food.jpg’ photo for me, which is in media library?
    i can’t re-edit the page despite numerous tries, the wrong page keep getting saved- don’t know why.




    If you go to the page at which is the page you get to if you select the image in the Media Library and click “edit”. On that page there is a box that displays the File URL in a selectable format.

    That file URL is:

    So if you go to your about page, for your IMG link, instead of the link you have, which is:

    you use the file URL within the IMG tag, it should work.


    hi jackie,
    in last sentence of my previous post, i said i could NOT re-edit the older deleted plateOf Food.jpg to the newer food.jpg. Each time i change it to food.jpg, could not update it to newer photo. anyway, have figured how to do it now. thank you.

    here are my last questions then let’s close this thread:
    1- how can I change my admin email? any link you can point me to ?

    2- can you ask your developer team to LABEL the following:
    when i used my screenreader to compile all links, they were not shown with appropriate names ie. ‘text’ and ‘content’. were missing. the ‘visuals’ was displayed as ‘visuals’ in the link list but not ‘text’. or ‘content’.

    3- i want to create a table and know how to code it.
    my question: can i specify width of table and columns and lines/border thickness for each cell and
    alignment of words eg centered or flush left text?

    width, alignment and thickness of lines are CSS but essential when building a table to make it easy to read. will all those attributes be stripped out automatically?

    without those attributes, the table will be difficult and confusing to read.



    Sorry I missed the issue with the editing. I’m glad you were able to resolve that! :)

    To reply to your questions:

    1. You can update your admin email here:

    2. I will let our developers know about the labels.

    3. If you are creating an HTML table, you can specify all of that formatting purely within your HTML code. Outside of tables, you can do some very basic formatting within the Text editor, but for more precise control, you would probably want to modify the actual site CSS, for which you would need the Custom Design upgrade.



    Also, please don’t feel like you have to wrap up this thread. I’m happy to keep helping you find your way around settings and processes, so let me know if you run into any other issues.


    thank you Jackie. you are really nice and helpful

The topic ‘need keyboard instruction’ is closed to new replies.