Improving html layout for better accessibility and compliance with text mode browsers
See also AccessibleMoin, WebAccessibility.
Current themes layout is simple order: site logo, login, search, trail, navigation, title, content, footer. It renders fine on a graphical browser, but renders very badly on a screen reader or text mode browser like links.
Contents
Examples
MoinMoin using text mode browser
Here is FrontPage using links.
Front Page - MoinMoin (p1 of 6)
Link: Start
Link: Alternate
Link: Alternate
Link: Search
Link: Index
Link: Glossary
Link: Help
MoinMoin Logo MoinMoin Wiki
Search: _____________________ [ Titles ] [ Text ]
* Nir Soffer
* User Preferences
* Front Page
* Recent Changes
* Find Page
* Help Contents
* Requests
* Bugs
* 1.4
* Profiling
* Personal
* Bench
----------------------------------------------------------------------
http://moinmoin.wikiwikiweb.de/FrontPage Front Page - MoinMoin (p2 of 6)
* Edit
* Show Changes
* Get Info
* Subscribe
* More Actions: [Show Raw Text______] [ Do ]
Front Page
MoinMoin is an advanced, easy to use and extensible WikiEngine with a
large community of users. Said in a few words, it is about collaboration
on easily editable web pages. MoinMoin is Free Software licensed under the
GNU GPL.
If you want to learn more, first read about WikiWikiWeb, then about
WhyWikiWorks and the WikiNature. If you want to play with it, please use
the WikiSandBox.
Overview
* MoinMoinFeatures documents why you really want to use MoinMoin rather
than another wiki engine.
http://moinmoin.wikiwikiweb.de/FrontPage?action=editImagine a screen reader reading all this again and again!
Some site adds a "Skip Navigation" link that jump to the start of the content to solve this problem. It means that user using a screen reader has to click this link each time he opens a page.
MediaWiki using text mode browser
Wikipedia, using MediaWiki with monobook theme is much more friendly - the first page contains only useful information.
Main Page - Wikipedia, the free encyclopedia (p1 of 10)
Link: copyright
Main Page
From Wikipedia, the free encyclopedia.
[IMG]
Other languages
FAQs | Table free
Welcome to Wikipedia, the free-content encyclopedia that anyone can edit.
In this English version, started in 2001, we are currently working on
560409 articles.
Culture | Geography | History | Life | Mathematics | Science | Society |
Technology
Browse Wikipedia . Article overviews . Alphabetical index . Other schemes
Today's featured article In the news
Parties are required to phase out the President Islam Karimov of
http://www.gnu.org/copyleft/fdl.htmlBut:
lacks relationships <rel=...
- [IMG] is somewhat redundant , needs alt info.
Planning
New layout
- Site logo - text or img with alt
- Important links that must be on the top - do we have any of these?
- Wikipedia add link to the copyright, make sense for wikipeida
- We already have admin configurable html head fragments
- Title
- Page content
- Page info - last saved by... etc.
- Edit bar
- User stuff - login, settings etc.
- Search
- Navigation
- Trail
- Footer
html head links
What about the links we have at the top?
Link: Start Link: Alternate Link: Alternate Link: Search Link: Index Link: Glossary Link: Help
I don't see any use for these, and they take valuable space.
That's because you don't know what they are. They indicate relationsships (rel) between pages. ( see also http://www.htmlhelp.com/reference/html40/head/link.html ). Accessibility shoudl always include them. The browser defines how it likes to display these relations.
Layout using CSS
Here is a basic (simplified) left sidebar layout: layout.html . The css is based on media wiki monobook theme. Compatible with Safari, Firefox and opera. we can easily change this layout using css only to create classic, modern and rightsidebar layouts.
Try to break this layout by changing font size or making the browser window small.
It looks like this in Lynx:
(p1 of 2)
MoinMoin Wiki
Front Page
MoinMoin is an advanced, easy to use and extensible WikiEngine with a
large community of users. Said in a few words, it is about collaboration
on easily editable web pages. MoinMoin is Free Software licensed under the
GNU GPL.
If you want to learn more, first read about WikiWikiWeb, then about
WhyWikiWorks and the WikiNature. If you want to play with it, please use
the WikiSandBox.
Last saved by...
Welcom visitor! login or create account
Actions
* Edit
* Changes
* info
* Subscribe (p2 of 2)
* More Actions...
Search
_____________________
Navigation
* FrontPage
* RecentChagnes
* ...
Trail
* Last Page
* Before That
* ...
Credits
* MoinMoin Powered
* Python Powered
* Valid HTML 4.0.1
IE fixing
IE does not support css2 properly. We can use wikipedia IE css fixes using if IE css conditionals:
<!--[if lt IE 5.5000]><style type="text/css">@import "/skins/monobook/IE50Fixes.css";</style><![endif]-->
<!--[if IE 5.5000]><style type="text/css">@import "/skins/monobook/IE55Fixes.css";</style><![endif]-->
<!--[if IE 6]><style type="text/css">@import "/skins/monobook/IE60Fixes.css";</style><![endif]-->
<!--[if IE]><script type="text/javascript" src="/skins/common/IEFixes.js"></script>These [if] IE [endif] are special IE only tags documented in msdn, and we can use them to override the standard css with special css for IE.
Custom site html
To enable adding site specific html fragments, we must put the moin content in a div using position: relative. Then the elements sent after the page content can be located using position: absolute inside the bounds of the moin div. The elements inserted by the site will set the location of the moin div.
The example theme above does support this currently.
Implementation
Themes implementing accessible html layout:
ThemeMarket/SimpleMente - using also skip links to allow quick access to major parts
ThemeMarket/MonoBook - WikiPedia default theme adapted to MoinMoin