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 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 setup 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. When Assistive devices read bold text, they speak in a different tone/volume
- 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 contrast might not be good enough for people with color or other vision disabilities
- 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
- Great for long pages full of information, just give them the important stuff first
- Helps separate on 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 you 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
- Do not use "Click here", "This link", or the URL for a link. Visitors should understand
what a link will do from its text.
- "Click Here to download our brochure" does not provide information when the surrounding text is missing. This should instead be "Download our brochure"
- Long URLs as a link are also bad as they do not provide any information about the
link, and with screen readers, every word or letter is read aloud to the user.
Check our Admissions Requirements here: http://www.deanza.edu/apply-and-register/apply/admission_requirements.html could simply be Check our Admissions Requirements
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
- If you are linking to a file download, provide the type of file in the link text:
"Download our brochure (PDF)"
Images and Graphics
Pictures make things pretty. Graphics can explain things that are hard to put into words. However, if you can't see them, how is that information still being provided to the user?
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.
- No pictures of event flyers or of text unless it is accompanied by the same information elsewhere or 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 put in simple words like image or picture, but that is bad practice and breaks accessibility, and 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 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 a header row, with break them up to smaller tables if possible that describe the 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 to smaller tables or see if there are parts you can remove