CSS and page breaks

It seems the key to page breaks (causing them or avoiding them) is to style your element with “display:block;”.

For example,

.listItem {
height:11em;
page-break-inside: avoid;
display:block;
}

Adding display:block fixed my page break issue and now the printer no longer cuts the list item.

Wrapping PDF inside Flash, the ultimate in inaccessibility

Portable Document Format (PDF) files are often inaccessible. The text you see when the file is displayed is stored as a raster image instead of as machine-readable text. You can’t copy and paste the text, a screen reader can’t audibly speak the text, and you can’t search the text. While a PDF is probably a good way to share a text document when you want to ensure formatting and images remain unmodified by file conversion or different versions of software (I’m thinking about Microsoft Word documents), at least the text document is inherently accessible and will always remain so.

Now there’s a trend online to share PDF files within Adobe Flash viewers. They’re websites like DocStoc, SlideShare and Scribd. Flash is inaccessible – blind and visually impaired people can’t interact with it. It’s really that simple. If you want to share textual information, don’t use Flash, and don’t wrap a PDF in Flash – let people download it and use their preferred viewer, whether it be Apple’s Preview, Adobe Acrobat, or Nitro, Cute or Foxit. Try avoiding PDF altogether; if you can’t read my tips below.

Look at this screenshot of a PDF document inside a DocStoc Flash viewer. The screenshot shows the entire web page – imagine your screen is this tall. Notice how much of the screen space is dedicated to viewing the PDF. Then pay attention to how much space the many ads occupy. Not only is the text inaccessible, you have a poor document viewing experience.

If you’re going to stick with PDF, make sure you use Adobe Acrobat Professional so that you can run an Accessibility Check and make changes to the document. Professional also comes with an Optical Character Recognition (OCR) function that reads images and converts them to text. When people scan documents, they don’t run the OCR function and the scan is only useful for well-sighted people.

Why you should outsource comment management

I outsource blog comment management on Steven can plan to Disqus.

Analyzing my own behavior about commenting on blogs, I recommend that you, too, outsource your comments to Disqus or IntenseDebate.

Here’s why: It makes commenting SO MUCH FASTER AND EASIER.

For people registered on Disqus, your login follows you from site to site and you don’t have to input your credentials (blog, email, name) each time. You maintain your profile on Disqus’s website. For people not registered, they can easily connect their Facebook or Twitter account on a per-comment basis. They can elect to use their OpenID provider. Using a profile maintenance service (like Facebook or Twitter) increases the commenter’s credibility, links back to their own web properties while at the same time making commenting SO MUCH FASTER AND EASIER.

Sorry, I haven’t tried IntenseDebate so I can’t compare the two for you, but I can say that the only issues present with Disqus are the rare downtimes. Their WordPress plugin, though, deals with this gracefully, going back to the original WordPress comments system when Disqus is down.

I think LiveJournal works well partly because of the community centered around leaving comments and the way users manage their comments: Most LiveJournal users lock their entries so only other registered users can leave comments.

In common with bike paths, snow shoveling, and web design

I’m a web designer (and a member of the bicycling brave and few, I guess).

I like to say, “What’s good for blind web users is good for all users” (I first said it here). Increasing the accessibility of a website to meet the needs of a blind or visually impaired user increases the *usability* for all remaining users. This is because you try to make your web pages easier to use for those who need your pages’ annotations and their tools to browse web sites. You end up making it easier for all users because you took something that was probably hard to use (or had many barriers to convenient use) and spent thought and time on re-coding or rearranging information. Websites can also be made accessible from launch day.

What does this have to do with bike paths and snow shoveling, though? Streetsblog pointed out that we often see our roads cleared of snow, but rarely see adjacent sidewalks clear of the white obstruction. Many people choose to risk walking in the street (to avoid slipping). Think of the implications made for people with assistive walking devices or in wheelchairs.

A plow clears the bike lane in Copenhagen, Denmark, similar to what’s done in the Netherlands.

In the Netherlands, the government shovels snow and salts to prevent ice formation. Wow. And then, what does this mean for people using walkers or wheelchairs? They get to travel safely, like the bicyclists! Bicyclists (those brave and few!) in the U.S. get studded tires, fatter tires, or walk their bikes.

Designing accessible websites: Use tables instead of CSS

Many web designers seem to be abandoning tables and using Cascading Style Sheets (CSS) to layout information in a visually identical way. But tables increase the accessibility of tabular information for blind people* using screen readers because they can more easily scroll, page, tab, and move around in the data.

