Accessibility

 

Flipboard and Accessibility

Accessibility LogoI think iPad apps like Flipboard may turn out to be one of the best things to happen to accessibility in quite a while. Not because they are accessibility tools themselves, because they are not. No, this is a bonus for accessibility because it will let users who would never think about accessibility see the consequences of bad code. Good semantic code with all the style controlled by CSS looks wonderful when it's pulled into Flipboard. Poorly written code using inline styles, spaces, and other tricks to control the design don't fair so well.

A Link of a Different Color

I've been spending a lot of time reviewing websites lately. I keep seeing the same few mistakes over and over. Some of them may be intentional design choices, but for the most part they seem to be mistakes of omission. What I'm seeing is incomplete CSS for links. Incomplete link CSS does one of two things.

  1. It can allow the site's presentation to fall back on the browsers default CSS, a poor design decision in my viewpoint. 
  2. It can also be written is such a way as to be applied to all aspects of links. This would make a hovered link unchanged from a regular link.

The styling of links serves a purpose. It identifies links for the user. When a hovered link changes from a non-hovered link, it helps in that identification.

Let's start with a few basic CSS rules. Modern accessibility standards suggest that you should use more than just color to identify anything of significance. So the CSS for links should include two variations from traditional text. I'd suggest a distinct color and the traditional underline, but most any two should work.

a {color:#333300; font-weight:bold; }a:link { text-decoration:underline;}

Making visited links a slightly different color is also helpful for tracking where you've been in a site.

a:visited { color:#333333;}

I'd also suggest using the hover pseudo class to make the hover state different.

a:hover{ text-decoration:none;}

Are we done? Not quite. This is where I keep seeing sites fall short. You also need to define the active and focus states. Without definition, these will both default to either browser default or your own link CSS.

a:hover, a:active, a:focus { text-decoration:none;}

These three states can be together as shown above, or with completely different CSS, the choice is yours.

Who's your navigation for?

University website comic

A perfect example of a common navigation problem by xkcd.

Who is your navigation for?

The specific, but diverse populations within a University have  caused some horrible navigation choices. Who's your audience? If a University directs their navigation towards your students, the faculty can't find anything. If they direct it towards the faculty, the students can't find anything. That's not even considering other audiences like parents, sports fans, and potential students.

It's not a problem specific to Universities, they just make a great scapegoat. The same problem can be seen in much simpler sites. The audience the site design was targeted to, and the real audience aren't always the same group of people.

Who was your site designed for? Did you target the right audience? Do you have more than one audience? Are they different enough that it would require compromises be made with aspects of the site like navigation? In the case of Universities, they may even be diverse enough to require different site structure or navigation. State government sites can be the same way. A number of state sites have taken to dividing their home page by audience and giving each audience their own version of the home page. The Delaware state government site is a reasonable example. They use tabs for each primary audience.

It's unlikely that a personal or small business site would need to go to this extreme, but it is very possible that you're not targeting the right audience. Take a moment and pretend to be a member of your primary audience. Look at your site as if you'd never seen it before. Does the organization and navigation make sense? You might like what you see, but you might be surprised too. Good luck.

Potential Change in Web Accessibility Requirements

DEPARTMENT OF JUSTICE - Advance Notice of Proposed Rulemaking.

"Nondiscrimination on the Basis of Disability; Accessibility of Web Information and Services of State and Local Government Entities and Public Accommodations"

The department of Justice has given advance notice of a proposal to change the regulations for web accessibility requirements for State and local governments. One of the suggestions in the document is to change to the WCAG 2.0 standard. State and local governments currently are required to meet the Section 508 standard, though a number of them have chosen the more stringent WCAG 1.0 as the state standard. A change to the WCAG 2.0 standard is significant. Raising a site from WCAG 1.0 to WCAG 2.0 can in some cases be simple, but in some cases it can also require a complete redesign.Accessibility needs to be built into a site from the ground up, not as an afterthought. With sites designed around accessibility, a change may not be too difficult. When accessibility was forced onto an inaccessible design the WCAG 2.0 standard may not be within reach without a complete restructuring of the site.This may be a good time to evaluate where your site stands in terms of accessibility. Try out a tool like Cynthia Says and see how your site does. Regardless of the outcome of this proposal, I think that the focus this will bring on accessibility will be a good thing.

North Dakota's www.nd.gov

As part of my work with North Dakota Government's Information Technology Department (ITD) I with a team of people maintaining www.nd.gov. We've recently launched a series of updates, with more on the way. My part of the recent changes involved improving the basic HTML structure, the CSS, and overall accessibility. This new structure is now wrapped in a new theme for the Summer. The content and back-end work belongs to others, but the CSS and Photoshop work is mine.

www.nd.gov screenshot

Redesigned and Converted to Drupal

After a lot of thought, I've switched this site over to Drupal. I really like WordPress, and I plan to continue designing for it, but for my purposes Drupal will be a better fit. While I could have matched the new site structure to the old one, I decided to restructure. My old site map had become a little conveluted and I took this opportunity to straighten it out. I'm using PathRedirect to ease the transition, and PathAuto make the new sitemap easier the maintain.

For  those who might be interested, here's a few more details of revised site:

Accessibility - W3C

W3C has a new accessibility section. It does a nice job of unifying their accessibility content into one location. The home page has a great explanation of the three W's of accessibility. Why, What, and How. (Two W's and an H just doesn't have a nice ring to it.)

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." - Accessibility - W3C

Recovery.gov Relaunched

Relaunched Recovery.gov Fails Accessibility Standards

"It is unfortunate that recovery.gov, in its technical implementation, fails to meet long-standing, widely understood accessibility requirements."

I didn't think much of the previous version of recovery.gov, and it looks like I likely won't like the new version either. They're quite pretty, but poorly handled data tables and image maps really doesn't sound promising for accessibility.

Online Accessibility Testing Tools

Interested in testing the accessibility of your site? Here's a couple of free online tools that will get you started.

You might also try the Firefox Accessibility Extension by the Illinois Center for Information Technology Accessibility, or the Web Accessibility Toolbar by Vision Australia.

Accessibility Blogs

Webaim has a round up of accessibility blogs. Got take a look at the Accessibility Blog Roundup.

Syndicate content