Bruno Prieto
Making Accessible Web Apps with Rails and Hotwire

Summarized using AI

Making Accessible Web Apps with Rails and Hotwire

Bruno Prieto • September 26, 2024 • Toronto, Canada

In the video titled "Making Accessible Web Apps with Rails and Hotwire," Bruno Prieto, a blind developer at 37 Signals, addresses the importance of creating accessible web applications using Rails and Hotwire. He draws from his personal experiences to highlight how accessibility can significantly enhance the web experience for users with disabilities. Prieto shares his journey of learning to navigate computers and the internet after losing his sight, emphasizing that accessibility tools are vital for independence and productivity.

Key Points Discussed:

  • Understanding Accessibility: Prieto explains how web developers can make applications accessible by considering how users with screen readers interact with content. He describes his navigation process and the way he utilizes keyboard shortcuts to access headings and paragraphs more efficiently.
  • Importance of HTML Semantics: Proper HTML structure is crucial for both accessibility and search engine optimization. Prieto stresses that the order and semantics of HTML elements affect how content is read by screen readers, suggesting the use of
    tags to identify significant parts of the web page.
  • Heading Hierarchy: Maintaining a proper heading hierarchy is essential. Prieto encourages developers not to rely on visual size but to use numeric values correctly to convey the significance of headings, similar to how they function in a table of contents.
  • Creating Functional Links and Buttons: The speaker emphasizes the importance of ensuring links behave as expected, advising against using empty anchor tags and advocating for the correct use of elements like buttons. This clarity is vital for users relying on assistive technologies.
  • Challenges with Custom Inputs: While custom elements can enhance design, Prieto warns that they can also lead to accessibility issues if not implemented correctly. He urges developers to prioritize native HTML elements that come with built-in accessibility features when possible.
  • Managing Hidden Elements: The correct management of hidden content is essential to avoid confusion for screen reader users. Using attributes like 'hidden' or 'display: none' properly can ensure that content is conveyed accurately.
  • Testing for Accessibility: Regularly testing applications with screen readers to check the reading order and functionality is crucial to ensure an optimal user experience for those relying on assistive technologies.

Conclusion

