Details button

The details button is mostly obscured by the cookie banner on page load.  

In order to report a tree, a user can either double click the tree or the user selects the tree and then activates the details button.     If the user does not see the details button they are unlikely to activate the button.  Partially sighted users are less likely to be able to spot a partially obscured control.

None

OK button 

The text colour contrast is only 2.96:1 against the background.

Where the text colour contrast is poor, partially sighted users may either struggle to read the text or not be able to read the text at all.

 1.4.3 Contrast Minimum 

List of addresses, selected address (blue background and white text).  This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

When the control receives the keyboard focus the colour contrast of the text is only 3.12:1 against the background. 

Where the text colour contrast is poor, partially sighted users may either struggle to read the text or not be able to read the text at all.     Some partially sighted users will use the tab key to navigate through the page as it can be easier to navigate using the tab when using higher levels of browser zoom.

 1.4.3 Contrast Minimum 

Information about making an enquiry' heading

The affected content is marked up as a heading level 5.  It is the first heading in the dialog.     The next two headings are heading level 2.

When screen reading software encounters headings, the presence of the heading and the heading level is announced. Some screen reader users navigate the page by headings, getting their screen reading software to generate a list of headings.  A heading level 1 usually indicates the start of the main content of the page. Using different levels of headings helps screen reader users understand the structure of the page and the hierarchy of information.  Where the heading level is not logical, page navigation and understanding the structure of information can be difficult for users who cannot see the screen.

 1.3.1 Info and Relationships

Works performed and date, tree details dialog, tree works tab

The affected content is not marked up as a heading programmatically <H>, despite appearing to be a heading to sighted users.

When screen reading software encounters headings, the presence of the heading and the heading level is announced. Some screen reader users navigate the page by headings, getting their screen reading software to generate a list of headings. Absence of headings makes the page difficult to navigate and the page structure more difficult to understand for screen reader users who cannot see the screen.

 1.3.1 Info and Relationships

Tree number and type, tree details dialog, details tab.  In the screenshot this is '56700 (Single tree)'

The affected content is not marked up as a heading programmatically <H>, despite appearing to be a heading to sighted users.

When screen reading software encounters headings, the presence of the heading and the heading level is announced. Some screen reader users navigate the page by headings, getting their screen reading software to generate a list of headings. Absence of headings makes the page difficult to navigate and the page structure more difficult to understand for screen reader users who cannot see the screen.

 1.3.1 Info and Relationships

Whole page

There are no headings on the main part of the site.

Some screen reader users use headings to navigate through the page using the headings list.  Because of the design of the page headings are not strictly necessary for WCAG compliance.  However some hidden headings may make the page more navigable.

None

Submit enquiry' heading enquiry dialog

The heading is marked up as heading level 4. 

On a page or dialog, screen reader users assume the heading level 1 is the beginning of the main content.  The heading level is announced by screen reading software.

None

Tree images

There is no alt text. 

Screen reader users who cannot see the screen will not be able to understand the purpose of the image.

 1.1.1 Non text content

Selected and non selected trees

The only way of knowing which tree has been selected is because it is blue.  The fill of a blue tree only has a  colour contrast of 1.77:1 against green fill of a non selected tree.  The border of a blue tree only has a colour contrast of 1.33:1 against the border of a green tree. 

Users who cannot perceive colour, including users who cannot see the screen, some colour blind users and some partially sighted users will not be able to distinguish the selected tree from the unselected tree.

 1.4.1 Use of colour

Image icon (gallery button)

Only a small portion of the image icon in the bottom left hand corner has more than a 3:1 colour contrast against the white background.

Some partially sighted users may not be able to clearly see the image icon as representing the concept of an image.

 1.4.11 Non-text contrast

Street view icon

At its darkest, the Streetview icon only has a 2.29:1 colour contrast against the background.  Most of the Streetview icon has a considerably lower colour contrast against the background.

Some partially sighted users may not be able to clearly see the Streetview icon.

 1.4.11 Non-text contrast

The search icon on the address finder on keyboard focus.

The white magnifying glass only has a 1.19:1 colour contrast against the grey background.

Some partially sighted users may not be able to clearly see the search icon.

 1.4.11 Non-text contrast

The letter 'e' in the location marker.

The text in the image only has a 2.49:1 colour contrast ratio against the background.

Where the text colour contrast is poor, partially sighted users may either struggle to read the text or not be able to read the text at all.

 1.4.3 Contrast Minimum

Collapse menu button 

The image button does not have an accessible name. 

Screen reader users who cannot see the screen will not know the purpose of the button. 

 1.1.1 Non text content

