Recommended
More Related Content
What's hot
Similar to Inclusive healthcare: Accessible website best practices
Similar to Inclusive healthcare: Accessible website best practices (20)
Recently uploaded
Recently uploaded (20)
Inclusive healthcare: Accessible website best practices
- 1. Inclusive Healthcare: Accessible Website Best Practices May 20, 2021
- 2. Who we are Nadia Rasul Developer & Accessibility Lead @nadiarasul Jen Tweedie Content Strategist @jen_tweedie
- 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. 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. 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. Information gathering: ➔ Researching health conditions ➔ Understanding a healthcare system’s specialties/capabilities ➔ Researching doctors ➔ Location information Healthcare website behaviour
- 7. Transactions: ➔ Booking appointments ➔ Bill payments ➔ Account updates ➔ Clinical trial applications ➔ Donations Healthcare website behaviour
- 8. Accessible tactics for information gathering May 20, 2021 Inclusive information for all
- 9. Site navigation and interaction design
- 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 Support different browsing methods Good tactics
- 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. ➔ 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. ➔ 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. ➔ Avoid differentiating links via colour alone (and “click here” language!) ➔ Avoid low colour contrast 15 Use colour effectively Things to avoid
- 16. Content structure and clarity
- 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/
- 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 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
- 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 Make accessible video content Things to avoid ➔ Avoid auto-playing video content ➔ Avoid placing text over moving video content
- 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 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. 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. Accessible tactics for healthcare site transactions May 20, 2021 Meaningful interactions
- 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 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 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 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 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>
- 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 Error summary
- 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. Testing strategies for inclusive websites May 20, 2021 Verify and improve
- 39. Tools & Testing
- 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 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 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. 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. Thanks for joining us! www.reasononeinc.com @ReasonOneInc