{"id":386,"date":"2025-01-11T12:06:05","date_gmt":"2025-01-11T12:06:05","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=386"},"modified":"2025-01-11T14:43:32","modified_gmt":"2025-01-11T14:43:32","slug":"html-developers-please-consider-in-the-year-of-2021","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2025\/01\/11\/html-developers-please-consider-in-the-year-of-2021\/","title":{"rendered":"HTML Developers: Please Consider &#8211; in the year of 2025"},"content":{"rendered":"<p data-wp-editing=\"1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-387\" src=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/05\/Capture.jpg\" alt=\"Adrian communicates via the medium of the TwitterPhone to the under-accessibilized masses.\" width=\"595\" height=\"441\" srcset=\"https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/05\/Capture.jpg 595w, https:\/\/html5accessibility.com\/stuff\/wp-content\/uploads\/2021\/05\/Capture-300x222.jpg 300w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/p>\n<blockquote class=\"bluesky-embed\" data-bluesky-uri=\"at:\/\/did:plc:nlsfcgybvcmtu2trv47dzy76\/app.bsky.feed.post\/3lfel32gg4c2u\" data-bluesky-cid=\"bafyreievyjmo4rdho2gn564qmnriesh3ocburzqwsp6crqeawdcr4qstri\">\n<p lang=\"en\">I wrote the rules of ARIA, their intention was not to discourage, but to encourage developers to understand the benefits of the built-in semantics, accessibility and behaviours already available in native HTML<\/p>\n<p>www.tpgi.com\/html5-access&#8230;<\/p>\n<p><a href=\"https:\/\/bsky.app\/profile\/did:plc:nlsfcgybvcmtu2trv47dzy76\/post\/3lfel32gg4c2u?ref_src=embed\">[image or embed]<\/a><\/p>\n<p>\u2014 Steve Faulkner (<a href=\"https:\/\/bsky.app\/profile\/did:plc:nlsfcgybvcmtu2trv47dzy76?ref_src=embed\">@stevefaulkner.bsky.social<\/a>) <a href=\"https:\/\/bsky.app\/profile\/did:plc:nlsfcgybvcmtu2trv47dzy76\/post\/3lfel32gg4c2u?ref_src=embed\">January 10, 2025 at 6:32 AM<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/embed.bsky.app\/static\/embed.js\" charset=\"utf-8\"><\/script><br \/>\n<a href=\"https:\/\/w3c.github.io\/aria\/\">ARIA<\/a> is an amazing technology, it allows developers to add meaning to meaningless <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/semantics.html#semantics\">HTML<\/a> or override meaning on HTML that is being repurposed and <a href=\"https:\/\/www.w3.org\/TR\/html-aria\/\">sometimes misused<\/a>, so that users who rely upon the meaning of HTML, as implemented in browsers, can understand and interact with HTML User Interfaces successfully.<\/p>\n<p><a href=\"https:\/\/w3c.github.io\/aria\/\">ARIA<\/a> allows developers to re-invent and extend native <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/semantics.html#semantics\">HTML<\/a> features in meaningful ways. But like all <em>bolt-on<\/em> technologies its features are <strong>brittle<\/strong> compared to its <em>built-in<\/em> counterparts.<\/p>\n<p class=\"note\">By using native <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/semantics.html#semantics\">HTML features<\/a>, wherever practical, over custom HTML with bolt-on semantics and interaction behaviours, you will save yourselves and users a lot of grief and ensure that your User Interfaces work robustly across the largest number of devices, operating systems, input devices, browsers and assistive technologies.<\/p>\n<h2>Whenever you are considering:<\/h2>\n<ul>\n<li>Using <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">button<\/span><\/code> consider using a <a href=\"http:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/button.html\"><code><span class=\"tag\">&lt;button&gt;<\/span><\/code><\/a> element, or the various other native HTML button types, instead.<\/li>\n<li>Using <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">link<\/span><span class=\"pun\">,<\/span><\/code> consider using an <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/a-href.html\"><code><span class=\"tag\">&lt;a <\/span><span class=\"atn\">href<\/span><span class=\"tag\">&gt;<\/span><\/code><\/a> element instead.<\/li>\n<li>Using <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">heading<\/span><\/code> and <code><span class=\"pln\">aria<\/span><span class=\"pun\">-<\/span><span class=\"pln\">level<\/span><span class=\"pun\">=<\/span><span class=\"str\">\"1-6\"<\/span><span class=\"pun\">,<\/span><\/code> consider using <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/h1-h6.html\"><code><span class=\"tag\">&lt;h1&gt;<\/span><\/code> to <code><span class=\"tag\">&lt;h6&gt;<\/span><\/code><\/a> elements instead.<\/li>\n<li>Using <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">list<\/span><\/code> and <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">listitem<\/span><span class=\"pun\">,<\/span><\/code> consider using <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/ol-li.html\"><code><span class=\"tag\">&lt;ol&gt;<\/span><\/code><\/a> or <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/ul-li.html\"><code><span class=\"tag\">&lt;ul&gt;<\/span><\/code><\/a> and <a href=\"http:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/ul-li.html\"><code><span class=\"tag\">&lt;li&gt;<\/span><\/code><\/a> elements instead.<\/li>\n<li>Using a <a href=\"https:\/\/www.w3.org\/TR\/wai-aria-practices-1.2\/#disclosure\">disclosure widget custom control<\/a>, consider using the <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/details-summary.html\"><code>&lt;details&gt;<\/code><\/a> and <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/details-summary.html\"><code>&lt;summary&gt;<\/code><\/a> elements instead.<\/li>\n<li>Using <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">listbox<\/span><\/code> and <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">option<\/span><\/code>, consider using <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/select-option.html\"><code><span class=\"tag\">&lt;select&gt;<\/span><\/code> and <code><span class=\"tag\">&lt;option&gt;<\/span><\/code><\/a> elements instead.<\/li>\n<li>Using <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">checkbox<\/span><\/code> or <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">radio<\/span><\/code>, consider using <a href=\"http:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/input-checkbox.html\"><code><span class=\"tag\">&lt;input <\/span><span class=\"atn\">type<\/span><span class=\"tag\">=<\/span><span class=\"atv\">\"checkbox\"<\/span><span class=\"tag\">&gt;<\/span><\/code><\/a> or <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/input-radio.html\"><code><span class=\"tag\">&lt;input <\/span><span class=\"atn\">type<\/span><span class=\"tag\">=<\/span><span class=\"atv\">\"radio\"<\/span><span class=\"tag\">&gt;<\/span><\/code><\/a> elements instead.<\/li>\n<li>Using <code><span class=\"pln\">role<\/span><span class=\"pun\">=<\/span><span class=\"pln\">textbox<\/span><\/code>, consider using an <a href=\"http:\/\/thepaciellogroup.github.io\/AT-browser-tests\/test-files\/input-text.html\"><code><span class=\"tag\">&lt;input <\/span><span class=\"atn\">type<\/span><span class=\"tag\">=<\/span><span class=\"atv\">\"text\"<\/span><span class=\"tag\">&gt;<\/span><\/code><\/a> or <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/input-search.html\"><code><span class=\"pln\">search<\/span><\/code><\/a> or <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/input-email.html\"><code><span class=\"pln\">email<\/span><\/code><\/a> or <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/input-url.html\"><code><span class=\"pln\">url<\/span><\/code><\/a> or <a href=\"https:\/\/stevefaulkner.github.io\/AT-browser-tests\/test-files\/input-tel.html\"><code><span class=\"pln\">tel<\/span><\/code><\/a> instead.<\/li>\n<li>and so on\u2026<\/li>\n<\/ul>\n<h3>Further listening<\/h3>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/zvIP16J7QgM\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wrote the rules of ARIA, their intention was not to discourage, but to encourage developers to understand the benefits of the built-in semantics, accessibility and behaviours already available in native HTML www.tpgi.com\/html5-access&#8230; [image or embed] \u2014 Steve Faulkner (@stevefaulkner.bsky.social) January 10, 2025 at 6:32 AM ARIA is an amazing technology, it allows developers to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-386","post","type-post","status-publish","format-standard","hentry","category-htmlaccessibility"],"_links":{"self":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/comments?post=386"}],"version-history":[{"count":9,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/386\/revisions"}],"predecessor-version":[{"id":1496,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/posts\/386\/revisions\/1496"}],"wp:attachment":[{"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/media?parent=386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/categories?post=386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5accessibility.com\/stuff\/wp-json\/wp\/v2\/tags?post=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}