All dialogs

The dialogs as a whole are capable of receiving the keyboard focus.     When they have the keyboard focus, the keyboard focus indicator is not visible.  When the last interactive control in each dialog has the keyboard focus, if the user activates the tab key, the keyboard focus does not immediately go to the first interactive control in the dialog.

Keyboard only users who cannot use a mouse need to be able to use the tab key to navigate through the page.  Where the keyboard focus is not present, it can be confusing for keyboard only users.

 2.4.7 Focus Visible

Islington Council logo

The accessible name does not contain the text in the visible text label.  The accessible name is "Back to main page"

Voice recognition software users expect to be able to navigate to interactive controls by saying "click 'control name' (e.g., "click submit").  If the visible text differs from the accessible name voice recognition software will not activate the control.  However, there are other ways by which a voice recognition software user without use of their limbs can activate the control.  

 2.5.3 Label in Name

Search for an address control

The accessible name does not contain the text in the visible text label.  The accessible name for the postcode search input is "Map search drop down".     The visible label is "Search for an address".

Whilst sighted users see the visible label for each control ( "Search for an address"), screen reading software just reads out the words 'Map search drop down', which is confusing. It is not clear that the component searches for an address.  In addition, voice recognition software users expect to be able to navigate to interactive controls by saying "click 'control name' (e.g., "click Search for an address").  If the visible text differs from the accessible name voice recognition software will not activate the control.  However, there are other ways by which a voice recognition software user without use of their limbs can activate the control.  

 2.5.3 Label in Name

Details control 

When a user single clicks on a tree the 'Details' control appears. The users can click on the 'Details' control  to see more information about the trees and make an enquiry. Users can also find details about trees by double clicking on the tree or selecting the tree on the keyboard.  Nevertheless, the 'Details' control needs to be in tab index because when a user closes  the tree details dialog, the keyboard focus needs to go back to the invoking control. 

Keyboard only users who cannot use a mouse rely on being able to navigate through the page using the tab key.  Controls which are not in the tab index are not accessible to keyboard only users.  Screen reader users who cannot see the screen typically navigate between controls using the tab key and therefore will not be able to activate the controls either.

 2.1.1 Keyboard 

Powered by Ezytreev, crown copyright and database rights 2025 OS AC0000851216"

The affected content cannot be read aloud by screen reading software.

Screen reader users who cannot see the screen will not be aware of the existence of the affected content.

 1.3.1 Info and Relationships

Tree map

The tree map can receive the keyboard focus.  When the tree map receives the keyboard focus, users can navigate through the trees using the space key.  However screen reader users using screen reading software cannot navigate through the list of trees. When using JAWS screen reading software, when the tree map has the keyboard focus if the user presses the escape key, the map zooms in.  When using NVDA software, when the tree map has the keyboard focus and the user presses the escape key, nothing happens.

Screen reader users who cannot see the screen are not able to select a tree from the map.  This could affect sighted screen reader users (users who have some vision and use a combination of screen reading software and magnification to access pages).     This may also affect screen magnification /reader software.

2.1.1 Keyboard 

Search for an address label

Part of the word 'Address' is lost then the user adapts paragraph spacing to 2 times the font size, text line height spacing to 1.5 times the fonts size, word spacing to 0.16 times the font size and letter spacing to 0.12 times the font size.

Some users use tools to adjust the text spacing of text to make the text easier to read.  Users with specific learning difficulties such as dyslexia can find this a helpful technique. If content has been lost when the text spacing has been adjusted, users may have readjust the text spacing to a level that is sub-optimal for their reading preferences.  In addition there is a danger that some users may not realise that content has been lost when the text spacing was adjusted. 

 1.4.12 Text Spacing

Tree layer checkboxes

The  list items in the tree layer checkbox list, appears as a list to sighted users but are not marked up programmatically as a list <ul>/<ol><li>.     The list items are not numbered, or use the bullet point special character.

The presence of a list and the number of list items is announced by screen reading software.  This information helps screen reader users who cannot see the screen understand the structure of the page.  By not marking up the list programmatically as a list, text content is read as a continuous stream of text by screen reading software and as such the structure of the page is more difficult to understand for users who cannot see the screen.

 1.3.1 Info and Relationships

Tree details list on the details tab of the tree details dialog

The  list items in the tree details list, appears as a list to sighted users but are not marked up programmatically as a list <ul>/<ol><li>.     The list items are not numbered, or use the bullet point special character.

The presence of a list and the number of list items is announced by screen reading software.  This information helps screen reader users who cannot see the screen understand the structure of the page.  By not marking up the list programmatically as a list, text content is read as a continuous stream of text by screen reading software and as such the structure of the page is more difficult to understand for users who cannot see the screen.

 1.3.1 Info and Relationships

