Report Creator: Kate Watkiss, Nfys Design, November 19, 2020
Evaluation Commissioner: Menai Bridge Town Council
Overall the Menai Bridge town Council website was programmatically accessible and the content within the pages was accessible to a wide variety of users and situations. The audit raised issues that were addressed in preparation for the retest. For instance providing a site map to give a clear picture of the structure of the website, and a keyboard accessible drop-down within the main navigation. Training was given to help the team understand how to enter accessible content and keep the website accessible.
| Website name | Public Website of Menai Bridge Town Council |
|---|---|
| Scope of the website | All web content of the public website of Menai Bridge Town Council located at https://www.menaibridgetowncouncil.co.uk/ |
| WCAG Version | WCAG 2.1 |
| Conformance target | Level AA |
| Additional evaluation requirements | The evaluation will cover all web pages and web content of the website, rather than a selected sample only |
| Accessibility support baseline | FireFox with NVDA, Apple with VoiceOver |
| Relied upon technologies |
|
| Principle | Level A | Level AA |
|---|---|---|
| 1. Perceivable | 9 / 9 | 11 / 11 |
| 2. Operable | 14 / 14 | 3 / 3 |
| 3. Understandable | 5 / 5 | 5 / 5 |
| 4. Robust | 2 / 2 | 1 / 1 |
| Total | 30 / 30 | 20 / 20 |
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
Findings: Long documents are provided as webpages where possible. If this isn’t possible documents will be provide as pdfs with a summary of the information and a link to download the full document. We will create pdfs with text not images so text can be read by screen readers, or so that text can be increased if the user requires.
Findings: Home page:
Issue - To ensure that images with lots of text, such as posters or other informational documents, are accessiblity to blind or partially sited users we will do the following: Images will be provided with a description as to their purpose, plus either the equivalent content in text form, or, if the text is too long, a link where the content can be obtained such as a webpage. We will keep use of such content to a minimum.
Findings: –
Findings: –
Findings: feature images displayed on each post summary are considered decorative and thus have empty alt text. Any additional images that appear in each article summary will require appropriate alt text.
Findings: Refurb of Belgian Prom Benches:
Images of benches are shown along side descriptive wording so visually impaired users get a clear understanding of the story.
Findings: Wales Coast Path App:
The photo of the Wales Coast Path App information board in Menai Bridge provides information on where exactly the board is situated. For visually impaired users we include Alt text that describes this information: "The Menai Bridge information board is found by the benches at the Menai Bridge end of the Belgian promenade"
Findings: Embedded Google Map has a descriptive header, a brief description of landmarks and a title attribute in the iframe. Welsh translation required.
Findings: Profile pictures of council members have empty alt attributes instead of their name. This is because as their names are already provided as text. Including their names as alt text would mean the screen reader would read their names twice.
Findings: –
For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:
Findings: –
Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Findings: –
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Findings: –
Findings: –
Audio description is provided for all prerecorded video content in synchronized media.
Findings: –
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Findings: Landmark roles are included as role attributes to describe the structure of each page in the website. They are entered in the theme templates as follows:
Page header: role="banner" (applied to <header> element containing site name and logo, only one per page in this context)
Main navigation: role="navigation"
Slider: role="complementary"
Main content area: role="main" (only one per page)
Article: role="article" (content is described as an article if it can stand alone outside of the page context, each news item within the news page is assigned role article)
Sidebars: role="complementary"
Page footer: role="contentinfo"
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Findings: pages are constructed so the order of the content makes sense whether pages are styled or read as simple text. While sidebars are present some pages, they are marked up as such and don't interupt the main content.
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound.
Findings: Components such as links and buttons have sufficient text information to enable understanding without relying on shape, size or location.
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
Findings: Content is independent of the orientation of the device used to view pages.
The purpose of each input field collecting information about the user can be programmatically determined when:
Findings: Only applicable to the contact page where there is a simple enquiry form
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: Name text field uses autocomplete value of 'name', email field uses type attribute 'email' and autocomplete value 'email'
Findings: –
Findings: –
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Findings: Site wide:
Headings use colour and size to distinguish header levels.
Links use text-decoration or borders to indicate hover state as well as colour, including navigation links.
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: Enquiry form fields use colour change and a border to show the field is in focus.
Findings: –
Findings: –
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Findings: –
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Findings: There is sufficient contrast between foreground and background colours in all instances of text.
The logo has been repurposed for the website with a version for English and a version for Welsh. This allows for bigger wording on the image. The text colour has been darkened slightly. This provides a contrast ratio of 4.9:1 which is considered sufficient to distinguish text.
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Findings: –
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
Findings: See point 1.1.1 Non-text Content
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
Findings: –
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
Findings: Link, hover and focus styles are set with outlines of contrast greater that 3.5. Buttons are set with foreground & background contrast of greater than 3.5. Buttons have focus styles of colour and additional border.
Form fields have border and field background greater that 3.5
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
Findings: Text size can successfully be increased with resulting increase of line height for readability. Increase in text box area flows without any overlap or hiding of content.
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
Findings: –
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
Findings: Submenu dropdowns are accessible with keyboard as well as with a mouse
If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.
Findings: –
If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
Findings: –
For each time limit that is set by the content, at least one of the following is true:
Findings: –
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
Findings: Home page scrolling banner can be paused and scrolled using the keyboard.
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
Findings: –
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Findings: ARIA landmark roles are used to identify areas of all pages (header, main and complementary for sidebars, and footer) - see section 1.3 for full list
Findings: All the tested web pages have a descriptive title, which is relevant to the content of the web page. The content of the Web page can be identified using the title when read out of context in a list of links or search results.
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
Findings: All web pages have been constructed so that links and buttons are in sequential and logical order. This allows the user to easily tab through the content using the keyboard.
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Findings: Link text include wording describing what the link is for.
Findings: –
Findings: Links to agenda and minutes include the date and if they are a pdf document
Findings: Links to policies indicate if they are a pdf document
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
Findings: Navigation is provided on each page. A sitemap, also provided, gives a user an alternative way to navigation the website.
Findings: –
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Findings: Focus styles are set with outlines of contrast greater that 3.5. Buttons have focus styles of background colour and additional border with foreground & background contrast of greater than 3.5 Form fields on focus have border and field background greater that 3.5
All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.
Findings: –
For functionality that can be operated using a single pointer, at least one of the following is true:
Findings: –
For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
Findings: –
Findings: –
Findings: –
Findings: –
Findings: Search form input label is shown visually.
Findings: –
Findings: –
Findings: Enquiry form input labels are shown visually.
Findings: –
Findings: –
Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:
Findings: –
The default human language of each Web page can be programmatically determined.
Findings: This is a bilingual website with pages available in either English or Welsh. All pages include the lang (language) attribute which has the value en-GB or cy-GB depending on the language of the page. This allows the users device to 'know' what language the content is in. Pages will be translated in full, or sections in the other language (English or Welsh) will be marked up as such - see below 3.1.2
The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.
Findings: Pages are translated in full (see point 3.1.1) or otherwise the alternative language will be marked up.
Exception:
Because the name of the council building Canolfan Coed Cyrnal would be used by English speakers it can be left in Welsh without marking the language. The same applies to other instances of Welsh on the English pages. If English speakers would just use the Welsh then it can be considered part of the regional English spoken language. This applies vice versa.
Findings: Widgest in the Welsh version of the page will be presented in Welsh or marked up programatically as in English using the lang attribute.
Findings: –
Findings: –
Findings: Welsh version of the blog page - contains template strings that have been translated into Welsh such as 'filed under' to Wedi ei ffeilio o dan, 'posted by' to Postiwyd, and months of the year.
Findings: Welsh version of the page - Template strings are translate
Findings: Welsh version of the page - Template strings are translate
Findings: Welsh version of the page:
Enquiry form error messages have been translated into Welsh
The embedded Google map of the council offices is provided for the convenience of our visitors. The language that the Google map is displayed in depends on the users preferred language, and is set by the Google API. However a significant number of the map labels are only available in English. This is beyond our control.
Findings: –
When any component receives focus, it does not initiate a change of context.
Findings: –
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
Findings: –
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
Findings: A header with site identity and navigation is provided on all pages allowing user orientaion and ease of navigation through the site.
Components that have the same functionality within a set of Web pages are identified consistently.
Findings: All links and buttons are styled consistently
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: Form error is marked up with landmark role='alert'. The alert is described to the user and clearly differentiated with a coloured border.
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: Search form has clear label to identify form purpose and marked up with a landmark role='search'
Findings: –
Findings: –
Findings: Enquiry form has clear label to identify form purpose and marked up with a landmark role='form'
Findings: –
Findings: –
If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: Error messages are provided to explain the nature of the error and how it can be rectified.
For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true:
Findings: –
In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
Findings: Pages tested for code validation with https://validator.w3.org no errors found.
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
Findings: –
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Findings: –
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Findings: landmark role="alert" is used to mark up error messages on the contact form