O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Inclusive healthcare: Accessible website best practices

Próximos SlideShares
Carregando em…3

Confira estes a seguir

1 de 44 Anúncio

Inclusive healthcare: Accessible website best practices

Baixar para ler offline

Slides for webinar that explores key healthcare website behaviors — gathering information and making transactions — and how accessible best practices can help users achieve those goals.

Slides for webinar that explores key healthcare website behaviors — gathering information and making transactions — and how accessible best practices can help users achieve those goals.


Mais Conteúdo rRelacionado

Semelhante a Inclusive healthcare: Accessible website best practices (20)

Mais recentes (20)


Inclusive healthcare: Accessible website best practices

  1. 1. Inclusive Healthcare: Accessible Website Best Practices May 20, 2021
  2. 2. Who we are Nadia Rasul Developer & Accessibility Lead @nadiarasul Jen Tweedie Content Strategist @jen_tweedie
  3. 3. Agenda 1. Importance of accessibility for healthcare websites 2. Accessible tactics for information gathering 3. Accessible tactics for transactional tasks 4. Tools & Testing
  4. 4. Why accessibility matters for healthcare websites ➔ Privacy and security of patient information ◆ Accessing test results and medical records ◆ Paying bills ➔ Access to healthcare information can mean difference between life and death ◆ Research symptoms ◆ Find physicians in their network ◆ Schedule an appointment 4 Image credit: Dana Chan for Disabled and Here
  5. 5. Some barriers faced by patients with disabilities 1. A blind patient unable to search for a doctor and book an appointment online because the forms are not compatible with a screen reader 2. A person unable to find more information about their medical condition because the content is not easily navigable 3. A hospital website includes helpful patient care videos, but does not provide transcripts and captions for deaf and hard of hearing users 4. A third-party patient records portal that has small, low-contrast text that does not allow changing contrast or zooming in making it difficult to read for low vision patients 5. Pre-visit form that people with motor disabilities cannot complete because it requires a mouse to submit 5
  6. 6. Information gathering: ➔ Researching health conditions ➔ Understanding a healthcare system’s specialties/capabilities ➔ Researching doctors ➔ Location information Healthcare website behaviour
  7. 7. Transactions: ➔ Booking appointments ➔ Bill payments ➔ Account updates ➔ Clinical trial applications ➔ Donations Healthcare website behaviour
  8. 8. Accessible tactics for information gathering May 20, 2021 Inclusive information for all
  9. 9. Site navigation and interaction design
  10. 10. 10 Support different browsing methods Good tactics ➔ Provide multiple ways to access the same content: ◆ Navigation, on-page links or calls to action, footer, sitemap page ◆ Site search ➔ Create mutually exclusive navigation categories to reduce hesitation and doubt ➔ Design a clear and consistent navigation menu
  11. 11. 11 Support different browsing methods Good tactics
  12. 12. 12 Support different browsing methods Good tactics ➔ Use semantic HTML and ARIA landmark roles to identify and structure content ◆ ARIA = Accessible Rich Internet Applications
  13. 13. ➔ Ensure all navigation elements and content can be accessed via keyboard ◆ Provide skip links (AKA “bypass blocks”) ➔ Make controls large enough to activate for ease of use ◆ At least 44 x 44px ➔ Design distinctive keyboard focus states 13 Help users access interactive content Good tactics
  14. 14. ➔ Meet colour contrast requirements to improve readability: ◆ At least 4.5:1 for normal text ◆ 3:1 for large text ◆ 3:1 for graphics and user interface component ➔ Don’t convey important information with colour alone 14 Use colour effectively Good tactics ✔
  15. 15. ➔ Avoid differentiating links via colour alone (and “click here” language!) ➔ Avoid low colour contrast 15 Use colour effectively Things to avoid
  16. 16. Content structure and clarity
  17. 17. 17 Help users skim/navigate content Good tactics ➔ Add structure and help assistive technology users navigate each page (headings = table of contents) https://yoast.com/how-to-use-headings-on-your-site/
  18. 18. 18 Hemingway Editor
  19. 19. 19 Help users skim/navigate content Good tactics “On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.” – Jakob Nielsen ➔ Break up long content with: ◆ Descriptive headings ◆ Lists ◆ Shorter sentences ◆ Shorter paragraphs ➔ Use descriptive link text to support sighted users, users of assistive technology Learn More
  20. 20. 20 Help users understand content Good tactics ➔ Write for a Grade 6-8 reading level ➔ Use plain language principles ◆ Omit “filler” words and phrases ◆ Use simpler terms with fewer syllables ◆ Avoid idioms or figures of speech ➔ Provide definitions and common alternatives for complex medical terms
  21. 21. Accessible multimedia
  22. 22. 22 Make accessible video content Good tactics ➔ Make sure users can play/pause video content ➔ Always include video captions and transcripts ◆ Allows more people to consume/access your content ◆ Is indexable by search engines
  23. 23. 23 Make accessible video content Things to avoid ➔ Avoid auto-playing video content ➔ Avoid placing text over moving video content
  24. 24. 24 Create accessible images Good tactics ➔ Include image alt text ◆ What’s happening? What mood is it trying to convey? ➔ For instructional images or infographics, write the instructions in the body content of the page ➔ If text is placed over an image, make sure there’s enough contrast between the image and the text
  25. 25. 25 Create accessible images Things to avoid ➔ Avoid images with embedded text: ◆ Can’t be translated ◆ Often becomes illegible on mobile ➔ Avoid large image files ➔ Avoid auto-scrolling images
  26. 26. Summary Support information gathering needs with: ➔ User-friendly navigation patterns ➔ Clear, usable interactive elements ➔ Accessible colour combinations ➔ Content that’s easier to read, skim, and navigate ➔ Accessible multimedia 26
  27. 27. Accessible tactics for healthcare site transactions May 20, 2021 Meaningful interactions
  28. 28. Usable inclusive forms
  29. 29. 29 Make forms easy to complete ➔ Provide clear labels & instructions programmatically connected to fields ◆ Placeholder text is not a substitute for labels ◆ Give useful information to help users fill the form ➔ Left-align fields, supporting content, and buttons for better scannability and to support magnification users ➔ Indicate required fields visually, and programmatically using aria-required ➔ Group related information using fieldset and legend
  30. 30. 30 Make forms easy to complete ➔ Use correct input types ➔ Include the autocomplete attribute for fields gathering personal information ➔ Include keyboard interactions, focus styles, and aria attributes for any custom form components (e.g. checkboxes and dropdowns)
  31. 31. 31 Labels & instructions <h2>Contact Form</h2> <label for="FirstName">First Name*</label> <input type="text" id="FirstName" name="FirstName" value="" autocomplete="given-name" aria-required="true" />
  32. 32. 32 Give users feedback ➔ User notifications through AJAX, page reload, or navigate to a new page ◆ Update document title to indicate status of the form ➔ Descriptive errors and ARIA attributes to mark invalid fields ◆ Connect inline errors to each field using aria-describedby ◆ Use aria-invalid attribute to mark field invalid
  33. 33. 33 Inline error messages <h2>Contact Form</h2> <label for="FirstName">First Name*</label> <input type="text" id="FirstName" name="FirstName" value="" aria-required="true" aria-describedby="FirstName-error" aria-invalid="true"/> <span id="FirstName-error">Please enter your first name.</span>
  34. 34. 34 Don’t make users guess
  35. 35. 35 Give users feedback ➔ Global error block at the top of form ◆ List all the errors at the top and link them to each input ➔ Determine urgency of message and use appropriate value for aria-live ◆ Use role="alert" and aria-live="assertive" for important messages on the container if there is no page reload ◆ Use role="status" and aria-live="polite" for remaining characters on a textarea with limited amount of text
  36. 36. 36 Error summary
  37. 37. Summary Support transaction needs with: ➔ Programmatically associated labels and instructions ➔ Descriptive error and success messages ➔ Keyboard and screen reader accessibility for custom elements 37
  38. 38. Testing strategies for inclusive websites May 20, 2021 Verify and improve
  39. 39. Tools & Testing
  40. 40. 40 Automated checks ➔ Automated tools such as Siteimprove, WAVE, aXe to get an overview of issues ➔ Use an accessibility plugin in your design tool ➔ Use an accessibility linter to check your code
  41. 41. 41 Manual testing ➔ Test each page and component with a keyboard alone ➔ Try an accessibility simulator ➔ Check if your pages can be zoomed up to 200% without breaking content and functionality ➔ Verify your content’s readability with the Hemingway App ➔ Test with real users
  42. 42. 42 Use a screen reader ➔ Navigate through your website with a screen reader ◆ Most popular combinations: ● NVDA with Firefox ● JAWS with Internet Explorer or Chrome ● VoiceOver with Safari
  43. 43. Summary Test your websites ➔ Run automated tests ➔ Do a manual test with a keyboard ➔ Try out a screen reader ➔ Test with real people! 43
  44. 44. Thanks for joining us! www.reasononeinc.com @ReasonOneInc