Εύκολα στην υλοποίηση accessibility tips : Οδηγείστε τους χρήστες screen readers / text browsers κατευθείαν στο περιεχόμενο ή όπου αλλού θέλετε.

Ένα πανεύκολο στην υλοποίηση accessibility feature, που θα βοηθήσει αφάνταστα τους screen readers και τους χρήστες που χρησιμοποιούν text-browsers. Το μόνο που πρέπει να κάνετε είναι στην αρχή κάθε document, να προσθέσετε τα links που θα οδηγούν τον χρήστη κατευθείαν στο σημείο που έχετε ορίσει. Έτσι για παράδειγμα, σε αυτό το site, το πρώτο πράγμα που “εμφανίζεται” στην markup μου είναι μια λίστα με αυτά τα links (μέσα σε ένα div).

<div id="accessibilitylinks">
<ul>
<li><a title="Go to content" href="#content">Skip to content</a></li>
<li><a title="Go to main navigation" href="#navigation">Skip to main navigation</a></li>
<li><a title="Go to Search form" href="#search">Skip to Search form</a></li>
</ul>
</div>

Με τον παραπάνω κώδικα, οι χρήστες screen reader μπορούν πολύ εύκολα – στην κυριολεξία με ένα κλικ – να μετακινηθούν στο περιεχόμενο της σελίδας μου, στο navigation ή στην search form. Φυσικά μπορούμε να εφαρμόσουμε και όλους τους γνωστούς styling κανόνες στην λίστα έτσι ώστε να την διαμορφώσουμε όπως θέλουμε. Καλό θα είναι εάν θέλουμε να την κρύψουμε, να μην χρησιμοποιήσουμε τον κανόνα display:none αλλά να την κρύψουμε με κάποιο άλλο τρόπο (πχ. absolute position), και αυτό γιατί πολλοί screen readers/text browsers δεν διαβάζουν τα elements με display:none. Για παράδειγμα, εγώ κρύβω την συγκεκριμένη λίστα links με τον παρακάτω κώδικα:

#accessibilitylinks {
position:absolute;
top:-1000px;
}

Είναι πραγματικά το πιο εύκολο αλλά και πρακτικό usability χαρακτηριστικό που μπορείτε να έχετε στην σελίδα σας!

Εύκολα στην υλοποίηση accessibility tips : Extra navigation για text browsers / screen readers (και όχι μόνο)

Η αλήθεια είναι πως όσο καλός και ενημερωμένος να είσαι στο χώρο του web, πάντα υπάρχει κάτι καινούργιο να μάθεις. Επειδή λοιπόν και εγώ πρόσφατα (πριν από έναν χρόνο για την ακρίβεια, αλλά ας μείνουμε στο πρόσφατα), ανακάλυψα μερικά ενδιαφέροντα και πολύ εύκολα στην υλοποίηση accessibility tips, θα τα παρουσιάσω σε αυτή την μίνι σειρά post.

Οι περισσότεροι γνωρίζετε το link element που βάζουμε στο head κομμάτι του κώδικα μας, και δηλώνει πως το εν λόγω document έχει κάποια σχέση (relationship – rel) με κάποιο άλλο document ή πηγή. Ο πιο κλασικός τρόπος χρήσης του είναι η εισαγωγή κάποιου εξωτερικού stylesheet (CSS), όπως για παράδειγμα :

<link rel="stylesheet" href="default.css" type="text/css" media="screen" />

Αυτό που δεν γνωρίζουν οι περισσότεροι, είναι πως με το εν λόγω element μπορούμε να προσφέρουμε επιπλέον navigation χαρακτηριστικά στους χρήστες screen readers, text browsers αλλά και σε κάποιους κανονικούς browsers (όπως Opera) οι οποίοι αρχίζουν να υποστηρίζουν και αυτήν την ιδιότητα του link element. Μερικά παραδείγματα και τρόπους χρήσης του μπορείτε να δείτε παρακάτω :

<link rel="home" title="Home" href="http://www.tsevdos.com/" />
<link rel="prev" title="Title of previous page" href="http://www.tsevdos.com/</code><code>previous-page" />
<link rel="next" title="Title of next page" href="http://www.tsevdos.com/</code><code>next-page" />

