Showing source for: https://juicystudio.com/
Duration: 0.626012s
Server: Apache
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>
Juicy Studio: No artificial additives
</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="index,follow" name="robots">
<link href="/favicon.ico" rel="shortcut icon">
<link href="http://juicystudio.com/syndicate/juicyatom.xml" rel="alternate" title="Atom 0.3" type="application/atom+xml">
<link href="/index.php" rel="home" title="Home Page">
<link href="/contact.php" rel="author" title="Send feedback">
<link href="/css/basic.css" rel="stylesheet" type="text/css">
<link href="/css/code.css" rel="stylesheet" type="text/css">
<link href="/css/main.css" rel="stylesheet" title="Regular" type="text/css">
<link href="/css/nav.css" rel="stylesheet" title="Regular" type="text/css">
<link href="/css/alternate.css" rel="alternate stylesheet" title="High Contast" type="text/css">
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css">
<!--[if !IE]>-->
<link href="/css/smartphone.css" media="screen and (max-width: 700px)" rel="stylesheet" type="text/css">
<link href="/css/smartphone.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css">
<link href="/css/handheld.css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait)" rel="stylesheet" type="text/css">
<!--<![endif]-->
<!--[if lt IE 7]>
<link href="/css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<script src="/scripts/basic.js" type="text/javascript">
</script>
</head>
<body id="juicystudio-com">
<header aria-labelledby="docttl" role="banner">
<p id="logo">
<a href="/index.php">
<img alt="Juicy Studio" height="49" src="/img/logo.gif" title="Juicy Studio: No artificial additives" width="153">
</a>
</p>
<h1 id="docttl">
Juicy Studio: No artificial additives
</h1>
</header>
<div aria-label="Home" id="content" role="main">
<nav aria-label="Breadcrumb" role="navigation">
<ul id="breadcrumb">
<li>
You are here:
</li>
<li>
<strong>
Juicy Studio Home Page
</strong>
</li>
</ul>
</nav>
<h2>
Welcome to Juicy Studio
</h2>
<p id="sitenav">
<a href="#navigation" title="Go to the navigation bar">
Site Navigation
</a>
</p>
<div id="mission">
<p>
Juicy Studio is an independent UK website, run by Gez Lemon. It's an unfortunate surname, but explains why the site is Juicy.
</p>
<p>
The mission of this website is to promote best practice for web developers in a fast moving industry. Whether you're a novice or a professional, there's something for you.
</p>
</div>
<div id="recentarticles">
<article aria-labelledby="arthdr1">
<h2 id="arthdr1">
Hidden label Firefox bug
</h2>
<p class="postdate">
<time datetime="2013-11-06T15:47Z">
Wednesday, 6th November 2013
</time>
</p>
<p>
The standard method for hiding text visually to retain a clean design but provide context for screen reader users is to use the CSS clip technique. Due to browser bugs with the
<code>
clip
</code>
property, other declarations are used to make this technique work correctly across different browsers.
</p>
<p>
Two of the properties used in the additional declarations for the clip technique are
<code>
position
</code>
and
<code>
overflow
</code>
. Unfortunately, due to a
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=759705">
bug with Firefox
</a>
, when these two properties are used together in a rule applied to the label element (regardless of property value), they cause the label text to not be exposed as the accessible name for the corresponding form control. The
<code>
position
</code>
and
<code>
overflow
</code>
properties are also used in other techniques for hiding text visually, but this bug means the accessible name will not be available for screen reader users when applied to a label element.
</p>
<ul class="articles">
<li class="continue">
<a href="/article/hidden-label-firefox-bug.php" rel="bookmark">
Continue reading Hidden label Firefox bug
</a>
</li>
<li class="comments">
<a href="/article/hidden-label-firefox-bug.php#startofcomments">
comments for Hidden label Firefox bug
</a>
: Comments (15)
</li>
</ul>
</article>
<article aria-labelledby="arthdr2">
<h2 id="arthdr2">
Icon fonts and user-defined style sheets
</h2>
<p class="postdate">
<time datetime="2013-10-30T16:03Z">
Wednesday, 30th October 2013
</time>
</p>
<p>
Icon fonts are vector graphics that are included in the content using the CSS
<code>
content
</code>
property on a
<code>
before
</code>
or
<code>
after
</code>
pseudo-class selector. As with regular fonts, icon fonts are scalable and can be styled using CSS, unlike images. They also have the benefit that they remain visible in high contrast on Windows, unlike CSS background images. The biggest drawback from an accessibility point of view is that they won't work if a user's user-defined style sheet overrides the
<code>
font-family
</code>
property.
</p>
<ul class="articles">
<li class="continue">
<a href="/article/icon-fonts-user-defined-stylesheets.php" rel="bookmark">
Continue reading Icon fonts and user-defined style sheets
</a>
</li>
<li class="comments">
<a href="/article/icon-fonts-user-defined-stylesheets.php#startofcomments">
comments for Icon fonts and user-defined style sheets
</a>
: Comments (9)
</li>
</ul>
</article>
<article aria-labelledby="arthdr3">
<h2 id="arthdr3">
The HTML5 outline algorithm and JAWS
</h2>
<p class="postdate">
<time datetime="2013-05-10T15:02Z">
Friday, 10th May 2013
</time>
</p>
<p>
JAWS' implementation of the HTML5 outline algorithm is incorrect with IE and Firefox when the author explicitly specifies the heading levels. Fortunately, there is a relatively simple fix until JAWS finally fixes the bug.
</p>
<h3>
Important update
</h3>
<p>
JAWS 15 removed its broken implementation of the outline algorithm.
</p>
<ul class="articles">
<li class="continue">
<a href="/article/html5-outline-algorithm-jaws.php" rel="bookmark">
Continue reading The HTML5 outline algorithm and JAWS
</a>
</li>
<li class="comments">
<a href="/article/html5-outline-algorithm-jaws.php#startofcomments">
comments for The HTML5 outline algorithm and JAWS
</a>
: Comments (12)
</li>
</ul>
</article>
<article aria-labelledby="arthdr4">
<h2 id="arthdr4">
aria-controls - lack of support
</h2>
<p class="postdate">
<time datetime="2013-04-05T14:11Z">
Friday, 5th April 2013
</time>
</p>
<p>
The
<a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls">
aria-controls
</a>
attribute is important for composite widgets where one element controls another, such as navigation widgets (links, buttons, or
<a href="http://www.w3.org/TR/2011/CR-wai-aria-20110118/roles#tab">
tabs
</a>
controlling another section),
<a href="http://www.w3.org/TR/2011/CR-wai-aria-20110118/roles#tree">
tree views
</a>
, and similar relationships where one element controls another. The attribute defines the relationship so that assistive technology users can navigate to the content effected by the controlling element; for example, from a tab to the associated tab panel.
</p>
<p>
Considering the importance of being able to define these relatively simple relationships, the
<code>
aria-controls
</code>
attribute has surprisingly poor support. The only browser/assistive technology combination that I'm aware of that supports this relationship at the moment is Firefox/JAWS.
</p>
<ul class="articles">
<li class="continue">
<a href="/article/aria-controls-lack-support.php" rel="bookmark">
Continue reading aria-controls - lack of support
</a>
</li>
<li class="comments">
<a href="/article/aria-controls-lack-support.php#startofcomments">
comments for aria-controls - lack of support
</a>
: Comments (8)
</li>
</ul>
</article>
<article aria-labelledby="arthdr5">
<h2 id="arthdr5">
Handling erratic behaviour with AT
</h2>
<p class="postdate">
<time datetime="2013-03-18T15:57Z">
Monday, 18th March 2013
</time>
</p>
<p>
Most of us have come across scenarios where web accessibility testing with assistive technologies produces unexpected results, when we know the underlying structure of the web page is correct. Assistive technologies are complex, so it's not surprising they sometimes go wrong, but we need to know how to recover when they're being unresponsive or providing incorrect information. My colleague,
<a href="https://twitter.com/hanshillen">
Hans Hillen
</a>
, sent an email internally at
<a href="http://www.paciellogroup.com/">
TPG
</a>
about handling erratic behaviour with
<a href="http://www.freedomscientific.com/products/fs/JAWS-product-page.asp">
JAWS
</a>
, and has kindly allowed me to post it here, as this is useful information.
</p>
<p>
What techniques do you use to handle strange behaviour in JAWS and other assistive technologies?
</p>
<ul class="articles">
<li class="continue">
<a href="/article/handling-erratic-behaviour-at.php" rel="bookmark">
Continue reading Handling erratic behaviour with AT
</a>
</li>
<li class="comments">
<a href="/article/handling-erratic-behaviour-at.php#startofcomments">
comments for Handling erratic behaviour with AT
</a>
: Comments (7)
</li>
</ul>
</article>
<article aria-labelledby="arthdr6">
<h2 id="arthdr6">
Custom-Built Dialogs
</h2>
<p class="postdate">
<time datetime="2013-02-01T15:20Z">
Friday, 1st February 2013
</time>
</p>
<p>
Custom-built dialogs are common in web-based applications, but many are not accessible. Most of them are not announced to assistive technologies, and so screen reader users are not made aware that a dialog has been launched. Many are also not focused when they are launched, and so keyboard-only users are still focused on elements in the background, and might have to navigate through the content in order to reach the dialog.
</p>
<p>
The
<a href="http://www.w3.org/TR/wai-aria/">
WAI-ARIA
</a>
specification defines roles and attributes that help ensure dialogs are announced correctly to assistive technology users, and provides guidance on ensuring they are keyboard accessible.
</p>
<ul class="articles">
<li class="continue">
<a href="/article/custom-built_dialogs.php" rel="bookmark">
Continue reading Custom-Built Dialogs
</a>
</li>
<li class="comments">
<a href="/article/custom-built_dialogs.php#startofcomments">
comments for Custom-Built Dialogs
</a>
: Comments (15)
</li>
</ul>
</article>
</div>
</div>
<div id="sidebar">
<form action="/search.php" id="searchform" method="post" role="search">
<p>
<label for="searchcriteria">
Search Criteria
</label>
<br>
<input id="searchcriteria" name="searchcriteria" size="16" type="search">
<input name="search" type="submit" value="Search">
</p>
</form>
<nav aria-labelledby="navigation" id="navcontainer" role="navigation">
<h2 id="navigation">
Site Navigation
</h2>
<ul id="nav">
<li class="topcorner">
<a href="#content" title="Go directly to main content">
Main Content
</a>
</li>
<li>
<a href="/switchstyle.php" id="togstyle" title="Switch the current style sheet to a high contrast style sheet">
Switch to High Contrast
</a>
</li>
<li>
<span>
Home
</span>
</li>
<li>
<a href="/services.php">
Quality Assurance
</a>
</li>
<li>
<a href="/articles.php">
Articles Archive
</a>
</li>
<li class="last">
<a href="/privacy.php">
Privacy Statement
</a>
</li>
</ul>
</nav>
<div id="secondary">
<h3 id="syndicate">
Syndication
</h3>
<ul>
<li>
<a href="http://juicystudio.com/syndicate/juicyatom.xml">
Atom 1.0
</a>
</li>
</ul>
</div>
</div>
<footer role="contentinfo">
<p id="footer">
Copyright © 2000-2024 Juicy Studio. All rights reserved.
</p>
</footer>
</body>
</html>