neontribe / ca-hospice-hope Goto Github PK

Description

Page Titles - All titles are clear and explain the page well https://www.wuhcag.com/page-titled/

As of right now, the page title (as seen in the window tab) stays constant for every page. This is undesirable.

Description

Write guidance on updating copy, etc. word limit, tone of voice, structure of stories

Description

Fix the bugs!

Bugs

• The keys for the story teaser links are doubled up.
  

• The copyright URL looks like Hospice Hope, but doesn't go to the right destination

• Better markup/ styles for phone cta (raise issue in contemplating action core) - not here
  
  

Description

Add Hazel's Story to the app.

The copy for the story is here: https://docs.google.com/document/d/1KAiAL2HYT1gTzluG8kVRIEM-gOPfZ9_WRCL6FNQ9h0Q/edit?usp=sharing

Folder for illustrations: https://drive.google.com/drive/folders/1jKv0jG0sZR8cNcLQXi6VPWfpnA414Asx?usp=sharing

Plan

• Add copy Hazel's Story
• Add alt text

Acceptance Criteria

• Hazel's story is listed on the stories
• The copy matches the copy in the Google Doc - https://docs.google.com/document/d/1KAiAL2HYT1gTzluG8kVRIEM-gOPfZ9_WRCL6FNQ9h0Q/edit?usp=sharing
• Illustrations match the ones in this folder: https://drive.google.com/drive/folders/1jKv0jG0sZR8cNcLQXi6VPWfpnA414Asx?usp=sharing
• At the end of the story the bite size info shown is 4 and 3

These are some small-fry issues I noticed when testing other issues.

• There is an unnecessary space after Part 1 of 4 of Hazel's story.
  
• Bite-size information is center-aligned, which can make it hard to read.
  
• The mobile link in the small-viewport navbar has a doubled tel: prefix (tel:tel:01530222079), making it unusable on desktop and having it yield an incorrect number on mobile.
  
