#TBT – Big Red Angry Text

This was an article I wrote back on July 16, 2006 for Accessites. While the references are quite dated, the concepts of a standards-based design and teaching users to code properly still apply today. Enjoy 🙂


As a standards compliant designer supporting an Intranet environment, it gives me a good feeling to create a fresh, new, standard compliant design for a client to replace an older, deprecated, table-based design.

However, that good feeling can turn to dread when I revisit a site and find out that there are only remnants of my standard compliant markup remaining. As for the rest of the document, it has been butchered by deprecated WYSIWYG markup inserted by the software the editors are using. Basically, it’s hard work gone to waste and a huge step backwards.

With no current content management in place and many editors with varying HTML editing skills, I had to come up with a way that would grab the editor’s attention as well as educate on some of the effects of WYSIWYG editing.

Hence, I created a simple, but effective way to give an extreme visual example to show the editors that something has gone horribly wrong — B.R.A.T. or Big Red Angry Text

To demonstrate, I insert this snippet into the global CSS:

 /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 ERROR CHECKING
 This is to determine if deprecated elements are used. 
 If so, they should be replaced:
 1a. <font> and
 1b. <font color="xxx">…</font>: Shouldn't be used. 
 CSS should dictate font attributes.
 2. <center>: Shouldn't be used. CSS should dictate 
 horizontal alignment.
 3a. <div align="xxx">...</div>
 3b. <p align="xxx">...</p>
 3c. <table align="xxx">...</table>: Shouldn't be used. 
 CSS should dictate horizontal alignment.
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 /* CSS Begin */
 font, center, div[align], p[align], table[align], font[color] {
   color : #cd0000;
   font-weight : bold; 
   background : #eecc11 url(images/warning.gif) repeat 0 0;
   margin : 10px;
   padding : 10px;
   border : 2px dashed #cd0000;
   font-size : 2em;
}

That’s about it. Simple, effective and in your face.

As for the benefits of B.R.A.T., they are immediate. Let’s just say that I receive phone calls quite quickly about some “display issues” the editors are having.

Another benefit is that this be completely customized. If you’re not keen on big, red and angry text, you can always go for something a little softer on the eyes. If you’re a mischievous type of person, well, you can use your imagination.

Now, B.R.A.T. doesn’t only have to be used in an Intranet environment. It would be easy to apply this to any environment to give editors quite a unique visual and educational experience, assuming that you are using some sort of shared CSS. There are a couple of important things to keep in mind:

  • The div[align], p[align], table[align], font[color] selectors are not supported in IE 6.0, but should be in IE 7.
  • From the editor’s perspective, this can make for a limiting experience.
  • If your existing environment is not currently built to recommended standards and you implement B.R.A.T., you might be in for a surprise.

The process of educating editors on the benefits of a standards-based design can be tough enough to do, especially when working with various levels of HTML knowledge. This method is meant to show, educate, and be passed on to other editors for an exponential improvement on the state of web documents. As well, make for less maintenance and headaches down the road.

And isn’t that what solid, standards-based design is all about?

Future of Web Accessibility in Canada – Federal Court of Appeal Decision

The AODA has posted the full Federal Court of appeal’s May 30 2012 decision in Jodhan versus Canada. (In Word format)

As well, the Alliance for Equality of Blind Canadians has posted a summary of what it all means.

Speaks for itself.

Related Links

Global Accessibility Awareness Day

May 9 marks Global Accessibility Awareness Day.

To celebrate, I’d like to recap on an experiment in identifying external links, which stemmed from a discussion on the accessibility issues with links that open a new browser window. Originally posted 20 July 2011.

Testing external links up in here. Actually, it all started with a question from Glenda [External Link] about the accessibility of using CSS to announce a new window, based on an external link example [External Link]. Steve [External Link] was there to help. The rest is history.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id dolor sit amet quam consequat tempus. Duis ante arcu, cursus sit amet consectetur eget, accumsan sit amet nulla. Google [External Link] metus urna, egestas ut imperdiet sed, pretium in nibh. Phasellus felis dolor, ullamcorper eu dignissim in, lobortis ut libero. Donec interdum auctor suscipit. Aliquam erat volutpat. Proin libero ligula, pharetra a tincidunt sit amet, ultrices a eros. Curabitur condimentum, Google [External Link] sit amet cursus pellentesque, ligula dui pharetra arcu, non aliquet tellus libero et leo. Cras gravida congue dui, a mattis nisl congue nec. Donec in sapien neque. Maecenas Google [External Link] porttitor aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ac turpis ut mi cursus pellentesque. Suspendisse potenti. Ut sit amet sem ante, in ultrices dui.

Thank you to Glenda [External Link] and Steve [External Link] for your help on this. Just when I thought I knew everything!

CSS


a[rel="external"] {
background: url(gfx/Icon_External_Link.png) 100% 50% no-repeat;
padding-right: 1.0em;
z-index: 48;
}

a[rel="external"]:hover,
a[rel="external"]:focus,
a[rel="external"]:active {
z-index: 49;
}

a[rel="external"] .ol,
a[rel="external"]:link .ol {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: 50;
text-decoration: none;
}

a[rel="external"]:focus .ol,
a[rel="external"]:hover .ol {
float: right;
background: pink;
width: auto;
height: auto;
border: solid 1px pink;
margin-left: 1.5em;
margin-top: 0.5em;
padding: 0.2em;
overflow: visible;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
box-shadow: 0.5em 0.5em 0.5em #000;
z-index:51;
}

a[rel="external"]:focus .ol:before,
a[rel="external"]:hover .ol:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 1px solid transparent;
border-right: 20px solid pink;
border-bottom: 15px solid transparent;
margin: 0 0 0 -20px;
}

HTML


<ul>
<li><a href="http://google.com" rel="external">Google<span class="ol"> [External Link]</span></a></li>
</ul>

Is this the most accessible method for identifying external links and / or opening a new browser window? I’d love to hear your thoughts.

Happy Global Accessibility Awareness Day!

Leggo my Lego® – The Sailors

"The Sailors". In Lego®. Courtesy of Duran.

The Sailors, done in Lego®

When I asked him for a description, here is what he said:

There once was a man who drove a sailboat and his boat started sinking when he hit a rock. Then, he was underwater and found a sailor’s hat, along with a guitar.

He thought to himself “What does this mean?” He thought about it, and finally knew what it meant – that he should create a band called ‘The Sailors’.

Then one day, he found 4 other people that were also sailors. They wanted to be in a band too.

He said “Come on! I rented a stage! And there’s 500 people coming!”

So they went all over the world playing their music.

One day, someone saw in the paper that ‘The Sailors’ is the band that’s been around the world the most times and is now called the best band on Earth!

Duran

For the full set, check it out on Pinterest and Flickr

Future of Web Accessibility in Canada – Application for Judicial Review

A further update as of 17 September 2011.

The Federal Court of Appeal will be holding a hearing in relation to an Application for Judicial Review on 15 and 16 November of 2011.

This is specific to making the Alliance for Equality of Blind Canadians an intervenor in the case of Donna Jodhan versus the federal government, in regards to inaccessible government websites.

For those not familiar with what an intervenor is, it’s basically a nonparty who can assist the court in making a decision that’ll best benefit all involved by the original judgment by bringing to light other interested parties affected that may have been overlooked by the original respondent. But, I’m not a lawyer, so please correct me if I’m wrong!

I’ll keep you posted over the next 2 days once I hear more.

Related Links