Όπως βλέπεται η χρήση του είναι πανεύκολη και τα πλεονεκτήματα αρκετά, έτσι ώστε να το χρησιμοποιήσουμε.

Τέλος το συγκεκριμένο tag μπορεί να χρησιμοποιηθεί και για άλλους σκοπούς, όπως για παράδειγμα στο να ενημερώσει τις μηχανές αναζήτησης εάν το περιεχόμενο της σελίδας μας υπάρχει και σε άλλες γλώσσες ή σε άλλη μορφή. Παρακάτω μπορείτε να βρείτε τα ανάλογα παραδείγματα, ωστόσο δεν θα σταθώ πολύ σε αυτά μιας και θέλω στο συγκεκριμένο post να συγκεντρωθώ κυρίως στο θέμα προσβασημότητας/accessibility. Όπως και να έχει ρίξτε οπωσδήποτε μια πιο λεπτομερή ματιά στο link element και δεν θα χάσετε.

<link lang="fr" title="La documentation en Fran&ccedil;ais" type="text/html" rel="alternate" hreflang="fr" href="http://someplace.com/manual/french.html">
<link media="print" title="The manual in postscript" type="application/postscript" rel="alternate" href="http://someplace.com/manual/postscript.ps">
<link rel="Start" title="The first page of the manual" type="text/html" href="http://someplace.com/manual/start.html">

Μείνετε συντονισμένοι και για τα επόμενα!

Πως να κάνετε το blog σας να ξεχωρίσει από την μάζα. (Μέρος δεύτερο – Interaction και Navigation)

Σε προηγούμενο post ανάλυσα πως μπορούμε να κάνουμε το blog μας καλύτερο προσέχοντας και υλοποιώντας κάποια πράγματα στο design και το theme του. Σε αυτό το δεύτερο μέρος πηγαίνω το θέμα λίγο παραπέρα και ασχολούμαι με το πως μπορούμε να βελτιώσουμε το interaction (ή αλληλεπίδραση για όσους προτιμάνε τους ελληνικούς όρους) του blog μας, βοηθώντας με αυτόν τον τρόπο τους χρήστες μας να βρίσκουν εύκολα και γρήγορα αυτό που ψάχνουν. Όπως τόνισα και στο πρώτο post το περιεχόμενο είναι ο βασιλιάς, αλλά εάν δεν μπορεί να το εντοπίσει κάποιος εύκολα και γρήγορα, τότε ο περιεχόμενο μας δεν έχει και πολύ νόημα.

Σαν χρήστης του internet εδώ και τουλάχιστον 12 χρόνια, έχω συνειδητοποιήσει πως το navigation και γενικότερα interaction του χρήστη με κάποιο site ή blog είναι ένα από τα πιο παρεξηγημένα και παραμελημένα θέματα. Κανείς δεν του δίνει ιδιαίτερη σημασία, ενώ ο εκάστοτε designer/developer έχει την νοοτροπία πως εφόσον υπάρχει κάποια navigation bar που να δουλεύει, τότε ο καθένας θα ξέρει να την χρησιμοποιήσει και φυσικά θα βρει αυτό που αναζητάει. Όπως καταλαβαίνεται τα πράγματα δεν λειτουργούν έτσι ακριβώς και φυσικά δεν πρέπει να σκεφτόμαστε με αυτήν την λογική, είτε είμαστε επαγγελματίες του χώρου, είτε bloggers. Το να συνειδητοποιήσουμε και να καταλάβουμε το πρόβλημα είναι και το πρώτο βήμα της επίλυσης του! Στη συνέχεια, το όλο θέμα γίνεται ακόμα πιο απλό εάν ρωτήσουμε τον εαυτό μας τι είδους interaction θα θέλαμε να υπήρχε στο site/blog μας έτσι ώστε και ο πιο άπειρος χρήστης να μπορούσε και να το καταλάβει αλλά και να το χρησιμοποιήσει έτσι ώστε να βρει αυτό που ψάχνει.

