Playing With Sid

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg
Showing posts with label html5. Show all posts
Showing posts with label html5. Show all posts

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.

Read More
Posted in accessibility, html5, wordpress | No comments
Older Posts Home
Subscribe to: Posts (Atom)

Popular Posts

  • 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...
  • Multimedia/Internet Keyboards in GNU/Linux
    As the resident Gnu/Linux guru, I sometimes help new users making transition from other OS’s.Over the years I’d ask anyone who installed Gnu...
  • Bollywood Afternoon In Hanoi
    A lot can happen over a cup of Masala Chai. Sunday afternoon's are usually Indian food at Foodshop 45 in Tay Ho, Hanoi. After a good mea...
  • foss.in 2008 :: Sorting In Indic Locales Workout
    Day 3 : Sorting In Indic Locales workout at foss.in 2008 . Indic Workout In Progress Brainstorming Live interaction and collaborative edi...
  • Locate Configuration Example
    Keep things found is not an easy skill to master. The disk drive turns into a deep and dark jungle after the first few weeks on road. Tradit...
  • Mapping The Internet
    I watched the map of internet mentioned in the recent "Download: The True Story of the Internet " on Discovery Channel , it sound...
  • foss.in 2008 :: Day 4
    Day 4 @ foss.in 2008 IndLinux Project BOF Beacon Workout Sharing ideas after Apertium talk Sachin Joshi demo's his Hindi ASR syste...
  • Cellphone Woes of a Weary Traveller
    'Somethings' they say, 'remain a mystery until someone comes along'. Few hours into the journey, I could feel some discomfor...
  • PyCon India 2009
    Most action happens on conference sidelines PyCon India 2009 is no expection. You can always watch the recordings of talks later on. Catch...
  • foss.in 2008
    Photos from Day One of foss.in in Bangalore. JN Tata Auditorium, IIsc Bangalore Event Registration Counters Waiting for my turn Securit...

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)
      • Turn your old iPod speakers into wireless speakers
      • Kinect-Powered Interactive New Media Installation
      • Mozilla Taiwan Localization Sprint
    • ►  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)
    • ►  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