Playing With Sid

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Saturday, 11 December 2010

BlindLead.org HTML5 accessible wordpress website

Posted on 22:24 by Unknown

Few weeks ago I received a email from Ted Moallem, we collaborated on Blind Lead project in August this year. The BlindLead.org project website seems to be inaccessible to screen readers users. Ted used the latest version Wordpress 3.0 content management system (CMS), but Black Letterhead wordpress theme and the page structure were creating some problems.




Decided to attempt redesign the website using HTML5. HTML5 offers many accessibility improvements with new elements, ARIA landmark roles etc. Initially I thought of building with Starkers HTML5 theme. However Wordpress ships with a HTML5 complaint theme Twenty Ten so I decided to stick with it. Added some rounded corners, little bit of typographical changes, disabled the sidebar widgets for now. And the site looks better already.




blindlead website screenshot


Next I set about cleaning up the inline styles in the page content. Some of the styles were introduced by the wordpress editor and other external editors.The pages structure needed some re-organizing as well. Added headers instead of just bold text. The Web Developer Document Outline feature comes in handy here. You can access it from Web Developer > Information > View Document Outline menu item.


Web page outline



workshop project page outline



Right now we have only few pages, blog posts, photo gallery and accessible widgets would be added to the site soon. This is my first HTML5 website, there is lots of things to be fixed. So give me your feedback and share your experiences working with HTML5 accessibility.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Posted in accessibility, html5, wordpress | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Gitbox Git GUI tool
    Here is another post in the series of the posts about tools that makes developers life simpler. Git was developed as distributed revision c...
  • Vietnamese Language Tools: Developing Keyboards and Spell-checker
    Mentoring Mozilla Vietnamese localization team to develop Vietnamese keyboard and spell checker for Firefox OS . We built and tested Vietna...
  • Install CyanogenMod 10.1 (Android Jellybean 4.2.2) on Samsung Galaxy S2 (GT-I9100G)
    In this post we'll install Cyanogenmod CM 10.1.x on Samsung Galaxy SII mobile phone. Please note this instructions apply to Samsung Gal...
  • New Year's Post
    What a year it was, a little high and little lows and whole bunch of controversies of course. And to top it all I decided to stay back in ke...
  • Change Samba Password Expiry Setting with pdbedit
    We have a Zentyal (Formerly EBox) Linux Small Business Server running as our office file/print server. Its runs smoothly hardly needs any ...
  • How to Install LibreOffice in Ubuntu
    In my last post I talked about LibreOffice. In case you wondering how to install LibreOffice on your ubuntu computer. Here are the instruct...
  • Barcamp Phnom Penh 5
    Last year we kick-started Mozilla Firefox Aurora Khmer localization effort at Barcamp Phnom Penh 4 . Now a year later, Thanks to efforts of ...
  • Dots braille editor for Linux
    Dots is braille typesetting program for gnu/Linux, it can translate XML and MS DOC files and displays it both ASCII and braille dot notati...
  • Postfix Log Entry Summarizer
    Everyday I manage a Postfix mail server that handles emails from 20 mailing-lists. On days like this when there lot of email traffic, I ke...
  • Healthy Fruit Juices In Trivandrum
    For most visitors to Kerala the tender coconut juice seems to be standard choice. If you are feeling adventurous visit Chitra Juice Palace ...

