Web accessibility is important to us. Our website is partially compliant to WCAG 2.1 Level A, having passed the majority of the checkpoints relevant to us. We still have a few issues that are in the process of being fixed, see Issues & Improvements at the bottom of this page. Please contact us if you have problems accessing any parts of the site.

Accessibility Statement for Piws

Page Structure

We have written our pages so the order of the content makes sense whether pages are viewed by the user or whether the user is listening to the website using a screen reader.

Headings are used to organise content in the pages. This helps uses scan through text, and get an overall understanding of the content of a page. Each page has a main heading that describes what the page is about. It is positioned at the top of the page and marked up as top level h1. We have tried to ensure that headings are properly nested: h2 follows h1, h3 follows h2 and so on.

We include sidebars in some pages. However they are clearly labelled and don’t interrupt the main content. Widget headings are marked up as h2 in most cases. This provides a logical order for sidebar content within the page structure. Some widget headings are marked up as h3, while this doesn’t always follow a h2 in practice the elements in the sidebar are generated automatically and the h3 represents their importance as secondary content.

We’ve made sure that the text on links and buttons describes clearly what the link is for or what the button does.

Text Alternatives

The majority of content on the website is text based with decorative images or icons. So it can be accessed by most devices we’ve tried to ensure that all text is actual text and not an image of text. Where we’ve used images containing text, such as in our logo, we’ve included that text as alt text. This helps screenreader users or anyone browsing without images.

We’ve provided meaningful alternative text for images within the alt attribute of images. For purely decorative images we’ve left the alt text blank.

We’ve used visual text labels or captions in cases when this would enhance the meaning of an image, such as the feature key. This ensures text is easily available to all users. In such cases we’ve left the alt text blank to prevent repetition.

Where images are used for interactive functions, buttons or links, such as in feature images in our news section, we’ve provided alt text describing the linked page content, or the related function.

Navigate Content

The website header, with site identity and navigation, is provided on all pages to help you understand where you are in the site, and find your way around.

Our pages are structured using html regions that are recognised by assistive technologies. This helps people using assistive technology understand the structure of the page, and allows them to visit key areas more quickly. The header area at the top is marked up with the region

Colour and Contrast

We’ve used colour to help users find their way around the website: links are purple and the main page heading is in a purple strip. In all instances of text content on the website there is enough contrast between foreground and background colours for those who cannot distinguish colours.

As well as colour we’ve also tried to make sure there’s additional information to enable understanding: Headings are bold text with sizing related to their heading level. Buttons have text labels and are styled with block colour. Links use text-decoration or borders to indicate hover state as well as colour.

When links and buttons are in focus they have a solid purple border, and the background changes colour. Enquiry forms use colour change and a border to show the field is in focus. These focus styles are especially useful for keyboard only users or those with visual impairments to let them know where they are on the screen.

Text Size

You can increase the text size using your browser. Increasing text size also proportionally increases line height making the content comfortable to read. In addition, we’ve made sure that if you increase text size there’s no overlap or hiding of content.

Using the Website

Most areas of the website including links, navigation and contact form are accessible using a keyboard, as well as through using a mouse and touch gestures. The dropdown menus on the main menu are accessible with keyboard through a toggle button that shows and hides the links within the sub menu. There are still some areas which can only be accessed with a mouse or touch. These are outlined in the Issues section at the bottom.

In the forms on the website we have clearly labelled the inputs. When you click on a form field, or its label, the field background and border will change colour to show that the field is in focus. Form errors are displayed, however some forms are not fully accessible – see Issues & Improvements below.

Language

This is a bilingual website with pages available in either English or Welsh. All pages include the lang (language) attribute the value of which depend on the language of the page. This allows the users device to ‘know’ what language the content is in. Welsh pages have the value cy-GB, English pages have the value en-GB.

Some templates within the third party software are in the process of being translated. Once we’ve got a translation we’ll ensure it’s published on the website as soon as possible.

Issues & Improvements

We know some parts of this website are not fully accessible. They are outlined below. We are planning to address them in phase 2 of our project.

Icons

Throughout the site we have business listings – icons are used to illustrate features within each entry. A number of these icons have mislabelled alt text.

Page structure

Our page structure could be improved by including a main content container region

Blog

Blog article summary page – each article has a photo and title. Both of these link to the article. This is convenient for sighted users. Screenreader users however will hear the title repeated: 1. the alt text on the image article which is set as the article title, 2. the article title itself. Future redesign work could ensure that only one of the links within the summary is navigable with the Tab key use tab index=-1 on the image link.

Forms

Some of our forms are not fully accessible. Please contact us if you have any issues with forms on our website. In the meantime we’ve provided the following alternative to our ‘Submit a review’ form for those who can only use a keyboard.

We are aware of the following things on our forms:

• The Login link opens a floating modal and can’t be accessed by the keyboard, when the modal is opened it can’t be closed using the keyboard. The close button has no visible label or aria-label. The ‘for’ attribute on labels don’t match the ‘id’ of the related input.
• Submit Your Listing form – The city dropdown doesn’t allow keyboard access. It also can’t be closed with a keyboard. Select your listing accessibility features can’t be accessed with the keyboard. Error validation consists of a general ’Sorry there is a problem’ floating box. It doesn’t specify where the error is and is not marked up with landmark role=’alert’.
• Business Entry Pages – The share button in header isn’t available to allow keyboard users to share on social media. This Share button opens a modal overlay containing social media links. This modal can’t be closed using the keyboard. The star rating isn’t available for keyboard only access.
• Article Comment form – The inputs Name, Email and Website have tabindex set. This means they appear as the first items selected on the page and the focus jumps back and forth unexpectedly.
• Search form in sidebar – requires a label with the value search
• Campaign Monitor sign up form in the footer – form validation error messages are displayed in a tooltip next to the related field but text size is small and cannot be increased
• Contact form – no error messages are provided
• Registration form – Form errors should be marked up with landmark role=’alert’
• Dashboard – Update Profile Details – Form error should be marked up with landmark role=’alert’.
• Business write a review form – Form error should be marked up with landmark role=’alert’ and should specify the relevant form field

Valid Code

Our pages failed automatic code checker using the W3C Validator – validator.w3.org/

Technical Information about Piws Web Accessibility

Visit the W3C Web Accessibility Initiative pages to find out more about web accessibility: www.w3.org/WAI/fundamentals

For full details of what we tested and how the website meets the WCAG 2.1 A criteria please see our Accessibility Evaluation Report.