The web has grown a lot over the past 20+ years since it became available to the public. With this growth the visual experience for users has matured as well. Sometimes we forget how different sites used to be but taking a look at Space Jam always reminds me how much more complex sites have become. Javascript, CSS, and newer HTML5 APIs have taken visuals and functionality to a whole new level. With so much power and style available these days, the world of accessibility often gets lost in the process.
A Little Bit of Backstory…
508 compliance was set up for federal agency sites but there weren’t true laws determined early on for commercial ones. The World Wide Web Consortium (W3C) formed the Web Accessibility Initiative (WAI) to put in accessibility guidelines for developers. However, the WCAG that was set up by the organization are suggested guidelines for sites which meant most developers were lax on their compliance. Early on, the web was simpler with mostly text and not much styling beyond backgrounds and some colors. However, by the 2000’s, the functionality of site became more complex. There was a lot more use of Javascript rather than normal link tags. The lax accessibility development combined with more complex functionality caught up with some of the larger sites. Target, for example, had a class action lawsuit filed against them from the National Federation of the Blind (NFB). The Americans with Disabilities Act (ADA) was ruled to include websites whether or not they are connected to a physical place.
Common Mistakes of Content
Target missed on some of the normal 508 compliance that is fairly easy to do when doing content entry. As developers we handle a fair amount for site setup but it needs to be coordinated effort with the client as well. If you are doing content for your site here are some aspects you don’t want to overlook.
-
Alternate Text - One of the most common missed items are image alternate text attributes, ALT. For those that are visually impaired it is good to have a description about the image. <img src="image.jpg" alt="CHD96882" /> may describe the image number on your camera possibly but it doesn’t actual go into details of what the image is about. Make sure to write about what is happening in the image or at least the relation to the rest of the content around it.
-
Another aspect to think about for alternate text is for videos, animations, and audio clips. Closed captioning for videos is one approach, but sometimes the simplest approach is to have links to a separate transcript page.
-
Incomplete messaging - Have you ever put in a button or anchor that just says "Click Here", then you probably are a culprit of not explaining the full messaging of what is going to happen. Visually the alignment might make sense next to something else on the page but the question is whether a screen reader will read both of the aspects close enough together to get the same point.
-
Image Maps – The best advice is to avoid using them, if you can, since they can be a bit confusing to those who can’t see the interaction. However, if you don’t have many options at least again add alternate text to each area shape of the map.
Compliance Versus Usability
Following the 508 rules and/or WCAG guidelines will definitely make your site more accessible to all users. However, do note that both of these aspects, especially 508 rules, can be a bit vague and are really the bare minimum a site administrator can do. If you mostly just handle content there is a limit that you would have control over, but during the site planning or graphic reviews there may be decisions you can make to make the site less or more easily usable for all audiences.
There are many out there, but the most common decision that reduces the usability of a site is about slideshows/carousels. The functionality itself isn’t intrinsically problematic for users, but as soon as you add in auto-play, things go downhill fast. Something that most developers and users can’t easily recognize is the relative time of others. For those who can see or have full motor skills, going through a visually well-built site may take little time at all. Many things are a quick mouse movement or tap away but not everyone can use those aspects to interact. To get a little bit better of an idea, try tabbing through your site. Or try using ChromeVox if you have Chrome available and go through the site. You’ll notice getting around can take a lot longer.
With that in mind, let’s think about auto-play. As a visual user you can probably see when the information of your slideshow is switching. You can move you mouse straight to an item and click on it or go back. Now for a person who can’t see the site and is using a keyboard to get around the content as it is read to them, they won’t know that a slide or two has passed before they even get to the slideshow. They now arrive to the slideshow and start to hear the related text for the current slide and in the middle of it the reading stops and now something completely new is being read. The slideshow just rotated before they could process the content. Maybe some extra pause functionality can be added or a longer time to the auto play can be introduced. The main thing to notice though is that compliance is followed, but usability is still lost.
With the growth of the web, this is the tip of the iceberg for accessibility discussions. 2015 development of websites is definitely at a different level than 1993 or even the 2000’s. New technology is coming out at a faster pace than ever. Web Apps are becoming common with complex AJAX one page sites. HTML5 canvas elements are taking over the Flash experiences of the past. Video usage is becoming more prevalent than ever. Javascript usage is extremely high and it’s rare to see any sites not using it. So as you might have guessed there is a lot to account for to make a truly usable experience for all users.
Difficult to Determine ROI
I think we all recognize that the return from spending a lot of resources to go beyond the minimum guidelines would be hard to quantify. This is the tough balance to weigh and as developers we can work with you to help figure out the costs and potential benefits. You might think that we can rule out the extra work and treat it as graceful degradation, like a user on IE8 viewing a modern website. IE8 users don't get as beautiful of an experience because it doesn't support everything modern browsers do. Since IE8 users are often an extremely smaller user group for sites, there isn't much return on going beyond the minimum functionality needs. At first thought, most people will go to their analytical products to determine how many users would be influenced like in the case for IE8 users. Unfortunately, finding out how many users are using screen readers or other hardware/software on your site is not an option. Google Analytics or Omniture can only really gather information from the http headers and interaction by the user. You can’t tell if the user is using JAWS or a braille reader... well not really well. Also, an impaired user can’t change their situation like the IE8 user could upgrade or use a different browser.
The good news is that making things more accessibly friendly often helps all users. The slideshow example from before is proves this well, because auto-play can be annoying to any user. It’s pretty safe to guess that if you are forcing a user to do something they won’t care for it much. With auto-play off, if a user wants to read the current slide they have as much time as they want. If they want to move to the next one, previous or next buttons work for everyone. Adding in keyboard strokes makes it easier for visual users as well. Adding in text cues to explain how the slideshow works would help all users regardless of how they interact with a site. And in the end, if you need to show a lot of banners with equal weight maybe a slideshow isn’t even the best option.
The first step for now is to determine if your content is missing the minimum needs of your site. From there, with the right planning and guidance the work put into the site benefits the experience of all users. Your site will avoid any negative attention or suits while also potentially increasing the user base.