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.
