Logging In

To start managing your website the first step is to login to your website. The website address to edit your website is always your main website and “/admin” at the end i.e. http://mycommunitywebsite.onesuffolk.net/admin

Simply go to this address and then insert your username and password and click “login



As standard we make our One Suffolk websites as compatible as we can with the W3C 2.0 International standard but there are things that as users you need to be aware of to ensure you make your website meet this standard.



Include proper alt text (Alternative Text) for images.

Alt text should be provided for images, so that screen reader (a software device on a computer that reads out the page to the individual) users can understand the message conveyed by the use of images on the page. This is especially important for informative images (such as infographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt.

The exception to this rule is when an image is used purely for decoration; in this case, the alt text can be left empty so that the screen reader user is not distracted from the more important content on the page.

To do this in your One Suffolk website, click on "Pages", click on the page you want to edit, right click over the image, click on "Image Properties" and where it says "Alternative Text" type in the word that you want to use the convey the meaning of the image. For example, if you had a picture of a Sunset, you would type in "Sunset" into the box. Click "OK" when done.


Text & Fonts

Use headings correctly to organize the structure of your content.

Screen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.

Examples of proper use of headings:

  • Use Heading 1 Styles for the primary title of the page. Avoid using an Heading 1 style for anything other than the title of the website and the title of individual pages.
  • Use headings to indicate and organize your content structure.
  • Do not skip heading levels (e.g., go from an Heading 1 style to an Heading 3 style), as screen reader users will wonder if content is missing.

In your One Suffolk website, the toolbar has a formatting option where you can change it from "Normal" to "Heading1", "Heading2", "Heading3". To change existing text, simply select the text in the editor and then next to "Styles" you will see an option where you change it from "Normal" to "Heading1" etc.

Make you click "Save and Publish" when done



Give your links unique and descriptive names.

When including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user.

Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of links to the screen reader user.

The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.

For example, if you are pointing visitors to a page called "About Us":

  • Try not to say: "Click here to read about our company."
  • Instead, say: "To learn more about our company, read About Us."

In your One Suffolk website, you just need to ensure the "Display Text" in your link is descriptive as per the advice above. To change your Display text, click somewhere in the link you want to change, click the link button and then change the "Display Text". Click "Ok" when you have done and then click "Save and Publish" to save the changes.



Use colour with care.

The most common form of colour deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY colours such as these (especially to indicate required fields in a form) will prevent these individuals from understanding your message.

Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from colour when used to distinguish and organize your content.

To satisfy both groups, use colour, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or borders).

There are several tools you can use to evaluate colour contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of colour blindness.

In your One Suffolk website we recommend not to use much change of colour in your main text sections (leave it as a white background and black text) and leave it as the default font set on the system.

If you do want to play around with different font colours or background colours then we recommend using this colour contrast checker - https://webaim.org/resources/contrastchecker/. You need to ensure that the contrast is greater than 4:5:1 between the background and foreground colour to meet the W3C standard. This website will enable you to check your colours meet this.



Tables in Text

Don’t Use Tables for Anything Except Tabular Data

When it comes to displaying data, tables are handy. They make it much easier for all users, including those using assistive technology, to parse a large amount of data. To get the maximum benefit, however, you’ll want to keep your tables as simple as you can.

In addition, it’s best to avoid using tables for anything but tabular data. For example, you should never use a table for layouts, lists, or anything else. This can be confusing to screen readers and similar devices.

In terms of One Suffolk websites, as per the advice above, we recommend that you shouldn't use tables if you are looking to format images in a certain way - as the text above describes, only use it to display tabular data like you would in a spreadsheet. If you do use tables then ensure they are correctly formatted with headings at the top of each column.

Tables in One Suffolk websites can be added by clicking on the Table button (it looks like the below image)