Training Videos

WCAG compliance:

WCAG 2.1AA Compliance Tips – Link Text
WCAG 2.1AA Compliance Tips – Image Alt Text
WCAG 2.1AA Compliance Tips – Attaching Documents
WCAG 2.1AA Compliance Tips – Headings
WCAG 2.1AA Compliance Tips – Bold & Italics
WCAG 2.1AA Compliance Tips – Underlining
WCAG 2.1AA Compliance Tips – Maps
WCAG 2.1AA Compliance Tips – Background / Text Contrast

• Your website pages
• Where to find them
• Layout options

• Dashboard > Councils
• Click “Edit” on a page
• Click “Add pagebuilder row” & choose type
• Toggle pagebuilder row open
• Add pictures / words / documents
• Drag & drop pagebuilder row into desired place
• Click “Update” button

• Dashboard > Councils
• Click “Edit” on Councillors page
• Click “Add pagebuilder row” & choose Councillors
• Toggle pagebuilder row open
• Add intro title & intro text (optional)
• For each Councillor, add image (optional), name and position, email address etc (optional)
• To add more Councillors, click “Add councillor”
• Choose number of columns (up to 6 per row)
• Click “Update” button

• Dashboard > Councils
• Click “Edit” on Meetings, Minutes & Agendas page
• Click “Add pagebuilder row” & choose File Links (for documents)
• Toggle pagebuilder row open
• Add intro title
• Click “Add file”
• Find document on your PC and upload – remember to give the document a descriptive Title when uploaded
• Click the “Select” button to place it in your page
• Click “Update” button

• Dashboard > Councils
• Click “Edit” on Documents page
• Click “Add pagebuilder row” & choose File Links
• Toggle pagebuilder row open
• Add intro title
• Click “Add file”
• Find document on your PC and upload – remember to give the document a descriptive Title when uploaded
• Click the “Select” button to place it in your page
• Click “Update” button

• Dashboard > Councils
• Click “Edit” on Contact page
• In Contact Page box, make sure “Is this the contact page?” is ticked and a valid email address is added to the Contact Form Email input 
• Click “Add pagebuilder row” & choose Council Contact Page
• Toggle pagebuilder row open
• Add information as required to input boxes
• Click “Update” button

• Dashboard > Councils
• Click “Edit” on Accessibility page
• Use the government template to create your Accessibility Statement – also download our advice, via the link on your Accessibility page
• Remove the Help text and replace with your Accessibility statement
• Click “Update” button
• Click “Edit” on Privacy page
• Use your own privacy policy or an online privacy policy generator
• Remove the Help text and replace with your Privacy policy
• Click “Update” button

• Dashboard > Councils
• Click “Edit” on page
• Toggle pagebuilder row open
• Scroll down to Background colour (recommend alternating White and Light Grey)
• If choosing a dark background colour, also change Text Colour to white
• Click “Update” button

• Always make link text descriptive
• Don’t use “click here” or “read more” in the link
• Avoid using the full web address as the link (eg. “The Example Website” instead of “www.example.com“)

• All images should have short, concise, descriptive “Alt Text” (alternative text)
• Avoid long Alt Text
• In WordPress, when you click on an image in the media library, the Alt Text is the top input box for the image

• All document should have short, concise, descriptive “Title”
• Avoid long Titles and confusing letter- or number-coding
• In WordPress, when you click on a document in the media library, the Title is the top input box for the document
• All uploaded documents should have been created with Accessibility in mind – attend the SLCC webinars for creating accessible documents

• All headings should be in a logical order on the page – don’t select the heading just because you like the size
• This website has a Heading 1 at the top of the page, and each pagebuilder row’s title is a Heading 2…
• … so use a Heading 3 if you add sub-headings to content
• … and for sub-headings within those sub-sections, Heading 4 and so on

• Bold and italic text styling should be used sparingly
• Avoid using bold and italics for whole paragraphs
• Emphasis should be used for short phrases or single sentences

• Don’t use underline on any text
• Underlining is the standard styling for links on the web
• Using underline for text can create confusion, when a link is expected due to the underline style

• Maps are very difficult to make compliant, no matter what tool you use
• Google Maps are noted by users with accessibility requirements as the best – but still fail accessibility standards tests
• You can use Google Maps on your pages, but make sure any information they present – e.g. addresses – is present in text form before the map
• This makes the map the secondary source of the location information, and therefore adheres to compliance

• Contrast between text and background should be high, to allow legibility
• For example,  a dark grey / black text colour on a white background
• Or white text on a dark background
• Install the Wave browser extension for Chrome, to check contrast on web pages (and other WCAG compliance)