Articles in The 'Accessibility' Tag

An Overview of Optimizing Your Web Pages for Speed

by Jordan Sandford

As long as the Internet has been around, long before search engines came on the scene, speed optimization was an oft-pursued goal. Whatever made the user wait the least time for a page to show on their monitors would be employed. Now, search engines are measuring load time for pages and using this metric to help determine quality. Even in the age of high speed internet, page load time is both an SEO issue and user experience (UX) issue. In addition, not all high speed connections are the same “high speed.” This difference is noticeable depending on your proximity to urban areas and internet connection type (fiber, DSL, cable, satellite, etc.)

In my first post in this series on speed optimization, I will provide some general areas where speed optimization can take place. In other posts, I will discuss some tools that can help in this effort.

I’d like to make some comments before I start. Depending on the current state of your website or web pages, making just one of these optimizations may not be apparent. Making several optimizations, however, should cause a noticeable change. It’s a good idea to fully understand these suggestions and match them to your site (consider your site’s type, size and daily/weekly traffic patterns) before implementing them, because you may actually end up slowing your site down instead of speeding it up.

General areas for speed optimization

1. Remove unnecessary HTML code (or, using techno-speak: remove unnecessary DOM elements).
   As an example, you don’t need a DIV as the only tag inside another DIV. As another example, you don’t need tags like DIV or SPAN sitting around with nothing inside them. Removing unnecessary HTML decreases “code bloat,” makes the browser display the page faster (a.k.a rendering time) and increases content-to-code ratio, which helps your SEO efforts. You want the search engines to have to sort through the least amount of code to get to your content.
2. Use the least amount of websites to serve content (a.k.a. host names).
   Examples of different host names are: www1.mysite.com, www.ebay.com, www.mysite.com, mysite.com, www.youtube.com. The benefit is that every time the browser needs to find the internet address of a new website, it takes some time. The less address look-ups, the faster the page will display. Note: This is more applicable with images than with video and other web services like Google Maps, YouTube and Twitter.
3. Move as much CSS and Javascript to external files as possible. This also helps with your content-to-code ratio and helps separate the content from the programming.
4. Use the least amount of external files as possible.
   Any time a file is requested from a website, the browser has to wait for the request to go all the way to the server and then wait for a response. In addition, there is always a bit of “meta” information about this communication that must be transmitted as well.
   Here is an example: you may have 10 different external Javascript files that are responsible for different things on your site. Consider merging them, either using an automated or manual process.
5. Optimize all files, including images, videos, PDFs and Flash files.
   Don’t forget to optimize text-based files such as CSS, Javascript, HTML and XML files by removing empty lines. Especially useful on Javascript and CSS files, “minifying” removes all unnecessary spacing. This causes the file to be the smallest possible while allowing browser to interpret the file correctly.
6. If you have a lot of media content and a lot of traffic, use specialized servers that are tuned to serve specific types of content.
   These servers are part of systems called content delivery networks, or CDNs. A well known CDN is owned by Akami Technologies, and is used by large websites such as CNN. A more likely option for an average site would be Amazon’s CloudFront (read a review of CloudFront by CMSWire.com: Amazon Launches Cheap CDN for SMB Web Publishers).
7. Even if you do not use a CDN, consider properly adjusting cache and compression settings in your website.
   Caches settings, when used properly, help the browser re-download content only when it has changed. Compression settings allow the transmission of the files to be faster, since the file will be compressed when in transfer, but uncompressed after it gets to the web browser.
8. Limit the use of HTTPS.
   HTTPS is a secure communication system used when transmitting sensitive and personally-identifiable information back and forth to websites. This is extremely important for many sites that use sensitive data and want to maintain a high level of customer trust, but serving content via HTTPS is slower than by HTTP, so make sure your site only uses HTTPS where it must.
9. Try to limit the amount of redirects needed between when a user clicks a link (or types a URL) to when they see the page.
   Redirects can cause slower load times, but many times are the only answer for various problems, including SEO issues. All redirects cause the “meta” information, mentioned in item 4 above, to be transmitted, regardless of whether any real content is transmitted. When redirects occur, especially multiple redirects, time is wasted when the browser has to wait for the real content to be transmitted.

These items do not encompass nearly all areas in which speed optimizations can take place, but they should be a good start to the concepts I will discuss some future posts.

Implementing Advanced Accessibility

by Jordan Sandford

After a hiatus, I’m back to give you what I promised: a discussion of advanced tips to help increase your site’s accessibility. One important thing I mentioned in my last post is that if you design or optimize your pages with accessibility as a goal, you may not only gain more visitors, but you will be helping your SEO efforts a great deal.

Keep in mind also, that accessibility not only includes catering to people with disabilities, but to people using non-mainstream browsers. This can include Web TV, Playstation or Nintendo Wii consoles as well as the large variety of cell phone browsers and other operating systems such as the Mac OS and Linux. All these varieties of browsers (most of the modern browsers anyway) endeavor to support the web standards, and the best way to cater to all of them at once it to support web standards in your front-end code (this includes HTML and CSS) and make sure your Javascript is error-free.

I validate (X)HTML and CSS code using the W3C validators. For HTML validation, visit http://validator.w3.org. I typically use the Validate by URI or Validate by Direct Input tabs, and before I run the validation, I make sure Show Source is checked under More Options. This helps to quickly jump to the line of code the error reports mention. You also have the option of listing error messages sequentially or by error type. Be sure to check out their list of error messages and their interpretation page because the error messages aren’t the easiest to understand.

