Barrierefreiheit in der Praxis

Dein Tipp

TYPOSCRIPT - SETUP

################################## 
#'dynCSS' als PAGE Objekt anlegen (type=31) 
dynCSS = PAGE 
dynCSS { 
  typeNum = 31 
  config.disableAllHeaderCode = 1 
  config.additionalHeaders = Content-type: text/css 
  config.admPanel = 0 

  #Statische CSS-Vorlage laden 
  20 = TEMPLATE 
  20 { 
    template = FILE 
    template.file = fileadmin/layout/styles/main.css 

    #Standardwerte für Schriftgrössen und Farben definieren: 
    marks.fontsize = TEXT 
    marks.fontsize.value = 100.01% 
    marks.colour = TEXT 
    marks.colour.value = #454545 
    marks.background = TEXT 
    marks.background.value = #ffffff 
  } 
}

#Werte für die Farb/Schriftgrössenänderung definieren
[globalVar = GP:font = 1] 
dynCSS.20.marks.fontsize.value = 150.01% 
[global] 
[globalVar = GP:font = 0] 
dynCSS.20.marks.fontsize.value = 100.01% 
[global] 
[globalVar = GP:colour= 1] 
dynCSS.20.marks.colour.value = Aqua 
dynCSS.20.marks.background.value = #FF00CC 
[global] 
[globalVar = GP:colour= 0] 
dynCSS.20.marks.colour.value = #454545 
dynCSS.20.marks.background.value = #ffffff 
[global]

Listing 9

4. Dynamisches CSS in Webseiten einbinden (ergänzend zum weiter oben im Artikel aufgeführten Weg für die Einbindung von statischen Stylesheets). Mit dieser Technik können Sie dem Besucher Ihrer Website die Möglichkeit geben, z. B. Schriftgrößen, Farben und Kontraste den individuellen Bedürfnissen anzupassen.

CSS

#CSS für den <head> Bereich einfügen 
headerData.5 = COA 
headerData.5 { 
  10 = TEXT 
  10.value ( 
    <style type="text/css" media="screen,projection"> 
    <!-- 
  ) 
  20 = COA 
  20 { 
    20 = TEXT 
    20 { 
      value = 
      typolink { 
        parameter.data = page:uid 
        parameter.wrap = | ,31 
        returnLast = url 
      } 
    } 
    stdWrap.wrap = @import url(|); 
  } 
}

Listing 10

Mit dieser Konfiguration können Sie Ihren Besuchern nun ein paar Links für die Anpassung der Schriftgröße und -farbe bereitstellen. Die Links sollten so aufgebaut sein:

◄