General Accessibility Structuring/Documents

A descriptive title helps all users understand the purpose of a webpage or document. Titles provide context and assist with navigation, particularly for users relying on assistive technologies.

Best Practices

• Use a clear, descriptive title that accurately introduces the content.
• Place the title at the beginning of the document or webpage.
• Format the title distinctly using a large, bold font to differentiate it from the rest of the text.

Use proper heading structure (e.g., <h1> in HTML or “Title” style in word processors) so assistive technologies can identify it easily.

Proper heading structure allows screen reader users to efficiently navigate content by searching for sections and jumping directly to relevant information without listening to the entire document. This practice ensures a more accessible and user-friendly experience for all.

Best Practices

• Use structured heading styles (e.g., <h1>, <h2>, <h3>) to organize content logically.
• Maintain a proper heading hierarchy—do not skip levels (e.g., avoid jumping from <h1> to <h3>).
• Ensure headings are descriptive and accurately reflect the content of each section.
• Use actual heading tags, not just visual styling. Do not rely on font size, color, bold, or italics alone to indicate a heading.
• Headings should structure content, not emphasize importance. Use bold or underline for emphasis instead.
• Ensure content remains readable when text is resized up to 200%.

A list is a structured collection of related items, typically presented using bullet points, letters, or numbers. Lists help organize content, improve readability, and enhance navigation for users, especially those relying on assistive technologies. When properly formatted, lists provide a clear structure that screen readers can interpret effectively.

• Use unordered lists (<ul>) for bullet points and ordered lists (<ol>) for numbered or sequenced items.
• Ensure lists improve content organization and readability for all users.
• Avoid using lists for layout purposes—they should only be used to present structured content.

Use proper HTML markup (<li>, <ol>, <ul>) so screen readers can recognize and interpret lists correctly.

When presenting content in a table format on a document or webpage, it is essential to structure the table in an accessible way to ensure that all users—especially screen reader users—can navigate, comprehend, and engage with the content efficiently.

Best Practices

• Use tables for structured data only, ensuring proper header rows and column headers.
• Avoid using tables for layout purposes, as this can confuse assistive technologies.
• Utilize accessibility features in document editors to ensure proper table formatting.
• Layout tables must linearize properly, maintaining logical reading order when content is removed from the table structure.
• Review layout tables and consider replacing them with a CSS-based layout (e.g., divs) to improve readability and accessibility.

Color enhances the design and visual appeal of digital content, but it can also create accessibility barriers if not used thoughtfully. Color contrast refers to the difference in brightness between a foreground element (such as text) and its background. A high contrast ratio improves readability, making content more accessible to individuals with low vision or color blindness. Proper contrast ensures that text and other visual elements remain clear and distinguishable, allowing all users to engage with digital content effectively.

Best Practices

• Ensure sufficient contrast between text and background to improve readability.
• Use contrast-checking tools to meet WCAG standards (minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text).
• Black text on a white background offers the highest readability.
• Warm and cold colors typically provide the best contrast.
• Use color palettes to select appropriate color combinations (e.g., Viget offers a variety of tints, tones, and shades).
• Avoid relying on color alone to convey meaning; use text labels, patterns, or other visual cues.
• For links, do not rely on color alone to differentiate them from regular text; use underline and HTML link markup.
• For forms, add symbols or highlights to emphasize important text.
• Avoid using sensory characteristics (e.g., color) as the only method to emphasize information or content.
• Provide textual information for all elements on the page, including images, glyphs, and buttons.
• When using buttons, always provide textual information in addition to the sensory characteristic (e.g., color or shape).
• Avoid instructions that rely on sound.
• Use a grayscale tool to test for color-only reliance and ensure content is accessible for colorblind users.
• Do not rely on shapes solely by color; use numbers or text in addition to color to convey meaning.

Hyperlinks should be designed to ensure all users, including those relying on assistive technologies like screen readers, can easily understand and navigate them. Accessible hyperlinks provide clear, descriptive text that conveys the destination without requiring additional context. Avoid vague phrases like “click here” or “read more,” as they do not provide meaningful information. Additionally, hyperlinks should be visually distinct from regular text to enhance usability.

Best Practices

• Use descriptive hyperlink text that clearly indicates the destination (e.g., “University of Pittsburgh Accessibility Resources” instead of “Click here”).
• Ensure hyperlinks are visually distinct (e.g., underlined and in a different color from regular text).
• Avoid using URLs as link text unless necessary, as they may be hard for screen readers to interpret.
• Link text should clearly represent both the link purpose and destination.
• Avoid non-informative link phrases like “click here,” “read more,” or “info”.
• Do not use the same link text for different destinations.
• Do not use different link text for links to the same resource.
• Links should always visually stand out and be easily identifiable as links.
• Links should be distinguished by both color and underline.
• Do not rely on color alone to distinguish links; underlines should only be used for links to avoid confusion.
• Ensure hover or focus elements comply with color contrast standards.
• Limit global navigation links to no more than 7 to minimize user confusion.

Text displayed on a webpage or digital document should be easy to read, particularly for people with visual impairments and reading disabilities. Resizable text is typically managed by the web browser using features like zoom and font size adjustments. Developers must ensure that the code supports these features without interfering with or negatively impacting how the browser applies text styles, allowing for better readability and user customization.

Best Practices

• Use sans-serif fonts such as Arial or Verdana with a minimum font size of 11pt.
• Apply adequate spacing (at least 1.5x) and left-align text for improved readability.
• Avoid using text images, as the text in the image cannot be resized when the user adjusts the page.
• Ensure text is resizable up to 200% without content being truncated or losing functionality.

Use these questions to assess whether your document meets accessibility standards: