HTML Code Graphic - design by Lorelle VanFossen.

How to Code POUR-ly

Web accessibility is huge; especially with such a large percentage of the world’s population being considered “disabled” it is important to make your website as accessible as possible. Lack of patience for a few extra lines of code is quite lazy, when the end result is so critical. Here’s a few tips on how to code POUR-ly and make your website accessible!

Let’s look at few things you can do specifically in the code of your site.

  1. Properly formed HTML links: All links and URLs should be wrapped in anchor tags and have a title.
  2. Proper Image Formatting: All images should have an alternative text for screen readers to describe the image. They should also have width and height parameters in the IMG HTML tag so that the page loads accordingly even if the image cannot be displayed.
  3. Emails are Mail-to Links: Your email addresses listed on your site should be mailto: hyperlinks, not just plain text.
  4. Proper Text Formatting: Bold text should be made so with the “strong” tag and italic text should be made so with the “em” tag. If you want text to be bold or italic but not be read different by screen readers you can use a “span” tag with the “text-decoration: bold” attribute as an example.
  5. Intuitive Mouse-less Design: Theoretically you should be able to do anything on your website possible with just a keyboard. Lots of stuff you can think about here, but the most important is probably the tab-order of your page; form-fields and links especially. The “tabindex” attribute should be used within anchor or form tags if you have a lot of tabable items. Testing your tab order is very important.
  6. Jump Links: Long pages, such as legal pages or FAQs, should have a table of contents at the top with jump links within the page to the specific section, and then a jump link at the end of each section to get the user back to the table of contents. This aids the user experience tremendously for long pages. Don’t make your visitors scroll a mile!

These are some of the big things to think about when coding for accessibility. I hope this helps outline some of the things you need to be thinking about while developing websites!

For More Information on Web Accessibility

Advertisements

10 thoughts on “How to Code POUR-ly”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s