Style while surfing the web with your keyboard.
What do you do when you want/ need to use a website with a keyboard and there aren't styles to indicate what you are tabbing to on a page? You implement FOCUS, that what! Which is, of course, a way of saying this solution is what I rely on when performing accessibility assessments. In fact, it's nothing more.
On with it! FOCUS, quite simply, is a "user defined style sheet" that allows a user to use a set of "styles" that your web browser will obey above all other styles declared by any web sites author(s). Styles that give the :focus pseudo-element an obvious indication of what is actually being focused on a webpage.
Read this (I'm still testing this be aware)
... to get this to work for you in 4 major web browsers. Steps ranked from easiest to hardest.
-
In Safari go to Preferences > Advanced then select "Other", navigate to where you've saved/ put FOCUS.css in the drop down menu beside “style sheet”.
-
In Internet Explorer go to Tools > Internet Options > General and choose the Accessibility button (the last button in the General pane). And in the dialogue box that pops up check the box beside "Format documents using my style sheet". Then you can "browse" and choose your style sheet once that checkbox is checked. Don't forget to click "Apply" before completely exiting "Internet Options".
-
In Firefox (recent versions at least) install an "Add-on" named Stylish. Then go into your "Add-ons manager" (Tools > Add-ons), select "User Styles" in the left hand column and choose the "Write new style" button that is sitting in the main window. Once you choose that button you can name your new style declaration(s) anything you'd like. Then in the main window off the dialogue simply, for the purposes of this demonstration, paste in the contents of FOCUS.css (you can paste in the entire 11 lines of code, a lot of it are comments, it won’t affect how the CSS behaves). Then hit save. You should see the results of what you pasted in throughout Firefox now — though the fact that everything in Firefox that can receive focus gets styled can be jarring at first.
-
In Chrome (again recent versions) you need to install an "Extension" by the same name, and developer as far as I can tell, as in Firefox. And follow the steps I outlined above.