00:00Hello, welcome to The Transcendent. In this video, we'll learn ARIA roles for complex web
00:18applications, how to use ARIA roles correctly, and what are ARIA roles? How does this function
00:25works? So, what are ARIA roles? ARIA, accessible rich internet applications. What an element
00:32does when native HTML semantics are encountered? Aren't enough. Why use it? Improves accessibility.
00:39Fixes semantic gaps. ARIA roles represent supplemental types of descriptive attributes
00:45that we can effectively integrate into standard HTML elements. This is done to provide them
00:50with richer semantic value and also to ensure the web browser accurately decodes what a specific
00:56item is intended to achieve. In an ideal scenario, employing an ARIA role would not typically be a
01:03necessary step for us to take. When we thoughtfully select and use the most appropriate HTML element for
01:09a given piece of information, we successfully transmit the correct semantic message regarding
01:14the inherent meaning of that content. However, circumstances are not always perfect, and there
01:20are occasions where we find ourselves needing to make certain concessions or adjustments within
01:25our website's markup structure. The situation becomes particularly problematic if such necessary
01:30compromises inadvertently render a website exceptionally difficult or entirely impossible for an individual
01:36living with a disability to navigate and utilize effectively. Indeed, it is important for us to remember
01:42that in a significant number of jurisdictions, there are legal statutes making it unlawful to develop and
01:48maintain a website that is not accessible to individuals with disabilities. So yes, the proper
01:54application and understanding of HTML can genuinely transform into a matter directly concerning fundamental
02:01human rights and equal access. This is precisely where ARIA attributes truly demonstrate their remarkable
02:09significance and vital role in enriching the user experience. The additional layer of information provided by
02:15ARIA effectively enlightens screen readers, braille displays, magnifiers, and a variety of other
02:21assistive technology systems with the crucial details they require, thus assisting in making a website fully
02:27usable and accessible to everyone regardless of their abilities. ARIA was initially developed at
02:33approximately the same period when a growing portion of the internet started to gradually substitute
02:37traditional native software applications. It is particularly advantageous for accomplishing the
02:42comprehensive functionality of an intricate user interface incorporated within a web application,
02:47ensuring that all individuals, without any exception, can efficiently and equally utilize it.
02:53Allow us to take a momentous look at an exceptional design illustration,
02:57meticulously crafted and designed to require a significant dose of supportive assistance,
03:02expertly leveraging the fascinating concept of ARIA roles to bring forth its full potential.
03:08We have recently utilized CSS Grid as a powerful tool to significantly stretch the conventional
03:14frontiers of graphic artistry and visual composition on various internet-based applications.
03:19For instance, we have adopted this specific heading 1, named the Transcendent, and have ingeniously
03:26employed CSS Layout methods to arrange every single letter thereof into separate cells, each occupying a
03:32unique position upon distinct segments of the overall grid configuration.
03:37We have also utilized the flexible class to enable the header to grow and shrink with the respective text
03:43content, ensuring a highly dynamic flow within the web page. You could activate the developer tools and
03:50navigate to the specific tab labeled as accessibility, which is among the most prominently visible tabs.
03:56Could you kindly proceed to enable this particular feature for our current examination? Through this interface,
04:02we gain direct and valuable insights into the underlying complexities of accessibility.
04:07Tree structure. We previously discussed the fundamental concept of the DOM tree in an earlier segment of
04:14our discussion. The accessibility tree represents a distinct parallel hierarchical tree which the web browser
04:21meticulously constructs based upon the website's inherent informational content. The browser initially processes the
04:28discovered original HTML markup provided for the web page in a way that reflects the intended layout and structure of the web page.
04:37It then utilizes this processed markup as the primary basis to assemble the complete DOM tree structure.
04:43And subsequently, the browser then deliberately employs the newly constructed DOM tree to accurately
04:49generate the corresponding accessibility tree. This resulting accessibility tree is precisely the crucial data resource that
04:57various assistive devices heavily leverage to deliver a comprehensive and understandable user experience of the website.
05:04Most significantly, when utilizing a screen reader device, the content is incredibly easy to read and understandable for
05:12individuals with disabilities, ensuring that all individuals have equal opportunities to engage and participate in the content.
05:19The content. Upon expanding this diagnostic section, we clearly observe its current comprehension.
05:26It perceives this particular content merely as a collection of numerous distinct and separate textual containers.
05:33Each of these containers is understood to hold a singular textual leaf node, which, in practice,
05:40might be articulated by assistive technologies as a disjointed sequence like the transcendent, essentially attempting to spell out
05:47the transcendent letter by letter. This, as we can all agree, results in a profoundly poor and
05:54frustrating user interaction for anyone relying on such aids. This specific disjointed outcome is certainly not
06:01our desired objective or the intended user experience we aim to provide for our audience. We shall now proceed
06:07to rectify this identified issue effectively through the strategic implementation of appropriate
06:12aria attributes, thereby enhancing overall accessibility. Initially, as a primary corrective step, we will
06:20carefully incorporate the specific, coherent phrasing, the transcendent, which is intended for clear
06:27vocalization by the screen reader. This will be achieved by thoughtfully appending a descriptive aria
06:32label, attribute, with the value, the transcendent, directly onto the relevant HTML, rather than directly
06:40attaching the text to the relevant HTML element, which would imply the inclusion of the entire headline
06:46within the specified element. We suggest that you create a textual group that represents the entire
06:51headline and place it within the appropriate HTML element that services the textual group. This approach
06:58will ensure the proper display of the headline while maintaining its structure
07:02and functionality. The aria label attribute will be explicitly set to the transcendent. Subsequently,
07:10we will effectively integrate the intricate perfusion of individual span elements and their separated
07:15letter forms, distributing them evenly throughout the word space without overlapping or cluttering,
07:21thereby ensuring the accessibility tree intentionally disregards them for a cleaner interpretation.
07:27Employing aria hidden equals true on an element systematically removes that specific element. Moreover,
07:34along with all of its descendant child elements, which are entirely derived from the accessibility
07:39tree's perspective, it importantly remains present within the DOM tree. However, from the operational
07:46perspective of assistive devices, it is effectively non-existent, as if it were completely gone. The precise
07:53behavior is the reason why we are consciously deciding not to apply this particular attribute directly
07:58onto the H1 element itself. It's essential to recognize that it's not just about the element itself,
08:04but also about the context and the purpose for which it's being used. We fundamentally desire the H1
08:10element to be properly recognized and interpreted by the accessibility tree, with its correct semantic meaning.
08:17We simply do not wish for all these numerous individual spans, each containing a single letter,
08:23to appear and be announced within that structure. Therefore, we have carefully encapsulated the problematic
08:30spans within a containing division element, so that we can appropriately place the aria hidden equals true
08:36attributes specifically onto that division. Allow us to now take a moment to observe the direct result of
08:42implementing this thoughtfully considered structural and aria adjustments to our system. We proceed to
08:49refresh the web page and, quite satisfyingly, observe that all those individual letters previously housed
08:55in separate containers have now vanished from the assistive technology's perception. In their place,
09:01we are presented with an exceedingly clear, unambiguous and coherent heading element, which effectively
09:07announces the transcendent, precisely as intended. Aria stands as a remarkably potent and valuable
09:14augmentation to the existing web technology stack, and it truly warrants a more comprehensive,
09:20dedicated exploration entirely on its own merits and complexities. We genuinely encourage you to delve
09:26deeper into the functionalities of this platform, particularly if your development team is currently
09:31encountering difficulties in consistently applying proper semantic HTML elements, or is actively engaged
09:38in constructing a highly intricate and feature-rich application user interface. That truly meets the
09:44complex requirements of your advanced application development project. Aria roles and attribute technologies
09:50provide you with the absolutely essential tools that you absolutely need in order to ensure that your
09:55website or application is efficiently rendered, fully accessible, and usable for every single person who
10:01visits or uses it. These technologies play a critical role in making your digital environment more
10:06inclusive and user-friendly, catering to individuals with varying abilities and needs. You can find all the
10:14necessary files and exercises to practice with this video in the attached files.
Comments