Requiring the alt Attribute in HTML5

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 Required

• If 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 Required

• Making 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 Meme

Steve 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 Meme

1. Link to your original tagger(s) and list these rules in your post.


2. Share seven facts about yourself in the post.


3. Tag seven people at the end of your post by leaving their names and the links to their blogs.


4. Let them know they've been tagged.

My Seven Facts

1. I 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.


2. 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.


3. My Dad is a drummer. I miss having a drum kit around. If I get a detached house, I will get a drum kit.


4. I gave up smoking nearly three years ago.


5. I can levitate, but not all at once.


6. I can't play golf.


7. 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:

1. Henny Swan

Twitter Focus

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.

Contents

• Twitter Accessibility


• Similar Functionality; not an Equivalent


• Finding a Solution


• Installing the Greasemonkey Script

Twitter 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 Analyser

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.

Hello, World

Hello, World:

Today is the 36th annual World Hello Day.

The idea is to encourage world leaders to use communication rather than force to settle conflicts. Participate by simply greeting 10 people today.

Hello, world.

Hello, World

Hello, World:

Today is the 36th annual World Hello Day.

The idea is to encourage world leaders to use communication rather than force to settle conflicts. Participate by simply greeting 10 people today.

Hello, world.

WCAG 2.0 Moves To Proposed Recommendation

So the big news of this week wasn’t the result of the US Election, it was the news that the technical material of the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) has been completed and real world example implementations have been provided for all of the guidelines / success criteria. This is great news and means that WCAG 2.0 has now moved on to being a W3C Proposed Recommendation.

The next, and final stage for WCAG 2.0, is final publication which is expected to happen in December 2008. We will then have a modern, stable set of guidelines to reference as an alternative to the ageing WCAG 1.0.

Further Reading

• Overview of the WCAG 2.0 documents


• Latest news from the Web Accessibility Initiative (WAI)