Importance of Accessibility

Aside from being a federal and state requirement, making your web pages accessible is also good practice. Not only are they easier to use for people with disabilities, they perform better on search results and provide information in an easier way for visitors.

Tips for Improving Accessibility

There are a few easy areas to tackle when talking about accessibility. I have broken them down into four sections below: Text, Links, Images and Graphics, and Tables.

Text

Text refers to the written words on your page. Too much text can be a bad thing, but sometimes may be necessary. Use the following tips when working with the text on your page.

Use Headings to provide page structure

  • Create an outline for your page and use headings to describe what each part is about.
  • Use Headings in the correct order, starting with Heading 2 (H2) through H6.
  • Don't skip heading levels (H2->H5); use them in order.
  • Don't use them for decorative purposes.

Use Font Styles appropriately

  • Keep default font sizes - making all of your text large may be easier for you to read, but the fonts are set up on the site to work on any device, not just the one you use.
  • Don't bold all of your text, even though you may think it makes it easier to read. This is, in essence, yelling at the user. 
  • Bold is used to indicate importance in regards to surrounding text or items.
  • Emphasis is generally used to indicate the stress of a word within a sentence.
  • Use default colors. Otherwise, the contrast might not be good enough for people with color or other vision disabilities
  • Don’t use color to differentiate between things. (“Items in red are required”)
  • Never use underline. This is universally known on the web to represent a link and can confuse users.

Use bullet points to quickly convey information

  • Bullets are great for long pages full of information – just give them the important stuff first.
  • They also help separate one thing from another.

Clearly identify actions that need to be taken

  • If the goal of a page or a section of a page is to get the user to do something (like fill out a form), make sure that is clear and stands out.
  • There should not be too many actions on a page; one is best.

Don't center text

  • When text is centered, users with visual motor or cognitive disabilities might have a harder time reading your content, as they now have to figure out where the next line of information starts

Keep jargon and acronyms to a minimum and keep reading level in mind 

  • Visitors to the site might have different reading abilities and may not know all the words, phrases or acronyms that we do. 
  • Speak as plainly as possible, shoot for an 8th grade reading level.

Links are what make the web great. They connect information across pages, sites and around the globe. There are a few best practices to use when creating links.

Make link purpose clear from the link text

Make the link distinguishable

  • Make sure the link looks different from surrounding text. Don't make it the same color and style as all the text around it. That way, users will know they can click on it.

Provide file information

Images and Graphics

Pictures make things pretty. Graphics can explain things that are hard to put into words. But if you can't see them, how is that information still being provided to the user?

The content of most image files, including .jpg and .png formats, cannot be identified by assistive reading devices. That means someone with a visual disability may not be able to read any words contained in those files.

Only use images that do not convey information

  • Visitors should not have to see or read the image to be able to get the information.
  • Do not use pictures of event flyers or of text unless they are accompanied by the same information elsewhere, or the information is provided in the alt text of the image.

Use thoughtful text descriptions

  • Each image should have a description (alt text) that describes what is in the image.
  • It is easy to use simple words like image or picture for your alt text, but that is bad practice and breaks accessibility – and it is mean to the user.
  • If you are using an image as an action (using a picture that looks like a button), then the alt text should describe the action

Describe diagrams in the body of your text

  • Diagrams cannot be typically summarized in an alt tag. Instead, give a better description in the body text.
  • Tell the user the title of the diagram and that the description can be found on the page.

Skip the .gifs

  • I know, they're fun. But they are also an accessibility nightmare. Unless they can be described in very simple terms, don't use them

Tables

Tables are useful for organizing standardized information in to readable format. Unfortunately, they are tricky to use correctly, but easy to misuse for other things.

Tables are only for tabular data

  • This means that the information is structured, and each row or column is representing a facet of information.
  • Do not use tables to layout elements on your page – such as putting a picture on the left and some text on the right.

Use header rows and cells to describe data

  • In order for a table to be accessible, it should have header rows that describe each column of data.
  • Provide a caption (title) for your table.

Avoid complex tables

  • Tables with complex column and row headers and nesting can be very trick to make accessible and can be confusing to the user.
  • Break up complex tables into smaller tables, or see if there are parts you can remove.
Back to Top