Best Practices

Headings should act as an outline for the content on the page. Your web audience will scan the headings on a page to find out what the page is about.

It is critical to keep headings in order and not skip heading levels. Use the headings provided in the theme and don’t choose headings based on style.

Well structured headings also improve search engine optimization.

Watch example of how to add headings to text in WordPress

Video does not contain captions or description. See text description for details.

Text description of process

From your WordPress visual editor, highlight the text you want to make a heading then select the appropriate heading from the drop-down list. You can also add your cursor to the front of your line of text and select an appropriate heading to change the entire line.

To view the HTML tags added to your content, you can switch from the visual editor to the text editor.

Using Panels to Publish Content?

If you use the panels available in the Boise State WordPress theme to publish content, using the Title fields will create headings on the page.  Review Recommendations for Accessible Panels learn more about recommendations for formatting content within the panels.

Alternative text provides information about the content and function of an image for people who cannot see the image. There are many reasons people might view your web content without images including visual impairment and low-bandwidth internet connections. Additionally, good alt text can contribute to improved search engine optimization.

Add alternative text to images using the “Alt text” field in the Attachment Details section in the WordPress Media library.

Good alt text should be concise but must provide the same information as the image it replaces.

For more information on alternative text, read WebAIM’s article on Alternative Text.

Do not use an image of text when you can use plain text to convey the same information.

Text in images is a bad user experience for many people including

• People with visual impairments who need to transform or zoom text.
• People who are translating web content into a different language.
• People using a text-only browser.

Images of text are also more difficult to update and maintain than web content and, since search engines cannot read text in images, users may have a more difficult time finding the information.

If an organizational chart must be posted on your site you will need to create an alternate text version to make it accessible. Text versions can easily be created using HTML headings and lists.

By using semantic headings on your page, along with unordered (bulleted) lists, you can represent how your department or college is organized in a way that\u2019s accessible to everyone.

For more tips on creating an accessible org chart, see Organizing Your Org Chart. If you need assistance making an organizational chart accessible, please contact the OIT Web Accessibility team at OITAccessibility@boisestate.edu.

Infographics require a text description that explains the relevant content presented in the graphic. Translate your infographic into a text version. You don’t need to describe every graphical element in the infographic but rather focus on what’s most important.

Use headings, bullets, and lists to make your text description more readable. If appropriate, include the images with alternative text descriptions within your text description. Review more tips for accessible infographics.

If your images display graphical data, you must supply a text equivalent to describe the data. The best way to do this is to include a text description on the page next to the image or provide a detailed description in the image caption.

On your chart or graph, don’t rely on color alone to provide context. Include data labels and ensure all colors have enough contrast to help users tell them apart.

A flowchart that illustrates a complex process in a simplified way. Make these graphics accessible by providing a text description of the process on the same page as the flow chart or diagram. For more tips see Creating accessible flowcharts.

Maps require a text alternative to be accessible.  You can either direct users to or embed the the Boise State Map as it has an accessible text version and printable PDF.

If you are including a different map, you must also include a text description on the page to explain the information presented on the map.

Dashboards and data visualizations can be a good addition to your website but must be planned with accessibility in mind. Visit Dashboards and Data Visualizations for more details.

• Use clear and descriptive link text in both text links and button text.
• Avoid vague link text like “Click here” and “Read more”.
• Ensure that links with different destinations do not have the same link text.

• PDFs are not responsive and can be difficult to use on mobile devices.
• PDFs are costly and time consuming to make accessible.
• Where possible, convert PDF documents to web content, including forms.
• If you must use a PDF, make it accessible and clearly label as a PDF.
• PDF Accessibility Resources

• All videos with audio on Boise State websites must be captioned.
• Plan ahead when you are creating videos to include transcripts and captioning as part of the process.
• Captioning a video has many benefits including accessibility to deaf or hard of hearing viewers, usability in sound-sensitive environments and increased search engine optimization.
• Video Accessibility Resources

The Boise State theme provides several options for creating pre-formatted content in the form of panels. Even though panels have built in accessibility features there are several things to keep in mind to ensure the accessibility of your content.

For more information see our Recommendations for Accessible Panels.

Review Monsido reports and resolve any level A or AA errors identified on your site.

The most important thing you can do for your content is to continue to focus on links, images, headings and not adding style to your text:

• Links – the most common link error we’re seeing is conflicts with the global navigation. So avoid generic link text like apply, news, or about as these are all present in the global navigation. Also pay attention to the links in the footers.  In general, giving your links meaningful text descriptions will improve accessibility.

• Images – most images on your site require a short alternative text description. This is especially true if your image is also used as a link either to the media file or another webpage. Including alternative text will ensure your images are more accessible for users.

• Headings – most headings are handled by the new theme through panels. However, be mindful of what you are adding for headings on your page. These create an outline of your pages that help users navigate content more easily. Avoid skipping heading levels as well.  They should follow numeric order.
• Text Styling – lastly, don’t introduce style elements to your content. Let the theme add the style, while you focus on the content.  This means leaving your text plain, and not changing the color, size, or indents manually. Also use bold and italics sparingly and do not underline any text.

Although Monsido provides automated accessibility testing, there is no substitute for testing your site to make sure it is usable.

• Navigate your site using only a keyboard to understand how your content works without a mouse.
• Use a browser extension like the Images ON/OFF Chrome extension or imagine your page without images to ensure the information is still available even if you cannot see the images.
• Scan the headings and links on your site to ensure they are descriptive and properly structured.

When you use accessible colors, you ensure the difference in brightness between the foreground (text or image) and the background of a website, document, or application is clear enough for everyone to access. It’s crucial for ensuring everyone, including people with visual impairments, can easily read and understand the information presented.

In general, the color choices on the Boise State University website are controlled by the University theme. However, if you are creating content (graphics, documents, videos, visualizations, etc.) to add to the web, you should follow Boise State’s brand standards for colors:

• Use white and blue as your main primary and secondary colors
• Use the digital orange as an accent
• Never mix orange text with blue back ground, or blue text with an orange background
• Check your creation using a Color Contrast Tools such as the Color Contrast Analyzer from TPGi

For color codes and a contrast guide, review Brand Standards: Colors.

If you are branding, configuring or skinning a third-party application or web platform and need access to the accessible Boise State color palette please submit a ticket to the OIT Help Desk describing your proposed project.