• The header stops being a link to the homepage on the homepage itself. This goes against the grain, as most websites preserve the link to provide a consistent "go to home" button and to allow for the homepage URL to be copied easily. (won't fix - but @Nikomus @roseb04 we should check if this is normal/ expected)
  
• The copyright URL ends up on its own line, in whatever size viewport.
  
• The website title is briefly "Hospice Hope" instead of "Hospice Hope Stories" before the page finishes loading.
• In small viewports, with the navbar at the bottom, there is empty space to scroll to even when the page is not sufficiently large.
  
• Our "Call" link for mobile devices is also shown on desktop when the viewport is small enough. On my work laptop (Firefox 68.0.2, Ubuntu 19.04) this link does not go anywhere, as no applications are installed that support the protocol implied by tel:. We should probably look into general desktop support for this prefix.
  
• One of the favicon <link> elements has a typo'd rel attribute.
  <link rel="favicon" type="image/ico" href="favicon.ico">
  should be
  <link rel="icon" type="image/ico" href="favicon.ico">

Platform

Firefox 68.0.2, Ubuntu 19.04

Description

Previous opinions on Typeform's accessibility have not been very laudatory but as we are only using a small subset of features, it may be sufficient.

Plan

• Create survey monkey
• Update URL

User Story

We need to add the Hospice Hope icons, whatever they are

Acceptance

• hospice hope icons added

Description

• Our "Call" link for mobile devices is also shown on desktop when the viewport is small enough. On my work laptop (Firefox 68.0.2, Ubuntu 19.04) this link does not go anywhere, as no applications are installed that support the protocol implied by tel:. We should probably look into general desktop support for this prefix.

Description

We need to add the bite size information we have written based on the user research we have done to the site.

Link to the copy: https://docs.google.com/document/d/1bPgtH9X-Lq07RnLr_rbLjMMNd0DiSoXAEXWZKMcoMcY/edit?usp=sharing

Plan

• Add copy

Acceptance Criteria

• Copy matched the copy in the Google doc
• All information is selectable from the 'Information to help you' page
• The order of the information is the same as in the Google Doc

Description

We need to give people the option to opt into having Google Analytics track them on the site

Plan

• Think about how we do this
• What copy are we using?
• Accessibility thought!

Acceptance Criteria

• People opt-in not opt-out of cookies
• The cookie notice is clear and easy to find
• Opt in and opt out are given equal weight
• People can change their minds

Description

Some sections, while made distinct with visual styling and HTML5 <section> tags, are left without headings. This leaves them invisible and unlabelled in the document outline. For each section, it should be considered as to whether they would be deserving of a place in the outline. e.g.
* The information given after a story:

* The dates given within "When do sessions take place?"

Plan

• Step one to achieve this.
• Step two to achieve this.

Description

Copy for supporters page: https://docs.google.com/document/d/1kgRBg7OZijz9y_v66kQWWISvN2Fmn9CK6pmyYMvp6y8/edit?usp=sharing

Plan

• Add copy from Google Doc

Acceptance Criteria

• Copy matches Google Doc
• Comic Relief, Big Lottery Fund and HM Government logos displayed with equal prominence
• CAST's logo is prominent on the page
• Neontribe's logo is visible

Description

We should add the GitHub issue templates we use elsewhere to make the repo easier to work with

Plan

• Add the .github template folder

Resize and compress story images.

Plan

• Choose dimensions and format, from existing images
• Resize and compress, testing for visual quality
• Include the images in brand repo

Description

The cookie banner in the core repo introduces three new keys, we should reproduce them here.

Plan

• Add the three keys to BrandCopy.elm, with the same string values

Description

We need to have a privacy policy on the site to describe how we are using cookies and what will happen with people data.

Here is a link to the privacy policy: https://docs.google.com/document/d/1HxiUJC9yihbY1DpUaBs3wVord6F2SjEYnzusys68Alw/edit?usp=sharing

Plan

• Add copy to privacy policy page from Google Doc

Acceptance Criteria

• It is understood how we use peoples data and where it is stored
• Copy matched Google Docs

Description

• The copyright URL ends up on its own line, in whatever size viewport.

• change the link text to organisation name

Description

When we have hosting arranged, the meta image url should be changed to the live banner image. We should also update the description to the final copy: "People who come to us have illnesses that are seriously affecting their lives. Read about how visiting us helped them. Could we help you too?"

Plan

• update the image
• update the description

Description

Get a GA account set up and add the number to the index.

Description

Need to add the messages that accompany Shane and Gary's stories.

The copy for Shane's story is here (missing quote 1 and 3): https://docs.google.com/document/d/1JiyPgfWbhjJCFnEyrXTEdd1CXZ_vz3dj37FHbZCPWz4/edit?usp=sharing

The copy for Gary's story is here (missing quote 1 and 3):
https://docs.google.com/document/d/1Bxti8B3casqFMXRlsFcIewaFkqU2hVVnjG_ZXZyC7S4/edit

Plan

• Update keys in CA repo
• Then add copy

Description

Wrong colour var used, insufficient contrast

Plan

• Use the other blue

Some of the content we want to add to the privacy policy requires multiple hyperlinks to external content which is currently not something we can do.

• Is this worth implementing?

Description

The layout of pages is conducive to a user seeking support. HTML5 use is generally semantic. A few potential exceptions are documented here:
- [ ] Use of headings for long Call To Action text can make the outline that a screenreader would use bloated. e.g.

• Some sections, while made distinct with visual styling and HTML5 <section> tags, are left without headings. This leaves them invisible and unlabelled in the document outline. For each section, it should be considered as to whether they would be deserving of a place in the outline. e.g.
  • The information given after a story:
    
  • The dates given within "When do sessions take place?"
• Some areas may benefit from being explicitly ordered or marked as unordered, to aid screenreader navigation features. e.g. the footer is only sectioned with
  elements
  

Description

We need some Hospice Hope branding on the site. We have agreed with the client on this design
HospiceHope_Alt.pdf

Fonts

Body: Lato
Heading: Arial Rounded MT Bold (probably)

Colours

Brand blue: 00418F
Brand yellow: FEDD00
Text: 3C3C3B
Background white: FFFFFF
Background grey: F5F5F5
Background highlight blue: C8DDF6
Focus blue: 407EC9
Button hover yellow: FFEF82

Plan

• Make sure it is accessible and inclusive. Do a sweep of the design
• Implement colour palette as per Holly's design

Acceptance Criteria

• Design looks and feels similar to Holly's design (copy on design pdf can be ignored)

Description

Liz has emailed over a couple of bugs and copy changes

Copy changes

1. The “worried it’s not for me” page – the first sentence reads: "Lots of people tell us they’re worried that everyone here will be older than me." It should read “them” instead of “me”
2. The the “Who comes to us” page states conditions such as 'Parkinson's, chronic fatigue or cancer', should be 'Parkinson's, heart failure or cancer'
3. Any mention of 'day therapy' needs to be placed with 'day respite'
4. Hazel and Colin’s story is missing a capital S where other stories have one

Bug fixes

1. Odd space on the menu bar on mobile
   

Plan

• Update copy in code and master docs
• Discuss menu bar

Description

Copy for home page is here: https://docs.google.com/document/d/1H5Rqdpc7dK-2LqVSb-gJ74QPtVEaujyr_1gSavmjcO4/edit?usp=sharing

Plan

• Add copy from Google Doc

Acceptance Criteria

• Copy matches Google Doc

"Therapy"

Two mentions of "therapy" survived:

• In Gary's second picture
  
• In the alt text of Gary's third picture: Illustration of a confused man surrounded by thought bubbles. The bubbles contain Gary’s ideas of what Hope House was; there is a drawing of a therapy couch, two older people, a house and question marks.

Using the code in core, and some dummy content, deploy a site here.

Description

The content in the <head> such as title, meta description and favicons should relate to Hospice Hope.

Plan

• Source content for description and agreed title
• Make a favicon
• Update the title and description (they're in the head)
• Analytics UA code

Plan

• copy CallToActionTwo key to CallToActionThree key in brand copy.
• edit CallToActionTwo key fields so that it displays the same info as it did before - the book icon and "hope Stories" etc
• We also now have only two CTA actions, DesktopInteractive and DesktopDisplayOnly. ca-hh should want them all to be interactive.

Description

Replace all placeholders with intended copy.
re-format privacy a little.

Description

The copyright URL in the footer and multiple URLs in the privacy policy have no human-readable description; a screen reader would just have to read them out in full.

Plan

• Step one to achieve this.
• Step two to achieve this.

Description

During our research we agreed that we want a form online so people can easily refer or ask questions

Preview of Typeform form: https://hospicehope.typeform.com/to/rGEewl

Plan

• Embed form into its own page
• Add copy for page:

If you'd like us to get in touch with you about Hope House or the Support Cafe, please give us a few details.

• Check accessibility of form

Acceptance Criteria

• Form submissions are received correctly
• The form can be filled out

Description

Sync the BrandKey.elm up with the Keys in core code - following the CA updates.

Plan

• Make sure the Keys.elm and BrandKeys.elm have same values
• Make sure the files we need to override are being included here

Description

• The header stops being a link to the homepage on the homepage itself. This goes against the grain, as most websites preserve the link to provide a consistent "go to home" button and to allow for the homepage URL to be copied easily. (won't fix - but @Nikomus @roseb04 we should check if this is normal/ expected)

Description

Info connected to each story should be as follow

• Shane: "2. What is Hope House?" and "1. Who comes to our sessions"
• Hazel and Collin: "3. What are the support cafes?" and "4. worried it is not for you?"
• Gary: "5. Cost and other practicalities?" and "6. When do sessions take place?"

Plan

• Update associated info

Description

Add Garys's Story to the app.

The copy for the story is here: https://docs.google.com/document/d/1Bxti8B3casqFMXRlsFcIewaFkqU2hVVnjG_ZXZyC7S4/edit?usp=sharing

Folder for illustrations: https://drive.google.com/drive/folders/1Y4yh39QEfzXcu1vHws2sNNCl8ZM4L_RK?usp=sharing

Plan

• Add Keys with Copy to BrandCopy.elm
• Add alt text if not there yet

Acceptance Criteria

• Gary's story is listed on the stories
• The copy matches the copy in the Google Doc - https://docs.google.com/document/d/1Bxti8B3casqFMXRlsFcIewaFkqU2hVVnjG_ZXZyC7S4/edit?usp=sharing
• Illustrations match the ones in this folder: https://drive.google.com/drive/folders/1Y4yh39QEfzXcu1vHws2sNNCl8ZM4L_RK?usp=sharing
• At the end of the story the bite size info shown is 5 and 6

Description

Add Shane's Story to the app.

The copy for the story is here: https://docs.google.com/document/d/1JiyPgfWbhjJCFnEyrXTEdd1CXZ_vz3dj37FHbZCPWz4/edit?usp=sharing

Folder for illustrations: https://drive.google.com/drive/folders/1RuLvsbAliXFMyY0pvATFC8lsIl4Ht1Da?usp=sharing

Plan

• Add copy
• Add alt text

Acceptance Criteria

• Shane's story is listed on the stories
• The copy matches the copy in the Google Doc - https://docs.google.com/document/d/1JiyPgfWbhjJCFnEyrXTEdd1CXZ_vz3dj37FHbZCPWz4/edit?usp=sharing
• Illustrations match the ones in this folder: https://drive.google.com/drive/folders/1RuLvsbAliXFMyY0pvATFC8lsIl4Ht1Da?usp=sharing
• At the end of the story the bite size info shown is 2 and 1
• Will be the first story listed

Description

Quotes in stories are given their quotation marks with CSS pseudo-elements. This may not work smoothly with screenreaders.

Description

We need a front page image that reflects stories. Could we combine this picture https://drive.google.com/file/d/1iipPwx37NvJZqBq5MyBQVH-4LJMPQSkg/view?usp=sharing and this picture: https://drive.google.com/file/d/1zs_jke-KpkyHmPVcgGxQg8YeFyaN7NRJ/view?usp=sharing for the front picture on the homepage?

Description

We need to think about servers and how we will do this. And to look at getting the domain name for Hospice Hope, we are currently thinking about calling it Hospice Hope Stories.

Plan

• Find out how much it would cost for the domain name hospicehopestories.org.uk
• How will we set them up a server for the site and hand it over?

Acceptance Criteria

• We have set up a server and handed it over to Hospice Hope
• We have a domain name for the site

Description

Refactor story deck in contemplating action to allow related info to be added by brands

Description

Call to actions are as follows:

• Phone number - 01530 222079
• 'Get in contact' button which leads to the form

Plan

• Source icons for call to actions
• call to actions
• link 'get in contact' to page with embedded typeform

Acceptance Criteria

• The telephone call to action is 01530 222079
• The 'get in contact' call to action links to a page with an embedded form in it

Description

We need to tell the robots to ignore the staging site

Plan

• Step one to achieve this.
• Step two to achieve this.

Description

Use of headings for long Call To Action text can make the outline that a screenreader would use bloated. e.g.

Plan

• Step one to achieve this.
• Step two to achieve this.

Supported Browser List

Devices: iPhone, iPad, Android Phone, Windows Phone and desktop
Browsers: Stock Android, Chrome, Safari, Edge, Firefox (latest stable release)

We test on Specific Combinations:

• Android 4+ Phone - Stock browser
• Android 4+ Phone - Chrome browser
• Android 4+ Phone - Firefox Focus browser
• ipad iOS7+ - Safari browser
• iphone 5 iOS7+ - Safari browser
• iphone 6 iOS7+ - Safari browser
• iphone 7 iOS7+ - Safari browser
• Windows phone - EDGE browser @katja Is this still required?
• Desktop - Chrome browser
• Desktop - Firefox browser

Recommended Screen Reader and Browser Combinations

We may need to chat about how much time we spend on this

• Windows: Internet Explorer and JAWS for Windows (JFW)
• Windows: Firefox and NVDA
• Mac: Safari and VoiceOver

Description

The order of tabbing is consistently good: the header, the navbar (whether at the top or bottom) and then the content.

Despite this, the site is not consistently amenable to tab-based navigation:

• If the browser must scroll to reach the next keyboard-navigable element, it may be covered by the sticky navbar on small-viewport displays. e.g. The supporters link has been selected and automatically scrolled to but is obscured (on Firefox 68.0.2, Ubuntu 19.04).
  
• There is an empty link that must be tabbed past on the homepage. As it is not described, this would be especially confusing for users of screenreaders.
  
• There is an empty heading on the Privacy Policy page
  

Description

• In small viewports, with the navbar at the bottom, there is empty space to scroll to even when the page is not sufficiently large.

Description

Link text - The purpose of every link is clear from its text/context https://www.wuhcag.com/link-purpose-in-context/

Most links are clear and obvious (aside from the empty link that goes nowhere, as mentioned in Focus Order). There are still a few that are worth discussing:

• In the cookie banner, "Accept" and "Decline" may not be obvious in their effect if read by a screenreader out of context. Links may be read out of context for speedy navigation, so this is not too uncommon a scenario.
• "Show me the stories" and "Hope Stories" on the homepage have different descriptions but both link to the same (which is advised against in the guidelines of the website linked).
• The copyright URL in the footer and multiple URLs in the privacy policy have no human-readable description; a screen reader would just have to read them out in full.

Description

Review the accessibility of the app

Basic Accessibility Checks

• Non-text Content - There are text alternatives for all non-text content https://www.wuhcag.com/non-text-content/
• Logical Structure - All HTML is correct and valid (with no errors) https://www.wuhcag.com/info-and-relationships/
• Meaningful Sequence - Content is presented in a meaningful order https://www.wuhcag.com/meaningful-sequence/
• Use of Colour - Instructions don't rely on colour alone https://www.wuhcag.com/use-of-colour/
• Keyboard - When mouse is unplugged, I can use all features of the site https://www.wuhcag.com/keyboard/
• No Keyboard Trap - All navigation is controllable by the 'tab' key https://www.wuhcag.com/no-keyboard-trap/
• Page Titles - All titles are clear and explain the page well https://www.wuhcag.com/page-titled/
• Focus Order - Tabbing through the page flows nicely and is in a logical order https://www.wuhcag.com/focus-order/
• Link text - The purpose of every link is clear from its text/context https://www.wuhcag.com/link-purpose-in-context/
• Language of a page - Each page of the site has a language assigned to it https://www.wuhcag.com/language-of-page/
• On Focus - When there is focus on buttons and links they don't autosubmit https://www.wuhcag.com/on-focus/
• On Input - Focus shouldn't unnecessarily shift between inputs https://www.wuhcag.com/on-input/
• Labels - All input fields are labelled clearly and helpfully https://www.wuhcag.com/labels-or-instructions/

Intermediate Accessibility Checks

• Resize Text - Text can be resized to 200% without loss of content/function https://www.wuhcag.com/resize-text/
• Focus Visible - Keyboard focus is visible on all all elements https://www.wuhcag.com/focus-visible/
• Colour Contrast - Contrast ratio of text & background at least 4.5:1 (can test with Tota11y) https://www.wuhcag.com/contrast-minimum/
• Consistent Navigation - Navigation is in the same location on all pages https://www.wuhcag.com/consistent-navigation/
• Consistent Identification - Elements with equal function are consistent https://www.wuhcag.com/consistent-identification/
• Error Hints - Fixes are suggested when users make errors https://www.wuhcag.com/error-suggestion/