Instructions on how to describe a tree. The instructions are above the 'Position of tree' text in put on the 'Submit enquiry'.  This is accessed via the accessibility button.

The instruction is not programmatically associated with the control.     When a screen reader user reaches the control by pressing the tab key, the instruction is not audibly announced. 

Screen reader users typically navigate through interactive controls using the tab key.  When a screen reader user reaches the 'Position of tree' control the associated instruction is not read aloud. Screen reader users will only be aware of the instruction if they progress through the page using the virtual focus (down arrow).

 1.3.1 Info and Relationships

Address search and postcode look up

How to use the control is not described to users.

The control is obvious to use for sighted users.  However screen reader users who cannot see the screen may be confused as to how to operate the control as there are several steps.

 3.3.2 Labels and Instructions

Address edit box

The control does not have an accessible name.

Screen reader users typically navigate between interactive controls using the tab key. When screen reader users navigate to the control there is no description of the control announced by screen reading software.     Screen reader users who cannot see the screen are unlikely to be able to operate the control because they will not know what the purpose of the control is. 

 4.1.2 name role value

The 'Tree details', 'Your details'  text

The controls are not programmatically associated with the visible text which describes the group of controls.

Screen reader users typically navigate between interactive controls using the tab key.  Because the group description is not programmatically associated with any of the controls the group description will not be announced by screen reading software when a screen reader user navigates to one of the controls using the tab key.

 1.3.1 Info and Relationships

Personal contact details on the 'Submit enquiry' dialog.     This includes 'Forename', 'Surname', 'Email', 'Tel', 'Address 1,', 'Postcode', 'Address 2', and 'Address 3', '

The autocomplete attribute is set to off (autocomplete="off").  There is no autocomplete value.

Some users are more likely to make input errors or find the form control slower to fill out.  Having an autocomplete attribute which is relevant to the form control makes it more likely that the browser will autofill form controls with the user's personal data.  Some users with cognitive impairments may have difficulties remembering personal data such as email addresses or telephone numbers.  Using auto filled data can help with these problems.  For other users who find typing difficult or slow, such as users with dexterity impairments, having auto filled data can make the process of filling out forms easier.  Browsers can generate autocomplete entries without an autocomplete attribute, but these will not be as reliable as when the input purpose is defined using an autocomplete value.

1.3.5 Identify input purpose

Invalid postcode error message on the submit enquiry form

When the user enters an invalid post code the error message is 'Invalid postcode'.

Some users who are  less experienced at using the Internet or have cognitive disabilities will not be able to correct the mistakes in the email address and would benefit from prompting.

 3.3.3 Error Suggestion

The 'Forename', 'Surname', 'Email', 'Tel', 'Subject' and 'Comments' fields on the 'Submit enquiry' dialog.

When an error is detected, an exclamation mark appears next to the control with the error. Screen reader users are not aware that this error message has appeared.

Sighted users are immediately aware when error messages appear.     However, screen reader users who cannot see the screen are not aware when the error messages appear.

 4.1.3 Status Messages

The 'Email' and 'Tel' inputs on the submit enquiry.

The inputs contain personal user data.  The data is not checked by the website for input errors, there is no feature which encourages the user to check before the data is submitted.  Once submitted users cannot then amend the inputs.

Users may inadvertently input incorrect data.     Incorrect data cannot be easily rectified.  This especially affects users with learning difficulties and users who are less used to using the Internet who are more likely to  input incorrect data. 

 3.3.4 Error Prevention Legal

List of address controls, no data text.  This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

The status message is not announced by screen reading software as soon as it appears.

Screen reader users who cannot see the screen will not be aware of the status message when it appears.

 4.1.3 Status Messages

Address look up

When the control is activated new content with interactive controls appears (search box and list of addresses).  When the content is closed the keyboard focus is not sent back to the invoking control.  The keyboard focus is sent back to the beginning of the page.

Because the keyboard focus is not sent back to the invoking control, page navigation can be difficult for screen reader users.

 2.4.3 Focus Order

The 'Tree details', 'Your details' and 'Enquiry details' text

The text describes the form.  It is not marked up as a heading (<H1>, <H2> etc.) or a fieldset with a legend <fieldset> <legend>.

Screen reader users typically navigate through interactive controls using the tab key.  When the screen reader user navigates to the first control in the forms, the associated text description of the form is not read aloud.  This means that the function of the form controls  could be more difficult to determine for screen reader users who cannot see the screen. 

 1.3.1 Info and Relationships

