accessibility issues

content-oriented site

This is a description of how accessibility issues are handled on this very web­site, and how I have reflected on such issues over the years. Whether you experience zero problems, or have special needs while surfing the web, this guide and des­crip­tion is written for you.
Access is for everyone … me included.

a simple approach

I don't believe in compli­cating 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 illustr­ations to the text is left out if/​when a 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) – with a 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.

Never mind how it is made to look that way. It is a pretty typical responsive layout/​design, for just about any condition on any screen.

A double row of button-like links in footer on every page, makes up website navi­gation. There are no drop-down or fly-out menus on my site.

A “skip to navi­gation” 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 navi­gation” from anywhere on a page.

A “home­page” 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 what­ever page you are on. To go to ToC page in another section, click on the desired “section” button in second row instead.

link relations are 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 navi­ga­tion. Other browsers again, just ignore them.

in-page navigation

All content, menus and aside‐stuff is grouped in suitable chunks under descriptive 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…

(Oldest pages on site use Java­script for the show/​hide func­tion­ality, while newer pages are given a CSS-only solution.)

On many pages the Addendum contains potentially interesting additions to the main article – including larger images, so it may be 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

single-column for narrow windows/​screens

Small Screen Rendering” mode is the basis for mobile devices. One-column layout tailored to make the most out of small screens – below 643(px) in width, or reduced browser window-width on any screen.

One column graphic layout can also be referred to as “accessibility mode”, as what we get to 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 “home­page” link, and a “skip to navi­ga­tion” link.

In lower-right corner of the window/​screen in “Small Screen Rendering” mode, you find the semi-trans­par­ent 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 navi­ga­tion” link from any­where on the page.

Two lists of button-styled links on every page, make up website navi­ga­tion. These are found in the “fat footer” below all ordinary content.

The reason I call it 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 page-footers found on most web sites.

The Addendum section is where all the additional content and/​or “boring obligatory stuff” is placed. Type and amount of content in Addendum does, as mentioned earlier, vary a great deal from page to page.

observe mode-switching…

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 – smart­phones and such – are as often viewed/​used horizon­tally as verti­cally, users should be aware that mode-switching between one and two column layout may take place when going from one to the other orien­tation.

navigation (3) – using keyboard

Pages are organized to be “user friendly” for basic navi­ga­tion using any method and device, but it isn't a fine-tuned system, and especi­ally some new and experi­men­tal design features may be difficult to access via keyboard alone.

The basics that get tested, is element (link / checkbox) tabbing…
Tab / Shift+Tab
Enter / Space
… which cover most in-page navigation.

Tabbing order is natural and sequential, and, apart from that a couple of (mainly irrele­vant) links are taken out of the tab-order, there are no changes in priorities made via 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 navi­ga­tion”.
  • Second last link on page is to main page – the “homepage–.

Visually and func­tion­ally the reaction to keyboard :focus does for the most part mimic mouse-:hover, but there are a few differences. In places where :focus is indirect, the on-screen indi­ca­tion for tabbing is not perfect.

As keyboard tabbing will follow off-screen positioned links and checkboxes, on-screen indica­tion may be missing and page may seem to move erratic in some cases. I will try to remedy some of that, but some­times 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 reason­ably 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 can not guarantee that every­thing will line up and appear perfect every­where.

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.

acces­si­bi­lity first, fore­most and always

For the most part common sense and local testing are my guides towards reason­able good access to content and func­tional site-navi­ga­tion, for a simple document-format website like this.

My basic rule is that if every­thing 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 over­simpli­fied recipe to some, but according to friends in constant need of well-organized and easy acces­sible web documents, my “linear format”, works fine. I hope they're right, as I will myself also probably need well‐prepared and acces­sible web sites as much as any­one, one day.

it's all here.

Next to nothing is added to make this website more acces­sible. 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 accessi­bility wasn't an issue.

sincerely  georg; sign

Weeki Wachee 01.feb.2011
last rev: 22.sep.2023 advice upgrade advice upgrade navigation