|
|
Juicy StudioNo artificial additives2011-06-05T11:55:00ZGez Lemonhttp://juicystudio.com/tag:juicystudio.com,2011:1Copyright 2011, Juicy StudioPrinciples of Inclusive Web Designtag:juicystudio.com,2011-06-04:/principles_inclusive_web_design.php2011-06-04T13:17:00ZSandi Wassmer of Copious outlines The 10 principles of inclusive web design.
A User-Centred Approach
A sensible user-centred approach to inclusive web design is essential for a successful website and to build trust from your visitors/clients. Sandi's article outlines 10 basic principles that all web developers, designers and marketing people should consider essential reading. The 10 principles are summarised below:
Be equitable.Be flexibleBe simple and intuitiveBe perceptibleBe informativeBe preventativeBe tolerantBe effortlessBe accommodatingBe consistent
Following these basic principles will result in accessible websites for all. These principles are explained in the article: The 10 principles of inclusive web design.
UK Census: Why Target Screen Reader Users?tag:juicystudio.com,2011-03-07:/uk-census-why-target-screen-reader-users.php2011-03-07T23:33:00Z
Every 10 years we have to complete a census survey in the UK. I'm working in London this week, so don't have access to the full online survey, but from an initial check it seems screen reader users are unnecessarily targeted.
UK Census
Since 1801, we have to fill out a census in the UK; the exception being 1941 during the Second World War. Failure to provide census information could result in a £1,000 fine, although only 38 people were fined for failure to return the 2001 census return. I'm working in London at the moment, so haven't received my internet access code to view the online version of the census, but I have looked at the first page.
Some Background Information
I have updated this article in response to some background information from one of the advisers. There was a problem with the auto-focus field, but no time to correct it, resulting in advice that screen reader users should close their browser if they make a mistake. This is a serious issue for all keyboard-only users, not just screen reader users, but I've talked more about that under correcting mistakes.
2011 Online Census Form
There are a few accessibility issues with the UK Online Census Login Page (the only page I can access without the code). For example, poor colour contrast of the currently selected tab, and alternative text that duplicates screen text. The form controls for the internet access code are labelled, so at least screen reader users can sign-in, providing they have the internet access code. The page states that the internet access code is on the printed questionnaire that is sent to every household in the UK. I don't have access to that letter, as I'm in London, but I assume it's also available in Braille (even though not all blind people read Braille) or some other accessible format?
Correcting Mistakes
If you're using a screen reader, you are advised to close the browser and start again if you make a mistake entering the internet access code.
<label class="hide" for="iac4">
Fifth block of your access code. If you make a mistake,
please close your browser and start again.
</label>
It is difficult to correct a mistake when entering the personal information code, as the focus is moved to the next field as soon as there are enough characters in one of the edit boxes. This makes it extremely difficult for all keyboard users to correct mistakes, as navigating back and changing one of the characters automatically moves the cursor to the next field.
The reason this message is targeted at screen reader users, even though this behaviour is problematic for everyone, is that there was not enough time to fix the issue. This is a serious accessibility issue and would be trivial to fix, as they could just remove the auto-focus script. If they insisted on keeping the behaviour of the script, they could at least distinguish between adding new content and editing existing content. In other words, if there is content in an edit box when the user enters that field, do not move their focus while they are editing the content - allow them to use the keystrokes they already know to correct the issue and move to the next field. Again, that would be a very trivial fix.
Colour Contrast and CSS Sprite Mapstag:juicystudio.com,2011-03-06:/colour-contrast-css-sprite-maps.php2011-03-06T16:01:00Z
CSS sprite maps improve efficiency by making fewer HTTP requests to the server, but most implementations cause serious problems for users who view content in high contrast mode.
CSS for Presentation
Most people realise that CSS is for the presentation layer, and that they shouldn't provide main content with CSS. However, CSS sprite maps are surprisingly common due to their performance improvement in fetching a single image instead of making several HTTP requests to fetch several images from the server. These implementations tend to use empty elements, and the presentation is provided through CSS:
<a href="next.php" class="np" title="Next page"></a>Screen Readers
The above is an example of where the title attribute's content is available to assistive technologies, as it's mapped to the accessibility architecture by browsers in the absence of a proper link phrase; similar to how the title attribute can be reliably used on form controls in the absence of an explicitly associated label. This is true of all elements that receive keyboard focus, but not reliable for non-interactive elements.
Accessibility Issue of Depending on CSS
If the above example is displayed visually, and also available for screen reader users, what is the problem with providing the content with CSS? Obviously, if CSS isn't available the content wouldn't be displayed, but that's a device independence issue, rather than an accessibility issue. You could argue that the user has a responsibility to use a browser that supports the technologies you have used; particularly as most common graphical browsers have supported CSS as basic as this for many years. As most browsers also support zooming, the image can easily be increased so that it's also suitable for people with visual impairments that don't use assistive technologies. The problem here is when the content is viewed in high contrast mode.
High Contrast Mode and CSS
In high contrast mode, CSS content is considered decorative, and therefore disposable. If you view a web page in high contrast mode in Windows, you'll notice that all background images provided with CSS are removed, and therefore no longer available to your users. A Forster Research study commissioned by Microsoft a few years back revealed that 12% of computer users use accessibility features such as large fonts, high contrast, and special keyboards, so this is a serious issue.
Last year, Steve Faulkner provided a solution for ensuring content is available in high contrast mode for CSS sprites.
Great North Run for Alzheimer's Societytag:juicystudio.com,2011-02-16:/great-north-run-for-altzheimers-society.php2011-02-16T15:57:00Z
My entry was accepted for the Great North Run 2011, so I have decided to run on behalf of the Alzheimer's Society. Please consider sponsoring me: anything you can afford will make a difference.
Dementia
1 in 3 people over 65 will die with dementia. Dementia is a neurodegenerative disease that gets progressively worse, causing an irreversible loss of function in neurons in the brain. There are many types of dementia, but the most common forms are Alzheimer's disease and vascular dementia (caused by strokes). Dementia is a devastating condition that strips victims and their families of their lives. Dementia is more than just memory loss, and can result in a person with dementia losing the ability to talk, walk, and swallow.
The Alzheimer's Society
The Altzheimer's Society is a British charity that supports people with dementia and their families, and support research into different types of dementia. Although they are a British charity, the research they fund benefits the world.
The Great North Run 2011
The great north run is the world's most popular half marathon, which starts in Newcastle and ends in South Shields. The event is held in September, and there will be 54,000 runners. As it's the world's most popular half marathon, it's difficult to enter. I was fortunate that my entry was accepted. Once my place was confirmed, I decided that I wanted to run for charity to help motivate me.
Charity
I considered a few charities, but decided on the Alzheimer's Society, as the work they do is important, but they do not receive the same amount of attention as other worthy high profile charities, such as Cancer Research.
My Nan had dementia, and it was awful watching the disease take its grip. It started with confusion, but by the end she didn't recognise her family, and at one point thought I had come to put her in a home - her biggest fear. Things have come a long way since she died, thanks for the work of the Alzheimer's Society, but there was very little understanding or support before she died.
Please consider sponsoring me. Any amount you can afford will make a big difference in helping people with dementia.
Say No to noscripttag:juicystudio.com,2010-07-02:/say-no-to-noscript.php2010-07-02T16:58:00Z
I'm surprised that the noscript element is conforming in HTML5, as there are much better techniques for ensuring that pages work with or without JavaScript. Despite early accessibility advice advocating use of the noscript element, best practice is to use unobtrusive JavaScript for progressive enhancement, rather than relying on fallback content.
The noscript Element
The noscript element was a well-intentioned idea to provide fallback content when scripting isn't available. In reality, it hasn't been used very well. The fallback for the majority of noscript content is merely to inform the user that their browser does not support JavaScript, which isn't very helpful.
<script type="text/javascript">
// Do something cool
</script>
<noscript>
<p>Your browser does not support JavaScript!</p>
</noscript>
In fairness, some people did use it correctly, and offered an alternative option through the noscript element.
<script type="text/javascript">
// Do something cool
</script>
<noscript>
<p>
<a href="http://somewhere.com/latestdata.html">
Download the latest statistics
</a>.
</p>
</noscript>Accessibility AdviceWCAG 1.0 included guidance on providing a fallback mechanism for scripts. The relevant checkpoints were checkpoint 1.1, checkpoint 6.2 and checkpoint 6.3:
WCAG 1.0 Checkpoint 1.1
Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]
WCAG 1.0 Checkpoint 6.2
Ensure that equivalents for dynamic content are updated when the dynamic content changes. [Priority 1]
WCAG 1.0 Checkpoint 6.3
Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1]
The techniques document for WCAG 1.0 suggested using the noscript element as an alternative presentation of scripts with the following example:
<SCRIPT type="text/tcl">
// script to show a billboard of sports scores
</SCRIPT>
<NOSCRIPT>
<P>Results from yesterday's games:</P>
<DL>
<DT>Bulls 91, Sonics 80.
<DD>
<A href="bullsonic.html">Bulls vs. Sonics
game highlights</A>
// more scores ...
</DL>
</NOSCRIPT>
Fortunately, WCAG 2.0 doesn't mention the noscript element in the techniques document.
Unobtrusive JavaScript
Instead of relying on fallback mechanisms, current best practice is to use progressive enhancement. This basically means ensuring that the page works without JavaScript, and then adding the JavaScript functionality progressively. This technique has been used for many years now, supported by many standards-advocates including Christian Heilmann who has great resources on Unobtrusive JavaScript techniques.
Using unobtrusive JavaScript techniques encourages authors to think in terms of separate layers, as the script itself is never written in the document. The basic layers are content (in markup), presentation (with CSS), and behaviour (the scripting part). The result is more robust than relying on JavaScript, and then depending on a fallback mechanism such as using noscript.
Style Sheet Switcher Example
Consider an example of a style sheet switcher. This is easy if you separate the presentation and behaviour using CSS and JavaScript. First, a quick reminder about style sheets.
Persistent Style Sheets
A persistent style sheet is always enabled. If the rules for a document are contained in a single style sheet, then this is the way you will link to the style sheet. If the document has more than one style sheet associated with it, the basic rules may be placed in this style sheet. The relationship is specified with a rel attribute value of stylesheet, and no title attribute is provided.
<link href="persist.css" rel="stylesheet" type="text/css">Preferred Style Sheets
A preferred style sheet is enabled by default, but may be switched by the user for an alternate style sheet. A preferred relationship is specified with a rel attribute value of stylesheet, and a title attribute is also provided. You may specify more than one preferred style sheet by specifying the same title for each. The preferred style sheets will be grouped, and enabled and disabled together. If more than one group of preferred style sheets are specified, the first group will take precedence over the other groups.
Alternate Style Sheets
An alternate style sheet is one that may be selected by the visitor as an alternative to the preferred style sheet. An alternate relationship is specified with a rel attribute value of alternate stylesheet, and a title attribute is also provided. Like preferred style sheets, alternate style sheets may be grouped by giving them the same title.
The following example uses a persistent, preferred, and alternate style sheet, allowing the visitor to customise the look of the site to their taste.
<link href="persist.css"
rel="stylesheet" type="text/css">
<link href="prefer.css"
rel="stylesheet" title="Regular" type="text/css">
<link href="alt.css"
rel="alternate stylesheet" title="High Contrast" type="text/css">
To create a style sheet switcher, you would start by providing a link to a server-side page that chose the style sheet the user chose.
<a href="switchstyle.php?s=2">High Contrast</a>
This would essentially work by setting a cookie to remember the user's choice, and then examining the cookie when writing out the style sheets to ensure they're the user's choice. For example, if the user's choice was high contrast, you would write the style sheets out as follows:
<link href="persist.css"
rel="stylesheet" type="text/css">
<link href="prefer.css"
rel="alternate stylesheet" title="Regular" type="text/css">
<link href="alt.css"
rel="stylesheet" title="High Contrast" type="text/css">
That is the basic functionality, and works well using the regular link to get the user's choice and arrange the style sheets to their preference.
Enhancing with JavaScript
The functionality could be enhanced by using JavaScript to switch the styles, as this would save the page being re-fetched from the server; updating the user's choice immediately. By taking an unobtrusive JavaScript approach, we ensure the page works without scripting, and then add the functionality using script. We would need a hook for the script, which could be an id or a class. For this example, I'll use a class name of switch.
<li><a href="switchstyle.php?s=1" class="switch">Regular</a></li>
<li><a href="switchstyle.php?s=2" class="switch">High Contrast</a></li>
<li><a href="switchstyle.php?s=3" class="switch">Single Column</a></li>
We could then use something like the following in a separate file to add the scripting for any anchor element with a class name of switch.
// Function to return a collection of elements by class name
function getElementsByClassName(objElement, strTagName, strClassName)
{
var objCollection = objElement.getElementsByTagName(strTagName);
var arReturn = [];
var strClass, arClass, iClass;
for(var iCounter=0; iCounter<objCollection.length; iCounter++)
{
strClass = objCollection[iCounter].className;
if (strClass)
{
arClass = strClass.split(' ');
for (iClass=0; iClass<arClass.length; iClass++)
{
if (arClass[iClass] == strClassName)
{
arReturn.push(objCollection[iCounter]);
break;
}
}
}
}
objCollection = null;
return (arReturn);
}
// Set the cookie so that it can be checked when new pages are
// returned
function setCookie(strName, strValue)
{
var objDate = new Date();
// Set expiration as 1 year in seconds
objDate.setTime(objDate.getTime() + 31536000);
document.cookie = strName + '=' + strValue + '; expires=' + objDate.toGMTString() + '; path=/';
}
function switchStyle(objAnchor)
{
var strLinkPhrase = objAnchor.firstChild.data;
var iCounter;
setCookie("styleopt", strLinkPhrase);
for(iCounter=0; iCounter<document.styleSheets.length; iCounter++)
{
if (document.styleSheets[iCounter].title != strLinkPhrase)
{
document.styleSheets[iCounter].disabled = true;
}
else
{
document.styleSheets[iCounter].disabled = false;
}
}
return false;
}
function addStyleEvents()
{
var objSwitch = getElementsByClassName(document, 'a', 'switch');
var iCounter;
for (iCounter=0; iCounter<objSwitch.length; iCounter++)
{
objSwitch[iCounter].onclick = function(){return switchStyle(this);};
}
return true;
}
function init()
{
addStyleEvents();
}
window.onload = init;Conclusion
As unobtrusive JavaScript techniques encourage developers to separate behaviour from content (as CSS encourages developers to separate presentation from content), the result is more robust and much easier to maintain, as the JavaScript is included in a separate page. Retaining the noscript element in HTML5 is good for backwards compatibility, but personally, I would have preferred it to be deprecated and developers discouraged from using it and use unobtrusive scripting techniques instead.
Purpose of the summary Attributetag:juicystudio.com,2009-06-10:/purpose-of-the-summary-attribute.php2009-06-10T00:43:00Z
The purpose of the summary attribute is to concisely describe the structure of a data table. The summary attribute is not intended to provide a long description for data tables.
The summary Attribute
The purpose of the summary attribute is to provide a concise overview of the structure of data tables. WCAG 2.0 covers this issue under guideline 1.3.1: Information and relationships, where they have a success criterion for using the summary attribute to provide an overview of data tables. The summary attribute is most useful with complex data tables, but can also be useful with simple data tables. Without a summary attribute, assistive technology users need to investigate the data table one cell at a time to build up a mental picture of the structure in their mind. With complex data tables, where columns and/or rows are grouped, building a mental picture can be particularly difficult for non-sighted users, whereas this information is visually obvious to sighted users. Sighted users of any ability are able to determine the structure of the table visually, whereas non-sighted users have no such luxury without the author providing a summary attribute to describe the structure of the data table.
Long Descriptions for Data Tables
The HTML 4.01's definition of the summary attribute uses the term purpose in its definition, which, along with the summary attribute's name, seems to have confused the purpose of the summary attribute.
This attribute [the summary attribute] provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille.
The summary attribute is not intended to provide a long description for data tables.Long descriptions are better provided with markup, as markup provides a convenient mechanism for assistive technology users to interact with the content. Assistive technologies that support the summary attribute read it by default. Forcing a long description on assistive technology users is obviously not desirable.A long description benefits all user groups, and shouldn't be hidden within the table.WAI-ARIA already has a mechanism to describe long descriptions that can be used with any object. For consistency, aria-describedby should be used to associate a long description with any object.The summary attribute serves a particular audience in providing an overview of the structure of the table that cannot be determined by the markup for the table alone, and is redundant for sighted users.
All sides of the debate agree that if a long description is required, the long description should be provided to all groups, not just screen reader users. The best mechanism to provide a long description is to provide a generic description of the table that is available to all users, and make the association using WAI-ARIA's aria-describedby attribute.
Misconceptions about the summary Attribute
Describing the summary attribute as a long description is dangerous, and almost guaranteed to result in the summary attribute being omitted from HTML5 and later versions. If the summary attribute is omitted from HTML5, user agent support for the attribute is likely to disappear from user agents, even though the attribute is currently very well supported. The summary attribute serves a particular audience; those that cannot determine the structure of the table visually.
The purpose of the summary attribute is to define the structure of data tables to non-sighted users where the relationship cannot be determined by user agents. User agents typically provide the number of columns and rows, but only an author can provide semantic information, such as the rows contain the time the bus leaves a particular bus depot, and the columns contain the destinations for each journey. That information is readily visually available, but a screen reader user would need to examine several cells before they can build that association in their minds. Structural information about how a data table is to be read visually can readily be provided by an author using the summary attribute.
Requiring the alt Attribute in HTML5tag:juicystudio.com,2009-01-25:/requiring-alt-attribute-html5.php2009-01-25T22:46:00Z
I'm putting together a list of pros and cons about making the alt attribute required in HTML 5. The following is a list of reasons for and against making the alt attribute required. What is your opinion?
Reasons why the alt Attribute Should Be RequiredIf the image is decorative, it should be provided with CSS. If the image has content, then the alt attribute should be used or the content will not be perceivable to some users.The alt attribute should be mandatory in HTML 5 with a note pointing to WCAG 2.0 for guidance, as WAI are the experts in this area.Not requiring the alt attribute allows broad, dangerous ideas of what should and should not have alt. Laziness will dictate.Authors should be required to make a decision about alt text for every image.Without alt text, assistive technologies rely on heuristics to determine the purpose of the image, which often results in gibberish — for example, announcing machine generated file names as the link phrase for links.Bad alt text is much better than no alt text.Requiring alt text encourages people in the right direction.Because people don't always get the alt text correct, it is not a reason not to require it.Requiring alt text creates a teachable moment.The alt attribute should be required with an additional attribute to indicate when it hasn't been provided.The alt attribute should be required for backward compatibility.There has not been a convincing argument for what lack of alt should mean.Reasons why the alt Attribute Should Not Be RequiredMaking the alt attribute required results in people providing nonsense values.It's not reasonable to expect anyone to provide alt text when uploading several thousand photos all at once.Making the alt attribute required does not mean it will be used correctly.Provide the alt text with aria-labelledby is better than requiring the alt attribute.Providing alt text should be considered best practice, not required.Requiring alt text is merely philosophical without context.The alt attribute should not be required, but flagged at validation as a warning.There are exceptions where no value is possible.There are illustrative images that do not require alt text.Images on my website are for my family, and they don't need alt text.The alt attribute should not required because authors get it wrong, in the same way they get other markup wrong, such as data tables without headings.All that is required for accessibility is that the alt attribute may be used; it should not be required.What do you Think?
Do you have reasons other than those already stated about whether or not the alt attribute should be required in HTML 5? If so, either leave a comment here, or contribute to the Twitter discussion or respond to me directly on Twitter. If you respond on Twitter, please use the #althtml5 hashtag so that I can find your response.
Seven Things Memetag:juicystudio.com,2009-01-18:/seven-things-meme.php2009-01-18T23:19:00ZSteve Lee tagged me with the "Seven Things" meme, where you have to share seven facts about yourself and tag seven people to pick up the meme.
Rules of the Seven Things MemeLink to your original tagger(s) and list these rules in your post.Share seven facts about yourself in the post.Tag seven people at the end of your post by leaving their names and the links to their blogs.Let them know they've been tagged.My Seven FactsI am an excellent guitarist. When I lived with my parents, our next door neighbour threw a brick through my bedroom window so he could hear better. He started to sing along, but was completely out of time and got all the words wrong.I can also play the piano, but not as well as I can play the guitar. I have the capacity to learn one song all the way through, but if I learn another, the previous song I learnt gets overwritten.My Dad is a drummer. I miss having a drum kit around. If I get a detached house, I will get a drum kit.I gave up smoking nearly three years ago.I can levitate, but not all at once.I can't play golf.I don't know seven people to tag with this meme.
I can only think of one person to tag with the seven things meme:
Henny SwanTwitter Focustag:juicystudio.com,2009-01-12:/twitter-focus.php2009-01-12T12:01:00Z
Considering the standard Twitter website is so basic, it's surprising it is so inaccessible. This Focus Twitter Greasemonkey script puts the favourite, reply and delete links into the keyboard tab order to make it easier for keyboard-only users to use Twitter.
ContentsTwitter AccessibilitySimilar Functionality; not an EquivalentFinding a SolutionInstalling the Greasemonkey ScriptTwitter Accessibility
There are many accessibility problems with Twitter, but by far the biggest issue is having links that can only be activated using a mouse. The links for making a particular tweet a favourite, the links for replying to a particular tweet, and the links to delete a tweet or direct message can only be activated using the mouse on the standard Twitter website. The favourite, reply and delete links are revealed when the user hovers the mouse over a tweet.
Hiding actions and only revealing them when the user moves the mouse results in a very poor user experience, as many mouse users will be unaware that the functionality exists at all. For keyboard-only users, the situation is far worse, as they could never possibly know the functionality exists.
Similar Functionality; not an Equivalent
Twitter has a set of commands to use with Twitter updates, including a @username command to send a reply to a particular user. The syntax is @username message you want to send to the user. Whilst useful, there are two significant difficulties with this syntax:
The reply is associated with the last tweet the user sent. If the user has sent tweets since the particular message a user intends to reply to, the reply is associated with the wrong tweet. By contrast, the reply is always associated with the correct tweet when using the reply button.The user has to physically type the username. As usernames aren't always simple to remember, the user sometimes has to copy and paste them. By contrast, the name is automatically put into the reply box with the correct syntax, and associated with the correct tweet when a user hits the reply button.
Using commands to manually send replies is not an equivalent for a button that does everything for the user.
There is also a FAV command to make a tweet a favourite. The syntax is FAV username, which will make the last tweet by the user a favourite. Like replies, the FAV command assumes the very last tweet from a user, and requires the user to type the username.
Keyboard-only users cannot delete tweets, as there are no commands for deleting tweets or direct messages.
Finding a Solution
There are so many accessibility issues with Twitter that I originally wanted to build an accessible Twitter application. The problem is that I wouldn't have the bandwidth to run a server-side Twitter application, and Twitter doesn't currently use OAauth, which means I would have to ask users to trust me with their usernames and passwords. When discussing this on Twitter, Derek Featherstone (feather) suggested writing a Greasemonkey script. This was a good idea, as it at least allowed the biggest accessibility problems to be addressed immediately.
The Greasemonkey script reveals Favorite, Reply and Delete links when appropriate for each tweet in the timeline. The link phrases have contextual information for assistive technology, but hidden visually, as the links are clearly grouped with the tweet to which they belong. I also removed the avatar from the keyboard tab order to reduce the number of redundant links for keyboard-only users, as the name immediately by the side of the avatar activates the same link. I have left the link in place so that mouse users have a larger target area, as they can click on the avatar.
Installing the Greasemonkey Script
If you don't already have Greasemonkey installed, you will need to install Greasemonkey in Firefox first. After installing the extension, select the Focus Twitter Greasemonkey script, and you will be prompted to install the script. From then on, you will have access to reply, favourite and delete links using the keyboard.
Luminosity Contrast Ratio Main Colour Contrast Analysertag:juicystudio.com,2009-01-07:/luminosity-contrast-ratio-main-colour-contrast-analyser.php2009-01-07T13:17:00Z
The Accessibility Evaluation and Repair Tools (AERT) colour contrast algorithm was never a recommendation. As the luminosity contrast ratio algorithm is recommended with WCAG 2.0, it is now the main method of testing colour contrast on Juicy Studio.
AERT Suggested Algorithm
The 26th of April 2000 working draft for AERT contains a suggested algorithm to calculate the contrast of foreground and background colours, based on the YIQ colour space previously used by the NTSC television standard:
Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.
Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
A colour brightness difference of over 125 and a colour difference of over 500 is a pass using this algorithm.
Absence of an Official Algorithm
In the absence of any other published algorithm to determine colour contrast, I decided to use the proposed AERT algorithm to test for colour contrast. The algorithm was better than nothing, but there were problems with the algorithm failing colour combinations that were obviously good, and allowing colour combinations that were obviously poor.
The biggest problem with the AERT algorithm is that the colour difference was too strict and barred obviously good colour combinations. To get around this restriction, Hewlett Packard lowered the threshold to 400. The algorithm also allowed colour combinations that were obviously not good, such as #f80 and #00f (bright blue on orange). The colour combination is difficult to read, yet passes the AERT algorithm. The difference in brightness is 127 (threshold is 125), and the difference in colour is 646 (threshold is 500).
Luminosity Contrast Ratio
The Luminosity Contrast Ratio algorithm, developed by Gregg Vanderheiden, Dave Kelso, and Aries Arditi at the Trace R&D Center has been adopted by WCAG 2.0.
Success Criterion 1.4.3 requires the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
The luminosity algorithm provides much better results than the old AERT algorithm. The obviously poor colour combination of bright blue on an orange background (#f80 and #00f) yields a luminosity contrast ratio of 3.59:1 — a failure of success criterion 1.4.3, except for large text.
Colour Contrast Services
The old URL for the AERT colour contrast service on this website now redirects to the luminosity contrast ratio analyser (HTTP 301: moved permanently). The old AERT colour contrast analyser is still available, but through the new URL. The Juicy Studio Accessibility Toolbar and the Colour Contrast Analyser Firefox extensions will continue to include the AERT algorithm alongside the luminosity contrast ratio algorithm in the meantime.
|
|
|
