Web Pages

Web editors who manage web pages on the Martin County Website should follow these accessibility principles and best practices. Note that accessibility best practices apply to all web content, including documents and media that you may also upload or link to on your web pages.

Web Page Essentials Checklist

  • Web page is organized with proper section headings.
  • Descriptive alt text is added for all images.
  • Lists use proper list markup, not manually added dashes or symbols.
  • Links include unique, descriptive words or phrases, not "click here".
  • Tables are properly marked up and used only for displaying data, not layout.
  • Color alone is not used to convey information or meaning.
  • Ensure all documents uploaded to web page(s) are accessible.
  • Provide captions and/or transcripts for audio and video recordings.
  • Write clearly and simply.

Components

Drupal components library

The good news is that to create accessible web pages most of the work has been done for you: our Martin County website uses modular Drupal components that meet WCAG 2.1 web accessibility standards.

Stick to using these components. If you change nothing apart from the content that you add (such as text, images, links, documents, etc.), you will have no extra work to make web pages accessible.

Web Page Structure

CKEditor Page Structure

Use the toolbar icons in Drupal's rich text editor (CK Editor) to apply styles and to properly format your content in a logical structure. 

  • Add a concise, meaningful page title (this is default H1).
  • Organize content into logical sections with clear, informative headings.
  • Use headings in correct hierarchical order (H2, H3, H4, etc.).
  • Use list styles to create proper bulleted or numbered lists.

Images

Alt text is required when uploading an image to your web page. Alt tags provide a text alternative to the image that gets read aloud by screen readers for users with impaired vision.

  • Keep it short and concise (125 characters or less).
  • Avoid starting with "image of" or "picture of."
  • Describe the image’s context and purpose.

Color

When using color and images with text, you must ensure that your color combinations are WCAG 2.1 AA compliant. 

Links

If you add hyperlinks on your web page, the link text should be descriptive, telling the user what to expect. Linked text should clearly tell the user what the function of the hyperlink is. Avoid generic text like "here" or “click here.” Instead, make each link unique and informative. See best practices for writing links.

Tables

  • Only use tables for data. Do not use them for layout purposes. 
  • Keep tables simple. Complex tables with nested or merged cells can complicate accessibility tagging.
  • Always consider alternatives to tables; for instance, determine if the same information can be effectively communicated using bulleted lists.

Videos

Ensure any added videos include accurate captions and audio descriptions.

Testing Web Pages

Test your web pages to ensure they meet WCAG 2.1 AA accessibility criteria.

  1. Axe DevTools:
    • A free, industry-standard browser extension that detects web accessibility issues with high accuracy. It’s user-friendly and doesn’t require advanced accessibility knowledge. To install, contact the ITS Help Desk.
  2. WAVE Web Accessibility Evaluation Tool:
    • Copy the URL of the page you want to test and paste it into the tool for an immediate accessibility report. This tool is free and available to all users.
  3. Editoria11y Accessibility Checker:
    • When logged in to Drupal, web editors can see icons at the bottom of pages to identify accessibility issues. This is currently enabled on the County Website.
  4. CKEditor Accessibility Checker:
    • Scans content created in Drupal's CKEditor for accessibility issues before publishing. This feature is currently enabled for web editors. Contact the Web Content Analyst for details.

Free Screen Readers 

PC: Narrator

Narrator is the built-in screen reader that comes with Windows.

Mac & iPhone: VoiceOver

VoiceOver is the built-in screen reader that comes with iOS devices.

Resources

Drupal Accessibility Guide