Search
User Experience (UX)
Making Accessible Web Apps with Rails and Hotwire
Edit
#accessibility
#ruby-on-rails
#hotwire
#web-development
#user-experience-ux
#inclusive-design
Summarized using AI

Making Accessible Web Apps with Rails and Hotwire

Bruno Prieto • September 27, 2024 • Toronto, Canada • Talk

In the video titled "Making Accessible Web Apps with Rails and Hotwire," Bruno Prieto, a blind developer and programmer at 37 Signals, shares insights into creating accessible web applications using Rails and Hotwire. He emphasizes the importance of accessibility and shares his personal journey of navigating technology as a visually impaired individual. The talk highlights key elements that contribute to web accessibility and offers practical tips for developers.

Key Points Discussed:

  • Personal Experience: Bruno lost his sight at two years old and learned computer navigation through his father's guidance. He created his first website using Micromedia Dreamweaver, illustrating how technology became an integral part of his independence and learning.
  • Understanding Screen Readers: Steps to interact with screen readers are explained, noting that each screen reader has unique navigation commands. Emphasis is placed on using screen readers correctly to read content efficiently.
  • Importance of HTML Semantics: Bruno discusses the significance of semantic HTML, noting that proper structure (e.g., headings, and navigation regions) facilitates better navigation for both users and screen readers.
  • Recommendations for Accessibility: He provides practical advice for developers:
    • Use appropriate roles and tags in HTML, such as main, header, navigation, and proper heading levels.
    • Avoid modifying standard elements (like using a link as a button) to ensure consistent behavior across platforms.
    • Use ARIA attributes sparingly and make sure that all icons have accessible labels.
  • Avoiding Common Pitfalls: Choosing the right elements is crucial (e.g., using buttons for actions, links for navigation) to prevent confusion and enhance usability.
  • Embracing Accessibility Standards: Bruno encourages adherence to accessibility standards from the start of the development process. Introducing accessibility late in the design can lead to challenges and inefficiencies.
  • Final Thoughts: He concludes by urging developers to review their projects for basic semantic elements and test their sites with screen readers to identify accessibility issues.

Main Takeaways:

  • Accessibility is vital in web development and can be achieved more easily now than ever.
  • Developers should engage in practices that make websites accessible by design rather than as an afterthought, thereby providing a smoother user experience for everyone.
  • Bruno invites viewers to reach out for further questions and discussions about improving web accessibility.

Overall, the presentation aims to empower developers to create inclusive web applications that can be easily navigated by everyone, regardless of their physiological abilities.

Making Accessible Web Apps with Rails and Hotwire
Bruno Prieto • September 27, 2024 • Toronto, Canada • Talk

Is your web app accessible? In his talk at #RailsWorld, Bruno Prieto shares his first-hand perspective as a blind developer on building accessible web apps with real-world examples taking advantage of tools provided by Rails, Hotwire, and the browser. It's easier than you think!

#rails #accessibility #webaccessibility

Thank you Shopify for sponsoring the editing and post-production of these videos. Check out insights from the Engineering team at: https://shopify.engineering/

Stay tuned: all 2024 Rails World videos will be subtitled in Japanese and Brazilian Portuguese soon thanks to our sponsor Happy Scribe, a transcription service built on Rails. https://www.happyscribe.com/

Rails World 2024

