Use the most semantic HTML element for the job Let’s finish with some easy guidelines to follow.
These default behaviours can make the difference between a person being able to use a form or leaving the site out of frustration.ĭid I convince you yet? I hope so. Semantic form elements can convey if a check box has been checked, or which label is associated with which input field. For instance, option menus and navigation can be very fiddly if you need to use a mouse to hover a menu open and move to select the desired item at the same time.Īgain, we can leave much of the interaction to the browser through semantic HTML. Forms, option menus, navigation, video, and audio are particularly hard for people relying on a keyboard to access. Keyboard-only navigation is also aided by semantic HTML. If all our content is marked up using divs and spans, we’re not giving screen readers a chance to index the valuable content. Screen readers provide alternative means of navigation, enabling people to jump between different types of content, such as links, forms, headings, lists, and paragraphs. As screen readers output audio (and sometimes braille), those visual cues aren’t usable in the same way. Sighted visitors can use visual cues on the page to navigate to their desired content in a non-linear fashion. Screen readers are a type of assistive technology that reads the content of the screen to the person using it. Semantic HTML gives context to screen readers. HTML’s impact on accessibilityĪssistive technology also uses semantic HTML to understand how best to convey each element to its user. Then we can spend our time doing something more fun than rewriting cross-browser JavaScript for each new device. When that happens, the devices’ browsers can adapt our sites according to those interactions.
More devices, with different expected interactions, will be released in the future. Letting the browser do most of the work is also more future-friendly. Using select passes the bulk of the responsibility over to the browser. We don’t need to tie ourselves in knots making a custom div into a keyboard navigable option menu. When we choose to use a div or span over a more semantic HTML element, we’re also doing hard work the browser could be doing for us. The whole menu is scaled up, meaning the gestures don’t need such fine motor control. The required swipe and tap gestures are consistent with the rest of the operating system, making the expected interaction easier to understand. The menu is shown more clearly than in the confined space on the page, which makes the options easier to read. The iOS picker is a much better experience than struggling to pick from a complicated interface inside the page. On a touchscreen, Safari overlays the same menu over the lower half of the screen as a “picker view.” Option menu in Safari on macOS. In Safari on the desktop, the browser renders as a popover-style menu. Semantic elements aid usabilityĪ good example of how browser defaults can benefit the usability of an element is in the option menu. They provide consistent and well-tested components for common interactions. These defaults are shortcuts to a more usable and accessible web. For example, button looks and behaves differently from a. Browsers render semantic elements with their own distinct styles and behaviours. If we make our page up out of divs and spans, we know we’ll have absolute control over styles and behaviour cross-browser, and we won’t need a CSS reset.Ībsolute control may seem like an advantage, but there’s a greater benefit to less generic, more semantic elements.
They come with no associated default browser styles or behaviour except that div displays as a block, and span displays inline. As developers, we like to use divs and spans as they’re generic elements. While I find tracking scripts completely inexcusable, I do understand why people write HTML like the above.
divs and spans, why do we use them so much? There’s a bit of text, a few links, and a few images. What does neglected HTML look like? Here’s an example of the markup I found on a news site just yesterday. I’m mostly there looking for harmful tracking scripts, but often notice the HTML on some of the world’s most popular sites is in a sad state of neglect. Working on Better, a tracker blocker, I spend an awful lot of my time with my nose in other people’s page sources.
0 kommentar(er)
