Accessible FontAwesome Image Buttons

FontAwesome is a cool resource to use in web development. As its name suggests it is a font (like webdings/wingdings), except it has images that are actually useful. Some icons include edit, delete, email, save, lock, comment, search, facebook logo, etc. But since it’s a font some may wonder how to use it in an accessible way. Here is an example of an edit button:
Some of the classes being referenced are:
This example places an edit icon on an empty BUTTON tag with the fa fa-edit classes. I have also included CSS to remove the browser styling related to the BUTTON tag. Within the button tag is a SPAN tag with the value of Edit. It, however, is floated off the page and can only be detected by screen readers. The reader should say Edit Button. If CSS is completely disabled the image will not be shown but the text won't be hidden either. You are still left with a button whose purpose is understandable!

Read More

Alternative to Using Tables for Layout

Most developers are familiar with tables and how they behave. They have relied on them heavily in the past to display data as well as templating and design. But as we learned in my previous post you are no longer encouraged to use them for layouts. You should use CSS instead.

When I first started dabbling with DIV tables I used the CSS float property to mimic cells. But in many situations that method forced me to be overly specific on the heights and widths of my cells. It seemed to be two-times the work. Also vertical alignment and centering was much more difficult.

But luckily CSS3 has a solution for us with the DISPLAY property: table, table-row and table-cell.

In the following example I have some HTML:
And when you include a little CSS:
Above, I am showing how to easily center a table with auto-sized columns and rows based on the content. I’m also vertically and horizontally aligning a cell with ease. Heights and widths were not required. The height that was set was only to demonstrate vertical-alignment.

The CSS display properties work in all major browsers. They became fully functional as of IE9 but can work in IE8 with an additional meta tag. See this post for more information. IE8 was released on March 19, 2009 and IE9 on March 14, 2011.

Remember that it is just as bad to use tables for layout as it is place tabular data into a DIV table. Tables still have a purpose! If you are confused on when to use each then you may find a better understanding in my previous post.

See a DEMO.


Read More

When and How to Use Tables

If you are web developer then you have probably heard at some point NOT to use tables for layout. This has to do with best practices for website accessibility. But what really are the rules? The WC3 defines the table model as follows:

The HTML table model allows authors to arrange data — text, preformatted text, images, links, forms, form fields, other tables, etc. — into rows and columns of cells.
On the same page it also mentions that you should not use tables for layout:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.

With that being said, it is perfectly fine to use tables for textual data that can be organized into columns and rows. It is also fine if hyperlinks or image-links are included with the data (i.e., email links). Tables can also be used for input as well. Feel free to use textboxes, dropdowns and other form elements if they all tie to a single record of information.

So what about headers? Are they required? They are required if you are adhering to Section 508 standards for web accessibility:

(g) Row and column headers shall be identified for data tables
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

The presence of table headers help eliminate confusion for both visual and non-visual user agents. The "markup" mentioned above can be performed as follows:

Table Header or <th> cells have a scope attribute. It tells the screen reader whether the header is for a column (col) or for a row (row).

Table Data or td cells have a headers attribute. It contains the id(s) of any <th> cells that apply to it, delimited by spaces.

Scope and headers fulfill the same function so you can choose one or the other. While screen readers may correctly guess whether a header is for a column or row based on table layout, clarifying with one of the above methods makes this unambiguous. However, Section 508 demands the markup if multiple headers are involved.

Abbreviations can also assist in markup:
They can be used for clarification, space-saving (for minimalistic user agents), and repetitive rendering (i.e., speech synthesizers may restate the <th> abbreviated value before reading each associated <td> value).

Hopefully this helps clarify some questions and aids in future development.

Read More

Hidden Accessible Fieldsets

It is good to group checkboxes and radio buttons for accessibility purposes.  The fieldset and legend elements allow developers to group related controls and labels.  Grouping elements make it easier for users to understand their purpose.  Screen readers will detect fieldsets and inform the user of their purpose via the legend tag.  Keep in mind that an elaborate interface may not transfer logically to someone using a screen reader.   With CSS you can cater to both worlds.  You can utilize fieldsets but also hide them if they are not visually pleasing.  A hidden fieldset is completely detectable by a screen reader.

Here is a snipplet of CSS that will hide the fieldset and remove the legend indent.
If you want to hide the legend as well then alter the CSS as so:
See a DEMO


Read More