The impact that high quality mark-up can have on accessibility, performance, and discoverability
Download as PPTX, PDF0 likes27 views
The document discusses how to build an accessible personal website on GitHub pages, covering topics like layout, navigation, color, performance, and discoverability. It provides guidance on using responsive design, semantic HTML, keyboard navigation, color contrast, page speed optimization, and social media integration. Screenshots and code examples demonstrate implementing techniques like semantic landmarks, ARIA attributes, dark mode/light mode toggling, and scroll to top functionality in an accessible way.
The impact that high quality mark-up can have on accessibility, performance, and discoverability
- 1. The impact that high quality mark-up can have on accessibility, performance, and discoverability. Matthew Deeprose https://matthewdeeprose.github.io/ 1
- 2. Based on what I learned from building a personal site on github pages. 2 Matthew Deeprose https://matthewdeeprose.github.io/
- 3. What I learned and will share today 3 Layout • Responsive reflow • Using semantic landmarks Navigation • Designing for screen reader / keyboard users • Respecting user preference • Designing for vestibular disorders Colour • Designing for dark mode • WCAG 3 contrast • Building an accessible colour toggle that remembers your preference Performance • Page load time analysis • Critical render blockers • using Lighthouse • Recent DL blog improvements Discoverability • Open graph • Card validators https://matthewdeeprose.github.io/
- 4. What is github pages? GitHub Pages is a free static site hosting service. • One site per github account. • ____.github.io address • 1GB quota • 100GB bandwidth per month • Not for commercial use • No support for support server-side languages 4 https://matthewdeeprose.github.io/
- 5. Workflow Write using Notepad ++ Save (in OneDrive?) Push using github desktop Published on WWW 5 https://matthewdeeprose.github.io/
- 6. So what did I learn? 6 https://matthewdeeprose.github.io/
- 7. What I learned and will share today 2 7 Layout • Responsive reflow • Using semantic landmarks Navigation Colour Performance Discoverability https://matthewdeeprose.github.io/
- 9. WCAG 1.4.10: Reflow (AA) Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: 9 Vertical scrolling content Horizontal scrolling content Except for content requiring two- dimensional layout https://matthewdeeprose.github.io/
- 10. 10 modern layouts in 1 line of CSS 10 https://matthewdeeprose.github.io/
- 14. Navigating regions / landmarks Screen reader Shortcut key to browse region JAWS r NVDA d Narrator d Voiceover Use the rotor 14 https://matthewdeeprose.github.io/
- 15. Semantic landmarks and NVDA “banner landmark” “Navigation landmark” “main landmark” “complementary landmark” “content info landmark” 15 https://matthewdeeprose.github.io/
- 16. WCAG 1.3.1: Info and Relationships (A) Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. 16 https://matthewdeeprose.github.io/
- 17. Revealing landmarks and regions 17 https://matthewdeeprose.github.io/
- 18. Do you use reader / simplified mode? 18 https://matthewdeeprose.github.io/
- 19. Layout concluding remarks Reflow is vital and expected. Use semantic tags or landmarks. 19 https://matthewdeeprose.github.io/
- 20. What I learned and will share today 3 20 Layout Navigation • Designing for screen reader / keyboard users • Respecting user preference • Designing for vestibular disorders Colour Performance Discoverability https://matthewdeeprose.github.io/
- 22. Initial issues with menu Pay attention to: •What the screen reader announces. •Focus order. 22 https://matthewdeeprose.github.io/
- 25. Implementing Expanded / Collapsed 25 https://matthewdeeprose.github.io/
- 26. 4.1.2: Name, Role, Value (A) For all user interface components… The name and role can be programmatically determined States, properties, and values that can be set by the user can be programmatically set Notification of changes to these items is available to user agents, including assistive technologies. 26 https://matthewdeeprose.github.io/
- 27. Improved focus and screen reader handling Selecting hamburger now announces whether it is expanded or collapsed. Focus order is now logical. 27 https://matthewdeeprose.github.io/
- 28. Hamburger comparisons Site Works with Keyboard? Semantics used ARIA- expanded? Libguides Yes (but no focus indicator on button and very low contrast on menu items) Button Yes Digital Learning blog No Checkbox No Elearn No Div No UoS (OneWeb) Yes, but cannot close with keyboard Link No 28 https://matthewdeeprose.github.io/
- 29. ARIA? ARIA modifies the accessibility tree, changing how assistive technology (AT) presents content to users. Only affects AT. 29 Add extra label and description text to elements Express semantic relationships between elements Make parts of a page "live," immediately informing assistive technology of changes. https://matthewdeeprose.github.io/
- 30. The first rule of ARIA… If you can, use a native HTML element or attribute with the semantics and behaviour you require already built in. 30 https://matthewdeeprose.github.io/
- 31. 31 So many arias! • aria-activedescendant • aria-atomic • aria-autocomplete • aria-braillelabel • aria-brailleroledescription • aria-busy • aria-checked • aria-colcount • aria-colindex • aria-colindextext • aria-colspan • aria-controls • aria-current • aria-describedby • aria-description • aria-details • aria-disabled • aria-dropeffect • aria-errormessage • aria-expanded • aria-flowto • aria-grabbed • aria-haspopup • aria-hidden • aria-invalid • aria-keyshortcuts • aria-label • aria-labelledby • aria-level • aria-live • aria-multiline • aria-multiselectable • aria-orientation • aria-owns • aria-placeholder • aria-posinset • aria-pressed • aria-readonly • aria-relevant • aria-required • aria-roledescription • aria-rowcount • aria-rowindex • aria-rowindextext • aria-rowspan • aria-selected • aria-setsize • aria-sort • aria-valuemax • aria-valuemin • aria-valuenow • aria-valuetext 31 https://matthewdeeprose.github.io/
- 32. “Scroll to top” The Guardian UoS (old style) elearn 32 https://matthewdeeprose.github.io/
- 33. Scroll to top Should be usable with keyboard. Scrolling smoothness should cater to preference. After use, the keyboard focus should be in a logical place. 33 https://matthewdeeprose.github.io/
- 34. WCAG considerations 34 2.1.1 Keyboard (A) 2.1.3 Keyboard (No Exception) (AAA) 2.4.3 Focus Order (A) “Except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.” https://matthewdeeprose.github.io/
- 35. Implementing scroll to top 35 https://matthewdeeprose.github.io/
- 36. Setting / emulating motion preference 36 https://matthewdeeprose.github.io/
- 38. 2.3.3 Animation from Interactions (Level AAA) Allow users to prevent animation from being displayed on Web pages. Some users experience distraction or nausea from animated content. Triggered reactions include nausea migraine headaches, and potentially needing bed rest to recover. 38 https://matthewdeeprose.github.io/
- 39. Vestibu-what? Lars Chittka; Axel Brockmann (CC BY 2.5) Vestibular disorders can be caused by both genetic and environmental factors. It’s part of the larger spectrum of conditions that make up accessibility concerns and it affects more than 70 million people. Vestibular disorders can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. If you have a vestibular disorder or have certain kinds of migraine or seizure triggers, navigating the web can be a lot like walking through a minefield — you’re perpetually one click away from activating an unannounced animation. And that’s just for casual browsing. 39 https://matthewdeeprose.github.io/
- 40. Scroll to top comparisons Site Works with Keyboard? Semantics used Where does focus go? Scroll behaviour Lib guides Yes Link (with js onclick) Stays at end of page Smooth (even if you prefer reduced motion). Elearn (old) Yes Anchor link Stays at place in footer Smooth (even if you prefer reduced motion). UoS (OneWeb) No Div N/A Smooth AND respects motion preference. UoS (old style) No Span N/A Auto (instant). 40 https://matthewdeeprose.github.io/
- 41. Navigation final thoughts Pay attention to the small details as well as the large. Respect user preference. Listen carefully to screen reader output. 41 https://matthewdeeprose.github.io/
- 42. What I learned and will share today 4 42 Layout Navigation Colour • Designing for dark mode • WCAG 3 contrast • Building an accessible colour toggle that remembers your preference Performance Discoverability https://matthewdeeprose.github.io/
- 43. Light mode / Dark mode 43 https://matthewdeeprose.github.io/
- 44. Are you on the dark side? Do you prefer: • Light mode • Dark mode • It depends… 44 https://matthewdeeprose.github.io/
- 45. Setting up / testing 45 https://matthewdeeprose.github.io/
- 46. Benefits of dark mode Save battery on LED displays. Can reduce flicker on poor quality screens. Less likely to trigger photophobia. 46 Easier to use in low-light conditions. May reduce eye strain. Some people just prefer it https://matthewdeeprose.github.io/
- 47. Accessibility considerations Using maximal contrast can induce eyestrain and reduces reading stamina. • For example: • #000000 on #FFFFFF • rgb(255,255,255) on rgb(0,0,0) 47 https://matthewdeeprose.github.io/
- 48. Setting up light / dark styles 48 https://matthewdeeprose.github.io/
- 49. Trying to use UoS colours: dark mode Melanzane Plain Black Rich Black Neutral 4 Marine 6 Horizon 1 #161415 #231F20 #00131D #E1E8EC #C1D100 #FCBC00 #161415 AAA AAA AAA #231F20 AAA AAA AAA #00131D AAA AAA AAA #E1E8EC AAA AAA AAA #C1D100 AAA AAA AAA #FCBC00 AAA AAA AAA 49 https://matthewdeeprose.github.io/
- 50. Different background shades (Dark mode) 50 https://matthewdeeprose.github.io/
- 51. Trying to use UoS colours: light mode Rich Black Ivory Twilight Blue Neutral 1 Marine 1 Sherpa Blue Horizon 1 Horizon 5 #00131D #FFFFF4 #F0F2E8 #495961 #005C84 #005051 #FCBC00 #8D3970 #00131D AAA AAA #FFFFF4 AAA AAA AAA AAA AAA #F0F2E8 #495961 AAA #005C84 AAA #005051 AAA #FCBC00 AAA #8D3970 AAA 51 https://matthewdeeprose.github.io/
- 52. Different background shades (Light mode) 52 https://matthewdeeprose.github.io/
- 53. Ivory? Rello, L & Baeza-Yates, R, “Optimal colors to improve readability for people with dyslexia”, WAI R&D Symposia 2012. 53 https://matthewdeeprose.github.io/
- 55. Focus styles (dark mode) 55 https://matthewdeeprose.github.io/
- 56. Focus styles (light mode) 56 https://matthewdeeprose.github.io/
- 58. 2.4.12 Focus Appearance (Enhanced) 58 The focus indication area is greater than or equal to a 2 CSS pixel solid border around the control. Colour changes used to indicate focus have a contrast ratio of at least 4.5:1 with the colours changed from the unfocused control. No part of the focus indicator is hidden by author-created content. https://matthewdeeprose.github.io/
- 60. WCAG 2.1 / 2.2 3:1 4.5:1 7:1 Minimum for Graphical Objects / UI AA Minimum for Text AAA Enhanced level for Text (not to scale) 1.4.11 Non-text Contrast (Level AA) 1.4.3 Contrast (Minimum) (Level AA) 1.4.6 Contrast (Enhanced) (Level AAA): 2.4.11 Focus Appearance (Minimum) 2.4.12 Focus Appearance (Enhanced) 60 https://matthewdeeprose.github.io/
- 61. WCAG 3.0 Uses APCA method for measuring contrast • In development • Considers font size and weight • Text / background results not reversable • Perceptually-based measurement • Lightness contrast (Lc) 61 https://matthewdeeprose.github.io/
- 62. “We were always at war with Oceania” Foreground Colour Background Colour #231F20 Plain Black #758D9A Neutral 2 Quick Brown Fox WCAG Rating APCA Rating 4.68:1 - AA Lc 38.9 Fail* Foreground Colour Background Colour #002E3B Prussian #EF7D00 Horizon 2 Quick brown fox WCAG Rating APCA Rating 5.22:1 - AA Lc 46.2 Fail* 62 https://matthewdeeprose.github.io/
- 63. “Future-proofing” contrast Pass WCAG 2.1 AAA Pass APCA 63 https://matthewdeeprose.github.io/
- 64. Dark mode (APCA) Melanzane Plain Black Rich Black Neutral 4 Marine 6 Horizon 1 #161415 #231F20 #00131D #E1E8EC #C1D100 #FCBC00 #161415 #231F20 Lc -90.1 Lc -70.7 Lc-70.5 #00131D Lc -91.6 Lc -72.2 Lc -72.0 #E1E8EC Lc 89.0 Lc 91.0 #C1D100 Lc 71.1 Lc 73.0 #FCBC00 Lc 70.9 Lc 72.9 64 https://matthewdeeprose.github.io/
- 65. Light mode: APCA Rich Black Ivory Twilight Blue Neutral 1 Marine 1 Sherpa Blue Horizon 1 Horizon 5 #00131D #FFFFF4 #F0F2E8 #495961 #005C84 #005051 #FCBC00 #8D3970 #00131D Lc -106.8 Lc -72.0 #FFFFF4 Lc 104.8 Lc -89.6 Lc 84.4 Lc 90.4 Lc 83.6 #F0F2E8 #495961 Lc -89.6 #005C84 Lc -89.3 #005051 Lc -94.8 #FCBC00 Lc 72.9 #8D3970 Lc -88.5 65 https://matthewdeeprose.github.io/
- 66. Light / dark mode toggle Light theme. It’s light so the light switch is off. Dark theme. It’s dark so I need to turn the light on. • Change theme using a button • Preference set in localStorage • UI pattern based on an on / off button using aria-pressed • Changes are announced to a screen reader using aria-live • Using more than colour alone to differentiate the change between themes 66 https://matthewdeeprose.github.io/
- 68. Three Functions 68 Set ARIA state of the button on page load (pressed or not pressed). Allow changing themes and save the preference so it is maintained across the side, announce change to screen reader and change ARIA state of button. Apply theme based on a saved preference on page load. https://matthewdeeprose.github.io/
- 69. Set ARIA state of the button on page load (pressed or not pressed). Set ARIA state of the button on page load (pressed or not pressed). 69 https://matthewdeeprose.github.io/
- 70. Allow changing themes and save the preference so it is maintained across the side, announce change to screen reader and change ARIA state of button. Allow changing themes and save the preference so it is maintained across the side, announce change to screen reader and change ARIA state of button. 70 https://matthewdeeprose.github.io/
- 72. Apply theme based on a saved preference on page load. Upon page load, apply theme based on saved preference, if present. 72 https://matthewdeeprose.github.io/
- 75. Who uses screen readers? 75 79.50% 21.90% 7.30% 3.60% 3.20% 2.40% 0.00% 20.00% 40.00% 60.00% 80.00% 100.00% Disability types (% of respondents) WebAIM Screen Reader User Survey #9, 2021 https://matthewdeeprose.github.io/
- 76. 4.1.2: Name, Role, Value (A) again For all user interface components… The name and role can be programmatically determined States, properties, and values that can be set by the user can be programmatically set Notification of changes to these items is available to user agents, including assistive technologies. 76 https://matthewdeeprose.github.io/
- 77. What I learned and will share today 5 77 Layout Navigation Colour Performance • Page load time analysis • Critical render blockers • using Lighthouse • Recent DL blog improvements Discoverability https://matthewdeeprose.github.io/
- 79. Chrome mobile, 3G, Mumbai, India First Byte Start Render FCP Speed Index LCP TBT Total Bytes https://matthewdeeprose.github.i o 1.569 2.4 2.345 2.475 2.344 0 158KB https://elearn.southampton.ac.uk 3.956 7.96 7.778 7.985 8.245 0.193 1,029KB https://www.soton.ac.uk 4.285 7.9 7.641 8.594 9.751 0.736 2,111KB https://generic.wordpress.soton. ac.uk/digital-learning/ 4.114 8.7 8.619 10.992 13.269 0.594 792KB 79 https://matthewdeeprose.github.io/
- 80. Firefox v97, Cable, Frankfurt, Germany First Byte Start Render FCP Speed Index LCP TBT Total Bytes https://matthewdeeprose.github.io 0.284 0.5 0.491 0.516 ≥ .000 64KB https://elearn.southampton.ac.uk 1.937 3.3 3.237 3.305 ≥ .129 1,029KB https://www.soton.ac.uk 0.951 2.2 2 4.602 ≥ .423 2,334KB https://generic.wordpress.soton.ac. uk/digital-learning/ 2.433 4.7 4.61 11.642 0.128 12,294KB 80 https://matthewdeeprose.github.io/
- 81. What does the DL blog load? 81 https://matthewdeeprose.github.io/
- 82. Render-blocking resources on DL blog 82 https://matthewdeeprose.github.io/
- 86. UoS home page (not OneWeb) Lighthouse Result 86 https://matthewdeeprose.github.io/
- 88. DL Blog Lighthouse Result 88 https://matthewdeeprose.github.io/
- 89. Making accessibility improvements to the DL blog 325 lines of additional CSS that resolve contrast issues underline links WCAG 2.2 AAA compliant focus indicators fix navigation oddities 89 https://matthewdeeprose.github.io/
- 90. Before and after example: the title 90 https://matthewdeeprose.github.io/
- 91. Before and after example: the footer 91 https://matthewdeeprose.github.io/
- 92. Before and after example: menu used with keyboard 92 https://matthewdeeprose.github.io/
- 93. Improving performance • Using TinyPNG and TinyJPG to optimise image size. • Using Lazy loading for images and iframe embeds •Load scripts only on pages where they will be used. •Reduce chaining critical requests by using media queries. 93 https://matthewdeeprose.github.io/
- 94. Performance final thoughts 94 Render blocking resources? Third party font scripts. Are plugins still necessary? Auto-playing videos? What’s being loaded on every page, whether it’s useful or not? https://matthewdeeprose.github.io/
- 95. What I learned and will share today 6 95 Layout Navigation Colour Performance Discoverability • Open graph • Card validators https://matthewdeeprose.github.io/
- 96. Discoverability 96 Site map Google Search Console RSS https://matthewdeeprose.github.io/
- 100. Discoverability recommendations Use card validators to check content previews will look good on the socials / teams etc. https://matthewdeeprose.github.io/ 101
- 101. What next? 102 Migrate to static site generator such as Eleventy to streamline build process? Use a “click to load” for video embeds? Refactor CSS and use CSS variables instead? Continue building components to identify appropriate ARIA, and dark/light mode. Use as basis for further experiments. https://matthewdeeprose.github.io/
- 103. 104 Code snippets Code snippets created using: • PrismJS • a11y syntax highlighting by Eric Bailey https://matthewdeeprose.github.io/ 104
- 104. Resources, slides, transcript All materials can be downloaded from: https://matthewdeeprose.github.io/high_quality-markup_impact 105 https://matthewdeeprose.github.io/