beatovich: Accessibility: erweiterte Vergleichstabelle

Beitrag lesen

hallo

Habe die Tabelle mal erweitert

	<table id="table1">
		<thead>
			<tr>
				<th>Property</th>
				<th>HTML hidden</th>
				<th>HTML<br>aria-hidden</th>
				<th>CSS<br>display:none</th>
				<th>CSS<br>visibility:hidden</th>
				<th>CSS<br>opacity:0</th>
				<th>CSS<br>position:absolute;<br>left:-200vw;</th>
				<th>CSS<br>Box-Masse minimieren</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Screenreader</th>
				<td>inaccessible</td>
				<td>inaccessible</td>
				<td>inaccessible</td>
				<td>inaccessible</td>
				<td>is read</td>
				<td>is read</td>
				<td>is read</td>
			</tr>
			<tr>
				<th>TAB / focus() / :focus</th>
				<td>inaccessible</td>
				<td>gets Focus</td>
				<td>inaccessible</td>
				<td>gets Focus</td>
				<td>gets Focus</td>
				<td>gets Focus</td>
				<td>gets Focus</td>
			</tr>
			<tr>
				<th>Mouse/Pointer</th>
				<td>inaccessible</td>
				<td>can be hovered</td>
				<td>inaccessible</td>
				<td>can be hovered</td>
				<td>can be hovered</td>
				<td>unreachable</td>
				<td>unreachable</td>
			</tr>
			<tr>
				<th>:target</th>
				<td>inaccessible</td>
				<td>yes</td>
				<td>yes</td>
				<td>yes</td>
				<td>yes</td>
				<td>yes</td>
				<td>yes</td>
			</tr>
			<tr>
				<th>Eye-View</th>
				<td>inaccessible</td>
				<td>visible</td>
				<td>inaccessible</td>
				<td>invisible</td>
				<td>invisible</td>
				<td>invisible</td>
				<td>invisible</td>
			</tr>
			<tr>
				<th>Layout-Change</th>
				<td>yes</td>
				<td>no</td>
				<td>yes</td>
				<td>no</td>
				<td>no</td>
				<td>yes</td>
				<td>depends</td>
			</tr>
			<tr>
				<th>Browser Permormance</th>
				<td>cheap</td>
				<td>cheap</td>
				<td>cheap</td>
				<td>cheap</td>
				<td>cheap</td>
				<td>can be expensive</td>
				<td>cheap</td>
			</tr>
		</tbody>
	</table>

--
Neu im Forum! Signaturen kann man ausblenden!