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
Misc Admin Functionality
- Your Website Dashboard Explained
- Login Security – 2 Factor Authentication
- Adding New Users
- Media Library – Bulk Delete Items
- Sitewide Announcement Banners
- Adding A Logo To The Footer
Editing Pages
- Page Meta (aka “SEO Meta” or “SEO Settings”)
- Page Title and Subtitle
- Popular Links
- Page Content Builder – Explained
- Page Content Builder – Move It Back From Sidebar
- Adding Video to a Page or News Post
- Copying & Pasting
- Adding A Link To Text
- Uploading Documents and Adding a Text Link
- Uploading Documents and Adding a Row of Button Links
- Reordering Documents
- Moving Documents To An Archive Page
- Blurred Photos – Why & What To Do
Special Pages & features
Events
- Events – Difference Between Events & Community Noticeboard
- Events – Summary Page
- Events – Switching to List View
- Events – Changing The Order
- Events – Event Tickets
News
- News
- News – Switching to List View
- Adding Latest News (using News + Events, no feature)
- Adding Selected News (using News + Events, no feature)
Navigation Links
- Menu/navigation – How to Make Changes to the Menu
- Navigation dropdown “meganav”
- Changing the Text of a Navigation Link
Accessibility Tips
- Checking a Page’s Accessibility
- Headings and Heading Order
- Uploading Images & Ensuring They Are Accessible with Alternative Text
- Accessible Tables
Operation Menai (London) Bridge
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 functionality for notification of ‘Operation London Bridge’
- Add new “Announcement” page for the formal notice and information – keep in draft, publish when needed
- Once published, Site Options > Operation London Bridge and tick the box to remove colours from logo / header / footer
- Pages > Settings, set the published page as Homepage
- If also using Sitewide Banner, go to Site Options > Sitewide Banner and tick Remove Colours from Sitewide Banner
- The video explains how to do this, in tandem with Aubergine’s optional template pages for Operation London Bridge. Please email [email protected] to request these are added to your website
- Download the step-by-step London Bridge instructions as PPT
- Download the step-by-step London Bridge instructions as PDF
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
Reordering Documents (e.g. PDFs) in File Links sections
Reordering files
- Page > Edit
- Toggle open the File Links pagebuilder row you want to reorder
- Each document has a number next to it – click and hold, and drag the document up / down to the desired position
- Update
Login Security - 2 Factor Authentication
Setting up 2 Factor Authentication
- Dashboard > Edit My Profile
- Scroll down to Two Factor Option
- Choose the authentication method – email, Google Authenticator, or both
- Generate and download one-time backup codes
- Update
News & Events - List View
News & Events List View
- News (or Events) > Edit Page
- News & Events Archive Setting
- Choose “Box” (larger images) or “List” (smaller images)
- For “List”, choose the number of items to display, an even number is best
- Update
Headings and Heading Order
Headings and Heading Order
- The heading in the coloured strip is always a Heading 1
- The title of any pagerow is a Heading 2
- Any heading in content after a pagerow title should be a Heading 3
- If no pagerow title is used, the first heading in content should be a Heading 2
Adding New Users
- Dashboard > Users > Add New
- Enter a username (letters only, no numbers or special characters) and their email
- Choose a role (admins = full access; editors = full access apart from user and navigation control; author = can only add, edit and publish their own pages; contributor = can only add and edit their own posts, but can’t publish – needs publishing by an editor or admin
- An email is sent to the new user, asking them to set up their password
Move The Page Content Builder Back From The Sidebar
- Dashboard > Page > Edit your page
- Find the Page Content Builder box in the sidebar
- Click, hold and drag the box back into the centre column
Accessible Tables
- Dashboard > Page > Edit your page
- Open this link to create your table: https://accessify.com/tools-and-wizards/accessibility-tools/table-builder/
- Copy the final table HTML and paste it into your website’s page (using the Text tab)
- Update the page (blue button, to the right)
Operation London Bridge - Returning site to original homepage after mourning period
- Dashboard > Pages > Settings
- Change ‘Homepage’ dropdown to Home (or whatever you named your original homepage) & ‘Save Changes’
- Dashboard > Site Options
- Operation London Bridge colour – untick option ‘Turn on Operation London Bridge colours’ & ‘Update’
- Dashboard > Pages > All Pages
- Edit the Mourning Template that was your temporary homepage
- In the Publish box (right hand column), change the Status dropdown to ‘Draft’ & ‘Update’
Checking a Page's Accessibility
- Open Chrome, Google “WAVE webaim accessibility extension”
- Install the extension in Chrome
- Open your website and click the WAVE icon
Planning Applications (manual input row option)
- Create a page and call it ‘Planning Applications’
- In the page builder, press the ‘add row’ button and select ‘Planning Application (manual input)’
- Add a title to the row and description of the content
- Add your first planning application filling in all the fields
- Add more applications
- Add Planning Authority link if required
- Publish (or update) the page
Icon Boxes Row option
- Create a page and call it ‘Committees’
- Create the pages you want to link to from the icon boxes
- Copy the URLs for each
- Edit the ‘Committees’ page and add the row option ‘Icon Boxes’
- Select icon choice (e.g. Councillors), add title and add the URL of the destination page
- Repeat for each page you want an icon box link
- Publish (or update) the page
Expire Notices on Community Noticeboard
- Select the notice you want to set an expiry date for
- Add the Expiry Date field
- Publish (or update) the notice
Move Documents To Archive Page
- Create a page for your Document Archive
- Edit the page you’re moving documents from (e.g. Minutes and Agendas)
- Find the pagerow you are archiving, select the icon ‘Copy page row to different page’
- Select the page you’re using for the archive, click ‘Copy Page Row’
- This opens the archive page with the page row copied over – save it by clicking ‘Update’
- Go back to edit your original page and remove the pagerow you’ve just copied to your archive page, click ‘Update’