Details button

The control is not announced as a button by screen reading software.

When a screen reader user reaches a control, screen reading software announces the role of a control (e.g. 'button') if that role has been programmatically assigned.  If no button role has been assigned screen reader users who cannot see the screen may not realise the button is a button.  At the moment the control is not in the tab index and screen reader users cannot access the control, as it only appears once the user has selected a tree.

 4.1.2 name role value

List of address controls.  This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

The control functions like a radio button group but is not marked up as a radio button group.  Indeed, the list of addresses is not marked up as an interactive control at all.   As per a radio button group there is a list of controls, and only one control can be selected.  The controls look like a combobox but do not function like a combobox because a) the user is not able to select from a list of predetermined controls as soon as the search edit area has the focus and b) does not autofill as the user start to input content.  Users have to press on the search button for the addresses to appear.  

The role of interactive components, if programmatically determined, is announced by screen reading software.  Because the control does not have a radio button role, screen reading software will not describe the control as a radio button. Screen reader users who cannot see the screen will not realise that the control is a radio button.  As a result they may not be able to operate the control.

 4.1.2 name role value

List of address controls.  This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

The state of the radio button (checked or not) is not declared by screen reading software.  This list of addresses should be considered a radio group not a combobox.  As per a radio button group there is a list of controls, and only one control can be selected.  The controls look like a combobox but do not function like a combobox because the user is a) not able to select from a list of predetermined controls as soon as the search edit area has the focus and b) does not autofill as the user start to input content.  Users have to press on the search button for the addresses to appear.  

Screen reader users who cannot see the screen will not know whether or not the radio button has been checked.  This makes operating the radio button very difficult for users who cannot see the screen.

 4.1.2 name role value

List of address controls. This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

When navigating the list of addresses using the arrow keys with screen reading software turned on, when the user reaches the last address, if the user presses the down arrow, screen reading software becomes silent. This list of addresses should be considered a radio group not a combobox.     As per a radio button group there is a list of controls, and only one control can be selected.  The controls look like a combobox but do not function like a combobox because a) the user is  not able to select from a list of predetermined controls as soon as the search edit area has the focus and b) does not autofill as the user start to input content.  Users have to press on the search button for the addresses to appear.  

Screen reader users expect that when the user reaches the last control in the radio group and presses the down arrow, the keyboard focus is moved to the first control.  At present, with screen reading software turned on, when the user reaches the last control in the radio group using the arrow keys, if the user presses the down arrow, screen reading software starts to read the next element after the current radio button group.  This makes it difficult for screen reader users who cannot see the screen to identify what elements are in the radio button group.

 2.4.3 Focus Order

List of address controls. This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

When navigating to the list of addresses using the tab key, if an address has already been selected the keyboard focus goes to the first address on the list, not straight to the selected address.  The list of addresses should be considered a radio group not a combobox.  As per a radio button group there is a list of controls, and only one control can be selected.  The controls look like a combobox but do not function like a combobox because a)     the user is not able to select from a list of predetermined controls as soon as the search edit area has the focus and b) does not autofill as the user start to input content.  Users have to press on the search button for the addresses to appear.  

Users who navigate using the keyboard expect the keyboard focus to go to the checked option of the radio button group when the group receives the keyboard focus.  Not placing the keyboard focus on the first checked option is confusing for screen reader users who cannot see the screen who may assume that no option in the radio button group has been checked.

 2.4.3 Focus Order

List of address controls.  This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

When screen reader users navigate to a radio button using the tab key, the correct total number of radio buttons in the group is not announced.  The list of addresses should be consider a radio group not a combobox.  As per a radio button group there is a list of controls, and only one control can be selected.  The controls look like a combobox but do not function like a combobox because  a) the user is not able to select from a list of predetermined controls as soon as the search edit area has the focus and b) does not autofill as the user start to input content.  Users have to press on the search button for the addresses to appear.  

Screen reader users typically navigate through interactive controls using the tab key.  When the screen reader user navigates to the first radio button in the set of affected radio buttons it is very useful to know how many options there are in total.

 4.1.2 name role value

List of address controls.  This affects both the address search on the main page and the postcode look up on the submit enquiry dialog.

The addresses are contained in a grid (role="grid").     The aria-selected attribute has been applied to table row tags <tr>.  Screen reading software will not recognise the aria-selected attribute if it is applied to table rows. 

When an address has been selected, screen reader users are not aware of which address has been selected.  Screen reader users are not expecting interactive controls to be within a table.  If the addresses were to be marked up as radio buttons, the screen reader navigation tools may not work as expected.   Screen reading software has a particular set of navigation features for navigating within tables that could conflict with navigation tools for navigating interactive components such as radio buttons.

 4.1.2 name role value