Ας ξεκινήσουμε με τα βασικά λοιπόν και πιο συγκεκριμένα με το κεντρικό μενού ή navigation, όπως το προτιμώ! Ο παλιός (web 1.0), κλασικός τρόπος κατηγοριοποίησης των άρθρων, post κτλ. είναι η χρήση κατηγοριών! Οι περισσότεροι χρήστες είναι ήδη μαθημένοι σε αυτόν τον τρόπο αλληλεπίδρασης μιας και είναι πολύ εύκολα κατανοητός, απλά κατηγοριοποιείς τα post ανάλογα με το θέμα τους! Οι περισσότεροι χρήστες ακόμα και εάν δεν έχουν καθόλου εμπειρία στο internet μπορούν πολύ εύκολα να καταλάβουν τι είναι οι κατηγορίες σε ένα navigation menu, μιας και είναι πολύ συνηθισμένος τρόπος αλληλεπίδρασης και στις off-line ασχολίες τους (όλο και κάποιον φάκελο με συγκεκριμένα έγγραφα θα έχουν κατηγοριοποιήσει, όλο και κάποια συλλογή με κατηγοριοποιημένους δίσκους ή γραμματόσημα θα έχουν φτιάξει, κοκ.). Καλό θα είναι λοιπόν να προσφέρουμε όλες τις κατηγορίες μας στον τελικό χρήστη στην προσπάθεια αναζήτησης κάποιας πληροφορίας. Στο blog μου πχ. οι κατηγορίες των post μου βρίσκονται στο κεντρικό μενού, κάτω στην επιλογή Categories. Καλό θα είναι το συγκεκριμένο μενού να είναι απλό στην χρήση (να μην λειτουργεί με περίπλοκα drug ‘n drop κτλ.), να περιέχει ξεκάθαρες επιλογές και να είναι άμεσα διαθέσιμο σε όλες τις σελίδες του blog! Με αυτόν τον τρόπο δίνουμε την δυνατότητα σε όλους τους χρήστες (και ιδιαίτερα τους πιο άπειρους) οπουδήποτε και να βρεθούν στο blog μας, να μπορέσουν να αλληλεπιδράσουν μαζί του, και να φτάσουν στην πληροφορία/post που αναζητούν.

Ο νέος και πιο μοντέρνος (web 2.0) τρόπος κατηγοριοποίησης είναι τα tags τα οποία κάνουν ότι και οι κατηγορίες περίπου, αλλά είναι πολύ πιο ευέλικτα και ακριβή. Με τα tags λοιπόν δεν χρειάζεται να καταχωρείς το post σε μία κατηγορία (ή περισσότερες), απλά τους κολλάς πολλές ετικέτες (tags) έτσι ώστε να το ξεχωρίζεις. Με τον καιρό αυτές τις ετικέτες θα αυξάνονται, αλλά και θα ξεχωρίσουν αυτές που χρησιμοποιήτε πιο πολύ στα post σας. Από εκεί και πέρα ένα tag cloud παρουσιάζει πολύ όμορφα αυτές τις ετικέτες, ενώ προσφέρει στον χρήστη και ένα πιο όμορφο αλλά και ακριβή τρόπο αλληλεπίδρασης. Έτσι εάν κάποιος χρήστης για παράδειγμα επιλέξει ένα tag με το όνομα wordpress, αποκλείεται να μεταφερθεί σε κάποιο post που να μην αναφέρει κάτι για το wordpress (εκτός και εάν το έχουμε κάνει εσκεμμένα, αλλά μιλάμε για normal καταστάσεις!). Και το tag cloud θα πρέπει να είναι διαθέσιμο παντού (σε όλες τις σελίδες) και μάλιστα σε ευδιάκριτο σημείο – δεν μ’ αρέσει να το βρίσκω σε footers ή σε άλλα περίεργα σημεία κάποιου blog.

