Accessible, Image-Based Menu: Rough Draft

I created a rudimentary, image-based menu as part of my recent Experiment with Site Design for People with Cognitive Disabilities. It has a few features that may make it easy to use by people cognitive disabilities.  This is a continuation of previous posts that describe my intention to use image-based navigation for the future Clear Helper Web site.3-image, vertical menu: 1 on top is 'Home'. Other 2 are blank.

The menu, pictured on the right, appears in the “sidebar” column of a test page. The image on top, an outline of a house, is intended to symbolize the home page. An ideal is that the meaning it conveys is proven, through research and extensive testing, to be consistently understood.  Accomplishing that is beyond the scope of this project.

The two images below that for the home-page are blank placeholders.  To view options for them, see “Proposed Navigation Buttons For Future Clear Helper Web Site: Draft 2“.

Attributes of Accessibility Best Practices

  • The text labels are not part of the images, which enables them to match text-size adjustments, especially enlargements, made by a site visitor.
  • The color contrast of the images themselves is good.  To see how this was objectively measured, see “Proposed Back & Next Navigation Icons For Future Clear Helper Web Site“.
  • There are no animations that could cause distraction.

Other Good Attributes for People with Cognitive Disabilities

  • The images and the text labels are large.  This helps with comprehension. It also provides easy-to-click targets for mouse users.
  • The text label for the home page is simple, as will be the labels of future navigation images.


  • The lighter color around the home-page image is intended to show it is the current page.  This violates the accessibility guideline that colors alone do not convey meaning. I will have to determine an additional method.
  • I failed to measure the contrast of the colors surrounding the actual images.  I suspect it is not good, so I will correct it in a subsequent version.
  • The alternative text for each images is repeated by the text label beneath it.  According to best practices, this is not advisable because screen-reader users hear the same message twice.  I will fix that too.

Other, Related Posts: