HTML Summary WCAG variant

Gemaakt door Mark Duijkers, Gewijzigd op Vr, 31 Mrt, 2023 om 9:40 AM op Mark Duijkers

Om de html summary in de juiste WCAG opbouw te krijgen, moeten een aantal configuraties goed staan

Web.config

Voeg het onderstaande element toe als deze nog niet bestaat. Deze is nodig om de WCAG variant van de summary te kunnen gebruiken.

    <summary styleTableUsingCss="true" />

Voorbeeld:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
	<kodision.tripleforms projectPath="App_Data" useEnvironmentAsTheme="true" persistThemeInSession="true" defaultEnvironmentId="DefaultEnvironment" registerJQueryReference="false" xmlns="http://www.kodision.com/tripleforms/v4.3/configuration" labelEncapsulationPolicy="Minimal" enableVersionHttpHeader="false" asyncUploadsPath="~/App_Data/AsyncUploads/">
		<summary styleTableUsingCss="true"/>
	</kodision.tripleforms>
</configuration>

Wat veranderd er technisch

Het start fragment is aangepast;

Wanneer de optie niet aanstaat dan krijg je de niet wcag variant

<table class='tfsummarycontainer' cellspacing=\"2\" cellpadding=\"2\" border=\"0\" style=\"width:100%\">
	<tr class='summary-column-header' role='row'>
		<th role='columnheader' aria-label='{strings.Question}'/>
		<th role='columnheader' aria-label='{strings.Answer}'/>
	</tr>

Zet je dit aan dan wordt het start fragment aangepast naar.

<table class='tfsummarycontainer' role='table' style='width:100%;' tabindex='0'>
    <tr class='summary-column-header' role='row' style='width: 100%; height: 0; position:absolute; font-size:0; overflow:hidden;'>
      <th role='columnheader' aria-label='{strings.Question}'/>
      <th role='columnheader' aria-label='{strings.Answer}'/>
    </tr>

Fragmenten

In de bijlage van dit ticket zitten de WCAG summary fragmenten, plaats deze in de Fragment/Summary Folder.

Bijlagen (1)

zip

Fragmenten 4.3.zip
31.7 KB