Community Pharmacy Editor Guide

Reading Time: 13 Minutes

This short guide provides Community Pharmacy site editors with advice on creating accessible and visually appealing content using the WordPress editor.

Getting Started User Guide

Accessibility Essentials

The Equality Act 2010 (UK) mandates that public sector organisations must make information accessible to everyone, including those with disabilities. This includes ensuring site content, images and downloadable PDFs are accessible to users with visual impairments, learning difficulties, or other accessibility needs.

The vast amount of website accessibility issues can be attributed to common mistakes, such as the lack of heading tags, the absence of alt text descriptions for images, and the use of unclear link text. Fortunately, these issues often have straightforward solutions.

Headings

The title of every Community Pharmacy page is an H1 heading. This is formatted automatically by the template, this is the first heading on your page. The main sections of the page that follow should be formatted as H2, with sub-headings as H3 (and sub-sub headings as H4).

Headings (H2-H6) serve as crucial signposts, helping all users, including those with visual impairments, quickly grasp main points and navigate content. Use clear, concise, and descriptive headings to structure your pages effectively.

Heading blocks not only organize content but also improve navigation, as screen readers and search engines rely on them to understand information hierarchy and flow.

Avoid skipping heading levels; for instance, do not jump from an H2 directly to an H4. Consistent use of headings ensures your content is both accessible and easy to navigate.

Only use heading styles for headings. Don’t use bold text.

Aim for at least one line of body text between headers (although this is not always possible).

Alternative Text (Alt Text)

Adding descriptive alt text to images explains their content to visually impaired users relying on screen readers. Alt text provides context to all users, even those with slow internet connections where images might load slowly.

For example, the alt text for:

  • An image of an inhaler could be “Blue inhaler with a red mouthpiece.”
  • An image of a pharmacist consulting with a patient could be “Pharmacist in white coat reviewing medication with a patient.”
  • An image of a pharmacy storefront could be “Modern pharmacy storefront with colourful signage.”

Descriptive Link Text

It’s crucial to use descriptive link text, especially when linking to documents. Avoid using generic phrases like “click here”. Instead, opt for informative link text that accurately describes the destination or purpose of the link.

By using descriptive link text, you provide users with clear expectations about the content they will encounter when clicking the link. This is especially important for individuals using screen readers or other assistive technologies, as they rely on link text to navigate websites effectively. Generic phrases like “click here” offer little context and can be confusing for users, particularly those with disabilities.

Rather than:

Click here to download the accessibility guidelines PDF.

Click here for the latest January newsletter.

Instead:

Download the accessibility guidelines PDF.

Read the latest January newsletter.

Formatting for Readability

Formatting for readability is key to creating engaging and user-friendly content. Short paragraphs, clear headings, and strategic line breaks make your information easier to digest and visually appealing.

Simple Language

Use clear, everyday language that’s easy for everyone to understand. Avoid complex medical terms unless your content is specifically aimed at healthcare professionals.

Short Paragraphs

Break up text into digestible chunks with short paragraphs (3-4 sentences).

Short paragraphs improve readability. They make your text less intimidating, easier to follow, and keep readers engaged.

Bold and Italics

Use bold and italics sparingly for emphasis only. Do not use these for decorative purposes or for page headings.

They should convey meaning for screen reader users. For instance, bold could highlight a medication name and italics could emphasize a potential side effect.

Line Breaks

Use line breaks (SHIFT + RETURN) strategically to break up text and improve visual flow. This can be handy when writing out addresses. For example:

Rather than:

Department Name, 123 Street Name, City, PO1 1ST

Instead:

Department Name
123 Street Name
City
PO1 1ST

List Block

Use the List block to create bulleted or numbered lists for easy-to-read information.

Breaking down information like medication side effects, dosage instructions or links to documents into lists makes them easier to understand and follow.

Screen readers can announce list items individually, making them easier to navigate for users with visual impairments.

When referencing multiple documents or resources, listing the links can improve accessibility and organisation. This approach allows readers to easily find and access the necessary documents. For example:

Rather than:

For more information, you can refer to the user guide, terms of service, and privacy policy on our website.