Search for an address control

The control which opens the 'Search for an address button' is marked up as a combobox.  It is not a combobox however, it is a button which opens the address widget

Screen reader users who cannot see the screen will be confused when they here the combobox description role.  There are certain functions which comboboxes have.  For example, if after the combobox has received the keyboard focus the user activates the down arrow the combobox should start to navigate between a list of options. This does not happen with the 'Search for an address control'.  The 'Search for an address control is a button which opens the combobox.

Tree details dialog

When the dialog is opened screen reading software does not announce a specific name for the dialog.  The dialog has no accessible name.

When the dialog is opened, the purpose of the dialog is not announced to screen reader users.  Screen reader users may be unsure as to what the purpose of the dialog is.

 4.1.2 name role value

Tree details dialog

The keyboard focus is not sent back to the invoking control ('Details' control on the tree on the map or the tree map)  when the user activates the 'Close' button and the dialog is closed.  

It is  disorientating for screen reader users who cannot see the screen when the keyboard focus is not sent back to the invoking control.  When the dialog closes, screen reader users who cannot see the screen may be unsure as to where they are on the page. 

 2.4.3 Focus Order

Information about making an enquiry dialog

The keyboard focus is not sent back to the invoking control ('Details' control on the tree on the map, the tree map itself or the tree map or the 'Accessibility' button)  when the user activates the 'Close' button ('X') and the dialog is closed.  

It is  disorientating for screen reader users who cannot see the screen when the keyboard focus is not sent back to the invoking control.  When the dialog closes, screen reader users who cannot see the screen may be unsure as to where they are on the page. 

 2.4.3 Focus Order

Submit enquiry dialog

The keyboard focus is not sent back to the invoking control ('Details' control on the tree on the map, the tree map itself or the accessibility button)  when the user activates the 'Close' button (X) and the dialog is closed or an enquiry is successfully submitted.

It is  disorientating for screen reader users who cannot see the screen when the keyboard focus is not sent back to the invoking control.  When the dialog closes, screen reader users who cannot see the screen may be unsure as to where they are on the page. 

 2.4.3 Focus Order

How to use the keyboard on the map dialog

The keyboard focus is not sent back to the invoking control )the 'Keyboard' link)  when the user activates the 'Close' button (X) or OK button.

It is  disorientating for screen reader users who cannot see the screen when the keyboard focus is not sent back to the invoking control.  When the dialog closes, screen reader users who cannot see the screen may be unsure as to where they are on the page. 

 2.4.3 Focus Order

Tree details dialog on 320px width screen

On a 320px width screen some of the text on the tree details dialog is lost.

Mobile phone users and partially sighted users with very high levels of browser zoom will find it awkward to access the affected content.

 1.4.10 Reflow

Close button ('X') on the 'Submit enquiry' dialog.

On a 320px width screen the close button ('X') is partially obscured by the header. 

Some mobile phone users and partially sighted users with very high levels of browser zoom will find it awkward to access the affected content.

 1.4.10 Reflow

Tree details dialog tab 

The tab pattern does not follow the W3 recommended tab navigation structure.  Users cannot navigate between tabs using the arrow keys.  Users cannot navigate to the tab panel using the tab key.     There are no instructions on how to use the tab using the keyboard.

Some screen reader users who cannot see the screen may struggle to operate the tab panel as the mode of operation is non standard.

 3.3.2 Labels and Instructions

Tree details dialog tab 

There is no tablist role.

The number of tabs is not declared.  It is useful for screen reader users to know the number of tabs in the tablist.

 4.1.2 name role value

Tree details dialog tab.

There is no tabpanel role.

Screen reader users may not be aware which part of the page is the main content of the tab.

 4.1.2 name role value

Tree details dialog tab.

The state of the tab (open or closed) is not expressed programmatically.  The tabs are always set to not selected, even when they are selected.  The value is always set to aria-selected="false"

Screen reader users who cannot see the screen will not be sure which tab is  currently showing.

 4.1.2 name role value

Page title

When the user activates the search address button on the main page, the page results update, but the page title <title> does not change.  The page title remains 'Tree map search'.

 When screen reader users are navigating between windows and tabs, the page title is announced.  The page title is important because it describes the function of the page to users who cannot see the screen.  Sighted users can quickly look at a page to determine the purpose of a page.     Without a clear page title screen reader users have to listen to the page being read aloud in order to determine the purpose of the page, which is laborious.

 2.4.2 Page Titled