10 Ways to Improve Your Site's Accessibility

Non-text elements should be accompanied by ALT text. 

By far, the most common failure in accessibility assessments at Iowa comes from images that lack ALT text.  Use short, descriptive ALT text for simple images; for complex images, use short text with a link to a longer description.  Use empty ALT text for decorative images.

Pro Tip: ALT text also applies to the <area> tag in your client-side image maps.

Learn more about ALT text

Use the <label> tag to describe every form field.

All form fields require an accompanying <label> tag.  The <label> tag, with a for attribute that reflects the ID of the form element, enables a programmatic relationship between the element and descriptive text.  Use of placeholder and/or title attributes is not a sufficient substitute for a good implementation of <label>.

Pro Tip: Use explicit labelling (<label> with a for attribute) rather than an implicit label that encompasses both the text and the form field.

Learn more about accessible forms

Place all page content within an ARIA landmark

ARIA landmarks are like a floor plan for your webpage. Users of assistive technology can move easily and efficiently through your content by recognizing header, footer, main, navigation, and other content regions, and choosing where and how to engage with your content.

Pro Tip: ARIA conveys accessibility information about all aspects of your site Get to know ARIA roles, states, and properties, and bring your projects to a new level of accessibility.

Learn about ARIA at the WAI-ARIA site of the W3C

Structure your document with correctly nested headings

By nesting your heading tags in a natural and logical outline, you can make your content easier to navigate and understand.  Don't skip headings, as this can confuse users and make your document structure harder to follow.

Pro Tip: Don't skip heading levels just to get a particular look from your text—let the document structure decide, and build your CSS accordingly.

Learn more about document headings and structure

Make sure interactive elements are keyboard operable

The visual order of the page should be reflected in the linear order.  Some authoring tools and methods generate code that causes the visual and logical order of your content to fall out of sync. Also, forms, widgets, iframes, media and other elements can present keyboard traps, where keyboard users become caught in a tab loop.  Ensure that users can pause or cancel time limits, as well.

Pro Tip: Unplug your mouse and try to use your site.  If you can't do it, your keyboard strategy needs work.

Learn more about keyboard operability

Use sufficient contrast in foreground and background colors

Good color contrast makes it easier for low-vision users to read and understand your content.  Contrast values should be 4.5:1 for text under 14 point, and 3:1 for larger text.  Use a color contrast checker to test your contrast ratio when building your color palette.

Pro Tip: In your CSS, make sure that your foreground and background colors meet the contrast ratio.

Learn more about color contrast

Use Table Headers and Table Data cells to create robust data tables

TH and TD are the bare minimum for accessible data tables.  TH should also use the SCOPE attribute to indicate whether the header applies to a column or a row.  For even more robust accessibility, use HEADERS on the TD tags to indicate that they are described by multiple TH tags.

Pro Tip: Remember to use CSS, and not tables, for layout purposes.

Learn more about accessible table structure

Indicate the language and title of your document

Another no-brainer from HTML Day One.  The LANG attribute should apply to your <html> tag, and the well-known <title> is a mandatory element located in the document <head> region.

Pro Tip: For XHTML, apply LANG and XML:LANG to your HTML tag.  Also, "Untitled Document" is not a title.

Learn more about document language and title information

Combine adjacent image and text links for the same resource

If you have an image that links to another location, and some accompanying text that links to the same location, you have two links in a row that point to the same thing. This results in "stutter", the repetition of an element by assistive technology, and can be confusing to AT users. Wrap the two elements in a single <a> to create the link.

Pro Tip: You can also forego the ALT text in this case--use empty ALT text when you include a text description adjacent to an image.

Learn more about combining adjacent links

Use strong, semantically correct markup to create your page elements

Semantic markup means markup that was designed to generate a specific object name and role. Use native markup for headings, lists, links, tables, forms. Give all elements class and ID assignments. If you have to adapt an element for a custom purpose, use progressive enhancement to ensure a base level of functionality. If an element's role isn't reflected in its parkup, apply an appropriate ARIA role in its place.

Pro Tip: Think about this when selecting and evaluating frameworks. Join communities of practice within your framework of choice to see what accessibility tasks are in progress.

Learn more about element semantics

Provide transcripts or captions for multimedia

Without synchronized text captions, your media content is inaccessible to Deaf users and to users with varying degrees of hearing loss.  Use synchronized captions for online video (transcripts are fine for pure audio) to ensure that non-auditory users get the message from your media.

Pro Tip: YouTube's captioning service has improved markedly since its inception, but don't rely on it for automated captions.

Learn more about captioning multimedia