How to...Craft Accessible Web Content

A Practical Guide to WCAG 2.1 Compliance

Both the SiteMasonry and Mason WordPress themes meet the Section 508 and WCAG 2.1 AA standards. To maintain digital accessibility, be sure to format your text, images, videos, audio, and documents to meet WCAG 2.1 guidelines.

These eight best practices will help you create web content that is WCAG 2.1 compliant and engaging for all visitors. Not only will these guidelines improve user experience for everyone, they will also boost site visibility in search results.

Use Plain Language

Plain language improves accessibility by making content easier to read and understand for a wide range of users, including those with cognitive disabilities or who use screen readers. Avoid jargon, complex sentences, and unnecessary words. The goal is to make sure everyone, regardless of ability, can easily understand your content.

Tip: Write in short, clear sentences. If you need to explain a complex idea, break it down into smaller parts and provide definitions where necessary.

Organize Content in Small, Logical Blocks

Breaking content into short paragraphs or bullet points helps readers process information more easily. For those using screen readers or adaptive technology, this structure improves navigation and comprehension.

Tip: Lists and bullet points are great for organizing related information, making it scannable and easier to follow.

Use Headings to Organize and Optimize

Correctly ordered headings (e.g., H2 for sections, H3 for subsections, and so on) are essential for both visual organization and accessibility. On the Mason WordPress and SiteMasonry platforms, page titles are automatically formatted as H1. When formatting page content, use H2 for main sections and H3 or H4 for subsections. This allows assistive technologies, like screen readers, to interpret the structure of the page properly and provide users with a smooth navigation experience.

Tip: ‘Nest’ headings in an ordered sequence (H2 for main sections, H3 for subsections) to improve the accessibility and usability of your content.

Unlock Image Accessibility with Alt Text

Images must have a companion text interpretation, referred to as alternative (alt) text, which clearly conveys the image's purpose or subject. Image alt text is crucial for users with visual impairments, as it allows screen readers to describe the image making visual content accessible to all visitors.

Tip: Be concise but descriptive—think about the image’s function on the page and what key details users need to know if they cannot see it.

Ensure Link Text is Clear and Meaningful

Avoid generic phrases like “Click here” for link text. Instead, make sure the link text describes where the link will take the user or what action they will complete, making it easier for both screen reader users and others to understand the link's purpose.

Tip: Use specific language like “Learn more about George Mason’s accessibility guidelines” rather than “Click here.”

Tables are for Data

Only use tables to organize tabular data. Never use a table for visual layout.

Tip: Include clear labels for columns and rows and ensure the table is easy to understand without visual formatting cues.
 

Additional Resources 

• Section508.gov - Article: Content Creation: Authoring Meaningful Alternative Text
• ADA.gov Fact Sheet - New Rule on the Accessibility of Web Content and Mobile Apps Provided by State and Local Governments
• Web Content Accessibility Guidelines (WCAG) 2.1
• George Mason’s Assistive Technology Initiative (ATI) - Accessibility Resources and Tools
• Section508.gov - Download ANDI - Accessible Name & Description Inspector Tool