Prieto concludes his talk with the message that creating accessible web applications doesn't have to be a daunting task. With the right approach and knowledge, developers can easily integrate accessibility into their projects from the start, rather than as an afterthought. By focusing on fundamental practices and standard conventions, developers can enhance the user experience for everyone, making the web more inclusive. His personal story serves as a reminder of the invaluable role accessibility plays in technology, opening doors for individuals with disabilities.

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

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.160 Hello, my name is Bruno Prieto, and I'm very excited to be here. I work as a programmer at 37 Signals, and today I will talk about how to make web applications accessible using Rails and Hotwire. First, I want to share a bit about my story.
00:00:25.039 I lost my sight when I was two years old. When I turned five, my dad had the idea that the internet could be a window to the world, as he knew I could read Braille. He sat me in front of a computer and gradually taught me how to navigate Windows, write documents, copy files, and much more. Over the years, my skills grew, and by the time I was ten, I became more independent. I learned how to browse the internet, install programs, chat with my friends, and even play games—it was so cool! I still remember the first time I created my own website using a program called Macromedia Dreamweaver, which was like Microsoft Word but translated rich text into HTML.
00:01:10.080 Those experiences were incredible, and I was excited to hear my screen reader read the elements I was coding. Eventually, I published my first aesthetic page on the internet, and just like my dad thought, using the computer opened many doors for me from a young age. By the time I was eleven, I was able to take a laptop to school instead of a notebook, which was a huge game-changer compared to using a bulky Braille typewriter. My parents no longer had to transcribe everything into Braille, and I could work independently.
00:01:36.799 I learned to create better websites and improved my programming skills. When I turned 18, I entered university, completed my degree, and started working on my own projects. Today, I work at 37 Signals. All of these experiences highlight how important accessibility is, and none of it would have been possible without the tools and resources that have been made available.
00:02:29.480 So, how does accessibility matter in web development? I want to explain how I interact with the web using a screen reader, which reads everything on the screen. A screen reader allows me to interact with elements and controls in various ways depending on the context. Typically, I navigate from left to right and top to bottom, so the screen reader processes the information in that order. I can use the arrow keys to move between elements and read their content. It's essential to understand that different screen readers work differently and each has its own keyboard shortcuts.
00:03:01.640 When using a screen reader, I usually try to access the headings and paragraphs on a page. If I relied solely on tabbing through controls, I could miss significant content, such as headings and paragraphs. The main point is that each screen reader has its unique way of functioning, so when designing your web applications, it's crucial to keep these differences in mind.
00:03:49.800 I use various shortcuts to navigate quickly. For example, pressing '1' takes me to the first heading, '4' takes me to H4 elements, and I can quickly jump between different regions like the navigation or header using specific shortcuts. To enhance my experience, it’s essential to maintain good HTML semantics. Just like search engines use semantics to index pages, my brain organizes information similarly. An organized structure in your HTML helps both screen readers and search engines.
00:04:18.960 The order in which you write HTML elements is vital. Screen readers read elements in the same order they are coded, so structuring your HTML correctly is essential for both accessibility and SEO. When I get to a page, I look for the main content similar to Google's search results display. For instance, if the main content is wrapped in a <main> tag, I can identify it and jump to it quickly.
00:05:04.400 Headers act like a table of contents. To keep them meaningful, it’s important to maintain a proper heading hierarchy—meaning titles should not just change based on size. The lesser the number of the heading, the more important it is. Therefore, one of my recommendations is to maintain the separation of heading styles from their numerical structure.
00:05:42.400 Links are also crucial. When developing pages, ensure links behave as expected. If you have a link that performs an action but does not lead to another page, this can confuse both screen readers and search engines. It's important not to create links that do not function as links, as this can lead to unnecessary confusion. Common issues arise when developers add an empty anchor '#' in an href to prevent default behavior. This can mislead both users and assistive technologies, including screen readers.
00:06:27.799 Additionally, I often see links styled to look like buttons without using the appropriate element. If something is supposed to function as a button, use the <button> tag instead of pretending a link is a button. Assistive technologies depend on the correct use of HTML elements to convey accurate meaning. If a button contains an icon, make sure that it is appropriately labeled to state its function. An unlabeled button hidden behind an icon can cause significant usability issues.
00:07:08.840 Remember, the key concept is not to reinvent the wheel. Making accessible websites requires adhering to standard practices. If you find yourself doing something contrary to how the browser is designed to work, it may not be the best approach. In the past, many things were more complicated, but today we have many ways to achieve accessibility that weren't possible before, like designing custom switches.
00:08:07.280 However, creating custom switches can lead to accessibility issues if not designed correctly. The same applies to custom checkboxes or terms and conditions boxes; they can become inaccessible, preventing many users from completing necessary actions on forms. When you develop customized inputs, be prepared for additional challenges such as maintaining code and testing across different browsers and screen readers.
00:09:02.139 For instance, on different operating systems or with different browsers, some elements may be fully accessible in one environment but not in another. Proper interactions are critical. For example, if you create a custom checkbox, ensure that the input is visible for screen readers and manages input states properly. This approach allows the browser to interpret the states accurately.
00:09:56.000 When hiding elements, do not just move them out of view; use methods like the 'hidden' attribute, 'display: none', or 'visibility: hidden' to ensure that they are omitted from the accessibility tree. It's crucial to manage how information is hidden, as improperly hidden elements can lead to confusion for screen reader users.
00:10:39.680 For example, when purchasing tickets to an event, I encountered many hidden elements that the screen reader could still access, causing confusion. There are proper ways to manage elements that are meant to be hidden, which can include using detailed summary elements to control visibility without breaking accessibility.
00:11:30.040 Modern implementations make managing modal dialogues significantly easier compared to previous practices. Check for built-in attributes available in HTML that are designed with accessibility in mind. These elements come with default accessibility behavior, eliminating the need for extensive additional attributes.
00:12:28.000 Embracing these practices makes web development more manageable and increases overall accessibility. When the development practices prioritize accessibility from the start, the product becomes simpler to navigate and enhance user experience, making it ultimately beneficial for developers and users alike.
00:12:55.919 The message here is that accessibility is not as hard as it may appear. With the right knowledge and tools, it’s easier than ever to create accessible websites. To achieve this, you must consider accessibility from the beginning of your project; waiting until the end can lead to difficulties, and adding accessibility afterwards can require significant extra work.
00:13:46.839 The suggestions I shared will help avoid excessive use of ARIA attributes, which some claim have inconsistent support across various browsers and assistive technologies. If starting from scratch isn't possible, focus on reviewing your existing website’s groundwork. Make sure to check that HTML regions, headings, and links are appropriate. Ensure that buttons with icons have accessible labels and consider replacing custom controls with native elements wherever appropriate.
00:14:56.559 Finally, it’s beneficial to test your website using a screen reader. Analyze the order in which elements are read and evaluate whether that aligns with the expected user experience. With these improvements, web applications can become clearer to users, including those with disabilities.
00:15:46.919 My father’s goal was to facilitate access to the internet for me, as well as many others. If you are interested or have questions, I'm active on multiple platforms as 'G', and I’d love to connect. Special thanks to Diego, Mel, and Hor for their support and feedback during the preparation of this presentation.
Explore all talks recorded at Rails World 2024
+17