search

nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
MIT License
6 stars 0 forks source link

Messaging #20

Open davidhunter08 opened 11 months ago

davidhunter08 commented 11 months ago

What

Help users read and reply to messages.

Example

Screenshots ![Image](https://github.com/nhsuk/nhs-app-design-styles-components-patterns/assets/14331000/597aca8d-591f-4caa-814d-2bb6ef57dc23) ![Image](https://github.com/nhsuk/nhs-app-design-styles-components-patterns/assets/14331000/eb1db35c-b3ac-4bb5-b80b-00d91d04e4fe)

Related to

Panel Link

davidhunter08 commented 10 months ago

Misuse of ARIA

The current messaging screens are misusing ARIA by using aria-label to read out the content for screenreader users and hiding the actual content by using aria-hidden.

Image

Image

See Rules of ARIA use

Rule nhsuk/nhs-app-design-styles-components-patterns#1 - If you can use HTML a native HTML element or attribute, then do so.

HTML is the foundation of web accessibility. ARIA should not be used when HTML provides sufficient semantics for accessibility! When used incorrectly, ARIA can introduce significant accessibility barriers.

davidhunter08 commented 10 months ago

Design update

Image

Changes

  1. Added in the Sender name to the component due to the IA changes from a sender list to consolidated single sender list.

  2. Abbreviated the time from ‘Send 4 March 2023’ to ‘4 Mar 2023’ (This is read out in full by screen readers). This matches more common mobile messaging styles and tested well with users.

  3. Combined read and unread messages, and opted to keep them in chronological order (regardless of read status). This was tested in research, within a consolidated list this is how most users expected it to be ordered and referred to email as an example.

  4. Removed the chevron and added in blue header text to communicate interactive status. This also affords the message preview more space.

  5. There are now 2 lines of message preview instead of 3 due to the added margins now reducing the spacing of the card either side. By having 2 lines instead of 3 we allow users to see more messages above the fold.

  6. Read and unread messages have additional distinguish through primary and secondary colour. This helps non visually impaired users to be able able to identify an unread or read message easier [to be tested]

Prototypes

davidhunter08 commented 10 months ago

Voiceover testing

Testing Voiceover on Chrome using a Macbook.

https://github.com/nhsuk/nhs-app-design-styles-components-patterns/assets/14331000/2f214ae6-679b-46fc-af0b-741113223b30

HTML prototype

michaelgallagher commented 2 months ago

have we considered the blue "unread" dot?

we use a red dot in the tab bar and in various cards (e.g. wayfinder) to indicate "you have a new thing to do".

it would seem like a good idea to standardise this across the app if possible.