00:00:10.240 so hello um I'm berno PTO um I'm very
00:00:14.240 excited to be here um I work as a
00:00:17.920 programmer at 37 signals um I'm going to
00:00:21.160 talk about how to make uh web apps
00:00:25.119 accessible using rails and hot
00:00:28.599 wire so uh first I will
00:00:32.960 start by telling you about my
00:00:36.559 story uh I lost my site when I was two
00:00:39.840 years old and when I was 5 years old my
00:00:43.760 dad had the idea that the internet could
00:00:46.640 be the window to the world because who
00:00:50.680 else knows
00:00:51.800 Braille so he sat me in front of the
00:00:55.079 computer and little by little he taught
00:00:58.960 me to navigate on Windows uh write
00:01:02.120 documents copy files and much more and
00:01:06.240 over the years uh my careity grew and
00:01:09.840 when I was 10 I became more independent
00:01:13.680 and I learned to browse the internet how
00:01:16.000 to install programs chat with my friends
00:01:19.320 and even play games it was so cool so I
00:01:24.320 remember I even even remember the first
00:01:28.000 time when I could make my first website
00:01:33.960 and I used a program called micromedia
00:01:36.880 Dream Weaver um and it was something
00:01:40.479 like uh Microsoft Word um that
00:01:45.040 translated reach text into an
00:01:48.119 HTML so those were my first experiences
00:01:52.399 and and I remember was getting very
00:01:55.479 excited to hear my screen reader show me
00:01:59.520 those elements that I was coding and
00:02:03.200 eventually I published the my first
00:02:06.159 aesthetic page into the internet and
00:02:09.720 just like my dad thought uh the use of
00:02:13.200 the computer opened many doors for me
00:02:15.959 from my young age and when I was 11 I
00:02:19.959 went to the school with a laptop instead
00:02:22.200 of a notebook um so before I had to use
00:02:26.239 a brail typewriter and that so big and
00:02:33.280 it's and heavy so and also my parents
00:02:37.360 had to transcribe everything into rail
00:02:41.040 um so finally I was able
00:02:46.360 to to work H with like all of that and
00:02:51.959 do all my school works with with this
00:02:55.879 and people could see what I was doing
00:02:59.640 and and I didn't
00:03:01.760 need any transcriptions anymore so also
00:03:05.959 my mle stop reading my books to um so
00:03:11.519 that was a huge progress when working
00:03:14.599 with teachers and and and
00:03:18.000 classmates so then um I learned to make
00:03:24.480 better websites and and started getting
00:03:28.080 better at programming and at 18 I got
00:03:32.519 into the university finished my degree
00:03:35.599 and creating my own projects and so now
00:03:38.920 I'm I'm here working at 37 signal um
00:03:43.040 that's
00:03:54.439 incredible so none of this uh would have
00:03:58.439 been possible uh without
00:04:01.319 accessibility so this is how I use the
00:04:05.040 web rails world is sold out see you in
00:04:07.799 Toronto SE 26 and 27 Banner Landmark
00:04:11.560 navigation Landmark visited same page
00:04:13.599 link graphic rails World logo 2024 link
00:04:16.680 fact link speakers link agenda September
00:04:19.280 26th and 27 Toronto Canada main landmark
00:04:22.919 heading level three shaping the future
00:04:24.560 of Ruan
00:04:26.479 rails well um so the this is a screen
00:04:30.440 reader
00:04:32.240 um and this is a piece of software that
00:04:35.639 reads everything on the screen and I can
00:04:38.600 interact with the elements and the
00:04:41.000 controls in many ways depending on the
00:04:43.639 context but on the web it's generally
00:04:47.240 done from left to right uh top to bottom
00:04:51.479 and so that the screen reader passes the
00:04:53.360 information from the D and the
00:04:56.240 information is read in that order so I
00:04:59.960 can use the arrow keys to move and
00:05:03.320 between those elements and and read the
00:05:06.199 content and under the hood the screen
00:05:09.320 reader intercept those key strokes and
00:05:12.800 changes the
00:05:14.280 Behavior Uh and many of you would think
00:05:19.280 I'm using tab to navigating but not I'm
00:05:23.120 I'm not um navigating using tab would
00:05:27.280 only move through Focus SLE controls
00:05:30.680 and if I did that uh I wouldn't be able
00:05:33.479 to read um the headings or or paragraphs
00:05:38.280 in in this
00:05:39.440 example so I wouldn't miss a I would
00:05:42.759 miss an important P part of the of the
00:05:45.680 page so that is the is the first and
00:05:49.840 most important thing that you need to
00:05:53.520 know is every screen reader Works
00:05:57.360 differently and each one has his own
00:06:00.520 keyboard shortcuts for navigating and
00:06:02.520 reading
00:06:03.600 content but actually uh that's not I use
00:06:07.120 the computer in my daily
00:06:09.599 life this is an a beginner example about
00:06:13.479 how to use a
00:06:14.759 computer I use I use it like this
00:06:58.400 same
00:07:07.000 well
00:07:15.120 so so no I don't have any
00:07:18.280 superpowers um you can configure any
00:07:21.560 screen reader it to speak like this and
00:07:25.800 and also as a kid I use this like in the
00:07:29.720 first video um and I slowly increased
00:07:32.599 the the speed um that was the first
00:07:36.039 trick to become more
00:07:38.840 productive but
00:07:40.639 eventually I hit my B speed limit uh I
00:07:44.400 couldn't process it that fast
00:07:47.440 so so actually I I could understand the
00:07:51.159 text but my brain very quickly forgot
00:07:55.000 the content so I had to repeat it again
00:07:58.120 and then was no longer product so um
00:08:01.400 that that was the limit uh so there are
00:08:04.560 other ways that also I can use to
00:08:07.800 increase the
00:08:09.440 speed and if you no this in the video I
00:08:12.520 moved very quickly through important
00:08:14.919 parts of the website uh I jumped
00:08:17.720 straight to the rmy H quickly go to the
00:08:20.120 prodct to take a look um and I did the
00:08:23.159 same in the repository
00:08:25.240 list um I do all of this uh I Do by
00:08:32.200 recognizing this parents on on the
00:08:35.599 elements um and this is thanks to HTML
00:08:42.120 semantics um so this is very important
00:08:45.399 um just like
00:08:47.920 SEO indexes Pages for the
00:08:51.279 semantics my mind does the
00:08:54.279 same I can remember the page structor
00:08:57.880 for a long time and my screen reader
00:09:00.839 allows me to move using
00:09:03.880 commands but semantics is not just about
00:09:08.160 the
00:09:08.920 elements but also about the order in
00:09:12.720 which you write the
00:09:15.839 elements because as I said screen
00:09:19.440 readers read the the same the things in
00:09:22.959 the same order as the HTML is written
00:09:27.399 so as you help as as you help the search
00:09:32.320 engines understand the page you should
00:09:35.640 help me to index the page in my brain in
00:09:39.600 in a way that makes sense to the user
00:09:42.000 interface or or or
00:09:44.600 interaction so in the previous video H I
00:09:48.160 go to the H1 by pressing one um I went
00:09:52.800 to the pool request I moved uh to the
00:09:57.040 navigation region by pressing d and I
00:10:00.480 noticed that in the repository list each
00:10:03.079 repository has an H4 so I move between
00:10:06.279 them by pressing
00:10:07.800 four and all these elements are ordered
00:10:11.360 in a way that makes sense to read and
00:10:14.200 understand and and navigate to the page
00:10:17.320 and
00:10:18.440 easily so I'm always looking for
00:10:21.399 patterns to read the website and also to
00:10:24.600 try to be as productive as possible to
00:10:28.760 achieving and Quick
00:10:32.600 Navigation this is my way of taking a
00:10:36.519 quick look at things when exploring the
00:10:38.880 web so when I enter a page and I start
00:10:43.600 analyzing it I act like a search engine
00:10:48.200 because this the first thing that I want
00:10:51.160 to read is usually the main
00:10:54.000 content like Google when displaying an
00:10:58.440 important part in the search result
00:11:02.000 pages so identifying it can be very easy
00:11:06.320 and if you use if you use the right
00:11:08.800 elements that's why this HTML elements
00:11:13.399 does exist
00:11:15.639 so for example if you
00:11:18.200 write if you wrap the main content in a
00:11:21.880 main element I'll be able to identify it
00:11:26.040 quickly and and quickly jump to it so
00:11:29.800 mean it's like an area of a page and we
00:11:34.959 also call it uh
00:11:37.160 regions so there there's more regions
00:11:40.320 and we can move between those regions by
00:11:43.200 pressing D or shift to go back at least
00:11:47.560 with nvda that is the screen reader
00:11:50.120 which I
00:11:51.200 use so the other regions
00:11:54.760 are header navigation aside and fter
00:11:59.880 but also regions and so as a first
00:12:04.000 recommendation try to
00:12:06.360 use the right regions when making your
00:12:10.279 rails
00:12:11.279 layout and it's very
00:12:14.440 simple um so
00:12:18.160 other useful way to navigate our
00:12:24.480 headings but only if you respect the
00:12:27.880 hierarchy because they act like a table
00:12:31.800 of content of a
00:12:33.360 book so headings aren't for changing the
00:12:36.920 size of
00:12:38.199 titles they are they are meant to give
00:12:41.880 meaning and order to the page uh so the
00:12:45.639 lower the number of the heading the more
00:12:49.279 important it is so this is the second
00:12:52.519 recommendation is keep the styles of
00:12:55.199 your headings separate from the number
00:12:57.519 of it um other
00:12:59.760 wise my my brain won't be able to index
00:13:02.680 your sze U like like like a table of
00:13:06.800 content you you wouldn't put wrong
00:13:09.040 numbers there um
00:13:12.360 so um also as part of indexing uh search
00:13:17.760 engines just like me uh need to know the
00:13:21.480 pages that the website has so when when
00:13:24.519 they start analyzing the web page H and
00:13:27.440 want to crawl uh all of the web pages
00:13:31.279 they look for links because links
00:13:34.600 are what takes you to another page so
00:13:38.920 what happens if you put a a link but
00:13:42.680 that it doesn't behave like a
00:13:45.240 link you you confused the the engine
00:13:48.839 right and also you confused me because
00:13:52.399 my my my screen reader
00:13:54.320 thinks this is It's a link and I think
00:13:57.920 it will take me to another
00:14:00.160 page you should only think of it's a get
00:14:05.079 method for example if there's a link
00:14:09.199 that delete an item my expectation would
00:14:13.399 be to go to another page where I can
00:14:17.360 invoke the action so
00:14:20.079 probably it has more important
00:14:22.759 information that I need to know before
00:14:24.880 pressing that
00:14:26.440 button um and and another practice
00:14:30.240 another common practice that I've seen
00:14:32.320 is including an empty number sign in the
00:14:36.399 H RI
00:14:38.160 attribute and this is a hack to prevent
00:14:42.320 the default be behavior of
00:14:44.759 Ls um and if you are doing so you are
00:14:50.079 using the wrong elements for this kind
00:14:51.959 of purposes because you telling the
00:14:54.759 browser hey I'm try to navigate to an
00:15:00.040 anchor that doesn't exist so also the
00:15:04.199 screen
00:15:05.160 reader will told me that that that link
00:15:09.079 take me to another page of the same
00:15:11.639 another part of the same page which is
00:15:14.759 not
00:15:16.600 true and and other thing that I have
00:15:20.839 seen is applying a class button to
00:15:25.199 Links so come on it's a button or is a
00:15:28.199 link uh because for you looks like a
00:15:31.160 button but for me it looks a link so if
00:15:34.920 it's not a link to navigate to another
00:15:37.199 page please use the button tags to
00:15:40.600 invoke the
00:15:41.680 actions or in other words don't avoid to
00:15:45.440 use this data to r
00:15:48.040 that um and use the elements that were
00:15:52.560 specially designed for
00:15:54.160 that and if necessary label it for
00:15:58.199 example if your button has a beautiful
00:16:00.959 icon or an SVG inside of it I won't I I
00:16:05.319 won't have any idea of what it does I'll
00:16:09.240 just know it's a button but what does it
00:16:13.399 do the only way to know is by present so
00:16:18.000 which might not be a good idea what if
00:16:21.440 it's a red button that deletes all my
00:16:24.160 data so I wouldn't like to reass that
00:16:27.240 after pring it you know um so as you can
00:16:30.199 see the main idea is do not reinvent the
00:16:35.560 wheel this is the key when making
00:16:39.839 accessible
00:16:41.160 websites is just go with the flow uh if
00:16:45.560 you feel like you are doing something
00:16:47.959 against the browser it's probably not
00:16:51.040 the right way
00:16:53.399 nowadays there are many ways to achieve
00:16:56.040 things that were more difficult in the
00:16:58.079 past for for
00:16:59.560 example designing a custom
00:17:03.120 switch it's a quite common
00:17:06.600 scenario um so I get you don't like how
00:17:11.400 the brow native input looks but remaking
00:17:16.079 them usually ends up making them
00:17:19.199 completely
00:17:20.640 inaccessible um and a combination I I
00:17:24.480 usually have
00:17:26.039 is with customized terms and condition
00:17:30.000 check boxes and are sometimes they are
00:17:33.799 inaccessible
00:17:35.080 so I just sometimes I just can't
00:17:38.039 continue sign up signing
00:17:40.679 up so
00:17:43.320 developing your own customiz input U
00:17:47.480 comes with several
00:17:50.120 challenges first you you have obviously
00:17:52.360 more code to maintain U but also you
00:17:55.400 have to test it in different browsers
00:17:59.080 and if you want to make it accessible
00:18:01.559 you have also to test it on different
00:18:04.280 screen readers and different operating
00:18:06.400 systems because some things can be fully
00:18:11.000 accessible on Windows for example but
00:18:13.440 not on Mac so here in in this example
00:18:18.919 you can see how you can do it we're
00:18:21.360 showing the input on only for screen
00:18:25.120 screen read
00:18:26.760 users using this CS
00:18:29.679 St and and then you can make it
00:18:32.919 beautiful depending on the state of the
00:18:35.400 checkbox since the checkbox will be
00:18:38.720 visible to the screen readers I will be
00:18:42.000 able to identify this status and at the
00:18:45.080 same time the server can read the value
00:18:49.080 immediately when submitting the form so
00:18:53.200 not only makes sense for browsers and
00:18:56.960 accessibility but also makes sense to
00:18:59.480 the server and the web patterns because
00:19:03.320 this is how the forms have worked from
00:19:06.200 the
00:19:07.120 beginning
00:19:08.640 um but this same trick can be appli also
00:19:13.919 in a wrong way
00:19:17.360 um because it's it's quite common to
00:19:20.400 hide things by for example just moving
00:19:23.720 the elements just uh out of the
00:19:26.480 screen um and this is is another example
00:19:29.799 uh on Monday I was buying a ticket for
00:19:33.440 an Iran concert and there were many
00:19:37.280 elements that was hidden using this
00:19:39.720 trick and but I still saw all of
00:19:43.120 them but it wasn't supposed to so I
00:19:46.200 could read I of loading Spinners
00:19:49.159 confirmation models and warning for def
00:19:52.120 flow so all of the same time I I know I
00:19:55.720 had no idea what's going on and I to
00:19:59.039 that the inside of missing the concert
00:20:02.200 so so please hide things correctly you
00:20:07.000 you can use the hidden attribute like in
00:20:10.360 this example or you can also use the
00:20:13.240 properties like display know or
00:20:15.440 visibility
00:20:16.799 hidden um so there also different ways
00:20:20.799 to to Hidden these elements
00:20:23.400 properly uh but if you're using this
00:20:25.880 pattern a lot you might need some
00:20:29.320 something something
00:20:31.400 else so maybe something like a detailed
00:20:35.120 element with a summary element which
00:20:38.159 expands or collapses the content or this
00:20:41.440 new way to make a a dialogue using the
00:20:45.600 PO
00:20:46.880 attribute which by the way is accessible
00:20:49.679 by default which U works well with
00:20:52.720 screen readers and it closes
00:20:55.320 automatically by prison escape while you
00:20:58.039 can also close close it um by clicking
00:21:01.200 out side and also has have their own
00:21:05.679 methods and events to control and extend
00:21:08.400 it features with
00:21:10.240 JavaScript um so
00:21:13.960 before developing this kind of model
00:21:16.880 dialoges was quite a challenge because
00:21:19.679 we had to add some extra attributes and
00:21:22.720 manag focus properly um but now is much
00:21:27.159 easier
00:21:29.760 um
00:21:31.799 so try to embrace these kind of
00:21:35.880 restrictions in your projects because
00:21:38.919 they will make your life easier as a
00:21:40.840 developer and also your product will be
00:21:43.840 much easier to use and
00:21:46.039 maintain and will be accessible almost
00:21:49.320 by default so it's a it's a win-win and
00:21:52.440 by doing this accessibility is not as
00:21:54.799 hard as it seems
00:21:58.720 and
00:22:00.000 today it's easier than ever to make
00:22:04.120 accessible websites but for to be easy
00:22:08.600 you need to consider accessibility from
00:22:12.440 the
00:22:13.960 beginning because if if you purchas it
00:22:16.600 for later it becomes pry challenging and
00:22:20.559 time
00:22:21.400 consuming um this this practices that I
00:22:26.400 share with you will save you from
00:22:30.840 overusing area attributes that some say
00:22:34.400 are not re
00:22:36.919 reliable across all the browsers
00:22:40.279 and and Screen
00:22:43.000 readers but I
00:22:44.960 know not everyone has the opportunity to
00:22:47.919 start from scrotch so the if you want to
00:22:51.520 start improving the accessibility of
00:22:53.279 your site I I will start by reviewing
00:22:57.360 the most of the basic parts of
00:23:01.039 semantics so for example check if you're
00:23:04.559 if you're using the right regions and
00:23:07.320 headings H check if you are using links
00:23:10.679 properly um for and for anything other
00:23:14.080 than Gap method and look for any button
00:23:19.320 that only has an icon and make sure that
00:23:23.400 it has an accessible label with the with
00:23:27.360 the area lab attribute if
00:23:30.360 necessary also check if you have custom
00:23:34.600 controls and try to replace them with na
00:23:38.840 on and try
00:23:41.360 to use the this new HTML five elements
00:23:45.559 like this dialogue with the PO
00:23:49.559 attribute and
00:23:51.480 finally try to use the your page with a
00:23:55.159 screen reader uh think think if if the
00:23:59.679 order in which it reads the the element
00:24:02.600 makes sense for you um
00:24:05.120 and that might help you to find out what
00:24:10.480 things are
00:24:12.600 inaccessible
00:24:14.240 so and just U my dad
00:24:20.840 wanted help help me and many others to
00:24:26.440 have a clear and open open gateway to
00:24:29.159 the
00:24:30.000 internet and of course if if you have
00:24:34.159 any questions or you're interested in
00:24:36.440 this topic you can find me
00:24:40.320 everywhere uh I'd be happy to help you
00:24:43.600 um also many thanks to to Diego Mel and
00:24:48.159 hor for helping and providing me so
00:24:50.279 useful feedback to make this
00:24:52.279 presentation
00:24:58.640 w
Bruno Prieto
@brunoprietog
Explore all talks recorded at Rails World 2024
+33