Categories

  • "Blog Action Day 08 - Poverty"
  • "blog action day"
  • "Compiz Extras "
  • "compiz-fusion"
  • "film making"
  • "FSUG-Bangalore"
  • "GISS"
  • "Graphic Design"
  • "Linux"
  • "martial art"
  • "New Media"
  • "open movie editor"
  • "OpenCV"
  • "web authentication"
  • "web automation"
  • "web testing"
  • 01-18-2012
  • 10.04
  • 10.10
  • 3dprinting
  • 9.04
  • a
  • a11y
  • accerciser
  • accessibility
  • acpi
  • Activism
  • adobe
  • adzap
  • aegis
  • africa
  • AIR
  • ajax
  • alsa
  • AMD64
  • Andhra Pradesh
  • android
  • angling
  • Animals
  • anusaaraka
  • apache
  • apertium
  • api
  • apm
  • apple
  • apport
  • Apps Script
  • apt-get
  • apt-key
  • architecture
  • archmage
  • ardour
  • arduino
  • ARM
  • art
  • asterisk
  • atom
  • audio description
  • backlinks
  • bangalore
  • barcamp
  • barcamphanoi
  • barcampkl
  • barcamppp
  • barcampsaigon
  • barcampvte
  • bash
  • bbc
  • bcy2011
  • beagle
  • beercamp
  • Beryl
  • big buck bunny
  • biofuel
  • bittorrent
  • blackout
  • blender
  • blind
  • blogger
  • blogging
  • book
  • Boot-Process
  • boot2gecko
  • bootparam
  • braille
  • brazil
  • breakpad
  • broadcom
  • bugs
  • bzr
  • Calicut
  • cambodia
  • canon
  • Canopy
  • cartoons
  • cat
  • CC
  • CDAC
  • CDMA
  • celliax
  • censorship
  • CES 2008
  • CES08
  • CHDK
  • chennai
  • children
  • china
  • CHM
  • chmsee
  • Chromium
  • classmate PC
  • cleaning
  • Climate Change
  • cloud computing
  • cms
  • codec
  • Comedy
  • comics
  • command line
  • CommandLine
  • compiz
  • Computational Linguistics
  • console
  • cpan
  • Creative Commons
  • cron
  • css
  • curl
  • cut
  • cyanogenmod
  • DAISY
  • debian
  • debian documentation
  • debian upgrade-system
  • Debian-IN
  • deborphan
  • delhi
  • design
  • dhvani
  • django
  • DJvu
  • dmesg
  • documentation
  • dontzap
  • dots
  • dpatch
  • drupal
  • drush
  • earth hour
  • easy_install
  • ebay
  • eclipse
  • Ecuador
  • education
  • eee pc
  • eeepc
  • elinks
  • Elinks2
  • emacs
  • embedded linux
  • Environment
  • equivs
  • espeak
  • etch
  • events
  • fennec
  • ffmpeg
  • fiction
  • film
  • film making
  • find
  • findutils
  • firefox
  • firefox3
  • firefox4
  • firefoxOS
  • firmware
  • fishing
  • flying
  • foss.in
  • fossasia
  • fossin2008
  • FOSSMeet
  • free culture
  • free software
  • FreeNode
  • fsf
  • fsfs
  • fx4
  • G1
  • gadgets
  • gdm
  • gedit
  • geek humour
  • geocoding
  • Gimp
  • GISS
  • GIST
  • git
  • gnewsense
  • gnochm
  • gnome
  • google
  • google app engine
  • google earth
  • gplv3
  • grep
  • grub
  • GSM
  • gstreamer
  • gta02
  • GUI Testing
  • habba.in
  • hack
  • hackable1
  • hacker
  • handbrake
  • hanoi
  • hanoitweetup
  • hardware
  • hardy heron
  • HCU
  • hindi
  • hipatia
  • history
  • hosting
  • hotkeys
  • how to
  • HowTo
  • html
  • html5
  • HTTP
  • humour
  • hunspell
  • hyderabad
  • i810
  • ICANN41
  • iceweasel
  • identi.ca
  • IEEE
  • iffk
  • iframe
  • IISE
  • ILS
  • ILUG-D
  • IM
  • imacros
  • india
  • india_engg_students
  • Indian Languages
  • indic
  • indlinux
  • initscripts
  • Inkscape
  • intel
  • interaction design
  • internet
  • internet kiosk
  • intersat
  • Intrepid
  • Intrepid Ibex
  • ipod
  • IRC
  • jam
  • jaunty
  • Java
  • Javascript
  • Jet Man
  • josm
  • jquery
  • JSSH
  • Kannada
  • karmic
  • Kchm
  • kerala
  • kernel
  • keyboard
  • keycode
  • kid
  • kiddy video
  • kids
  • kinect
  • kiosk
  • koha
  • l10n
  • laos
  • launchpad
  • layout
  • ldap
  • lenny
  • less
  • lftp
  • libchm
  • library
  • libreoffice
  • lilo
  • Linux
  • lisp
  • local weather
  • locate
  • logging
  • lttoolbox
  • lucid
  • lv
  • machine translation system
  • madras
  • maemo
  • mailing-list
  • mallard
  • MALT
  • malware
  • man
  • manga
  • maps
  • maverick
  • mediawiki
  • meego
  • mencoder
  • merkaartor
  • Mibbit
  • micro-blogging
  • midori
  • mlocate
  • Mobile
  • moblin
  • mod_pagespeed
  • modem
  • more
  • most
  • mother
  • mozcamp
  • mozilla
  • Mozilla Crash Reporter
  • mplayer
  • MT
  • mukt.in
  • music
  • mwc2012
  • myanmar
  • mymozl10n
  • mysql
  • n70
  • nature
  • nedumangad
  • neo freerunner
  • Neo1973
  • nepal
  • netbooks
  • newbies
  • news
  • NGO
  • NITC
  • NLP
  • NLTK
  • Nokia
  • Nonprofits
  • notify-osd
  • novell
  • NUI
  • nvda
  • OCR
  • oddmuse
  • OLPC
  • ooffice
  • open movie
  • openDNS
  • openmoko
  • openNI
  • openOffice
  • openoffice.org
  • OpenStreetMap
  • opensuse
  • openvt
  • orca
  • OS
  • oscar
  • OSM
  • Package-Management
  • packaging
  • pager
  • parenting
  • patents
  • pbx
  • PDF
  • people
  • perl
  • Pets
  • Phatch
  • photography
  • php
  • php-nuke
  • phpnuke
  • pidgin
  • PIL
  • pipa
  • podcast
  • podcasting
  • pokhara
  • POS Tagger
  • postfix
  • potlatch
  • poweroff
  • powershot
  • proc
  • programming
  • pune
  • puppylinux
  • pyCairo
  • python
  • pythonegg
  • QA
  • Qmail
  • radio show
  • Recycling
  • red nose day
  • redhat
  • regex
  • RFC
  • RHEL
  • rms
  • RND
  • robots
  • rockbox
  • RSS
  • RSS/XML
  • rtorrent
  • rubber
  • ruby
  • rural
  • s60
  • sahana
  • samba
  • sampada
  • samsung
  • sbcl
  • science
  • scipy
  • search
  • security
  • SFD2011
  • shell
  • short-stories
  • shutdown
  • silk
  • singapore
  • sitecopy
  • skype
  • slocate
  • social media
  • software patents
  • software-center
  • softwarefreedomday
  • solar
  • solar eclipse
  • sopa
  • space
  • spam
  • SPE editor
  • speakers
  • spins
  • squid
  • stallman
  • stanford parser
  • startups
  • startx
  • stumpwm
  • SUSE
  • system-adminstration
  • sysvinit
  • t-shirt
  • tablet
  • tactile watch
  • tea shops
  • teacher
  • technology
  • tee
  • telugu
  • terminal
  • terminal Tags: command line
  • Tesseract
  • Testing
  • The IT Crowd
  • theatre
  • tibet
  • tracker
  • travel
  • trek
  • trekking
  • tux4kids
  • tuxmath
  • tv
  • tweets
  • twitter
  • ubuntu
  • UMPC
  • unicode
  • UNR
  • uptime
  • urdu
  • User friendly
  • uTouch
  • UX
  • UXA
  • vagrant
  • VCS
  • veli
  • vidarbha
  • video
  • video hamming
  • video hams
  • video-ham
  • vim
  • virutalization
  • visualization
  • voip
  • vsat
  • w3c
  • watches
  • water from dew
  • WATiR
  • weather stations
  • weave
  • web automation
  • web standards
  • web testing
  • web-browser
  • web2py
  • webmaker
  • wget
  • Wiki
  • wikia
  • wikipedia
  • Windows
  • Windows XP
  • wmv
  • Word Press
  • wordpress
  • worm
  • wrapzap
  • writing
  • wvdial
  • X-Window-System
  • X11
  • xchm
  • xev
  • xml
  • xmlstarlet
  • XO Laptop
  • xorg
  • xserver
  • xvidcap
  • yahoo groups
  • yahoo maps
  • yelp
  • Yves Rossy
  • Zii
  • ZTE

