Skip to main content

Welcome, please visit our shop. Opening times 9-5pm

Richardson's Bakery Logo A gold bow shape on top with the name of the company in the middle and a gold thick line belowRICHARDSON’s BAKERY EST. 1953

Accessibility Statement

Introduction

Accessibility has been considered throughout this website's design and development process. It is something I have continuedly sought to improve and enhance.

It is important that websites consider all users. I have aimed to make this website a pleasurable experience no matter how people are accessing the website.

As I will describe, I have paid attention to semantic code and layout, appropriate colour contrast, detailed alt tags, legibility of fonts and text, efficient use of aria labels, and some additional accessibility features.

The website has been validated by W3C, Ax Dev Tools, Firefox's accessibility tools and websites such as Web Aims Color contrast checker.

Colour Contrast

I have ensured that all colour contrast in text, for the body, headings, paragraphs, navigation, and links, all pass at WCAG AAA score for colour contrast.

In some cases, in order to get an AAA score, this meant improving the colours in my original design. For example, I changed the colours of the headings from gold to a caramel brown colour so that they would achieve an AAA score whilst still staying within the theme of the original design.

The link colour styling has also varied to accommodate appropriate colour contrast. For example, the footer colour has a different hover and focus colour to the navigation links because of the difference in background colours.

Overall, my design aims to achieve a colour design focused on legibility whilst still being visually attractive through a gentle colour palette. This included off-white, lavender purple, caramel, and gold.

Semantic Code

One of the key tools that this website uses to achieve accessibility is semantic HTML code.

This means using HTML 5 elements, such as main, Nav for navigation, footer, and others, rather than Div elements. Whilst also building the structure with keyboard users in mind, for example, having the homepage links as clickable areas which can be easily tabbed through.

I have also paid attention to the hierarchy of headings. This has included some improvements from the previous design simplifying the heading structure. This meant reducing the use of h3 elements when unnecessary and instead using H1 and H2 elements following a logical and semantic structure.

Other improvements made in terms of accessibility to the semantic code have been using article elements over section elements where appropriate. I have also changed from a table to a definition list with accessibility in mind.

Overall, the code has been simplified to try and increase accessibility. All code has been validated by W3C.

Image and Links

All images have been given detailed tags, so visually impaired users can fully understand what the images contain.

SVG of the logo has been given a description tag so visually impaired users can understand what it contains.

The definition list has been given a title, and as have the iframe maps to define it as a map for screen readers clearly.

As previously mentioned, the homepage image links have been placed inside two A tags, so they are clearly structured as two clickable areas. This benefits the general user experience and keyboard users using the tab key to cycle through links.

Making the images fully responsive is also beneficial to users who may be zooming in and out.

There is full styling for the pseudo elements of hover, focus, visited and links, with accessibility in mind. All links change to colours with appropriate levels of colour contrast.

Adding to the colour change and to ensure it is clear to users where colour may not be as beneficial a signal, all links are underlined based on hover and focus (tab key). I improved the previous design by making the underline slightly thicker.

Another enhancement that I have added to the nav and footer links, recommended by reading on accessibility, is that they scale to be slightly larger (1.2) based on hover and focus.

This is to give another indication to users that they have a link, and it also aids visually impaired users by making the links larger.

I have not added this feature on the links in the clickable area because they affect the interaction with these elements, particularly the ability to tab through easily for users with keyboards. They also added the scale to the images and the text, which didn't have a desirable effect.

Skip to the Main content button

From my accessibility research, I found this as a recommended feature, particularly for users navigating the website with keyboards.

The skip to the main content button is styled on the focus pseudo-element and only appears for users using the tab key (as it would be unnecessary for users using the mouse to scroll).

Using the benefits of the semantic HTML five element of the main tag allows keyboard users to skip the navigation and go straight to the web page's main content. The users are offered a choice in this. They can either press enter to skip the rest of the navigation, or alternatively, they can hit the tab key again and move on to the rest of the navigation.

This feature has been added again, considering convenience for different users. A user who may be using a keyboard and is specifically looking for the page's core content is given the option of not having the tab through the whole of the navigation to get there, enhancing their user experience when visiting the website.

Print out webpage content button

This button using JavaScript prints out the content of the page. This is a useful accessibility feature for those with visual impairments or cognitive difficulties which impair reading and concentration such as Dyslexia.

Aria Labels

Much thought and consideration went into the judicious use of aria labels.

I decided to use aria labels or primary for the main navigation and secondary for the footer navigation. I used them on the clickable links to add more direct instruction for those using screen readers.

I have used them on the skip to the main content button and the address block(for the iframes I used the title tag as recommended by firefox accessibility tools).In addition, I used them on all of the article elements (using the labelling style recommended by the W3C.)

Instinctively the temptation was to add them to every element of the pages, giving every HTML element a landmark, role, and label.

However, based on the feedback of the W3C validator and my research and advice received, I found this can quickly overwhelm those using screen readers with too much information.

By using them strategically on particular elements, I have aimed to achieve this balance between enhancing the user experience of people using screen readers. Whilst not overwhelming them with too much information, which isn't necessary with semantic HTML elements.