Sites φιλικά σε ΑμεΑ και το Πρότυπο WCAG 2.0 (Level AA)

    Στη παρακάτω μελέτη θα εξετάσουμε το πώς μπορούμε να τροποποιήσουμε το Pegasus Web Application που έχουμε, ώστε να είναι σύμφωνο με το πρότυπο σχεδιασμού ιστοσελίδων WCAG 2.0 (Level AA). Μπορείτε να διαβάσετε γι αυτό το πρότυπο στη σελίδα http://www.w3.org/TR/WCAG20/ καθώς και να το κατεβάσετε σε μορφή pdf από http://www.w3.org/WAI/WCAG20/versions/guidelines/wcag20-guidelines-20081211-a4.pdf. Σύμφωνα με το παραπάνω πρότυπο προχωρήσαμε στην τροποποίηση των μεθόδων που χρησιμοποιούν όλα τα Pegasus Web Application.

Ξεκινώντας με μια νέα εγκατάσταση.

    Ξεκινώντας την κατασκευή ενός site από το μηδέν στηριγμένο σε μια νέα εγκατάσταση δεν θα χρειαστεί να κάνουμε πολλές αλλαγές. Θα πρέπει να προσέξουμε στο template να εισάγουμε στο html tag το παρακάτω:

xmlns="http://www.w3.org/1999/xhtml" xml:lang="gre" lang="gre" 

    Για να το πετύχουμε αυτό διατηρώντας την πολυγλωσσικότητα του site έχουμε προσθέσει php κώδικα όπως θα δείτε στις πρώτες γραμμές του ανανεωμένου βασικού template «eshop.php». Στην συνέχεια θα πρέπει να ελέγχουμε την σωστή αντίθεση των χρωμάτων που θα εισάγουμε στο css. Ένα χρήσιμο εργαλείο για να ελέγχουμε τις αντιθέσεις είναι το: http://webaim.org/resources/contrastchecker/ στο οποίο επιλέγουμε το χρώμα του φόντου και το χρώμα της γραμματοσειράς ή του αντικειμένου που θα βρίσκεται πάνω στο φόντο. Όταν τελειώσουμε με το template και το css μπορούμε να το περάσουμε από δύο ακόμα ελέγχους. Ένα είναι το http://jigsaw.w3.org/css-validator με το οποίο μπορούμε να ανεβάσουμε ή να του «δείξουμε» την διαδρομή του css μας και να μας πει αν έχουμε λάθη. Ο τελευταίος έλεγχος, και πιο σημαντικός, είναι να εισάγουμε όσες περισσότερες σελίδες του site μας στο http://achecker.ca/checker/index.php το οποίο θα μας πει για τα σφάλματα που έχουμε σε σχέση με το πρότυπο  (WCAG 2.0 (Level AA)) και πως θα τα διορθώσουμε.

Τροποποιώντας ένα υπάρχον site.

    Για να πετύχετε σωστό αποτέλεσμα με ένα παλαιότερο site θα πρέπει πρώτα απ όλα να κάνετε όλες τις ενημερώσεις. Στην συνέχεια ελέγξτε αν έχετε αρχεία sme τα οποία παράγουν περιεχόμενο το οποίο δεν είναι εναρμονισμένο με το πρότυπο WCAG 2.0 (Level AA). Αν έχετε τέτοια αρχεία θα πρέπει να κάνετε τους απαραίτητους ελέγχους σύμφωνα με όσα έχουμε αναφέρει παρακάτω για τον σωστό τρόπο απεικόνισης των inputs και των εικόνων. Στην συνέχεια θα πρέπει να κάνετε τις απαραίτητες αλλαγές στα λεκτικά τα οποία είναι εικόνες, προσθέτοντας την ιδιότητα alt=”xxx” όπου xxx η περιγραφή που θέλουμε να δώσουμε στην εικόνα. Από την αρχική εγκατάσταση έχουν περαστεί λεκτικά με εικόνες, τα οποία μπορείτε να τα αναζητήσετε με τα παρακάτω λεκτικά (σε παρένθεση το module):