Web pages are created using HTML, the web’s markup language. Like any markup language, it contains hidden tags about unhidden information. Webpages with well-tagged information are advantageous for blind people using screen readers.** Tables are no exception. The TABLE element of HTML has several tags and attributes used to describe a table, its layout, and the data it contains. Tables are a standard way in HTML to describe tabular data. There is no standard way in CSS to display or describe tabular data; crafty web designers can use CSS to simulate tables, but only visually.

1. The first tag is <table> which creates the table. But in this tag, designers should add attributes that describe the number of rows and columns (“rows,” “cols”). How this is helpful: A blind person may be looking for a table that contains information on all 50 states, but if the table has less than 50 rows, then they can avoid spending time reading this table and move on to find another. In the JAWS screen reading software, there is a function that allows the user to jump from table to table.
2. The second tag to use is <th> to create a cell in a row. The <th> tag is different from the <td> cell-creating tag in that it describes a header. Writers and publishers (web designers included) often make headers larger or bolder than the subordinate text to indicate the header texts’ significance. But only sighted people can notice these cues. Screen readers will notice the <th> tag as a column heading and the user can pan the columns until they find the column they want – this is especially helpful when the web designer has tables in pages without heading text (probably not a good idea) or uses tables to organize the layout of a page (which designers should avoid).

This screenshot “shows” (many are hidden) several elements of accessibility in a webpage I designed for work. For example, the map is a graphic element that blind users can’t see and screen readers can’t describe. A table below the map describes the information seen on the map and takes the user to the same webpage (with detailed information) as the map markers. The table’s first row uses the <th> tag to indicate the row contains important column headings. Also, the table shows tabular data and the webpage does not use tables to organize the layout of the webpage.

In all HTML layout tags, designers can add a “title” attribute that screen reading software will notice and read to the user. Titles should describe well the information in the tagged text or the text immediately following the tag. Use the “title” attribute on these tags: <table>, <div>, and <a> (to describe links). Multimedia should ALWAYS have the “alt” attribute that describes the graphic (essentially a hidden caption). This is also helpful for people who browse with images turned off, or when your server fails to display the image.

*What is good for blind people is usually good for sighted people.

**A screen reader is software that reads text and commands sighted people would see on a computer monitor, but also reads text and commands that are hidden. With HTML and CSS, web designers can give information and commands in hidden code that speak to blind users. An example of this is a link that enables the user and their screen reader to jump over information to a predefined point, like a navigation area, skipping the introduction text.

Coding in PHP: Save time by using shared code

PHP is a beautiful programming language for the web. It powers most of the world’s dynamic websites. Facebook uses it. WordPress uses it. With a trillion lines of code out there, it’s likely that someone has already written the code you need to create the feature you want.

There are several places to find this code and download it so you can install it in your project. In order of simplicity:

1. PHP Snippets – Many websites are repositories for short pieces of code. They usually create simple features and don’t require extra libraries or classes. Just copy and paste and modify a parameter or two.
   • PHP Code Snippets
   • PHP snippets
   • PHP Snippets
   • PHP Builder: Code Library
   • Drupal: PHP snippets
2. PEAR – PHP Extension and Application Repository is only simple when you have command line access to your PHP server and know how to use the command line, or you have access to your server’s Control Panel (like cPanel) which has a GUI function to automatically install PEAR components. PEAR components have a common code format and folder structure and should all be installed in the same folder.
3. PHP Classes – Classes are just like PEAR components, but without the easy installation method or commonalities. However, you’re more likely to find a PHP class that does what you want than a PEAR library that does what you want.

Twitter widget customization and CSS overrides

For Steven can plan, I wanted to override the CSS styles that were being applied to the Twitter widget I installed (Twitter Widget Pro). My WordPress blog’s theme had a stylesheet that made every link in a widget exist in a block (meaning it sits alone on its own line).

I thought that if you just added a new class selector style in the stylesheet, the browser would apply the style  most recently defined. I thought it worked for me before, but it was not working now. I found this post on CSS Tricks and the solution was clear and IT WORKED:

font-size: 24px !important;

Snippet: Subscribe to category’s RSS feed

On my urban planning blog, Steven can plan, I wanted to add a link the category’s RSS feed when the category page is viewed. Here’s the code for that.

In your theme’s index.php page, insert this code inside the IF(is_category) statement:


// get the current Category so we can get ID and Name
if (is_category()) {
global $wp_query;
$cat = $wp_query->get_queried_object();
}

// Build the output values
$name = $cat->cat_name;
$rss = get_category_feed_link($cat->cat_ID,'rss2');
$atom = get_category_feed_link($cat->cat_ID,'atom');
$link =get_category_link($cat->cat_ID);

// Show the output
$output = "Subscribe to <a href=".$link.">".$name."</a> posts: <a href=".$rss.">RSS</a> or <a href=".$atom.">Atom</a>";
echo $output;