To validate CSS, visit http://jigsaw.w3.org/css-validator. This tool will validate both CSS-only files and HTML files with CSS embedded.

It often happens in web development (and I believe in other industries as well) that increasing the user experience for disabled visitors increases the user experience for non-disabled visitors. One example of this is when you are creating forms (i.e. places that allow the user to enter information and submit their information to you.)

The current version of HTML (4.01) provides several notable features for user experience enhancements of forms. There is the tabindex attribute that allows the user to use the tab key on the keyboard to navigate sequentially through the entire form without using a mouse. The accesskey attribute is similar to the tabindex, but allows the user to instantly get to a text box (or any input area of the form for that matter). There is also the label tag that makes using forms easier: without the label tag, the user will usually have to click (barring the use of tabindex or accesskey) on the input (i.e. any form area that allows the user to enter information or choices into the form). If the input is small (especially relevant to radio inputs, the small circles that allow multiple choice questions), it can be hard for some users to position the mouse precisely enough and hold it still when they click the radio inputs. This may sound far-fetched, but I have witnessed this personally when training people on basic computer skills. The label tag is designed to allow the text describing the input to be clicked on which then activates the input. One easy way to use the label tag is like this:

It will look like this in a browser:

Now when a user clicks on “25 pounds,” the appropriate radio input will be checked.
Another accessibility tip for your web site is especially relevant if you are using any type of Javascript. First, always use the noscript tag, which, in the words of W3C, “allows authors to provide alternate content when a script is not executed.” Also, as websites are using more and more Javascript, what may often happen with browsers that are set to not use Javascript or browsers that cannot use Javascript, is that basic abilities to navigate the site become broken. For example, a user may not be able to go forward or backward in their history when clicking on a Forward or Backward button on the web page. Javascript may become so obtrusive that some web sites, even when viewed in browsers with Javascript enabled, will “break” the browser’s own forward or backward buttons. For more information about obtrusive Javascript, see the A List Apart article, Behavioral Separation.

I mentioned the Web Developer Toolbar in a previous post and want to briefly show how to use a few features.

First, you need the Firefox web browser. Visit www.getfirefox.com to download and install it.

Then, use Firefox and visit the page for the Web Developer Toolbar, https://addons.mozilla.org/en-US/firefox/addon/60.
To show the alternative text of any images, click the Images button in the toolbar and choose Display Alt Attributes. Also under the Images button, you can choose Disable Images > All Images to get a good idea of how well your page conveys its non-textual images.

To disable all CSS on the page, click the CSS button (two buttons to the left of Images) and choose Disable Styles > All Styles.
I look forward to seeing your fresh, new and accessible web pages soon. I hope this series has been informative and usable.

Implementing Basic Accessibility

by Jordan Sandford

In my last post I discussed accessibility and the web and gave some good reasons why you should deliberately include disabled users as part of you target market.

As I’ve suggested previously, when you design your pages with accessibility in mind by using current web standards, you will go a long way toward enhancing the SEO quality of your pages as well. In addition, you also increase the flexibility of your HTML code to allow more complex and forward-thinking visual and interface design.

One important suggestion is to first design your pages and site as a whole without any styling applied, i.e. black text on a white background. To clarify, do not use any CSS, whether it’s inline or in it’s own file, but do use appropriate and current HTML tags in a semantic, consistent manner.

Don’t forget that you need to choose a DOCTYPE declaration and place it at the very beginning of the HTML document, before the tag. Make sure the HTML you use is supported by the DOCTYPE you plan to use. A good resource about DOCTYPE declarations is the A List Apart article, “Fix Your Site With the Right DOCTYPE!”

The reason I’m suggesting that you don’t use special styling or formatting at the beginning is so that you can make sure that the content on your page can be quickly glanced over and understood using only the formatting the browser supplies to the various tags (e.g. the h1 through h6, the ul, the a, the table and caption tags). With no special formatting applied, all the content will flow down the page, one section or tag after the other. This will ensure that assistive devices will have a much easier time understanding what you meant. Ask another person to identify the different sections of your page, such as the main and secondary navigation, header, side bars, main content and so on.

The next suggestion goes hand-in-hand with the previous suggestion: you need to be able to understand the content of all imagery on the page even after having turned off images. One easy way to turn off images is to download the Web Developer Toolbar add-on for Firefox via MoreVisibility’s Online Marketing Tools & Resources page. The Web Developer Toolbar also allows you to easily turn off all styling in a document.) For all images and/or media that is part of the content of the page, there should be a matching textual description. For regular images, you must at least use the “alt” attribute. Additionally, you can choose to use the “longdesc” and/or “title” attributes to help parlay the meaning of the imagery.

Consider using closed captioning on any videos. You can add closed captioning to the YouTube videos you want to embed in your pages. This does not take the place of a textual description in the HTML of the video, but adds to the interactivity, especially if the viewer is deaf or must play the video with no sound. The sentences in the closed captioning can be set to show during the appropriate time in the video, increasing receptivity and comprehension when compared to the entire script of the video being read before or after the video plays.

My last suggestion is that you validate your HTML using a validation engine, specifically the W3C validator. This will help to make sure that you are not using any obsolete or non-standard coding that might trip up assistive devices such as screen reader.

Please come back and read my next post in which I will give tips on adding accessibility to more complex pages.