universal-design-center

UDC Custom Elements

Custom modules are created with accessibility in mind. If there is any question please contact Universal Design Center.

Link Text-Box: single


Source Code:

If the text does not fit in the box, after copying the code to your page, look for "DivRowBox" section in the code below (highlighted in red) and change the "width" to up to 55% (the best number that fits your need).

You can also make a second line just by duplicating the row (divTableRow) in your code. 

Link Text-Box: 2-column


Source Code:

If the text does not fit in the box, after copying the code to your page, look for "DivRowBox section in the code below (highlighted in red) and change the "width" to up to 48%(the best number that fits your need).

You can also make a second line just by duplicating the row (divTableRow) in your code. 

Get the source code for Link Text-Box: 2-column

Link Text-Box: 3-column


Source Code:

If the text does not fit in the box, after copying the code to your page, look for "DivRowBox" section in the code below (highlighted in red) and change the "width" to up to 32% (the best number that fits your need).

You can also make a second line just by duplicating the row (divTableRow) in your code. 

Get the source code for Link Text-Box: 3-column

Link Text-Box: 4-column


Link Text-Box: 4-column/2-line


Jump Back

Your paragraph goes here, while the "back to Top" link floats to the right of the content and will direct users to the top of the page.
back to top

Source Code:

You must assign an id="beginning" to an element at the top of the page where you want the user to jump back to. For example, the id="beginning" should be assigned to the first paragraph or header of the page. You can also add an empty "Span" element with id="beginning" at the very top of the page. (This method is already incorporated in the code below)

Get the source code for Jump Back

Checklist

  1. The first item description goes here. Did you check the web accessibility page?  
  2. The second item description goes here. Did you check the document accessibility page?  

Source Code:

Replace each item's description text with your own text where highlighted in red. If there is a link in any of the items listed, you should also change the link text and provide the hyperlink to your designated page. For example, in the code below the link goes to Web Accessibility page. 

Get the source code for Checklist

Pop-Up Window

A pop-up window or a light-box can be used for providing instructions, help, information or submission confirmation in the form of a button, link-text or an icon. It can also be used to provide description for complex images/info-graphics where an alternative text is not acceptable due to the length of the description.

Source Code:

All three versions (button, link and icon) are included in the code. You may keep only the element you wish to have base on your specific use.

Get the source code for Pop Up Window

Toggle Show/Hide

Here is some content that requires longer text to explain and provide more information.Here is some content that requires longer text to explain and provide more information.Here is some content that requires longer text to explain and provide more information.Here is some content that requires longer text to explain and provide more information.

Some More Content

The page content that follows the paragraph above.The page content that follows the paragraph above.The page content that follows the paragraph above.The page content that follows the paragraph above.The page content that follows the paragraph above.The page content that follows the paragraph above.The page content that follows the paragraph above.

Infographics



Source Code:

Depending on how many "more info" toggles are used on your page and the height of the content box for each one, you need to adjust a few code snippets highlighted in red.

Get the source code for Toggle Show/Hide

More custom elements coming up soon.

last update: 10/19/18