Content structure & headings
Make sure document has clear structure, organized hierarchically. Prepare a properly-structured outline of the document with a single top (Level 1) heading or <H1> tag, equivalent to the “title” or main idea of the page. Nest other subheadings under that, with parent-child relationships.
Keep all headings short, relevant to the text that follows, and clear. Don’t skip heading levels in your outline. For example, <H4> headings should nest under <H3> headings, not directly under an <H2> heading.
Use heading levels/tags (<H1> through <H6>) to organize and describe document sections – not to visually style specific text. Following the same principle: always indicate headings with actual heading tags (<H1> through <H6>), not just visual/font styling.
You can find more about using headings to structure content from:
For list content, always use appropriately-tagged bulleted (unordered) lists with the <ul> tag, or numbered (ordered) lists with the <ol> tag. Learn more in the Lists section of W3C WAI’s Page Structure Tutorial.
Only use tables for data that have row and/or column headings – don’t use tables for for page layout purposes. Identify row/column headings (i.e. the top row and/or first column of your table) appropriately by using <th> tags as opposed to <td> tags for those headings.
Keep table structure simple and avoid merged cells if possible. Give each table a descriptive title. Learn more in W3C WAI’s Tables Tutorial.
Media descriptions
Add concise alt text to describe any images (or other media objects) that convey meaning. If an image is strictly decorative and adds no meaning, use a single space in the alt text, or check “Decorative” if your web editor offers that option. If the image is presented with a descriptive visible <caption> element, mark the image as decorative as above -- don’t repeat the same information in the alt text and the caption. If an image consists entirely of text, replace it with actual text. Learn more from WebAIM’s article “Alternative Text.”
If your page includes video content with audio, be sure to add, edit and verify accuracy of the closed captions in the video. If you are using a platform that automatically generates captions (i.e. YouTube), be sure to edit those captions for correct spelling, capitalization and punctuation, and add indicators for other important sounds, i.e. [laughter} or {applause}. To learn how, check the help or support for your video platform, such as the YouTube help article “Add subtitles & captions.” Section508.gov offers helpful training: at Create Accessible Synchronized Media.
If your page includes audio-only content (i.e. a podcast episode), include a link to a complete, accurate, and accessible transcript document alongside any embedded audio player. For best accessibility, don’t limit the user to only streaming the audio through an online player, but ensure the user can download the audio file itself.
Descriptive links
Make sure that all hyperlinked text describes the target (or action) of the hyperlink. Replace “read more,” “click here,” or other generic text with meaningful text that describes the link’s target or action. For example, instead of “To read the latest UT Health news click here,” try “To read the latest UT Health news, visit our Newsroom.”
Likewise, replace displayed URLs with hyperlinked text that describes its target/action (i.e. the title of the target page). For example, instead of “https://support.microsoft.com/en-us/word,” use “Word help & learning.”
Make sure that link text is unique for all hyperlinks in the document, unless the links with the same text lead to the same destination. Hyperlinked buttons, graphics and/or images should also include descriptions of their targets or actions. Learn more at “Create Unambiguous Names for Links” from Section508.gov.
Color
Make sure there is sufficient color contrast between foreground text (or objects) and the background. To check and verify color contrast levels, you can use a tool such as Colour Contrast Analyser (CCA) from TPGi.
Avoid conveying meaning exclusively with color. If you want to indicate or bring attention to certain text in a paragraph or objects in a group, make sure you don’t just indicate them with color. Add other formatting, symbols or explanatory text to point out the text you’re indicating.
Optimization
Use plain language for written content. Focus on what users want to know, and choose simple words and phrases. Write short sentences and sections to break information into chunks, and organize them with headers. The US government’s Federal plain language guidelines are very helpful. The National Institutes of Health also offer a helpful guide: Plain Language: Getting Started or Brushing Up.
When providing instructions, make sure they are not dependent on a single sense. For example, don’t indicate objects solely by their shape, position, location, size, orientation or sound – make sure they are identified in a way that is understandable by users who can’t see or can’t hear the object.
Avoid text or elements that blink or flash more than twice a second, as blinking or flashing objects can be distracting, and can cause problems for readers with photosensitivity.
If you have the ability to specify fonts on your webpage, keep customizations to a minimum. If you do customize fonts, use consistent fonts that are optimized for readability. Sans-serif fonts tend to be most legible, but simple serif fonts are also acceptable. If needed, consider fonts that were designed for accessibility or legibility, such as Andika, Atkinson Hyperlegible, or Lexend (download these font families for free from Google Fonts). Minimize or avoid script or display fonts.
Check the accessibility of your page
Make sure to use an accessibility checker to check your page for any issues. There are a number of free tools and plugins that you can use to check your page and provide guidance on how to address any issues they identify, such as the following:
Also, take a moment to navigate your webpage using only the keyboard. Use Tab to move forward through the interactive elements on the page, Shift-Tab to move backward through those elements. Use Enter or Return to follow a link or activate a button. Use Spacebar to toggle checkboxes on/off, or activate a button. Use arrow keys to scroll the page, select radio buttons, and navigate drop-downs or interactive menus. Confirm that you’re able to operate all interactive elements on the page using those keyboard commands, and that you can always see the location of the “focus” (the currently active element) with a clear visual indicator.
Additional resources