This is a description of how accessibility
issues are handled on this website, and how I have reflected on such issues.
Whether you experience no problems, or have special needs while surfing the web, this
guide and description is written for you.
Access is for everyone … me included.
a simple approach
I don't believe in complicating things for myself or others. So no matter the design, the content flows naturally from top to bottom in the source-code – linear or sequenced like in a book. In my opinion, naturally sequenced content-flow is the basis for easy‐to‐access documents, so it is a good place to start.
Plain text, grouped under suitable headlines, is used to describe all about any subject it makes sense to describe. Thus, nothing but visual illustrations to the text is left out if/when page is accessed as “text only”.
The flow gets broken by me signing off the page after the main part of the article, followed by various side-notes before site-navigation, and Addendum at the very bottom. To me this is the most logical order, and I am pretty consequent throughout the site so it should not cause in‐page navigation problems for anyone.
navigation (1) – mouse
in graphic browsers, on wide screens
Here we have my “mirrored L” two column layout, with navigation in page footer followed by an Addendum.
A double row of button-like links in footer on every page, makes up website
navigation. There are no drop-down or fly-out menus on my site.
A “skip to navigation” link is provided in top/right corner on all pages, for those who do not want to manually scroll down to navigation in the footer.
The “tail” of this link pops up when mouse-pointer gets near the bottom of the visible page, making it easy to “skip to navigation” from anywhere on a page.
A “homepage” link is provided in upper left corner on all pages. Click on the site-name, and you are brought to the “welcome” page on site.
main site navigation
All site-sections have “Table of Content” (ToC) pages on top. These ToC pages together cover navigation across the entire site.
To go to the ToC page in the section you're in, click on “content” button in top row in footer on whatever page you are on. To go to ToC page in another section, click on the desired “section” button in second row instead.
link relations coded in
A basic set of link-relations is coded in in page-head in all
pages – out of sight in most browsers that is.
Some browsers make use of these link-relations to pre-fetch pages and data. Other browsers make them available as an extra set of site navigation. Other browsers again, just ignore them.
All content, menus and aside‐stuff is grouped in suitable chunks under headlines, which should make it easy to navigate around on individual pages.
observe the addendum
I most often add an Addendum to bottom of pages, with a “show/hide
Addendum” button below navigation in page footer…
On many pages the Addendum contains potentially interesting additions to the main article – including larger images, so it is well worth looking into. On some pages the Addendum only contains pretty basic site-related (small text) stuff, and on some pages the Addendum is simply not populated.
navigation (2) – ssr
on narrow screens and small devices
“Small Screen Rendering” mode is the basis for mobile devices. One column layout tailored to make the most out of small screens – below 640 in width, or very narrow browser windows on any screen.
One column graphic layout can also be referred to as “accessibility mode”, as what we all see on our screens is more or less identical to the linear way most Assistive Technology (AT) software work their way down web pages.
On top of pages you will find the expected gunlaug.com “homepage” link, and a “skip to navigation” link.
In lower-right corner of the window/screen in “Small Screen Rendering”
mode, you find the semi-transparent circle with “#nav” written at an angle to
make it stand out when layered over regular content-text, that acts as an always present
– fixed in place – “skip to navigation” link
from anywhere on the page.
Two lists of button-like links on every page, make up website navigation. These are found in the “fat footer” below all ordinary content.
The reason it is called a “fat footer” is because the Addendum section, which is always open in “Small Screen Rendering” mode, is an integrated part of the footer. This makes the footer on my pages much “fatter”, or rather taller, than what is normal for footers found on pages on most web sites.
The Addendum section is where all the additional content and/or “boring
obligatory stuff” is placed. Type of content in Addendum varies a great
deal from page to page.
Switching between one column and two column mode/styling, is based on available window
width and zoom factor, not on device type and/or actual screen size.
As “Small Screen Rendering” devices – smartphones and such – are as often viewed/used horizontally as vertically, users should be aware that mode-switching between one and two column layout may take place when going from one to the other orientation.
navigation (3) – keyboard
Pages are organized to be “user friendly” for basic keyboard navigation, but the system isn't fine-tuned (yet) and especially some new and experimental design features may be difficult to access via keyboard alone.
The basics that get tested, is element (link / checkbox) tabbing…
… which cover most in-page navigation.
Tabbing order is natural and sequential, and, apart from that a couple of (mainly
irrelevant) links are taken out of the tab-order, there are no changes in priorities
tabindex or in other ways.
The links on all pages that may matter most to most visitors, are…
- Last link on page is “skip to navigation”.
- Second last link on page is to main page.
Visually and functionally the reaction to keyboard
for the most part mimic mouse-
:hover, but there are a few differences.
In places where
:focus is indirect, the on-screen indication for
tabbing is not perfect.
As keyboard tabbing will follow off-screen positioned links and checkboxes, on-screen indication may be missing and page may move erratic in some cases. I will try to remedy some of that, but sometimes there are “conflicts between interests”.
page-zoom, text-resize and auto-adjust
All major browsers can zoom pages and/or resize text. Thus, if the default text-size is too large or too small for comfort on your screens, you can adjust in your own browser.
I have made reasonably sure nothing gets lost or too much out of wack
when these pages are subjected to text-resizing up to 200% of browser default.
Beyond that I may have tested, but cannot guarantee that everything will line up and appear perfect everywhere.
Lower page-width limit depends on your browser. Modern browsers will allow the page to shrink in to around 640(px) in width for “two column layout”, auto-switching to “one column layout” below that width. When you are zooming or resizing text, or whole page, in your browser, the exact point at which switching takes place changes with the resizing factor.
accessibility first, foremost and always
For the most part common sense and local testing are my guides towards reasonable good access to content and functional site-navigation, for a simple document-format website like this.
My basic rule is that if everything makes perfect sense and works as intended in my copy of Lynx – a “text only” browser, I can not be too far off. If testing shows that it makes perfect sense in graphic browsers too, then even better.
The above may sound like an oversimplified recipe to some, but according to friends in constant need of well‐organized and easy accessible web documents, my “linear format”, works fine. I hope they're right, as I will myself also probably need well‐prepared and accessible web sites as much as anyone, one day.
it's all here.
Next to nothing is added to make this website more accessible. Nothing is simplified to make this website more accessible. Nothing is reorganized or removed to make this website more accessible.
In short: it is all here, appearing and behaving as it would if accessibility wasn't an issue.
Weeki Wachee 01.feb.2011
last rev: 12.aug.2022