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.
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.
Place all page content within appropriate ARIA landmarks
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.
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.
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.
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.
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.
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.
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.
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.
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.