Outside Goodness
Seeking suggestions for speakers for Perth 2012
Suggest a speaker - gender diversity
Local Government Weekly 5/12
Skip links and standards?
Question: Are there any standards associated with skip links?
Answer: Yes! In order to comply with Success Criterion 2.4.1 Bypass Blocks – you must provide a mechanism to “bypass blocks of content that are repeated on multiple Web pages. (Level A)”
One of the “sufficient techniques” recommended by the W3C for bypassing blocks is the use of skip links. You can read more about them here:
“The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important.”
Adding a link at the top of each page that goes directly to the main content area
For a website to pass this success criteria, the following tests must be passed:
- Check that a link is the first focusable control on the Web page.
- Check that the description of the link communicates that it links to the main content.
- Check that the link is either always visible or visible when it has keyboard focus.
- Check that activating the link moves the focus to the main content.
- Check that after activating the link, the keyboard focus has moved to the main content.
Example 1 – using an NAME attribute as the target
<a href="#content">Skip to content (Press enter)</a> <div> <a name="content">Content</a> </div>Example 1 – using an ID attribute as the target
<a href="#content">Skip to content (Press enter)</a> <div id="content"> Content </div>Many years ago, browsers like IE5 used to have trouble with linking to ID’s. For this reason, many Accessibiltiy Experts recommended using the NAME attribute. however, this practice is not recommended any more. In fact, if you are using HTML5, then using the NAME attribute will throw a warning.
Debate 2: Visible skip linksIdeally, skip links should be visible to all users. This allows not only screen reader users, but those who navigate with the keyboard to see these links immediately.
However, many clients do not like visible skip links on their sites. An acceptable alternative is to use skip links that become visible when it receives keyboard focus – ie when a user tabs through the page.
ExamplesHere are three example pages – all using hidden skip links that become available once the user has given them focus.
- Skip example 01 – using “id” as a target – HTML5
- Skip example 02 – using “name” as a target – HTML4.01 strict
- Skip example 03 – using “name” as a target – HTML5
The CSS code used in these example:
.skipLink a { position: absolute; left: -1000px; z-index: 2; margin: 0; padding: .5em; background: #fff; font-size: 200%; font-weight: bold; text-decoration: none; } .skipLink a:active, .skipLink a:focus, .skipLink a:hover { display: inline; top: 0; left: 0; color: #fff; background: #000; }Some links for light reading (31/1/12)
- CSS Text Level 3 – W3C Working Draft 19 January 2012
- Syntax Highlight
- Responsive Images: How they Almost Worked and What We Need
- Responsive Web Design
- A better photoshop grid for responsive web design
- New CSS3 Properties to Handle Text and Word Wrapping
- Naming convention in CSS
- CSS3 Images End-Game: Summary of Changes and Request for Comments
- The best of [time]s
- Did we lose track of the big picture?
- The Hidden Nuggets of WCAG2: The Wonderful World of ALT Attributes, Part I
- JAWS 11 and IE 9
- Inclusive Design
Media Release: NSW welcomes close to 3,000 new citizens on Australia Day
Media Release: Local Government Excellence in Environment Awards’ Biggest Year Yet
Councils welcome review of NSW Waste and Environment Levy
Media Release: Councils appalled that RFS allocation advice wrong again
Councils welcome NSW Local Infrastructure Renewal Scheme
Media Release: Councils call on NSW Government to review EPA Board membership
Draft NSW wind farm guidelines released for comment
Public Interest Disclosures – New Reporting Requirements (148 kb)
LGMA welcomes Civica as LGMA Management Challenge principle sponsor
LGMA Management Challenge now an accredited subject
Some links for light reading (16/12/11)
- HTML5 and CSS3 Advent 2011
- Designing for the Web: Templates and Grid Systems
- An Introduction To Object Oriented CSS (OOCSS)
- CSS Image Values and Replaced Content Module Level 3
- On HTML and CSS best practices
- Some Lesser Known Features of LESS
- Introducing ECMAScript 5.1
- Discover the Color Palette of Any Website
- Poll Results: Ideal Page Size
- Shapecatcher.com: Unicode Character Recognition
- What I Learned About the Web in 2011
- Give Your Users A Hollywood Experience
- The Hidden Nuggets of WCAG2: When Not to Use ALT Attributes
- Alexa 100 Accessibility Errors