HTML Summary WCAG variant

TriplEforms 4.3

Gemaakt door Mark Duijkers, Gewijzigd op Fri, 31 Mar 2023 om 09: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.


Was dit artikel nuttig?

Dat is fantastisch!

Hartelijk dank voor uw beoordeling

Sorry dat we u niet konden helpen

Hartelijk dank voor uw beoordeling

Laat ons weten hoe we dit artikel kunnen verbeteren!

Selecteer tenminste een van de redenen
CAPTCHA-verificatie is vereist.

Feedback verzonden

We stellen uw moeite op prijs en zullen proberen het artikel te verbeteren