Shift-left on Accessibility in your Ruby web apps

We all want to make the web more accessible for everybody, but we might not have the time or the knowledge to do it properly, and it might never be a priority for the people that make decisions at your company. We have already convinced everybody that tests matter and that a broken CI is a problem that needs to be fixed. So what if accessibility failures showed up right there, in your test suites?

This talk will show you how to add basic accessibility checks to your existing test suites very easily. Once your CI starts flagging accessibility issues the same way it flags failing functionality tests, everybody will start noticing them. And by fixing those issues, you will learn one step at a time. It's not everything, but it's a start. And if enough of us take that first step, we make the web a little better for everyone!

Transcript

1. Shift-left on Accessibility in your Ruby web apps Julia López – Rubycon Italy 2026 From afterthought to a failing test
2. Julia López From Barcelona ☀ ❤ Ruby/Rails since 2011 Billing, integrations, refactors, upgrades 🤹 🔗 https://julialopez.dev
3. <intentionally left blank>
4. What is this talk about? 🧐
5. Accessibility 🌐 WCAG, ATAG, UAAG, WAI-ARIA and all the acronyms…
6. https://en.wikipedia.org/wiki/Web_accessibility “inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites by people with physical disabilities, situational disabilities, and socio-economic restrictions”
7. ⚖ Legal framework 👥 How people actually use the web 📋 Web Content Accessibility Guidelines (WCAG) ⚙ Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) Before we dive in…
8. ⚖ Legal framework 👥 How people actually use the web 📋 Web Content Accessibility Guidelines (WCAG) ⚙ Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) Before we dive in…
9. ⚖ Legal framework 👥 How people actually use the web 📋 Web Content Accessibility Guidelines (WCAG) ⚙ Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) Before we dive in…
10. ⚖ Legal framework 👥 How people actually use the web 📋 Web Content Accessibility Guidelines (WCAG) ⚙ Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) Before we dive in…
11. https://www.edx.org/learn/web-accessibility/the-world-wide-web-consortium-w3c-introduction-to-web-accessibility W3Cx: Introduction to Web Accessibility
12. Why does accessibility matter?
13. The 2026 report on the accessibility of the top 1,000,000 home pages - https://webaim.org/projects/million/ “95.9% of home pages had detected WCAG 2.2 Level A/AA failures”
15. 👈 Shift-left What does it mean?
16. https://www.freecodecamp.org/news/what-is-shift-left-in-software/ “To shift left is a technical term meaning to try and identify problems as early as you can in your software project lifecycle.”
17. How we can shift-left on accessibility?
18. Wait…
19. https://www.rubyevents.org/
20. The tools 🛠
21. https://developer.chrome.com/docs/lighthouse
23. https://www.deque.com/axe/devtools/
25. https://wave.webaim.org/
27. What is the problem with this approach?
29. Make CI FAIL on accessibility issues 🚨
30. Linting tools 🎨 Catching issues before you even run the code
31. erb_lint 📄 https://github.com/Shopify/erb_lint
32. erblint-github 🐙 https://github.com/github/erblint-github
33. rubocop-rails-accessibility 👮 https://github.com/github/rubocop-rails-accessibility
34. Linting # Gemfile gem "erb_lint", require: false gem "erblint-github" gem "rubocop-rails-accessibility", require: false
35. Linting # Gemfile gem "erb_lint", require: false gem "erblint-github" gem "rubocop-rails-accessibility", require: false
36. Linting
37. Linting # .erb_lint.yml inherit_gem: erblint-github: - config/accessibility.yml Rubocop: enabled: true rubocop_config: require: - standard - rubocop-rails-accessibility
38. Linting # .erb_lint.yml inherit_gem: erblint-github: - config/accessibility.yml Rubocop: enabled: true rubocop_config: require: - standard - rubocop-rails-accessibility
39. Linting # .erb_lint.yml inherit_gem: erblint-github: - config/accessibility.yml Rubocop: enabled: true rubocop_config: require: - standard - rubocop-rails-accessibility
40. ❯ bundle exec erb_lint —lint-all Linting
41. Linting GitHub::Accessibility::SvgHasAccessibleText:`<svg>` must have accessible text. Set `aria-label`, or `aria- labelledby`, or nest a `<title>` element. However, if the `<svg>` is purely decorative, hide it with `aria- hidden='true'. For more info, see https://css-tricks.com/accessible- svgs/. Learn more at https://github.com/github/erblint- github#rules. <svg class="w-1/2 text-white center bg-white/10 rounded-2xl p-12" viewBox="0 0 80 80" fill="currentColor"> In file: app/views/wrapped/_featured.html.erb:12
42. Linting GitHub::Accessibility::SvgHasAccessibleText:`<svg>` must have accessible text. Set `aria-label`, or `aria- labelledby`, or nest a `<title>` element. However, if the `<svg>` is purely decorative, hide it with `aria- hidden='true'. For more info, see https://css-tricks.com/accessible- svgs/. Learn more at https://github.com/github/erblint- github#rules. <svg class="w-1/2 text-white center bg-white/10 rounded-2xl p-12" viewBox="0 0 80 80" fill="currentColor"> In file: app/views/wrapped/_featured.html.erb:12
43. Linting GitHub::Accessibility::SvgHasAccessibleText:`<svg>` must have accessible text. Set `aria-label`, or `aria- labelledby`, or nest a `<title>` element. However, if the `<svg>` is purely decorative, hide it with `aria- hidden='true'. For more info, see https://css-tricks.com/accessible- svgs/. Learn more at https://github.com/github/erblint- github#rules. <svg class="w-1/2 text-white center bg-white/10 rounded-2xl p-12" viewBox="0 0 80 80" fill="currentColor"> In file: app/views/wrapped/_featured.html.erb:12
44. Linting GitHub::Accessibility::SvgHasAccessibleText:`<svg>` must have accessible text. Set `aria-label`, or `aria- labelledby`, or nest a `<title>` element. However, if the `<svg>` is purely decorative, hide it with `aria- hidden='true'. For more info, see https://css-tricks.com/accessible- svgs/. Learn more at https://github.com/github/erblint- github#rules. <svg class="w-1/2 text-white center bg-white/10 rounded-2xl p-12" viewBox="0 0 80 80" fill="currentColor"> In file: app/views/wrapped/_featured.html.erb:12
45. Linting RailsAccessibility/ImageHasAlt: Images should have an alt prop with meaningful text or an empty string for decorative images In file: app/views/talks/_video_player.html.erb:52
46. Linting RailsAccessibility/ImageHasAlt: Images should have an alt prop with meaningful text or an empty string for decorative images In file: app/views/talks/_video_player.html.erb:52
47. Integration testing ⚙ Run the full audit!
48. axe-core-gems 💯 https://github.com/dequelabs/axe-core-gems
50. Integration testing # Gemfile # Accessibility testing with axe-core gem “axe-core-api"
51. Integration testing require "axe/matchers/be_axe_clean" class ApplicationSystemTestCase < ActionDispatch::SystemTestCase ... # Run axe-core accessibility audit on the current page def assert_accessible matcher = Axe::Matchers.be_axe_clean audit = matcher.audit(page) assert audit.passed?, audit.failure_message end end
52. Integration testing require "axe/matchers/be_axe_clean" class ApplicationSystemTestCase < ActionDispatch::SystemTestCase ... # Run axe-core accessibility audit on the current page def assert_accessible matcher = Axe::Matchers.be_axe_clean audit = matcher.audit(page) assert audit.passed?, audit.failure_message end end
53. Integration testing require "axe/matchers/be_axe_clean" class ApplicationSystemTestCase < ActionDispatch::SystemTestCase ... # Run axe-core accessibility audit on the current page def assert_accessible matcher = Axe::Matchers.be_axe_clean audit = matcher.audit(page) assert audit.passed?, audit.failure_message end end
54. Integration testing require "axe/matchers/be_axe_clean" class ApplicationSystemTestCase < ActionDispatch::SystemTestCase ... # Run axe-core accessibility audit on the current page def assert_accessible matcher = Axe::Matchers.be_axe_clean .according_to(:wcag2a, :wcag2aa, :wcag21a, :wcag21aa) audit = matcher.audit(page) assert audit.passed?, audit.failure_message end end
55. Integration testing require "axe/matchers/be_axe_clean" class ApplicationSystemTestCase < ActionDispatch::SystemTestCase ... # Run axe-core accessibility audit on the current page def assert_accessible matcher = Axe::Matchers.be_axe_clean .skipping("image-alt") audit = matcher.audit(page) assert audit.passed?, audit.failure_message end end
56. Integration testing require "axe/matchers/be_axe_clean" class ApplicationSystemTestCase < ActionDispatch::SystemTestCase ... # Run axe-core accessibility audit on the current page def assert_accessible matcher = Axe::Matchers.be_axe_clean .checking_only("link-name", "button-name") audit = matcher.audit(page) assert audit.passed?, audit.failure_message end end
57. Integration testing require "axe/matchers/be_axe_clean" class ApplicationSystemTestCase < ActionDispatch::SystemTestCase ... # Run axe-core accessibility audit on the current page def assert_accessible matcher = Axe::Matchers.be_axe_clean audit = matcher.audit(page) assert audit.passed?, audit.failure_message end end
58. require "application_system_test_case" class AccessibilityTest < ApplicationSystemTestCase # Home & Browse test "home page is accessible" do visit root_url assert_accessible end test "browse page is accessible" do visit browse_index_url assert_accessible end # Talks test "talks index is accessible" do visit talks_url assert_accessible Integration Testing
59. Failure: AccessibilityTest#test_talk_detail_is_accessible [test/system/accessibility_test.rb:25]: Found 11 accessibility violations: Integration Testing
60. Failure: AccessibilityTest#test_talk_detail_is_accessible [test/system/accessibility_test.rb:25]: Found 11 accessibility violations: Integration Testing
61. Failure: AccessibilityTest#test_talk_detail_is_accessible [test/system/accessibility_test.rb:25]: Found 11 accessibility violations: Integration Testing
62. 1) aria-allowed-role: ARIA role should be appropriate for the element (minor) https://dequeuniversity.com/rules/axe/4.11/aria- allowed-role?application=axeAPI The following 5 nodes violate this rule: Selector: input[aria-label="Description"] HTML: <input type="radio" name="talk_tabs" role="tab" class="tab" aria-label="Description" checked=""> Fix any of the following: - ARIA role tab is not allowed for given element […] Integration Testing
63. 1) aria-allowed-role: ARIA role should be appropriate for the element (minor) https://dequeuniversity.com/rules/axe/4.11/aria- allowed-role?application=axeAPI The following 5 nodes violate this rule: Selector: input[aria-label="Description"] HTML: <input type="radio" name="talk_tabs" role="tab" class="tab" aria-label="Description" checked=""> Fix any of the following: - ARIA role tab is not allowed for given element […] Integration Testing
64. 1) aria-allowed-role: ARIA role should be appropriate for the element (minor) https://dequeuniversity.com/rules/axe/4.11/aria- allowed-role?application=axeAPI The following 5 nodes violate this rule: Selector: input[aria-label="Description"] HTML: <input type="radio" name="talk_tabs" role="tab" class="tab" aria-label="Description" checked=""> Fix any of the following: - ARIA role tab is not allowed for given element […] Integration Testing
65. 1) aria-allowed-role: ARIA role should be appropriate for the element (minor) https://dequeuniversity.com/rules/axe/4.11/aria- allowed-role?application=axeAPI The following 5 nodes violate this rule: Selector: input[aria-label="Description"] HTML: <input type="radio" name="talk_tabs" role="tab" class="tab" aria-label="Description" checked=""> Fix any of the following: - ARIA role tab is not allowed for given element […] Integration Testing
66. 1) aria-allowed-role: ARIA role should be appropriate for the element (minor) https://dequeuniversity.com/rules/axe/4.11/aria- allowed-role?application=axeAPI The following 5 nodes violate this rule: Selector: input[aria-label="Description"] HTML: <input type="radio" name="talk_tabs" role="tab" class="tab" aria-label="Description" checked=""> Fix any of the following: - ARIA role tab is not allowed for given element […] Integration Testing
67. 2) aria-dialog-name: ARIA dialog and alertdialog nodes should have an accessible name (serious) https://dequeuniversity.com/rules/ axe/4.11/aria-dialog-name? application=axeAPI Integration Testing
68. 3) aria-required-children: Certain ARIA roles must contain particular children (critical) Integration Testing
69. 4) color-contrast: Elements must meet minimum color contrast ratio thresholds (serious) Integration Testing
70. 5) image-alt: Images must have alternative text (critical) Integration Testing
71. 6) image-redundant-alt: Alternative text of images should not be repeated as text (minor) Integration Testing
72. 7) landmark-one-main: Document should have one main landmark (moderate) Integration Testing
73. 8) link-name: Links must have discernible text (serious) Integration Testing
74. 9) list: <ul> and <ol> must only directly contain <li>, <script> or <template> elements (serious) Integration Testing
75. 10) page-has-heading-one: Page should contain a level-one heading (moderate) Integration Testing
76. 11) region: All page content should be contained by landmarks (moderate) Integration Testing
77. The f ix 👩🔧
78. Fix one by one
79. Use AI
80. Julia López “Fix all the accessibility issues found by the linting and system tests”
82. Before
83. 🥁
84. After
85. After after
86. Automated tools can only catch roughly 30 to 40% of accessibility issues This is just the beginning of your accessibility journey!
87. Special mention…
88. Herb https://herb-tools.dev/
89. https://github.com/rubyevents/rubyevents/compare/main...yukideluxe:rubyevents:jl-accessibility
90. THANK YOU 🥰 Any questions? Wanna share experiences? Find me around! 🔗 https://julialopez.dev