Instead:

For more information, please refer to the following documents:

Email links

Display email addresses in full. This allows users to easily copy and paste the address if they prefer not to click the link, and clarifies that clicking the link will launch their default email client.

Rather than:

For further information email Bob Smith

Instead:

For further information email Bob Smith (bob.smith@nhs.net)

Media

Keep images on pages to a minimum and only include images and infographics that directly relate to your content and accurately represent the information you’re conveying.

Avoid using clip art, generic stock photos, or low-resolution images as these can appear unprofessional and detract from the credibility of your information. If possible, use original photography or custom illustrations as these can add a unique touch and enhance user experience.

If you use any copyrighted images or illustrations, ensure you have the proper permissions to use them on your website.

Finally ensure images are cropped to the dimensions for their intended purpose and are compressed for faster loading times.

Tables

Tables should only be used to display tabular data, where the information is inherently structured in rows and columns, such as financial reports, schedules, comparative data or data that generally looks like something you might display in a spreadsheet or possibly a database.

Tables should not be used for non-tabular content presentation or as a substitute for proper semantic markup, as this can lead to accessibility issues and hinder the usability of the webpage.

PDFs

The Portable Document Format (PDF) is typically utilized when documents require printing (e.g., reports), archival storage (e.g. terms and conditions), or reference in offline scenarios (e.g. maps or instruction sheets). Nevertheless, in many cases, PDF content could be more efficiently conveyed through HTML web content.

This is mainly because PDFs are:

  • unresponsive – they don’t change size or shape to fit browsers and devices, meaning lots of zooming and scrolling
  • not designed to be read on a screen, leading to strain on the eyes and brain
  • treated differently by browsers, apps and devices
  • viewed in isolation from the navigation of their hosting website
  • not as easy to update and might have been created by an agency
  • harder for search engines to crawl and index
  • difficult to measure and analyse in terms of usage.

PDFs and Accessibility

If you do need to create PDFs you should ensure they are fully accessible and compliant. Accessible PDFs allow everyone to access the information they need, regardless of their abilities. This fosters inclusivity and ensures equal access to essential health information.

Creating Accessible PDFs

While there are various methods for creating accessible PDFs, here are some general tips:

  • Use Headings and Structure: Organize your PDF content using headings (similar to the Headings Block in WordPress). This helps assistive technologies navigate the document effectively.
  • Include alt text for any images within the PDF, describing their content.
  • Maintain sufficient colour contrast between text and background for clear readability. Tools like WebAIM Contrast Checker can help verify contrast.
  • Choose clear and easy-to-read fonts throughout the PDF. Avoid overly decorative or script fonts.
  • Explore online tools or plugins that can help you check and improve the accessibility of your PDFs.

Additional Resources

Additional Tips

Preview Your Content

Preview your content on different screen sizes and devices to ensure proper formatting across platforms.

How can I check my content is accessible?

You can use online tools such as WAVE from WebAim. WAVE identifies common accessibility issues such as missing alt text or heading tag issues, ensuring alignment with Web Content Accessibility Guidelines (WCAG).

Access the WAVE tool at: https://wave.webaim.org/.

To check PDF’s for accessibility you can use Adobe Acrobats built in checker or download PDF/UA’s checker: https://pdfua.foundation/en/pdf-accessibility-checker-pac/

Accessibility Regulations 2018

Non-urgent advice:
Note for Editors

Website editors working for public body organisations in the UK must ensure all content is accessible to everyone, including individuals with disabilities, in compliance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.

Failure to make content accessible can result in legal consequences, including enforcement actions by the Equality and Human Rights Commission (EHRC), fines, and damage to your organisation’s reputation.

Prioritising accessibility is not just a legal requirement but also a commitment to inclusivity and equal access for all users.

Further Training

WordPress offers numerous advanced features beyond the basics. To explore these capabilities, visit https://easywpguide.com/wordpress-manual/ for a comprehensive manual on using WordPress effectively.

If you need further training on tasks not addressed in the guides above please fill out the form on this page: Request Additional Training.

Review & Confirmation

Please login to view the confirmation form.