>
Accessibility, for us, is part of a journey. We are learning the ropes and endeavoring to add accessible content as much as possible.
Communities, from our perspective, need to be accessible. That implies that our websites should be accessible as well.
As we learn more about keyboard usage, what to do (and what not to do), we will continue to implement Accessibility as we are able. Sometimes, we run into constraints within software. In other situations, it is our learning curve or available resources to make the required alterations and enhancements.
Your patience is appreciated. Know we will do our best to keep our websites as Accessible as possible.
>
The Accessibility Icon is in the top right hand area of our webpage. Click on it to open it and bring its menu into view. It has several options available. Select which one you desire.
To close the Accessibility menu, simply click on the icon again—it will slide back to its closed position.
It looks like the sample directly below.
To exit Accessibility mode:
>
EXPERIMENTAL AND NOT IN PRODUCTION.
We are working on this feature.
At the very top of a web page, there are additional buttons for keyboard use. The buttons are somewhat smaller in size to save space since we already have icons consuming space elsewhere in the header.
They are designed to be tabbed through in conjunction with a screen reader and then selected if you so choose. Accessibility has been given priority by placing these buttons on the first row ready for immediate use.
Our design goal is to ensure all commonly accessed icons are represented on the first row with buttons. We have tried to imagine user experience without a mouse and just using a keyboard and mainly the Tab key and Enter key.
If you want to make the text for these icons bigger then use the provided Accessibility Icon (top right of your screen) to increase the text size.
Additional related discussion is available within the Getting Started article. A link to this article follows this text box or you can access the article from the Home Page links.
We recommend reading of this article on Accessibility and the Getting Started article.
As well, immediately following the Getting Started article link-button, we have placed a working sample of our Accessible first row which appears on every screen. These sample buttons are provided if you would like to gain familiarity with the top row buttons. Do bear in mind these are live links and will take you to the web page they link to.
Here’s the Getting Started article link-button.
>
EXPERIMENTAL. Not yet live.
ACCESS. On occasion, we may use a graphical image with embedded words. Whenever practical, we place a special text box that restate the words on the image. This is to facilitate screen readers and augment ALT Text. We open these text blocks with the bolded word, “ACCESS” in all caps with a period directly after. The bolded font may not be indicated by screen readers. Watch for the word “ACCESS” opening a text block: it is intended as a reserved signal for special graphics information or navigation assistance.
Similarly, if a graphical image requires you to click on it, we will either use this special ACCESS text box or add a regular linking button. Buttons and links are described shortly. Our buttons have a distinctive format to signal that they are a link.
We are working on methods to deal with graphical images that are a word cloud with many words and phrases. We think the best approach is to have a live link that leads to a description. We are studying this issue in light of ARIA or similar methodologies.
>
Activate menus or menu selections by clicking on the desired action or selection with your mouse. We don’t use the mouse hover to select submenus or actions.
A special note about submenus:
While a hover approach is nice (any submenus disappear automatically thereby revealing the underlying content), it requires you to maintain the mouse over the item.
This is not always helpful regardless of the degree of desired accessibility or the user.
A downside to this non-hover approach:
If a user forgets to close the menu (for example, with the “X” button on a mobile device), then your content is partially covered. If you find some of your content “covered over” towards the top of the webpage, this might be the problem. Simply close any open menu(s) to reveal any hidden content.
Keyboard Users:
We are working on ensuring a standard link-button (keyboard friendly) is available.
>
We put an arrow just in front of a button’s text that links to another page or site. Normally, the button links to a page on our site. If the link is for another website we create content for, then we say something like “Main Sites” or we identify a website. For example, Reimagine is one of our sites.
Here’s what a button-link looks like:
Sometimes, software or available design space makes it difficult to put an arrow in front of a button-link. This is a rare case—normally we use the example with the arrow (directly above).
We try to provide a visual cue in this situation. We do this by using a thick border or by use of a button with a pill shape (“Stay Current” sample).
>
We try to stay with fonts that are easy to read for almost all readers and familiar. Our basic body font is Arial (16 points for mobile, 18 points for tablet or desktop). Heading use a Georgia font.
The usual browser features (zoom in/out) and additional accessibility magnification (via the Accessibility Icon – see above) are available.
While we definitely like artistic design, readability trumps design that limits readership.
If we need to design with an element that is potentially limiting for Accessibility, we will try to introduce additional elements to increase Accessibility and facilitate a broader readership.
Don’t get me on my soapbox about tiny fonts on packaging and containers (mumble, grumble)!
One of our goals within Reimagine and Rethink is clear communication with our audience: you (Community).
>
We endeavor to maintain adequate contrast between foreground and background colors on our sites.
Often, this means we normally use a plain black font on a white background. Occasionally, there are design areas where black and white needs a change for aesthetic reasons. Over time, we will hone our skills and increase design-readability balance. We know we haven’t arrived in all areas.
On occasion, we run into software bugs that can cause issues with contrast. We do our best to solve those problems. But, sometimes, certain bugs can be as persistent as a fly in the house! Your patience is appreciated when we encounter those challenges. Typically, these occur with icon colors in some situations.
>
We use a 3-level heading and subheading method. Each level has an arrow (1,2 or 3 arrows beside each level as needed).
In HTML, these are H2, H3 and H4 tags. For readability, we only use 1, 2 or 3 arrows. The heading for this section is a Level 1 heading with one arrow.
In several situations, we introduce color coding of content. Typically, this would only be to 2 levels (Heading and Subheading); normally, with short titles.
Some content uses a minimal number of these standard headings. In those cases, we may use headings in a more subdued and aesthetic fashion to form content.
We honor the 3-levels in all cases, and use them as appropriate for the content we are writing.
>>
This is something else for text. Filler actually – it must be time for a Costco run or a coffee. Notice how we now have 2 arrows.
>>>
Lorem ipsum dolor sit amet, consectetur adipiscing and other assorted gobbledy-gook. Latin on a good day.
The next heading is Color Coded.
>
>>
>
Column Headings rarely need more than 2 levels (heading and subheading). In Column Headings, we will place either (1) text with a minor amount of decoration (e.g., color), or (2) a plain text box (black text on white) with a soft shadow and a border (Headings only).
The two distinguishing factors between a Heading and a Subheading are the font size and a different border style.
If it is apparent that a heading or subheading (implied through design or colors) is intended, we may use other methods. In general, we try to standardize as much as possible.
Here are two samples:
A Site dedicated to:
All things Community …
… that should be …
… that can be …
…. that will be …
Reimagine-d and Rethink-ed
Please support our dedicated workers with our
Publications or Products
