tables

Table Sorter

Simply turn your table into a sortable table by adding the "tablesorter" class to your table tag.  The THEAD and TBODY tags also need to be present for the plugin to work - details and example below. 

  • Multi-column sorting : add “tablesorter” class to the required table
  • Disable sorting from particular column : add “sortless” class to the required TH column within THEAD tag.
  • Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
  • Cross-browser support : IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

IMPORTANT

  1. THEAD and TBODY tags are compulsory in the desired table, otherwise this plugin will not work.
  2. Add "tablesorter" class in the desired TABLE tag.
  3. For column heading, use TH tag within THEAD tag.
  4. If you want to exclude a particular column, add "sortless" class to that TH tag.

/*===== Example of Table Code =====*/

<table class="tablesorter" style= "cellspacing="0" cellpadding="0">
<thead>
<tr style="height: 24px; border: 1px solid #dad9c7;">
<th>Sortable Header 1</th>
<th>Sortable Header 2</th>
<th>Sortable Header 3</th>
<th class="sortless">This is a Non-Sortable Header</th>
</tr>
</thead>
<tbody>
/*===== Table Body Content Here =====*/
</tbody>
</table>

Accessibility

All University websites are required to be compliant with the Americans with Disabilities Act, Section 508 (specifically Subpart B, 1194.22 Web-based intranet and internet information and applications).

While Aurora’s central themes are tested and kept accessible by UITS web developers, individual webmasters are responsible for keeping the content of their pages and sites accessible as well.

Please visit UConn's IT Accessibility website for more information.

Quick Tips to Keep Your Pages Accessible

Use Good Alt Tags

Alt tags for images help make a site more accessible. WordPress will use the file name of an image as the Alt tag, but this is likely not going to be good enough to pass an accessibility review. A good alt tag briefly describes the content of an image.

No Table Layouts

Layouts of rows and columns should be done with Bootstrap code, not HTML Tables. Besides being inaccessible, HTML tables will also break your pages in mobile views! Tables should only be used when the content in a cell is defined by what row and column it belongs to.

Avoid ‘Click Here’ Links

Avoid ‘Click Here’ and similar phrases for links. Instead, have the link text describe the link destination. In addition to being more accessible, it will help with your Google search rankings. For example, “For more information about our admissions process click here” could be better as “More information about our admissions process“.

Use Headings

Use headings to organize your page content. For example, this page uses Heading 2 (h2) and Heading 3 (h3) tags. “Quick Tips to Keep Your Pages Accessible” is a Heading 2, and “Use Headings” is a Heading 3. Besides bringing in a larger font and adding white space, these headings are great for accessibility. They allow impaired users to skip through the heading tags the same way you would visually scan a page for headlines. Heading 3 would be a subsection within an Heading 2 section. You can add headings to a by going to Format > Formats > Headings or by using the keyboard shortcut (Control + 2, Control + 3, etc. on Windows, Command + 2, Command + 3, etc. on Mac). Headings help your site to look great, be more accessible, and they will really help your search engine rankings.

Watch Color Contrast

Be careful with color contrast. You will be able to change the color of your page text or upload images with text. Remember that users may have forms of color blindness or weaker eyesight. In the Resources section below, there are ways to measure the contrast levels with some websites or apps. In general, don’t put red text on a green background, or yellow text on a white background. Make sure your text is clearly legible.

Contact Information

Be sure to have contact information clearly visible on the website (homepage, main navigation, or footer), providing the ability to request alternate versions of inaccessible material to viewers with disabilities.

Resources

Please note that while these tools will help issues, many aspects of web accessibility require a degree of judgement. For example, a tool can detect if you're missing an Alt tag for an image, but it won't be able to figure out if an Alt tag accurately describes the image.

Tool Description Instructions
WAVE A website that scans a single page of your site. After scanning, click the Flag icon, then change the filter to Section 508.
Web Accessibility Toolbar A browser extension for Internet Explorer that allows you to quickly run scans on any webpage.  
Accessibility Evaluation Toolbar A browser extension for Firefox that allows you to quickly run scans on any webpage.