Suche
Teilen
startseite » forum

Verbesserungen von Typo3 4.02 bezüglich der Barrierefreiheit

  • Ivko Ivko
    T3PO
    0 x
    10 Beiträge
    0 Hilfreiche Beiträge
    06. 10. 2006, 14:44

    Einige Fragen:

    a. Was sind denn eigentlich die wesentlichen Verbesserungen gegenüber der 3.8er Version bezüglich der Barrierefreiheit?

    b. Ich möchte eine barrierefreie Seite umsetzten und möchte wissen, welche Extensions (XHTML konformes template vorausgesetzt) ich dafür noch brauche.

    c. Die meisten ändern die Schriftgröße über die Browserfunktion, ich habe aber gesehen, dass z.B. für die Änderung der Schriftgröße oft das Javascript efa_fontsize verwendet wird (könnte man direkt in das HTML template inbinden), was haltet ihr davon? Oder gibt es eine geeignetere Extension?

  • 1
  • ONeill ONeill
    Jedi-Meister
    0 x
    309 Beiträge
    0 Hilfreiche Beiträge
    06. 10. 2006, 15:15

    a. css_styled_content ist jetzt voll in TYPO3 Version 4.x integriert, so dass die Seiten nicht auf einem Tabellenlayout sondern mit korrektem Markup dargestellt werden. Dies ist ein großer Schritt in Richtung Barrierefreiheit und damit kannst du deine Seite auch erstellen.

    b. Die wichtigste Erweiterung ist css_styled_content und die ist in V4 schon drin. Die meisten anderen Extensions unterstützen weitestgehend Templates als Vorlage, welche du selber anpassen kannst und diese somit auch Barrierefreier werden.

    c. Da der Font-Resizer javaScript benutzt ist dieser auch nicht ganz optimal. Am Besten wäre eine Lösung über PHP. Nichtsdesto trotz sollten Benutzer, welche auf eine Vergrößerung angewiesen sind, auch wissen wie sie den Browser benutzen. Ich habe allerdings auch einen Font Resizer auf meiner Seite, allerdings mit PHP. Da gibt es aber soweit ich weiß noch keine eigene Extension zu. Das habe ich selber über ein PHP Skript gemacht.

  • jenny79 jenny79
    Jedi-Meister
    0 x
    276 Beiträge
    0 Hilfreiche Beiträge
    11. 10. 2006, 12:11

    Könntest du vielleicht ein kleines HowTo posten??
    würde das auch gerne in PHP machen...
    Lg
    Jenny

  • ONeill ONeill
    Jedi-Meister
    0 x
    309 Beiträge
    0 Hilfreiche Beiträge
    11. 10. 2006, 14:42

    http://typo3forum.hosting-agency.de/schriftgroesse-auswaehlbar-machen--t458.html

    Hier habe ich die Methode schon ausführlich diskutiert. Nachteil ist eben nur dass keine Cookies unterstützt werden, ansonsten alles einwandfrei

  • larsmessmer larsmessm...
    Sternenflotten-Admiral
    0 x
    164 Beiträge
    0 Hilfreiche Beiträge
    25. 10. 2006, 17:53

    Hallo

    Ich löse den Frontsize Umschalter per Javascript:

    Im Seiten Header die zwei Dateien:
    [HTML]<script type="text/javascript" src="fileadmin/cookies.js"></script>
    <script type="text/javascript" src="fileadmin/changestyle.js"></script>
    [/HTML]
    einbinden und die CSS Scripte für die Schriftgrössen:
    [HTML]<link rel="stylesheet" type="text/css" href="fileadmin/big.css" title="big" media="screen" />
    <link rel="stylesheet" type="text/css" href="fileadmin/medium.css" title="medium" media="screen" />
    <link rel="stylesheet" type="text/css" href="fileadmin/small.css" title="small" media="screen" />
    [/HTML]

    Datei cookies.js:

    1. function Cookiemanager(name,defaultExpiration,expirationUnits,defaultDomain,defaultPath) {
    2. 	this.name = name;
    3. 	this.defaultExpiration = this.getExpiration(defaultExpiration,expirationUnits);
    4. 	this.defaultDomain = (defaultDomain)?defaultDomain:(document.domain.search(/[a-zA-Z]/) == -1)?document.domain:document.domain.substring(document.domain.indexOf('.') + 1,document.domain.length);
    5. 	this.defaultPath = (defaultPath)?defaultPath:'/';
    6. 	this.cookies = new Object();
    7. 	this.expiration = new Object();
    8. 	this.domain = new Object();
    9. 	this.path = new Object();
    10. 	window.onunload = new Function (this.name+'.setDocumentCookies();');
    11. 	this.getDocumentCookies();
    12. 	}
    13. Cookiemanager.prototype.getExpiration = function(expiration,units) {
    14. 	expiration = (expiration)?expiration:7;
    15. 	units = (units)?units:'days';
    16. 	var date = new Date();
    17. 	switch(units) {
    18. 		case 'years':
    19. 			date.setFullYear(date.getFullYear() + expiration);
    20. 			break;
    21. 		case 'months':
    22. 			date.setMonth(date.getMonth() + expiration);
    23. 			break;
    24. 		case 'days':
    25. 			date.setTime(date.getTime()+(expiration*24*60*60*1000));
    26. 			break;
    27. 		case 'hours':
    28. 			date.setTime(date.getTime()+(expiration*60*60*1000));
    29. 			break;
    30. 		case 'minutes':
    31. 			date.setTime(date.getTime()+(expiration*60*1000));
    32. 			break;
    33. 		case 'seconds':
    34. 			date.setTime(date.getTime()+(expiration*1000));
    35. 			break;
    36. 		default:
    37. 			date.setTime(date.getTime()+expiration);
    38. 			break;
    39. 		}
    40. 	return date.toGMTString();
    41. 	}
    42. Cookiemanager.prototype.getDocumentCookies = function() {
    43. 	var cookie,pair;
    44. 	var cookies = document.cookie.split(';');
    45. 	var len = cookies.length;
    46. 	for(var i=0;i < len;i++) {
    47. 		cookie = cookies[i];
    48. 		while (cookie.charAt(0)==' ') cookie = cookie.substring(1,cookie.length);
    49. 		pair = cookie.split('=');
    50. 		this.cookies[pair[0]] = pair[1];
    51. 		}
    52. 	}
    53. Cookiemanager.prototype.setDocumentCookies = function() {
    54. 	var expires = '';
    55. 	var cookies = '';
    56. 	var domain = '';
    57. 	var path = '';
    58. 	for(var name in this.cookies) {
    59. 		expires = (this.expiration[name])?this.expiration[name]:this.defaultExpiration;
    60. 		path = (this.path[name])?this.path[name]:this.defaultPath;
    61. 		domain = (this.domain[name])?this.domain[name]:this.defaultDomain;
    62. 		cookies = name + '=' + this.cookies[name] + '; expires=' + expires + '; path=' + path + '; domain=' + domain;
    63. 		document.cookie = cookies;
    64. 		}
    65. 	return true;
    66. 	}
    67. Cookiemanager.prototype.getCookie = function(cookieName) {
    68. 	var cookie = this.cookies[cookieName]
    69. 	return (cookie)?cookie:false;
    70. 	}
    71. Cookiemanager.prototype.setCookie = function(cookieName,cookieValue,expiration,expirationUnits,domain,path) {
    72. 	this.cookies[cookieName] = cookieValue;
    73. 	if (expiration) this.expiration[cookieName] = this.getExpiration(expiration,expirationUnits);
    74. 	if (domain) this.domain[cookieName] = domain;
    75. 	if (path) this.path[cookieName] = path;
    76. 	return true;
    77. 	}
    78. var cookieManager = new Cookiemanager('cookieManager',1,'years');

    Datei changestyle.js:

    1. function clearDefault(el) {
    2.   if (el.defaultValue==el.value) el.value = ""
    3. }
    4.  
    5. function setActiveStyleSheet(title) {
    6.   var i, a, main;
    7.   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    8.     if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
    9.       a.disabled = true;
    10.       if(a.getAttribute("title") == title) {
    11. 	a.disabled = false;
    12. 	cookieManager.setCookie("style", title, 365);
    13.       }
    14.     }
    15.   }
    16. }
    17.  
    18. function getActiveStyleSheet() {
    19.   var i, a;
    20.   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    21.     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
    22.   }
    23.   return null;
    24. }
    25.  
    26. function getPreferredStyleSheet() {
    27.   var i, a;
    28.   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    29.     if(a.getAttribute("rel").indexOf("style") != -1
    30.        && a.getAttribute("rel").indexOf("alt") == -1
    31.        && a.getAttribute("title")
    32.        ) return a.getAttribute("title");
    33.   }
    34.   return null;
    35. }
    36.  
    37. var cookie = cookieManager.getCookie("style");
    38. var title = cookie ? cookie : getPreferredStyleSheet();
    39. setActiveStyleSheet(title);

    Das funktioniert einwandfei und braucht kein nachladen, einziger Nachteil: es wird ein cookie verwendet.

    Gruss Lars

  • ONeill ONeill
    Jedi-Meister
    0 x
    309 Beiträge
    0 Hilfreiche Beiträge
    26. 10. 2006, 09:39

    Der Cookie ist kein Nachteil, eher das Verwenden von JavaScript.

  • miwolfram miwolfram
    Jedi-Meister
    0 x
    386 Beiträge
    0 Hilfreiche Beiträge
    27. 10. 2006, 11:32

    Legt eure Schriftgrößen mit [b]em[/b] anstatt mit [b]px[/b] fest und ihr braucht gar keinen Font-Resizer da das dann mit "Schriftgrad"-Einstellung im IE für 5 Stufen und im Firefox sogar stufenlos eingestellt werden kann.

  • ONeill ONeill
    Jedi-Meister
    0 x
    309 Beiträge
    0 Hilfreiche Beiträge
    27. 10. 2006, 12:36

    Ja das stimmt. Das sollte sowieso generell gemacht werden.

    Ein Font-Resizer ist eine schöne optionale Möglichkeit Benutzern, welche sich nicht gut genug mit ihrem Browser auskennen, eine einfache Möglichkeit zu geben, die Schriftgröße an ihre Bedürfnisse anzupassen.

    Keine Pflicht, aber wenn es sich schön in die Seite intergrieren lässt eine feine Sache.

  • 1
Präsentiert von