WCAG Compliant Website Learning Centre
Learn how to create, control and update your WCAG compliant website using our comprehensive set of How-To videos
If you can’t find a video that explains what you’re trying to achieve, or if you’re struggling – please get in touch at [email protected]
You can also register for one of our regular group training sessions.
Quick Links
- Your Website Dashboard Explained
- Page Content Builder – Explained
- Sitewide Announcement Banners
- Page Meta (aka “SEO Meta” or “SEO Settings”)
- Page Title and Subtitle
- Popular Links
- Services
- Contact Page
- Venues
- People (eg Councillors)
- Events – Difference Between Events & Community Noticeboard
- Events – Summary Page
- Events – Changing The Order
- Events – Event Tickets
- Community Noticeboard
- Restricted Access Area
- Adding video to a page or news post
- Meetings Calendar
- News
- Adding Latest News (using News + Events, no feature)
- Adding Selected News (using News + Events, no feature)
- Copying & Pasting
- Menu/navigation – how to make changes to the menu
- Navigation dropdown “meganav”
- Adding A Link To Text
- Changing the Text of a Navigation Link
- Uploading Documents and Adding a Text Link
- Uploading Documents and Adding a Row of Button Links
- Uploading Images & Ensuring They Are Accessible with Alternative Text
- Blurred Photos – Why & What To Do
- Media Library – Bulk Delete Items
- Adding A Logo To The Footer
- Operation London Bridge Announcement tool
Page Content Builder - Explained
- Website pages consist of 1 or more “page content builder strips”
- 15+ WCAG 2.1 AA-compliant strips to choose from
- Drag-and-drop order
- Examples of each strip included on our Demo website’s “Sample Page”
Sitewide Announcement Banners
- Dashboard > Site Options
- Tick “Show Site Notice”
- Add title
- Add additional content (if needed)
- Add link (if needed)
- Click “Update”
Page Meta (aka "SEO Meta" or "SEO Settings")
- Dashboard > Pages / News / Venues / People / Events
- Edit Page / News / Venue / People / Event
- Page Meta box
- Add meta title
- Add meta description
- Add social media sharing image (1,200px wide x 630px high ideal size)
- Hide this page from search engines – select “No – keep page visible” or “Yes – hide from search engines”
- Click “Update”
Page Title and Subtitle
- Dashboard > Pages / News / Venues / People / Events
- Edit Page / News / Venue / People / Event
- Page Header Settings box
- Add main title and subtitle (optional)
- Click “Update”
Popular Links
- Dashboard > Pages / News / Venues / People / Events
- Edit Page / News / Venue / People / Event
- Page Header Settings box
- Tick “Show Popular Links”
- Popular Links – add title
- Popular Links – add link text and link
- Click “Update”
Services
- Dashboard > Pages
- Edit Page “Services”
- Services Page Info box
- Popular Searches – add word(s)
- Popular Links – add title
- Other Tier Council Links – add link text (label) and link
- Dashboard > Services > Add New
- Add title
- Add link (if needed)
- Click “Publish”
Contact Page
- Dashboard > Pages
- Edit Page “Contact”
- Contact Info box
- Add title
- Add opening times (optional)
- Add address (optional)
- Add top image (optional)
- Add email & telephone
- Add address for map pin
- Search for address and click to select
- Click “Update”
Venues
- Dashboard > Venues > Add New
- Venue Info box
- Add opening times – labels & Times (optional)
- Add venue phone number and email address (optional)
- Add contact form title and intro
- Use shortcode [opening_times] to output opening times
- Use shortcode [venue_phone] and [venue_email] to output venue’s phone & email
- Page Content Builder box
- Add page builder strips
- Click “Publish”
People (eg Councillors)
- Dashboard > People
- Add a new person, put their name as the title
- Upload their picture to Thumbnail
- Add any position they have as the Summary (optional)
- Use the pagebuilder to add their information (we recommend the 2 column layout, put their photo in the left WYSIWYG and their bio in the right, and make the left column 30% width)
- Save the person
- On your Councillors page, use the pagebuilder “Text + People” and select each person you want to show
- Choose whether you want people to the right, or in a row (with more than 6, “text above, people below” is better)
- Save the page
Events - Difference Between Council & Community Events
- Council Events = Events run by your council, each event has its own page on the council website
- Community Events = Events not run by the council, no page on the council website – instead links to an external website (optional)
Council Events - Summary Page
- Dashboard > Council Events
- Edit Event
- Summary box (right hand column)
- Thumbnail > Add image > Upload (385px wide x 330px ideal size)
- Add description
- Click “Update”
Council Events - Changing The Order
- Dashboard > Council Events
- Drag and Drop Events to correct order (top Event will appear first on Council Events page)
Community Events
- Dashboard > Community Events
- Add Event
- Add title
- Add link (optional)
- Dashboard > Community Events
- Drag and Drop Events to correct order (top Event will appear first on Community Events page)
News
- Dashboard > News
- Add News Post
- Add title
- Page Content Builder box
- Add page builder strips
- Categories box (right hand column)
- Tick relevant category
- Summary box (right hand column)
- Thumbnail > Add image > Upload (385px wide x 330px ideal size) for News summary page
- Add description for News summary page
- Click “Publish”
Copying & pasting
- Dashboard > edit a page
- Navigate to content area where text is to be pasted
- Note: ‘T’ in a clipboard symbol in toolbar
- Navigate to source Word doc or website
- Select > copy (CNTRL & ‘C’ or right-click & ‘copy’)
- Navigate to web page
- Press the ‘T’ clipboard symbol -blue confirmation message appears
- Place cursor where text is to be pasted
- Right-click and select ‘paste’ or (CNTRL & ‘V’ on your keyboard)
- Text appears unformatted ready for any styling
- Click ‘publish’ (or ‘update’ if an existing page)
How to make a mega nav
- Dashboard > menus
- Make the individual menus you want to appear in your mega nav (max x3)
- Navigate to ‘primary navigation’ menu
- Add a ‘custom’ link and label it (e.g services)
- Select ‘mega nav’ option
- Choose the menus for the mega nav
- Save menu
Adding A Link To Text
- Edit page (or new page)
- Find or add Page Content Builder strip
- Highlight the text for the link
- Click the Link icon
- Either paste your link into the box, or search for the page on your site
- Click the blue Apply icon
- Save / Update
Uploading Documents and Adding a Text Link
- Edit page (or new page)
- Find or add Page Content Builder strip
- Place cursor where you want the link
- Click “Add Media” button
- Choose Upload, find the document on your computer and choose “Open”
- Once uploaded, give the document a descriptive title
- Click blue button Insert Into Post
- Save / Update
Uploading Documents and Adding a Row of Button Links
- Edit page (or new page)
- Find or add Page Content Builder strip “File Links”
- Click Add File to create a new row, and then Add File in this row
- Choose Upload (or Media Library, if you already uploaded), find the document on your computer and choose “Open”
- Once uploaded, give the document a descriptive title
- Click blue button Select
- Drag and drop into desired order by clicking and holding on the row number
- Save / Update
Uploading Images & Ensuring They Are Accessible with Alternative Text
- Edit page (or new page)
- Find or add Page Content Builder strip (eg Two Column or Image + Text)
- Place cursor where you want the image (or click the Add Image button when using Image + Text)
- Click “Add Media” button
- Choose Upload, find the image on your computer and choose “Open”
- Once uploaded, give the image descriptive Alternative (“Alt”) Text
- Choose the image size to insert (usually, full size is better)
- Click blue button Insert Into Post
- Save / Update
Blurred Photos - Why & What To Do
- Caused by using a photo that’s too small (smaller than the size the website display it at)
- Ideally, find a larger version of the photo or a larger alternative
- If you don’t have one available, use an alternative layout, eg 2 Column instead of Image + Text
- Add Media to upload /choose your image
- Choose the image size to insert (usually, full size is better)
- Click blue button Insert Into Post
- Use the Column Width slider to make the image column less wide
- Save / Update
Menu/Navigation - Make Changes to the Menu Bar
- Adding, removing & editing the position of a menu item
- Adding and creating Parent, Child & Grandchild pages
- Adding a new page to the menu
- Save / Update
Media Library - Bulk Delete Items
- Dashboard > Media Library
- Button: Bulk Select
- Select items to delete
- Button: Delete Permanently
Restricted Access Area
Documents uploaded via the Restricted Access Area can only be downloaded via Restricted Access pages – but make sure you don’t upload them via the standard Media Library “Add New” route, as this won’t lock their access
- Dashboard > Restricted Access Area
- Either: edit existing Restricted Access page
- Add Restricted Page Row: Restricted File Links
- Button: Add File
- Button: Update
- Or: Add new Restricted Access page
- Add Restricted Page Row: Restricted File Links
- Button: Add File
- Button: Publish
- Edit existing Restricted Access index page
- Edit Restricted Page Row: Restricted Page Picker
- Button: Add Item
- Select new Restricted Access page
- Button: Update
Adding Video to a Page or News Post
This video covers how to add a video to you WCAG website – whether on a page on the site or a news post. You will need to make sure that you have uploaded your video first to your You Tube channel.
- Best-practice is to have a You Tube channel to host all videos – set up or log in
- Upload the video first to that you tube channel
- Select ‘share’ button and copy the ’embed’ code
- Create new post or page
- Switch page row view to ‘text’ from ‘visual’
- Paste in the code copied from You Tube
Things to note
- Ensure ‘enhanced privacy mode’ is enabled on the You Tube video panel before copying code
- Check the ‘start at’ button on the You Tube video panel before copying code
- Enable Captions on your video if it has sound/voice
Adding Latest News (using News + Events, no feature)
Once you’ve added News to the website, use the News + Event (no feature) pagebuilder row to automatically display latest news on a page, eg your Homepage
- Dashboard > Pages, select the page you want to show Latest News on
- Add pagebuilder row News + Events (no feature)
- Enter a title (eg Latest News)
- Display option > Latest News
- Click “Update”
Adding Selected News (using News + Events, no feature)
Once you’ve added News to the website, use the News + Event (no feature) pagebuilder row to display selected news on a page, eg your Homepage
- Dashboard > Pages, select the page you want to show Latest News on
- Add pagebuilder row News + Events (no feature)
- Enter a title (eg Latest News)
- Display option > “Select what to display”
- In Items, click Add Item
- Select the news item to display (you can search by title in this box, too)
- The output is in rows of three, so three or six selected items works best
- Click “Update”
Changing The Wording On Your Navigation Menu
Note 1 – this is relevant when you want the link to go to the same place, but just have different word(s) in the navigation menu. If you want to change the link, watch this video
Note 2 – WCAG compliance requires all links to the same page, on a page, to have the same text. Eg one link saying Contact, another saying Contact Us, will fail a compliance scan
- Dashboard > Menus
- Select the menu you want to edit (eg Primary Navigation Menu)
- Find the link you want to edit
- Click the down triangle to expand the link box
- Change the “navigation label”
- Click “Update”
Adding A Logo To The Footer
Add logos – eg for associations or awards – to the website footer via Site Options
- Dashboard > Site Options
- In Footer Logos > Add footer logo
- Upload image, add optional link
- Click “Update”
Operation London Bridge Announcement tool
Using the Announcement Bar tool for Notification of ‘Operation London Bridge’
- Add new page for the formal notice and information – keep in draft
- Add announcement from ‘site options’
- Enable ‘dark mode’
- Add link to draft message page
- Enable message
Event Tickets
Using the Event Tickets functionality (optional, paid extra)
- Edit Event > Event Tickets options
- Add ticket types, prices and the total number of tickets
- Add T&Cs for the event
- Add the confirmation email text (NB the email serves as the e-ticket for the event – by default it clearly states the number of tickets bought at the top
- Review and download ticket purchases via the individual Event page on the backend, or via the Council Event Bookings tab
(NB2 – tickets can be sold “free”, without the need to take payments, with the system simply skipping the card payment page)
Back to top
Meetings Calendar
Using the Meetings Calendar
- Meetings Calendar > Add New
- Add title, description, location & time, date
- Add optional link and link text
- Publish
- To display calendar, place the pagebuilder row “Meetings Calendar” in any page