Blog Archive

  • ►  2013 (23)
    • ►  December (3)
    • ►  November (3)
    • ►  September (1)
    • ►  August (1)
    • ►  July (1)
    • ►  June (2)
    • ►  May (3)
    • ►  April (1)
    • ►  March (1)
    • ►  February (5)
    • ►  January (2)
  • ►  2012 (26)
    • ►  December (3)
    • ►  November (1)
    • ►  October (1)
    • ►  July (1)
    • ►  June (3)
    • ►  May (6)
    • ►  April (1)
    • ►  March (8)
    • ►  January (2)
  • ►  2011 (43)
    • ►  December (2)
    • ►  November (7)
    • ►  October (8)
    • ►  September (4)
    • ►  August (5)
    • ►  June (1)
    • ►  February (6)
    • ►  January (10)
  • ▼  2010 (73)
    • ▼  December (17)
      • SIM Card Registration Failed Solution
      • Google Nexus S
      • Create Android apps with a web browser
      • MeeGo Road Show in Hanoi
      • Google Mobile Maps 5.0 for Android
      • Firefox 4 Daily builds on Ubuntu 10.10
      • How to install Sun JDK on Ubuntu 10.10 “Maverick m...
      • Managing Creative ZEN Mozaic with mtp-tools
      • Change Samba Password Expiry Setting with pdbedit
      • How to switch to OpenDNS in Ubuntu
      • How to Convert .BIN/.CUE Files to .ISO in Ubuntu
      • KeePassX Cross Platform Password Manager
      • BlindLead.org HTML5 accessible wordpress website
      • Nina Universal Braille Teacher
      • AEGIS project video
      • Drupal Installation Profiles, Distributions and Fe...
      • Japan-Vietnam Workshop on Software Engineering 201...
    • ►  November (5)
    • ►  October (10)
    • ►  September (3)
    • ►  August (8)
    • ►  July (9)
    • ►  June (4)
    • ►  March (5)
    • ►  February (7)
    • ►  January (5)
  • ►  2009 (108)
    • ►  December (7)
    • ►  November (10)
    • ►  October (8)
    • ►  September (6)
    • ►  August (8)
    • ►  July (4)
    • ►  June (5)
    • ►  May (6)
    • ►  April (15)
    • ►  March (15)
    • ►  February (9)
    • ►  January (15)
  • ►  2008 (223)
    • ►  December (45)
    • ►  November (28)
    • ►  October (32)
    • ►  September (4)
    • ►  August (11)
    • ►  July (6)
    • ►  June (11)
    • ►  May (3)
    • ►  April (11)
    • ►  March (7)
    • ►  February (3)
    • ►  January (62)
  • ►  2007 (2)
    • ►  December (2)
Powered by Blogger.

About Me

Unknown
View my complete profile