Welcome to my website. I am always posting links to photo albums, art, technology and other creations. Everything that you will see on my numerous personal sites is powered by the formVistaTM Website Management Engine.

icon.linkedin.jpgicon.twitter.jpg

  • Tabbing To Links Problems in Browsers under Mac OS X
    02/05/2013 3:43PM

    I am working on building some 508 Compliant/Accessible web sites and am testing out how well the navigation works using only the tab key.

    Under Mac OS X with Firefox, Opera, and Safari, by default, the tab key does not cycle through all of the links on a web page.

    Firefox:

    • Go to: System Preferences/Keyboard/Keyboard Shortcuts
    • Click on the 'All controls' radio button towards the bottom of the dialog under the text that says: 'Full Keyboard Access: In windows and dialogs, press Tab to move keyboard focus between:'

    Safari:

    • Enabling the aforementioned setting does not do it for Safari
    • Go to: Safari/Preferences/Advanced
    • Under 'Accessibility:' click on the checkbox next to 'Press Tab to highlight each item on a a wepage'

    Opera:

    • Go to: Opera/Preferences/Advanced
    • Click on 'Shortcuts' in the left-hand nav of the dialog
    • Select 'Enable single-key shortcuts'
    • Opera does not implement keyboard navigation the way most other browsers do.  To step through the links on a page, press the 'Q' key to go forward, and 'A' key to step backwards through the links on the page.  'W' and 'S' keys you to navigate between headings <hn> tags.

    Chrome:

    • Go to: Chrome/Preferences
    • Scroll all of the way down to the bottom of the settings page and click on 'Show Advanced Settings'
    • Scroll down to 'Web Content'
    • Check the box next to 'Pressing Tab on a webpage highlights links, as well as form fields'
  • Creating a Skip Navigation Link That is Only Visible When it Receives Keyboard Focus
    03/30/2009 1:26PM
    Adding a "Skip Nav" link to your design can sometimes compromise the look and feel of the page.  Moreover it can confuse those visitors who have no idea what it means.

    A good solution is to create a Skip Nav link that is only visible when it receives keyboard focus.  This happens as a user is tabbing through the page.

    To do so, use the following styles and markup:

    Styles:

    #skip a,
    #skip a:hover,
    #skip a:visited
        {
        position:absolute;
        left:0px;
        top:0px;
        width:0px;
        height:0px;
        overflow:hidden;
        }

    #skip a:active,
    #skip a:focus
        {
        width:auto;
        height:auto;
        }

    Markup:

    <div id="skip">
        <a href="#skip">Skip Nav</a>
    </div>

    <p><a name="skip"></a>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

  • Web Accessibility Validators
    03/30/2009 1:09PM
    Here are links to some accessibility validators sent to me by my friend Karen:
  • AJAX and Accessibility
    11/18/2008 11:22AM
    I'm working on a project that requires the use of some javascript for a simple survey.  The rub is that the pages all need to be accessible.  I've not yet done any work with any AJAX and accessibility but found a few links to articles to get me started.


    AJAX and Screenreaders: When Can it Work?
    Accessibility of AJAX Applications
    AJAX and Accessibility

Advanced Search

Categories

Archives