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 WCAG 2.1 International standard but there are things that as users you need to be aware of to ensure you make your website meet this standard. We suggest the process of ensuring your site meets the standard is a 3 stage process outline below.
Ensuring your website meets the WCAG 2.1 standard, for the general user, can be a confusing and difficult process. We advise the first step you take is it do a scan of your website using government recommended software. We recommend using a tool called "Wave".
Providing you are using Google Chrome or Mozilla Firefox then simply click on one the links below and install this extension into your browser. Once you have installed the extension you should be able to go to your One Suffolk site, click the "W" icon in the top bar and then it will run a scan of your site. You can also just go to https://wave.webaim.org/ and simply type in your website address but we have found this doesn't always give accurate results compared to the browser extension.
WAVE Chrome Extension at the Google Web Store
WAVE Firefox Extension at Mozilla Add-ons
To meet the accessibility standard you need to correct all of the red critical errors and contrast errors. Amber errors are errors you should look at correcting if possible but if you can't correct them they should be detailed in your Accessibility Statement and Green issues are issues that you could look at but won't break your compliance of the regulations.
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 or general images on a page). 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. For instance, images in Carousels or images in your header like your Logo do not need to be considered.
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 to 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.
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:
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
The accessibility statement suggests you should not use underline text as it can confuse screen readers as they may think these are links. Generally on websites, underline text are always links.
Justified text is something that can make reading text confusing on a screen reader so we advise not using that. To format text we recommend standard left align or right aligned text. You can use the standard align buttons on the toolbar to align your text the way you want.
Any website should use clear and easy language. This includes limiting unusual words and abbreviations. It is best to avoid complicated sentence structure, adverbs, use of passive voice, and unnecessary clauses.
Making website copy easy to understand benefits everyone.
Most of us are mainly browsing, not reading, when scrolling through website copy. Having an easy to understand text, illustrating your information and its advantages, is extremely helpful for everyone.
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":
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.
It is important that you give your links good colour contrast. Generally we recommend setting them as a dark blue. To set your default link colour, go to "Settings" down the left hand side, click on "Theme Options" and where it says "choose a link colour for your site", click on the colour picker and pick a very dark blue for this.
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. The other key area you will naturally use colour is the choice of colour in the header bar. To meet the guidelines this has to be 4.5:1 so generally we recommending using a dark colour so it provides sufficient contrast. To change this setting, go to Settings, Theme Options and then use the colour picker next to primary colour to pick a colour and shading that is dark enough. Once done, press Save.
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.
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)
Captions
Audio description in the video, or a transcription that details the visual information and the audio information
Practically, in your One Suffolk website this means the following :-
Many Word Documents and PDF's are natively "not accessible" as standard. This is especially the case for people using old versions of Word, Excel etc which doesn't have the accessibility features that modern versions do. If you have created documents in the latest version of Word or Excel then these may already be accessible.
Ultimately we are not saying that you cannot use PDF's or Word documents on your site, as clearly this would be unworkable for most organisations. However, if you do have Word documents and PDF's on your site then you effectively have 3 options.
1. Try and make the documents accessible. Please find some handy online guide here which may help you make them accessible in
https://webaim.org/techniques/acrobat/converting or
https://webaccess.berkeley.edu/resources/tips/word-documents
https://webaccess.berkeley.edu/resources/tips/pdfs
2. Convert all your PDF and Word Documents into web pages on your site and ensure those pages meet the accessibility standard.
3. Ensure that you specifically document the fact that Word documents and PDF's on your site may not be accessible in your Accessibility statement.
Once you have completed the work on your site, the final thing you need to do is publish an Accessiblity Statement. This effectively involves publishing a new page on your site which covers a variety of points.
Here at One Suffolk we have a template that you can use to form the basis of the statement. You just need to edit it to complete your organisation's details and detail any elements within the appropriate section that you don't intend to fix. One of the key elements of the statement is ensuring that you are clear which bits of your site do not meet the standard, if indeed any do. This is particularly important for those "amber" items that your Scan using Wave may have picked up. For example, one of the big amber elements is often PDF or Word Documents. No one is suggesting that you can't have PDF's or Word Documents on your site, but if you do, then you need to reference these in your Accessiblity Statement as potentially not meeting the standard.
The template link is below, please download and use the template as you wish.
Why not check out our online recorded video seminar which we have recently recorded. It talks you through the 3 above steps and shows you practically, on your One Suffolk website, how you can fix some of the key Accessiblity issues that migh exist on your site.
It is available on our Community Action Suffolk Youtube page