Τέλος, το τελευταίο βασικό στοιχείο αλληλεπίδρασης που μαζί με τα δύο προηγούμενα θα ολοκληρώσουν τον κεντρικό interaction πυρήνα ενός blog, δεν είναι άλλο από την αναζήτηση/search! Και η αναζήτηση πρέπει να είναι διαθέσιμη σε όλες τις σελίδες σε εμφανές σημείο, ενώ καλό είναι να μην το παρακάνουμε μαζί της (όπως με πολλές advance δυνατότητες, επιλογές, κουμπιά, κτλ.) γιατί πιο πιθανό είναι να μπερδέψουμε τους χρήστες μας, παρά να τους βοηθήσουμε. Επίσης μία εγγενής μηχανή αναζήτησης (αυτή δηλαδή που ψάχνει κατευθείαν το περιεχόμενο του blog μας) είναι πολύ καλύτερη από την χρήση μιας τρίτης που να ψάχνει το blog μας (όπως πχ. Google), αφού έχει πολύ καλύτερα αποτελέσματα, μιας και η πρώτη έχει πάντα το πιο up-to-date υλικό, ενώ στην δεύτερη περίπτωση εξαρτώμαστε από τα bots της μηχανής στην ανανέωση των καταχωρίσεων, αλλά και εύρεση του υλικού μας.

Από εκεί και πέρα και εφόσον έχουμε λύσει το πρόβλημα του βασικού interaction, ο εκάστοτε blogger έχει την ελευθερία να δημιουργήσει όσους άλλους τρόπους αλληλεπίδρασης θέλει (αρκεί να μην το παρακάνει κι’ όλας και καταντήσει το blog του μία μάζα από links!). Προσωπικά χρησιμοποιώ δύο επιπλέον λίστες, τα δημοφιλέστερα post τα οποία είναι πάντα διαθέσιμα σε οποιαδήποτε σελίδα, και τα σχετικά posts τα οποία είναι διαθέσιμα μόνο στις σελίδες των post (λογικό νομίζω). Αυτοί είναι δύο πολύ εύκολοι αλλά και χρήσιμοι τρόποι διαφήμισης του περιεχομένου του blog μας, αφού όποιος βρεθεί σε αυτό (είτε από κάποια μηχανή αναζήτησης, είτε από κάποιο link στο blog μας, κτλ.) είναι πολύ πιθανό να μείνει στο blog μας βρίσκοντας γρήγορα κάποιο από δημοφιλέστερα posts μας ή απλά επιλέγοντας κάποιο σχετικό με αυτό που μόλις διάβασε/βρήκε. Επίσης καλό θα είναι τα post σας να δημοσιεύουν τα tags στα οποία ανήκουν, μιας και αυτά δίνουν την επιλογή στον χρήστη να συνεχίσει εύκολα το ψάξιμο κάποιας ταμπέλας/tag (μιας και τα σχετικά άρθρα δεν είναι πολλές φορές και τόσο σχετικά).

Φυσικά υπάρχουν και άλλοι δημοφιλής τρόποι interaction σε blog τους οποίους προσωπικά δεν χρησιμοποιώ, γιατί πολύ απλά δεν τους θεωρώ πολύ χρήσιμους ή ότι κρύβουν κάποια σοβαρή λογική από πίσω. Μερικοί είναι το calendar/ημερολόγιο όπου εμφανίζει τις μέρες που δημοσιεύσατε κάποιο post (ανούσιο), τα archives/αρχεία όπου εμφανίζουν σε χρονολογικά αρχεία (πχ. μήνες) το τι έχετε γράψει (επίσης ανούσιο), τα most commented post (έχει κάποια λογική αλλά, δεν το βρίσκω και εξαιρετικά ενδιαφέρον), κτλ. Τους παραπάνω τρόπους αλληλεπίδρασης τους βρίσκω πολύ άσκοπους και προσωπικά πιστεύω πως η χρήση τους υπερφορτώνει τις σελίδες μας με links χωρίς τελικά να προσφέρουν κάτι ουσιαστικό στο blog μας.

Τα παραπάνω tips εκτός του ότι θα διευκολύνουν τους χρήστες σας να εντοπίσουν τα posts που ψάχνουν, αλλά και να μείνουν επιπλέον ώρα στο blog σας διαβάζοντας αυτά που εντόπισαν στην πορεία, είναι και εύκολοι τρόποι έξυπνου SEO! Με έναν σμπάρο δυο τριγώνια, δηλαδή… Μείνετε συντονισμένοι και για επιπλέον blogging tips!