Modified AutoLink for some accessibility features

407 Posts

rasc Reply #1, 20 years, 2 months ago

I modified the AutoLink plugin/module a bit to have a dfn-tag, lang attributes and a combined acronym/lang. Ok, it’s easy for skilled coders but might be helpful for others.

Now you can have:

abbr: put the keyword for the abbreviation and put any (NOT empty) character into the value
acronym: put the keyword, the value and set the radio button to "acronym"
dfn: put the keyword, set the value to "dfn" and put the explanation into the title
language marking: put the keyword and set the value to "enLang"
acronym with foreign lang: put the keyword, set the value to "enLang", put the explanation into title and set the radio button to "acronym"

Yes, it’s a special case with the abbr missing title and/or lang. Why this? I assume that (in accessibility focus) my target audience knows about the meaning of an abbr, otherwise I’ll write the full word(s) (in web pages there is enough space to write more characters than in printed papers). The labelling as an abbr is only for screenreaders to pronounce it correct.

And why a dfn? There are some words/items which need some explanation for inexperienced users. For instance we have a financial service web site. There are many items needing an explanation: asset-based fees, nominal interest (of a bond), annuity, ...

This is my modification. Look for lines 156/157 (default: //-- be smart about whether a title has been passed or not) and replace following lines until "break". The lang is here "en" because I’m German. Rplace it with whatever you want.

default :
					//-- be smart about whether a title has been passed or not
					$title = ($title <> '') ? $title : $link;
					if ($default == 0) {
						if ($link == 'dfn') {
							$substitute = '<dfn title="' . $title . '">' . htmlentities($keyword) . '</dfn>';
							}
						elseif ($link == 'enLang') {
							$substitute = '<span lang="en" xml:lang="en">' . htmlentities($keyword) . '</span>';
							}
						else {
							$substitute = '<abbr>' . htmlentities($keyword) . '</abbr>';
						}
					} else {
						if ($link == 'enLang') {
							$substitute = '<acronym lang="en" xml:lang="en" title="' . $title . '">' . htmlentities($keyword) . '</acronym>';
							}
						else {
							$substitute = '<acronym title="' . $title . '">' . htmlentities($keyword) . '</acronym>';
							}
						}
					break;

And additionally a little mod in the AutoLink MODULE for a better overview in keywords/values/titles.
At bottom of the code look for

					<div><table style="width:100%"><tr><th class="gridHeader" style="width:20%">'.$_lang['keyword'].'</th><th class="gridHeader" style="width:50%">'.$_lang['value'].'</th><th class="gridHeader" style="width:30%">'.$_lang['comments'].'</th></tr>
					';
		$rs = $modx->db->select("*", $autolinkTable, '', 'keyword ASC');
		$i = 0;
		while ($row = $modx->db->getRow($rs)) {
			if ($i % 2 == 0) {
				$output .= '<tr><td class="gridItem">' . $row['keyword'] . '</td><td class="gridItem">' . $row['link'] . '</td><td class="gridItem">' . $row['comments'] . '</td></tr>';
			} else {
				$output .= '<tr><td class="gridAltItem">' . $row['keyword'] . '</td><td class="gridAltItem">' . $row['link'] . '</td><td class="gridAltItem">' . $row['comments'] . '</td></tr>';
			}
			$i += 1;
		}
		$output .= '</table></div>';
		}

and replace it with

						<div><table style="width:100%"><tr><th class="gridHeader" style="width:30%">'.$_lang['keyword'].'</th><th class="gridHeader" style="width:30%">'.$_lang['value'].'</th><th class="gridHeader" style="width:30%">'.$_lang['title'].'</th><th class="gridHeader" style="width:10%">'.$_lang['comments'].'</th></tr>
					';
		$rs = $modx->db->select("*", $autolinkTable, '', 'keyword ASC');
		$i = 0;
		while ($row = $modx->db->getRow($rs)) {
			if ($i % 2 == 0) {
				$output .= '<tr><td class="gridItem">' . $row['keyword'] . '</td><td class="gridItem">' . $row['link'] . '</td><td class="gridItem">' . $row['title'] . '</td><td class="gridItem">' . $row['comments'] . '</td></tr>';
			} else {
				$output .= '<tr><td class="gridAltItem">' . $row['keyword'] . '</td><td class="gridAltItem">' . $row['link'] . '</td><td class="gridAltItem">' . $row['title'] . '</td><td class="gridAltItem">' . $row['comments'] . '</td></tr>';
			}
			$i += 1;
		}
		$output .= '</table></div>';
		}

to see the additional column "title".

Hope it’s helpful.