Are you building web pages with a visual display and — having no access to braille displays and speech synthesizers (sometimes called “screen readers”) — you wonder how your web pages render when read with a braille display or a speech synthesizer ?
First and foremost : Thanks for that ! More web designers should think about these issues more often ! Indeed, it is very important that web pages can be properly rendered with any sensory modality. In other words, web pages need to provide pertinent and reasonably accessible information with both braille displays, speech synthesizers and visual screens.
This web page here will not give you THE answer to all your questions. There are many kinds of braille displays, speech synthesizers, etc. and they work differently. My aim with my building this page is to give you a little idea of how your web page may be rendered by a braille display or speech synthesizer. That's why I choose to call this page “braille viewer” : it makes it possible to view on a visual display the braille-readable parts of a web page. Thus, the term “braille viewer” is not a contradiction. Rather it's an aid to build braille-readable web pages.
Feel free to test the source code of this web page with the braille viewer below, just to get an idea of which results you may get out of the code of a braille readable web page. If you don't get any result, if the result you get is unformated (continuous text on one line only) or if the result comes very slowly (maybe the browser asks you whether you want to stop an “unresponsive script” when you test big XHTML files) then, try with an XSLT enabled and standard compliant web browser.
Nowadays, the XHTML version recommended by W3C is XHTML+RDFa 1.1 and it is the version assumed to be tested here. Here are some tips to write XHTML code that is friendly towards braille display and / or speech synthesizer users :
img
elements, place equivalent textual descriptions in @alt
attributes and when appropriate also a link to such equivalent textual descriptions in a @longdesc
attribute on each img
element ! If you consider that an image does not provide any information or feeling worth being described in an @alt
attribute, then your web site probably does not deserve to be slowed down with such an image : remove the whole img
element and your web site will be both more equitable and faster !p
, h1
, h2
, etc.) with div
s ! Only place div
s around groups of such elements when needed to group them — for CSS
, RDFa
and / or js
purposes for example !JavaScript
and / or CSS
, put all JavaScript
and / or CSS
code in external files!table
elements to build tables and blockquote
elements for block quotes ! Elements such as table
and blockquote
are not layout facilities. Neither are totally transparent or otherwise “empty” images — use CSS if needed !xml:lang
(and if you use the old XHTML 1.0 even @lang
) attribute(s) to fine tune the language settings every time this is needed — even when applied to a single word !These pieces of advise don't make your web pages' availability worse for visual screen users or search engines either. Once you've followed those small tips, feel free to paste your valid XHTML code in the box below and press "Filter now !". If the result is empty, then check the steps described above and retry when you've found the error and fixed it. If you think that the result you get gives a good idea of both the structure and content of your web page, then your web page is definitively more braille friendly than most web pages around there on the Internet ! This web page was built to be on the safe side : Many braille display and speech synthesizer equipments give better results that those shown here.
What you fill in the box below will not be uploaded to our server. Instead, JavaScript is used to fetch an XSLT file to the computer you're using for it to achieve and show the transformation. Therefore, this will work fine with web browsers able to run JavaScript code and properly achieve XSL transformations within JavaScript. Otherwise, you will (at best) be shown an unformated fallback, in which case you are suggested to upgrade to a newer, standard compliant web browser. You may also download the XSLT file and run the transformation with an XSLT processor on your own computer but outside your web browser.
Different browsers may interpret the same code differently and it is the reason why you may get different results with different web browsers. Rereading the list of tips above may help you to write better code to achieve better results with most newer browsers.
In any case, it's important that your code is valid XHTML — preferably XHTML+RDFa 1.1. You can check for its validity at W3C, for example.
Fill the box below with valid XHTML code to filter it :
… coming
On line since Sunday, 2010-08-22. Last modified by Saašha Metsärantala ( saasha@academiccomputerclub.se ) on Sunday, 2023-04-23.
Examples of other pages by the same author are Math clock, getcover, fontimage, vtdefine, dagblad, JSONPP, kubering, SIEX, giftsvampar and jats2dbk.