Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Accessible Content: Best Practices

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

The information and services you provide on your city or council website must be accessible to everyone in your community. Website accessibility is a nuanced topic, with many tips and tricks to follow to ensure accessibility compliance.

OpenCities is compliant with WCAG 2.1 AA, but there are various rules content authors should follow to ensure accessibility compliance:

Our platform is WCAG 2.1 AA compliant, and we strive to help build websites to meet WCAG 2.1 AA. Ensuring your site remains as accessible as possible means keeping accessibility in mind as you create content. Check out our Accessibility Statement for more information.

Use Meaningful Page Titles

When you create a page, you need to add a title for your page in the Page title field. Here are some guidelines:

  • The title should be descriptive, accurate, concise, and unique.
  • You may also want to add keywords to your titles, but ensure you don't stuff them full of unnecessary keywords.
  • Don't make them too long – we give you a limit of 70 characters, but try and keep it under 50 characters.
  • If you want to, you can use the same name for the Page name field, which determines the page's URL. 

For example, you have a page, separate from your My Area page, strictly for your waste collection information. Meaningful titles could be "Waste Services" or "Rubbish and Recycling Information," which are specific to the information on that page and not too long or convoluted. On the other hand, a title such as "My Area" isn't accurate or unique. A title such as "Info about Rubbish, Recycling, Hard Waste, and Green Waste," while technically accurate, isn't concise. 

Page title field with a meaningful title

Add Alt Text to Images

All images on your site should have alt text, which is the text that screen readers will read out to vision-impaired users while they're browsing. There are three ways to set alt text on an image:

  1. You can add alt text to the File description field as you upload a file to your Files Library. It will automatically be added to the image whenever you insert it onto a page.
  2. You can add alt text as you insert an image onto a page. Enter the alt text into the Alt text field before you select Insert.
  3. If you have already inserted an image into the WYSIWYG Editor, click on the image to select it, then choose Properties... in the footer. Add your text to the Alt Text field, then select OK.

alt text field with alt text

Additionally, keep the following in mind when writing alt text:

  • It should be brief (less than 250 characters is a good guideline).
  • It should convey the purpose of the image, not necessarily just the description. 
  • Avoid phrases like "image of" or "photo of" in your alt text, and avoid using the image's file name as your alt text.
  • Decorative images, or images used for design, should have empty alt text. 
  • For complex images, such as charts or graphs, you should provide a more detailed description of what the image conveys in the body content. This will be helpful to both screen reader users and visual users. However, you should still include simple alt text for the image.
  • If the image is a link, the alt text should describe where it goes and the content of the image. For example, if you have an image of a subsite logo, the alt text could read something like: "Logo for theatre subsite, linking to the Theatre homepage."

Adding Media

Media content can be videos or audio files, and there are two ways to add them to your site:

  • Use an external video platform like YouTube or Loom and embed them into a page.
  • Uploading media files and inserting them through the WYSIWYG Editor.

Using external media platforms is a great way to include videos on your site. However, we recommend ensuring that those videos include captions or transcripts.

When adding an audio or video file to your site, you can add a transcript in the Media Transcript field when uploading the file. Transcripts added into this field are indexed by site search, making those videos more searchable once inserted into a page.

Please keep in mind that the transcript will not appear anywhere on the live page, and if you want to include a transcript on the page, you will need to upload it as a separate document and insert that under the audio or video file.

Choose Accessible Colors

Make sure you choose text and graphic colors with a high contrast ratio against the background so they’re easy to see. To be accessible, the contrast ratio needs to be at least:

  • 4:5:1 for small text (below 18 points, or below 14 points, if bold)
  • 3:1 for large text and graphics (above 24 points, or 19 points if bold)

We've found the WebAIM Color Contrast Checker an excellent tool for checking color ratios.

Focus on accessible colors when setting styles for a theme, adding an image to a page, or formatting content in a WYSIWYG Editor.

Tips for Content Accessibility

Here are some more general tips to improve accessibility:

  • Make your site design and navigation easy to understand. If your navigation is too complicated, users may find accessing the information and services they need challenging.
  • Ensure your content is friendly across multiple devices. We recommend testing your pages across mobile, tablet, and desktop devices, particularly when using interactive elements such as accordions, tabs, maps, calendars, and accessible tables. 
  • Write concisely and clearly without using too much jargon. It's always best to keep your written content straightforward. Avoid writing to a post-graduate audience using simpler phrases and common words; we recommend aiming for a 7th-8th grade level. Tools such as Hemingway can check your content as you write and tell you what the reading level of your content is.
  • Use heading styles correctly. All headings in your body content should be assigned a heading label, rather than bold text or larger text size. Additionally, headings should be stacked correctly; in OpenCities, the Page title will always be an H1, so your headings in body content should start with H2 and follow the hierarchy for sub-headings. Content authors should never choose a heading based on its appearance, as this can interfere with how screen readers interpret the text.
    heading styles menu in editor
  • Always use ordered (numbered) or unordered (bullet) lists for listed items, rather than a hyphen or symbol as bullet points. Ordered and unordered lists get assigned a list tag, which helps screen readers interpret them as lists. Additionally, ordered lists should only be used when the sequence of list items is important, such as following instructions for a service or form. Unordered lists should be used when each list item is of equal standing.
  • If you have a largely bilingual community or many residents who speak English as a second language, consider installing a language pack if it's available to make it easier to create content in multiple languages or use Google Translate. 

What Else?

Was this article helpful?
0 out of 1 found this helpful