September 9, 2024

Accessibility Basics for USU Extension Websites

Hands typing on a laptop keyboard on a desk with blurred monitors in the background

Ensuring websites are accessible is essential to providing information and a great experience for all visitors, regardless of how they interact with the web. As a web editor, learning a few accessibility basics will help you get started. Here are some simple tips to keep in mind:

Use WebAIM’s Accessibility Tools

WebAIM’s WAVE tool can help you evaluate the overall accessibility of your page. You can enter your webpage URL directly at the WAVE tool website or append your URL to create a WAVE report link (e.g., https://wave.webaim.org/report#/https://extension.usu.edu/locations.php). Alternatively, you can download the WAVE browser extension for Chrome, Firefox, or Microsoft Edge, allowing you to run accessibility checks directly from your browser. The WebAim tool displays alerts about issues like missing alt text, improper heading structures, and color contrast problems, and offers explanations and suggestions for improvement.

Use Descriptive Alt Text for Images

Alt text provides a description of an image for screen readers and helps those with visual impairments. When adding images, ensure that the alt text describes the content clearly and concisely. For decorative images, leaving the alt text blank is acceptable.

When writing captions for images on websites, it’s important to provide descriptions that give context and communicate visual information to all users, whether sighted or somehow visually impaired. For example, instead of saying "Group of people in a garden" or just "garden," a more descriptive caption would be "Volunteers planting tomatoes and peppers in a community garden on a sunny afternoon." This provides essential details about the action and setting, ensuring everyone receives the same content.

The same applies to charts or graphs. Instead of alt text or a caption like "A chart showing crop yields" or just "chart," a better option would be alt text or caption of "A bar chart comparing crop yields from 2020 and 2021, showing a 15% increase in wheat and a 10% decrease in corn." This ensures users relying on alt text receive the key data presented in the visual.

Alt Text Basics (USU Accessibility)

Avoid Displaying Key Information as Text in Images

Whenever possible, provide important information as text rather than embedding it in an image. Text in images cannot be read by screen readers and may not be accessible to users with visual impairments, and may not be readable on smaller devices such as phones. So, for example, instead of using an image of a flyer with event details, type the information directly on the page in something like a card so everyone can access it. Use banner elements from USU templates for more visual headings rather than banner images containing text. If text in an image is absolutely necessary, make sure to include descriptive alt text that conveys the same information.

Avoid Empty Tags and Ensure Clean HTML

When building web pages using a WYSIWYG editor, it’s important to create clear, well-structured content with clean HTML. Clean HTML involves avoiding unnecessary elements, like extra formatting or stray code, which can occur when pasting from Word or other editors. It also means preventing empty headings (invisible heading tags around empty spaces) and empty links (links without text and/or a destination), as these can cause accessibility issues. Screen readers rely on headings to navigate, and empty links in keyboard navigation can lead to confusion. The Modern Campus CMS WYSIWYG editor offers tools like the Show Blocks feature, which highlights page sections, making it easier to spot and fix empty or misplaced elements. The Clear Formatting button in the editor will also remove unnecessary styling from pasted content.

Using keyboard shortcuts like Ctrl + Shift + V (Windows) or Cmd + Shift + V (Mac) to paste plain text, or external tools like the WordHTML formatter, helps ensure the content is free from unnecessary styles or hidden code, keeping it clean and accessible.

The Enter key is for creating new paragraphs (hard return) or adding line breaks without starting a new paragraph (soft return), while the space bar should only separate words within a sentence. Avoid using the Enter key or space bar to add horizontal or vertical space between content blocks; instead, use tools like margins or padding for that type of spacing spacing. Improper use of the space and Enter keys can result in empty tags and inconsistent display across different device sizes.

Use Headings Properly

Use heading tags (H1, H2, H3, etc.) to organize content. The main title should always be H1, with subtopics using H2 and further subpoints using H3. Don’t use heading levels solely for visual styling.

Also, don’t skip heading levels—such as jumping from H1 to H3 without an H2 in between, as screen readers use headings to create a navigable outline and define content hierarchy.

Make Linked Text Meaningful

Link text should clearly describe the destination or action. Instead of writing “click here,” use descriptive text like “learn more about soil health” so users know what to expect when they click the link.

Think Accessibility When it Comes to Choosing Colors

Ensure there is sufficient contrast between text and background colors to support users with visual impairments or color blindness. Tools like the WebAIM contrast checker (which also runs automatically when generating a WebAIM report) can help determine if your color combinations meet accessibility standards. Stick to the standard USU web template colors, including for elements like buttons and card headings, as these are already optimized for contrast.

Avoid using color as the only way to convey information. For example, instead of relying on phrases like "the fields in red are required," make sure to include a clear text label such as "required fields are marked with an asterisk (*)" to ensure the information is accessible to all users.

Use Closed Captions and Transcripts for Videos and Audio

If your page includes videos, ensure that closed captions are available. Not only is it best practice, it’s USU policy. Providing transcripts for audio content also ensures that users who cannot hear the audio can still access the information.

Avoid PDFs for Web Content

PDFs are useful for sharing files meant to be printed, such as forms or brochures, but they aren’t ideal for conveying information on the web. Users accessing content on mobile devices or using screen readers often face difficulties with PDFs, as they are harder to read and may not fully support accessibility features. For web content, use HTML pages. For example, instead of posting a PDF with instructions for logging into a website, create an HTML page with that content. If a PDF is required for printing purposes, such as a fact sheet about soil testing to be printed and distributed at county offices, ensure an accessible HTML version is also available for online users.

Use Responsive Design and Test Pages on Multiple Screen Sizes

Responsive design is essential for ensuring that web pages are accessible and user-friendly on a variety of devices, from desktops to smartphones. Content, including images and columns, should adjust smoothly to different screen sizes to provide a seamless experience for all users. To achieve this, it's important to check web pages on multiple devices or, alternatively, resize your browser window to simulate different screen widths. This helps identify any issues with layout, readability, or usability across various screen sizes, ensuring accessibility and a consistent user experience

Visit These Additional Accessibility Resources

By keeping these tips in mind, your sites will be more accessible and user-friendly for everyone and will ensure everyone can access and benefit from the valuable information you have to offer!