How to create Section-508 compliant images and buttons?

caspio · Fri Jul 10, 2009 1:39 pm

How to Create Section-508 Compliant Images and Buttons?

Answer from Caspio Support:

Caspio strives to offer capabilities to conform to Section 508 regulations for the applications you deploy on your websites and intranets. We are continuing to address 508-compliance with new features scheduled for release in late 2009. Currently, the below work-arounds are available to add “alt-tags” to images and buttons in Caspio Bridge.

Instructions for Adding Alt-Tags to Images:

If you are displaying image fields in your DataPage, you will need to insert images through an HTML Block in order to specify an alt-tag. This work-around requires a separate Search and Report DataPage for the purpose of referencing all your images.

1. Create a reference Search & Report DataPage based on the table containing the images. Configure as a default criteria search which returns all required images on the Results Page (Search Form and Details Page are not necessary).

2. In your main DataPage, insert an HTML block where you want the images to appear.


	Attachment: Add_HTML_Block.jpg [ 67.86 KiB \| Viewed 7055 times ]

3. Paste the following HTML code to render the images:


	Code: <img src=”http://b2.caspio.com/dpImages.asp?appkey= xxxxxxxxx&file=[@field:myFile]” alt=”Customer Photo”/>


	Attachment: Insert_Code.jpg [ 52.46 KiB \| Viewed 7059 times ]

3. Customize this code in your HTML Block as follows:

b2.caspio.com

Appkey=xxxxxxx

[@field:myFile]

alt=”Customer Photo”

4. Repeat this process for all other instances where you display images in your DataPages.

Instructions for Adding Alt-Tags to Buttons:

This work-around provides detailed instructions to create a separate button with an alt-tag in various DataPage types.

Web Form:

1. In the Web Form Wizard – Configure Field Screen, insert a header and footer.


	Attachment: Adding_Header.jpg [ 69.73 KiB \| Viewed 7055 times ]

2. Copy and paste the code below into the header.


	Code: <style type="text/css">#Submit { display: none; }</style>


	Attachment: Header_code.jpg [ 51.79 KiB \| Viewed 7059 times ]

3. Insert an HTML Block and place it at the end of the list.


	Attachment: Adding_HTML_Block.jpg [ 56.97 KiB \| Viewed 7056 times ]

4. Copy and paste the code below into the HTML Block.


	Code: <input type="submit" value=" Submit " alt="Submit Button" />


	Attachment: HTML_Block_code.jpg [ 55.68 KiB \| Viewed 7055 times ]

Search and Report:

1. In the Search and Report Wizard – Configure Search Fields Screen, insert a header and footer.

2. Copy and paste the code below into the header.


	Code: <style type="text/css">#searchID { display: none; }</style>

3. Insert an HTML Block at the end of the list of fields.

4. Copy and paste the code below into the HTML Block.


	Code: <input type="submit" value=" Search " alt="Search Button" />

5. In the Search and Report Wizard – Configure Details Page Fields, insert a header and footer.

6. Copy and paste the code below into the header.


	Code: <style type="text/css">#Mod0EditRecord { display: none; }</style> <style type="text/css">#Mod0CancelRecord { display: none; }</style>

7. Insert an HTML Block at the end of the list of fields.

8. Copy and paste the code below into the HTML Block.


	Code: <input type="submit" value=" Update " alt="Update Button" /> <input type="submit" value=" Back " alt="Back Button" />

Password Recovery Form

1. In the Password Recovery Wizard – Configure Fields, insert a header and footer.

2. Copy and paste the code below into the header.


	Code: <style type="text/css">#searchID { display: none; }</style>

3. Insert an HTML Block at the end of the list of fields.

4. Copy and paste the code below into the HTML Block.


	Quote: <input type="submit" value=" Send Password " alt="Send Password" />

Community Forum

How to create Section-508 compliant images and buttons?