Skip to main content

The details and summary elements, again

I’ve already written about the and elements, but there is more to tell, and there have been some changes since I last wrote at length about them in 2018. and HTML’s and elements can be used to create native disclosure widgets – an expand/collapse widget where more information or interactive controls related to a topic (identified via the subtree content of the , or text preceding the disclosure widget) can be found. These native disclosure widgets function without JavaScript, unless you need to support legacy browsers. Yes, IE11 is no longer supported, but that doesn’t mean it’s been erased from existence. Do what’s necessary for your users. HTML classifies both elements as “interactive elements”. The element serves as the containing element for the widget, though it is not expected to be directly interacted with by users. Nor is generally expected to be exposed to assistive technologies. The open attribute of the element is used to modify the expanded or collapsed state of the widget. When present it represents the widget being in the expanded state, and when absent the collapsed state. While the attribute is used on the element, the state is programmatically communicated by its required element. The element, the only child content of the that will be persistently visible regardless of the widget’s state, acts as the disclosure widget trigger. It serves as its “legend” or “caption” as a means to represent the further contents of the element. Interacting with the element will toggle the open attribute of its parent . Generally, the element will expose an “expanded” or “collapsed” state, correlating to the open attribute existing or not on the parent , and thus programmatically conveying whether the associated content is shown or hidden. The element is ‘supposed to be’ exposed to assistive technologies as having a “button” role. However, its role may also be announced as “summary”, or even as a “disclosure triangle” because that’s a choice someone made on purpose… and even sometimes (unfortunately) no role at all. How it is exposed is contingent on the platform/browser and screen reader pairing. More on this later. The following is an example of a and . Learn how the element is exposed to AT: Depending on the screen reader and browser pairing you may be using, the element would have been exposed in one of the following ways: “Disclosure Triangle” with Narrator, VoiceOver and TalkBack when paired with Edge/Chrome. “Button” with NVDA when paired with Firefox, Edge or Chrome. “Summary” with VoiceOver when paired with Firefox or Safari. Bugged behavior or no role announced with TalkBack with Firefox or iOS VO with Safari, respectively. These results and more can be found with this CodePen. The simplified markup of the previous disclosure widget is as follows: … … … You don’t need to have a as a sibling element to the . I just like to add it for styling purposes. s are fine if used appropriately, after all. A summary, whether you want it or not Browsers will automatically add a element as the first child element of a if it was not explicitly added. The subtree for this overlooked would contain the localized fallback text of “details” (which would be the element’s accessible name). The following disclosure widget demonstrates this error correction: Oh hi there.  » Read More

Like to keep reading?

This article first appeared on scottohara.me. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.