dicp800 (kernel), dicp801 (kernel), dicmsg50 (kernel), dicbacktoshop (orders), dicrefreshbasket (orders), dic_orders_agorab (orders), dic_orders_baskmanage (orders), dic_orders_emptybasket (orders), dic_order_checkout (orders), dic_products_compare (products), dicproduct_bansearch (products), diccourier_edit_user (courier), diccourier_edit_voucher (courier), diccourier_newrecord_user (courier), diccourier_newrecord_voucher (courier), diccourier_print_list_voucher (courier), diccourier_print_voucher (courier), dic_courier_exporticon (courier), dic_courier_export_tcsv (courier), dic_courier_export_txl (courier), dic_domains_add (domains), dic_domains_addns (domains), dic_hotel_zoom (hotel), dic_hotel_zoom (HOTEL), dic_realest_zoom (realest)

    Εντοπίστε ποια από τα παραπάνω έχετε ως εικόνες (υπάρχει περίπτωση να τα έχετε ήδη αλλάξει σε κείμενο) και εισάγετε την ιδιότητα alt με την κατάλληλη περιγραφή. Στα λεκτικά dicp800 (kernel) και dicp801 (kernel) πρέπει να βγει το tag , ενώ στο dicmsg50 (kernel) το tag να γίνει .

 Σωστός τρόπος απεικόνισης των inputs και εικόνων.

    Ο σωστός τρόπος για να εισάγουμε ένα input τύπου text, select box και check box είναι να εισάγουμε πριν από αυτό ένα label με την ιδιότητα for=”xxx” όπου xxx το id του element στο οποίο αναφέρετε το label.

    O σωστός τρόπος για την εμφάνιση μια εικόνας είναι να έχει πάντα την ιδιότητα alt=”…” η οποία είναι μια περιγραφή της εικόνας. Μέσα από το διαχειριστικό όποτε εισάγουμε κάποια εικόνα συμπληρώνουμε πάντα το Title και το description που μας ζητείται.

    Κατά την εισαγωγή δεδομένων (Κείμενα σε banner, ομάδες επιλογών, περιγραφές προϊόντων, κτλ) θα πρέπει να προσέξουμε στις εικόνες που εισάγουμε να βάζουμε πάντα τίτλο και περιγραφή στα πεδία που φαίνονται παρακάτω:

    Το Image Description που βλέπουμε στο πάνω σχήμα είναι το πιο σημαντικό διότι αυτό γίνεται αυτομάτως το περιεχόμενο της ιδιότητας alt.

 Banner για αλλαγή css.

    Αν θέλουμε να έχουμε επιλογή  για το αν θα έχουμε εμφάνιση φιλική σε ΑμεΑ ή όχι, ανεξάρτητα από το αν φτιάξαμε ένα νέο template ή έχουμε ένα παλαιότερο, τότε θα πρέπει να δημιουργήσουμε εκ νέου τα css αρχεία στο φάκελο που αναφέρουμε παρακάτω:

    Κάνοντας τροποποίηση μόνο στο template (ή από την διαχείριση) εισάγουμε ένα banner το οποίο θα περιέχει δύο links. Ένα για κανονική προβολή  και ένα για προβολή φιλική σε ΑμεΑ. Για να το πετύχουμε αυτό εισάγουμε σα παρακάτω links: /pegasus/h001/index.php?pcode=H001_INDEX&amea=yes για εμφάνιση φιλική σε ΑμεΑ και /pegasus/h001/index.php?pcode=H001_INDEX&amea=no για το κανονικό css του site. Στην συνέχεια θα πρέπει στην κορυφή του template να εισάγουμε το παρακάτω κώδικα σε php:

if ($_REQUEST['amea']=='yes' and empty($_SESSION['amea_ok'])){ 
    $_SESSION['amea_ok']=1; 
    $_SESSION['css_old'] = $_SESSION['css']; 
    $_SESSION['css_path_old'] = $_SESSION['css_path']; 
    $new_path = substr($_SESSION['css_path'], 0 , -1).'_amea/'; 
    $_SESSION['css'] = str_replace($_SESSION['css_path'], $new_path, $_SESSION['css']); 
    $modules_css = str_replace($_SESSION['css_path'], $new_path, $modules_css); 
    $_SESSION['css_path'] = $new_path; 
}elseif($_SESSION['amea_ok']==1 and $_REQUEST['amea']=='no'){ 
    unset($_SESSION['amea_ok']); 
    $modules_css = str_replace($_SESSION['css_path'], $_SESSION['css_path_old'], $modules_css); 
    $_SESSION['css'] = $_SESSION['css_old']; 
    $_SESSION['css_path'] = $_SESSION['css_path_old']; 
}

    Αυτό λειτουργεί ως εξής: με το που εντοπιστεί αυτό το request αλλάζουν τα sessions των css path και ενεργοποιούνται session για το ότι είμαστε σε λειτουργία αντιθέσεων φιλικών για ΑμεΑ καθώς και sessions με τα παλιά css paths του βασικού css και των modules. Τα νέα path για τα css αρχεία βλέπουν σε φάκελο της μορφής /css/xxx_amea/ όπου xxx το όνομα του φακέλου των βασικών css αρχείων. Προσοχή για να έχουμε σωστή αλλαγή της εμφάνισης θα πρέπει να υπάρχουν αρχεία με ίδια ονόματα με αυτά που υπάρχουν και στο βασικό css φάκελο έστω και αν είναι κενά, όπως και τους φακέλους με τις εικόνες (cssimgs και images) σε περίπτωση που χρειαστούμε κάποιες εικόνες. Πχ: έστω ότι σε ένα template έχουμε τον παρακάτω φάκελο με τα αρχεία css: /css/template_039/ και μέσα περιέχει τα default.css, products.css, orders.css και contactus.css. Για να φτιάξουμε τον νέο φάκελο που θα περιέχει το css φιλικό προς ΑμεΑ θα πρέπει να δημιουργήσουμε έναν νέο φάκελο μέσα στον /css/ ο οποίος θα ονομάζετε template_039_amea (άρα το path θα γίνει: /css/template_039_amea/) και θα περιέχει πάλι αρχεία με ονόματα : default.css, products.css, orders.css και contactus.css.

   Επίσης μπορούμε να τροποποιήσουμε και το αν εμφανίζεται η όχι ένα banner βάση του σε ποια κατάσταση βρισκόμαστε. Πχ: τα slideshows δεν είναι φιλικά για τους browser των ΑμεΑ. Αν θέλουμε να απενεργοποιήσουμε ένα οποιοδήποτε banner όταν είμαστε στην προβολή φιλική για ΑμεΑ, αρκεί να πάμε στην καρτέλα «Μεταβλητές Παραμετροποίησης» του εκάστοτε banner και να γράψουμε if($_SESSION['amea_ok']==1){ $title=’’;} Με αυτό τον τρόπο «σβήνουμε» προσωρινά τον τίτλο του banner και δεν εμφανίζεται στο site. Αν τώρα θέλουμε να κάνουμε το ανάποδο, να εμφανίζουμε ένα banner μόνο σε περίπτωση που έχουμε προβολή φιλική σε ΑμεΑ, τότε αρκεί να εισάγουμε καρτέλα «Μεταβλητές Παραμετροποίησης»: if(empty($_SESSION['amea_ok'])){ $title=’’;}

Banner αλλαγής γραμματοσειράς.

    Το banner αλλαγής γραμματοσειράς είναι ένα banner που εντοπίζει το μέγεθος της γραμματοσειράς στο body και την αλλάζει. Για να πετύχουμε αλλαγή γραμματοσειράς σε όλο το site θα πρέπει το μέγεθος της γραμματοσειράς για κάθε css κανόνα να γίνει σχετικό με την γραμματοσειρά του body. Αυτό μπορούμε να το πετύχουμε αλλάζοντας τις ιδιότητες «font-size» εισάγοντας αντί για px, ποσοστό (font-size: 120%). Αυτό το ποσοστό είναι σχετικό με το μέγεθος της γραμματοσειράς που κληρονομεί. Πχ: Αν το body έχει μέγεθος γραμματοσειράς 12px και το .maindiv (που είναι μέσα στο body) έχει μέγεθος 120% αυτό μεταφράζεται σε 14,4px. Αν τώρα μέσα στο maindiv υπάρχει ένα div2 με μέγεθος 80% τότε θα πάρει το 80% του 14,4 άρα θα πάει στα 11,52 κτλ. Με αυτό τον τρόπο επιτυγχάνουμε την αλλαγή της γραμματοσειράς στο body, με μέθοδο javascript, να αλλάζουμε το μέγεθος σε όλο το site.