Accessibility boxes and the Text Box for loading external images

Sep 18, 2015

I was working on an online assessment today. I'm using Javascript to save data via PHP to a MySQL database.

Anyway, I was building a form, and was using Javascript to impart a little field validation in places. I was trying to make it so that tabbing would only select the input fields. 

I found that I needed to "turn off" the Alt Text on screen objects in order for the tabbing selection box not to select objects, other than the aforementioned text input boxes. [Right click on an object, then select "Size and Position", then select "Alt Text" and un-check the "Object is visible to accessibility tools" check box.] This does make the object not available for screens readers, but if you don't have tooltip/alt text being used for that object, it shouldn't make any difference.

When I tried to turn off accessibility to an embedded picture, I found I could not do it. The controls were grayed out, and yet when tabbing the yellow box still appeared. Most annoying, especially when there also was no way to set alt text. I really wanted the image to sink back into the background.

My workaround engaged a little known but useful function of the Text Box. It turns out you can put HTML markup in a Text box, and it will render HMTL. There is a difference in the scope of what HTML you can render, depending on whether you publish for Flash or for HTML5. The Flash published version has a limited sub-set of HTML it can render; the HTML5 published version should be able to use the whole set of HTML markup.

So I used HTML and the "<img src=''>" markup to link to an external graphic that I added to the assessment's folder structure after publishing it. [If you add it before, it will get overwritten on each publishing run.] .PNG files are a little wonky as to allowing you to set width and height, but .JPGs seem to re-size okay. 

Since my picture was coming in as a linked image from a Text Box, I could then use the controls mentioned above to turn off the yellow box accessibility selection on the image, allowing it to be a static image that exists in the background - effectively taken out of the accessibility queue.

 

3 Replies
Mark Ramsey

My bad - I just didn't see that control. Well, if I ever learn to read, I might come across all sorts of useful things.

Still, some of the above might be useful. In my example, I placed the static HTML markup in the field. If one could embedded a variable reference in the text box, and it renders HTML placed into that variable, other possibilities open up. One could load differing external graphics, based on the content of the variable, or links, or other various HTML markup dynamically.

I might have to test that theory.

 

 

This discussion is closed. You can start a new discussion or contact Articulate Support.