Webtools, Articles & Events: Accessibility Best Practices

When creating or editing Articles and Events in Webtools, staff should follow accessibility best practices to ensure website content is accessible to everyone, including people with disabilities. These guidelines cover headings, hyperlinks, images, tables, text formatting, and event information to help meet ADA and WCAG 2.1 Level AA standards.

1. Headings and Text Formatting

Use the editor's built-in formatting options to organize content so screen readers can properly identify headings, paragraphs, and lists. In the Body editor, click the dropdown menu labeled "Normal" and select "Heading 2" or "Heading 3" as appropriate.

Do:

• Use Heading 2 for main sections and Heading 3 for subsections.
• Use the bulleted or numbered list tools to create lists.
• Use normal paragraph formatting for regular text.

Don't:

• Use bold text or larger font sizes to imitate headings.
• Skip heading levels unnecessarily.
• Manually type bullets or numbers instead of using the list tools.

Examples:

Correct heading:

Upcoming Events

<h2>Upcoming Events</h2>

Incorrect heading:

Upcoming Events

<p><strong>Upcoming Events</strong></p>

Correct list:

• Workshops
• Lectures

<ul>
    <li>Workshops</li>
    <li>Lectures</li>
</ul>

Incorrect list:

- Workshops

- Lectures

<p>- Workshops</p>
<p>- Lectures</p>

2. Hyperlinks

Use descriptive link text that clearly explains where a link leads. In the Body editor, highlight the text and select the hyperlink tool to add the destination URL.

Do:

• Use descriptive link text such as "View the Global Studies Program Requirements."
• Check that links work and lead to the intended destination.
• Notify users when a link opens a new window or tab, when appropriate.

Don't:

• Use vague link text such as "Click Here" without context.
• Use long URLs as visible link text.
• Open links in new tabs unnecessarily.

Examples:

Correct hyperlink:

View our Academic Programs

<a href="https://www.international.ucla.edu/academics/undergraduate">View Our Academic Programs</a>

Incorrect hyperlink:

Click Here

<a href="https://www.international.ucla.edu/academics/undergraduate">Click Here</a>

3. Images and Alternative Text

Images that communicate information must include meaningful alternative text (alt text). In the Body editor, use the image insertion tool to upload an image. Right click on the image and select Properties and enter a description in the Alt Text field.

Do:

• Write short, meaningful descriptions of informative images.
• Describe the image's purpose or important content.
• Include important event flyer information as regular text in the Article or Event body.

Don't:

• Use filenames such as "IMG_1234.jpg" as alt text.
• Begin descriptions with "Image of" or "Picture of" unnecessarily.
• Place important information only inside an image.

Examples:

Correct image alternative text:

<img src="students.jpg"
     alt="Students attending a lecture at UCLA">

Incorrect image alternative text:

<img src="students.jpg"
     alt="IMG_1234.jpg"> 

4. Tables

Use tables to organize data in rows and columns, not to control page layouts. When inserting a table in the Body editor, use the table accessibility settings to identify column or row headers as appropriate. Right click on the table and select Cell Properties and then click on the Accessibility tab and add one row. Please add a caption if the data being presented in the table isn't obvious. Click OK to save. 

Do:

• Use tables only for tabular data.
• Designate the appropriate cells as table headers.
• Add a descriptive table caption when helpful.
• Keep tables simple and easy to read.

Don't:

• Use tables to position images or arrange text on the page.
• Make header cells bold without identifying them as actual table headers.
• Create unnecessarily complex tables with merged cells.
• Use the obsolete Table Summary field; leave it blank.

Examples:

Correct table with column headers:

<table>
    <caption>Upcoming Events</caption>
    <thead>
        <tr>
            <th scope="col">Event</th>
            <th scope="col">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lecture</td>
            <td>October 30</td>
        </tr>
    </tbody>
</table>

Incorrect table with visually styled headers:

<table>
    <tr>
        <td><strong>Event</strong></td>
        <td><strong>Date</strong></td>
    </tr>
    <tr>
        <td>Lecture</td>
        <td>October 30</td>
    </tr>
</table>

5. Colors, Fonts, and Pasted Content

Use the website's default text formatting whenever possible. Avoid unnecessary custom styles that may affect readability or accessibility. When copying text from other sources, remove unwanted formatting before publishing.

Do:

• Use standard paragraph, heading, and list formatting.
• Maintain sufficient contrast between text and background colors.
• Use plain-text paste or remove formatting when copying content from Word, Google Docs, or other websites.
• Use labels or text in addition to color to communicate important information.

Don't:

• Apply unnecessary custom fonts, colors, or font sizes.
• Use color alone to communicate important information.
• Paste content with excessive inline formatting.

Examples:

Correct paragraph formatting:

Registration is now open for the upcoming workshop.

<p>Registration is now open for the upcoming workshop.</p>

Incorrect paragraph with unnecessary custom styling:

Registration is now open for the upcoming workshop.

<p style="font-size: 11px; color: #33cc00;">
Registration is now open for the upcoming workshop.
</p>

Correct use of text to communicate status:

Registration Closed

<p><strong>Registration Closed</strong></p>

Incorrect use of color alone to communicate status:

Registration Closed

<p style="color: #ff0000;">Registration Closed</p>

6. Event Graphics and Flyers

When uploading an event graphic or flyer, all important information displayed in the image must also be provided as accessible text in the appropriate Webtools Event fields. Screen readers cannot reliably read text embedded in images.

Do:

• Enter the event title in the Title field.
• Enter the event date and time in the appropriate Date and Time fields.
• Enter the event location in the Location field.
• Include speaker names, presentation topics, descriptions, and other important details in the appropriate Event fields or Body editor.
• Provide a descriptive hyperlink for registration or RSVP information, rather than relying only on a QR code.
• Include appropriate alternative text for the event graphic.

Don't:

• Upload an event flyer as the only source of event information.
• Assume screen readers can access text embedded in an image.
• Require visitors to scan a QR code to register or access event details.
• Use alternative text as a replacement for entering event information into the appropriate fields.

Example: An event flyer featuring a speaker, presentation title, date, time, location, and RSVP information should have those same details entered as accessible text in the Event fields and Body editor.

See an example of an accessible event listing: International Education Week with Dr. Felicia Marie Knaul.

Published: Monday, October 26, 2026