Hallo zusammen,
ich stelle meine Webseite von HTML, nach CSS und XHTML Strict 1.0 um, und wollte das gleich richtig machen mit Barrierenfreiheit.
Ich verwende eine eigene CSS-File.
Ich möchte das P Tags kein align benutzt, sondern diese über eine CSS Klasse anspricht zusätlich möchte ich natürlich den RTE benutzen und dann auf den Button zentrieren klicken (z.b).
Oder kann man nur Klassen definieren und diese dann per Absatz auswählen?
MFG Michael
Ok vielleicht etwas schwammig ausgedrückt.
Wenn ich im RTE einen Inhalt editiere und auf den Button "Zentrieren", "Links" oder Rechts klicke habe ich im Quellcode auf der Seite später <p align="center">TEXT</p>.
Und align ist nicht valide. Die Frage ist wie mache ich das, dass der HTML Code valide wird.
Hier wird es doch wen geben der seine Seite 100% valide hat oder?
MFG Michael
Ok wie man es richtig macht:
XHTML Strict:
1. Festlegen des Doctype
config.doctype = xhtml_strict
config.xhtml_cleaning = all
config.xmlprologue = none
CSS Styled Content im Typo3 Template setzen.
2. Target aus Links entfernen:
lib.parseFunc_RTE.tags.link.typolink.target =
lib.parseFunc_RTE.tags.link.typolink.extTarget =
Wer strict benutzt muss auch in strict schreiben. Strict sieht vor, dass keine target in Links sind, egal ob intern oder extern.
Alternativ könnte man mit JS "window.open" verwenden, wenn sich das in Typo3 einbinden lässt.
3. HTMLArea RTE Konfigurieren:
In dem Ordner typo3config/ext/rtehtmlarea/res/
stehen Beispiele für die Konfiguration des RTE. Man sollte proc verwenden und nachkofigurieren. Damit werden Bilder XHTML strict valide.
Das einzige was ich noch getan habe ist meine CSS File zu setzen mit:
RTE.default.contentCSS = fileadmin/template/layout.css
Man kann noch die Buttons zentrieren, Links, Rechts, Tabelle, und H1...H6 entfernen die werden so nicht valide.
Im HTML-Template oder TS falls vorhanden:
<b> in <strong> umwandeln. Kursiv und Unterstrichen auch in die entsprechenden Parameter.
4. CSS
Das Zentrieren, links oder rechts ausrichten macht man über die CSS Klassen.
Das selbe gilt auch für Fett, Kursiv, Unterstrichen.
Überschriften würde ich im CSS als klasse über Font-Size ändern.
.fett{ font-weigth:bold;}
.ueberschrift1(font-size:120%😉
Die Klassen sind dann auswählbar über Absatz im RTE auswählbar, Text makieren, Klasse wählen.
Mit den Tabellen muss ich leider passen, ich verwende keine Tabellen mehr seit dem ich div Layer benutze. Aber hier sind Attribute wie border, align sind natürlich nicht valide. Aber über das css kann man die Eigenschaften auch setzen.
XHTML Transitonal:
1.Festlegen des Doctype
config.doctype = xhtml_trans
config.xhtml_cleaning = all
config.xmlprologue = none
CSS Styled Content im Typo3 Template setzen.
2. HTMLArea RTE Konfigurieren:
In dem Ordner typo3config/ext/rtehtmlarea/res/
stehen Beispiele für die Konfiguration des RTE. Man sollte proc verwenden und nachkofigurieren. Damit werden Bilder XHTML strict valide.
Das einzige was ich noch getan habe ist meine CSS File zu setzen mit:
RTE.default.contentCSS = fileadmin/template/layout.css
//edit: Ok die Buttons müssen doch nachkonfiguriert werden...
3.Dann kann man loslegen. XHTML 1.0 transitonal unterstützt border, target, align etc. Wobei die komischen Tabellen um den Bildern habe ich trozdem hiermit entfernt, weil ich das so besser.
Transitional unterstützt auch die vorgegeben Header größen, was bei strict nicht der Fall ist und diese über das CSS angepasst werden müssen.
Ich verwende nun xhtml1.0 transitional weil ich target brauche.
Vielleicht mach ich später noch ein ausführliches HOW-TO.
MFG Michael
Nachtrag:
Proc läuft doch nicht so wie geünscht, die Absatzfunktion ist deaktiviert. Diese RTE Einstellungen und CSS Styled Content scheinen zu funtkionieren.
## Enable the RTE by default for all users
setup.default.edit_RTE = 1
#*** RTE Classe des Interface (Ausrichtung)
RTE.classes {
align-left {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
value = text-align: left;
}
align-center {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
value = text-align: center;
}
align-right {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
value = text-align: right;
}
}
#
# *** Entfernt das Bild vor den Links
RTE.classesAnchor {
internalLink {
class = internal-link
type = page
image >
}
externalLink {
class = external-link
type = url
image >
}
externalLinkInNewWindow {
class = external-link-new-window
type = url
image >
}
internalLinkInNewWindow {
class = internal-link-new-window
type = page
image >
}
download {
class = download
type = file
image >
}
mail {
class = mail
type = mail
image >
}
}
## RTE Konfiguration
RTE.default {
# Zuweisung der CSS-Datei
contentCSS = fileadmin/template/layout.css
## Markup options
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags = center, sdfield, align
removeTagsAndContents = style,script
# Buttons die gezeigt/versteckt werden
showButtons = textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about,chMode, formatblock, strikethrough, textcolor, bgcolor, textindicator, justifyfull, subscript, superscript, acronym, copy, cut, paste, emoticon,
hideButtons = inserttag, user, spellcheck,fontsize, fontstyle, outdent, indent, lefttoright, righttoleft,
# Hält die RTE Icons gegroupt zusammen
keepButtonGroupTogether = 1
# blendet Statusbar in htmlarea aus
showStatusBar = 1
## Add styles Left, center and right alignment of text in paragraphs and cells.
inlineStyle.text-alignment (
p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }
p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }
)
## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
ignoreMainStyleOverride = 1
proc {
# tags die erlaubt / verboten sind
allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, p
denyTags = font, align
# br wird nicht zu p konvertiert
dontConvBRtoParagraph = 1
# tags sind erlaubt außerhalt von p, div
allowTagsOutside = img,hr
# erlaubte attribute in p, div tags
keepPDIVattribs = class,id
# List all class selectors that are allowed on the way to the database
allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right, author
)
# html parser einstellungen
HTMLparser_rte {
# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags
# tags die untersagt sind
removeTags = font, border, align
# entfernt html-kommentare
removeComments = 1
# tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
keepNonMatchedTags = 0
}
# Content to database
entryHTMLparser_db = 1
entryHTMLparser_db {
# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags
# CLEAN TAGS
noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, align
rmTagIfNoAttrib = span,div,font
# htmlSpecialChars = 1
## align attribute werden erlaubt
tags {
p.fixAttrib.align.unset >
p.allowedAttribs = class,style
div.fixAttrib.align.unset >
hr.allowedAttribs = class
# b und i tags werden ersetzt (em / strong)
b.remap = strong
i.remap = em
## img tags werden erlaubt
img >
}
}
}
# Classes: Ausrichtung
classesParagraph (
align-left, align-center, align-right
)
# Classes für Links (These classes should also be in the list of allowedClasses)
classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
classesAnchor.default {
page = internal-link
url = external-link-new-window
file = download
mail = mail
}
# zeigt alle CSS-Klassen die in formate.css vorhanden sind
showTagFreeClasses = 1
# Do not allow insertion of the following tags
hideTags = font, border, align
# Tabellen Optionen in der RTE Toolbar
hideTableOperationsInToolbar = 0
keepToggleBordersInToolbar = 1
# Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
disableSpacingFieldsetInTableOperations = 0
disableAlignmentFieldsetInTableOperations=0
disableColorFieldsetInTableOperations=0
disableLayoutFieldsetInTableOperations=0
disableBordersFieldsetInTableOperations=0
}
# Use same processing as on entry to database to clean content pasted into the editor
RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db
# FE RTE configuration (htmlArea RTE only)
RTE.default.FE < RTE.default
RTE.default.FE.userElements >
RTE.default.FE.userLinks >
# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 100%
#angry# Was soll denn das? Vorhin ging es nun geht Absatz nicht mehr... Nachdem ich das in das Hauptemplate, das andere war nur zum testen. Merkwürdig.
Alles klar geht doch... abgemeldet, wieder angemeldet und es ging. Wollte nur nichts falsches schreiben 🙂
Vielen Dank erstmal für dein ausführliches HowTo! 😉
Allerdings muß ich dir hier widersprechen:
Man kann noch die Buttons zentrieren, Links, Rechts, Tabelle, und H1...H6 entfernen die werden so nicht valide.
Die Überschriften sind semantisch korrekt und sollten daher auch genutzt werden.
Gerade bei barrierearmen Seiten ist es enorm wichtig immer die korrekten Elemente zu benutzen und somit auch seine Inhalte vernünftig zu strukturieren.
So könnte z.B. ein Screenreader mit der Auszeichnung<span class="ueberschrift1">Hier steht die Überschrift</span> nichts anfangen sondern würde es wie normalen Text behandeln.
Das Gleiche gilt für Menus, Absätze, etc..
Grüße