A lot of comments about how HTML5 allows you to have multiple h1 elements, but it's not true. Yes, it was part of the HTML5 spec, but no browser or screen reader ever implemented that, and because of that, they revised the spec to advise against it. You can read more here www.accessibility-developer-guide.com/examples/headings/html-5-outline/
There are few akward cuts during the video... sorry about that, but I cut out a few parts where I rambled and/or went off-topic, so it was for the best 😊
Rambling is a trait of many greats. Don't worry Been a long time fan. You taught me how to use floats😅 I would really appreciate an a11y video. Menu button/Navbar toggle Navigation (When visible or hidden) Any one of those would get my vote. Thanks for all the great work Kevin. You have helped many developers through rough times 🤣💯
I oversee our front-end and am constantly preaching the value of accessibility to the team. I honestly didn't think it was sinking in with them until this week... they started sharing some of your accessibility videos among themselves trying to get each other to see the value. Thank you!!! Your channel has made my career a little bit easier.
Tell them to use only 1 hand every time they're on their computer for the next week. They'll quickly see the value of being able to tab thru a website.
As someone who works with the gov.uk design system and cares deeply about accessibility, thank you for covering this! It's so often overlooked and things like tab order, making pages screenreader-friendly - even designing content appropriately - aren't prioritised.
Your gov.uk system is great but then early this year i couldn't access it because I was repeatedly asked for Northern Ireland driving licence number even though I am on the UK mainland.
@@studiosoftmorecambe6879 so that'll be a problem with a service rather than the design system itself. The design system is a set of guidelines on how to build consistent and accessible interfaces. I'd recommend using the "report a problem" link on the service you were using and hopefully someone will look into and fix the bug you encountered
Will you be doing some more accessibility design/aria? I would love to see some interviews with impaired people on how they use the internet, what makes a site good, great or awesome and what makes them completely useless for different types of disabilities. There should be a browser that simulates impairments so it's easy to understand because you can experience how they would experience your site!
Actually, Polypane does have multiple simulation tools for accessibility in it as well, including different vision problems. I did do an interview with Ashlee Boyer, where we talked about some best practice, getting started, and more. It was more of a general overview of different concerns we should take into account, and simple steps to accommodating them. I do plan to have more a11y content though. There isn't enough on YT, and it's such an important topic.
@@KevinPowell I've seen that video, I just want to understand their experience more since it's hard to get a explanation from someone online. Maybe they're tired of answering, they can't or think you're not serious or mock them idk. Like how does a blind-deaf person use RU-vid? It makes no sense to me, in my head it's impossible. Yet I've seen a comment from someone that said they where blind-deaf.
@@NathanHedglin I'm aware of that, that's why I want to see more of these videos like the interview with Ashlee Boyer 😉 I'm partially dyslectic but that doesn't mean I can't write code, it just requires the right syntax highliting and RU-vid videos instead of documentation where the words start moving around.
I'd love a video about the difference between section and article. I often have to look that up, and I'm always looking for good metaphors to help me remember the difference.
THANK YOU SOOOO MUCH FOR THIS! Admittedly I think of 'H' for styling headers (h1 to h3s, anything else be a paragraph style) but never thought about it as a table of content hierarchy (mind.... BLOWN!). I found and subscribed to your channel a few days ago and have learned so much about css (looking forward to seeing more css battles!). Look forward to more on the HTML side o' wise one!
Old Opera 12 had this ability to show the H-hiearchy built in. It had many other great stuff, IMO way ahead of its time, but then the developers decided to kill it and adopt webkit, and Opera lost its individuality. Except for the VPN, that is.
How does the rule of thumb "One H1 per page" work if your page has a tab control? So lets say on each tabbed section you have an H1, does this break that rule? On another note, I would love more videos on accessibility.
yup, that's till more than one h1, unless you're updating the DOM to change what's actually in there with `hidden` attributes or something else, then I'm not so sure. But really, there should be one main title, and then each tab is a "section" under that title, no?
@@KevinPowell the "one H1 per page" is a bit of a relic of the past, though. Since HTML5 and the introduction of SECTION, it's fine to use a H1 per section. I find it more elegant and consistent than "one H1 per page", unless of course Mr. Google disagrees - even though I don't think so.
@@caludio the HTML5 document outline was never implemented by any of the browsers. Yes, it's part of the spec, but with no browsers having implemented it, and with them publicly saying they don't plan to, the one h1 per page still stands.
@@caludio It's really not excused by the intro of section. H1 is your document title (where the webpage is the document). Your document can't have 3 titles. The section headings should then be H2s. I also do some PDF compliance work, and semantic HTML is almost completely the same on a webpage or in a PDF. Bit of weirdness around list item tagging aside.
The biggest obstacle for having well-structured HTML for web pages for most companies, will be a poorly designed or implemented Content Management System. Some CMS's are bespoke with limited functionality, or can be cookie-cutter based code, which doesn't give you full control of the website styles. So even though as a web designer or developer you may try to have a function, style or reason for the content to be displayed a particular way, most of the time you will run into issues of copywriters using a basic interface that allows you to apply HTML based styles, including Headers, Strong / Emphasis Tags and limited control of the overall content styling (which is what I think is happening with the FIFA website). It's a very good lesson overall for front-end / full-stack developers to keep this in mind, but often times the reality is different from the practice.
A solution to this is for copywriters to use something like markdown and use a custom rendering engine so that # that would be an H1 transforms to the correct heading level for your site, and that subsequent ## and ### etc are transformed as well, if you really run out of headings, like if some copywriter uses the full range of heading to the h6 level but you transform their headings so that # are h3s for example, then just make ## h4, ### h6 and ####, ##### and ###### be styled paragraphs, as those ain't probably that relevant for the table of contents. This separation from content and HTML allows you to adapt the content to different HTMLs to fit different designs and still be consistent
Perhaps the issue is a misnomer in terminology. The core of the argument is semantic html proponents that are a furtherance of written documents, but I never understood the stupidity of having a single "H1" on the page when you can have multiples of other lesser steps. When every other document out there utilizes multiple "header" equivalents, HTML should have named it something else if the structure demands the use of just one. Perhaps just classing a "title" tag would sort all this because this is essentially what HTML demands it to be on a page. In short "h1" is not a true "header" it demands it to be a "title". Can't blame people for making positive equivalences with your markup when the markup structure itself is flawed.
A correct usage of headlines can also improve your search engine optimization on your page overall. Regardless of the usage of an table of contents. Very appreciated tip from the SEO front here.
@@NadirNovelties The SEO Community is very specific. I‘ll try to specify. What I agree with you and John Mueller is, that it does not per default increase your SEO, just because you use headlines in a „correct way“ or headlines in general. That was not intended with my first comment. But overall it is agreed in the community, that a correct usage correlates with an overall better experience as well as it can have boosts for the page, if the information is also provided and/or clustered on the page. This can be done with headlines to separate massive paragraphs. In general, one can test the ranking performance of a web page fairly easy. On a good ranking page, remove all the headlines or replace them with divs or spans. What one usually sees is a ranking drop. Same vice versa, when you try to force paragraphs or text for styling reasons to be headlines. In general, it is a good and wise tip to use headlines correctly, even for SEO purposes. But in particular for one specific case, it depends on many things, as John and SEOs always say. ;-)
@@PascalHorn Using headers, articles, and sections in the correct way will get you much farther than H tags. What search engines want is coherently structured information, and while having a proper hierarchical H tag structure is a good way to do that, it is not enough in and of itself. Further, it isn't essential to achieving that goal. Much like metatags became less important as the technology advanced, so too has the table of content structure. It's a good way to structure a web page if the content permits, but it isn't the "correct" way by any measure, and in some situations it's the wrong way to go.
@@NadirNovelties I totally agree with many parts of your argument. I just think that we are overcomplicating it for most people that watch this video and Kevins channel. We should acknowledge that most people here are not too familiar with SEO, they are maybe building their first website, or are web developers, but simply don't know too much about SEO. In that regard, I'd like to generalize that how Kevin has presented the concept of TOC as well as the usage of headlines, it is not only a common practice, but also a best practice to do so. Not every time, not for all content types of course. But _in general_ it is still a good way to do it. I appreciated it. =) Also, it should be said that SEO can vary from straight forward things to very complex stuff. If any other viewer is interested in SEO, I'd recommend to not use a random RU-vid comment like mine as basis for a deeper discussion. What I can recommend is the [On-Page SEO Beginners Guide] from Moz. Would this be an SEO channel, we might have a deeper discussion about it. But I think this is neither healthy for Kevins video nor for me, so I'm leaving it with this.
Love the "table of contents" metaphor! I'll be using that! Two things. Skipping heading levels is not a problem by itself, it doesn't really impact screen readers. It does make it more likely your branch of headings gets mislocated when a higher level heading is introduced in between. But sometimes you just have to choose a safe low level, so you won't be hijacking anything yourself in places you don't control. Of course you can use the header and footer element as much as you want, but only the top level ones will have any semantic effect.
It won't read incorrectly, but it makes me stabby. If you think of HTML as creating a document outline, you're creating holes and fragments by skipping heading levels. Within CSS, we can assign classes and differentiate through style without effing up the semantics.
@@n_mckean Nope it is not a violation. It used to be something that was advised against, but seeing that it does not actually pose a problem that has been let go as well.
@@fuzzypumpkin7743 absolutely, if you can avoid it, you should. But as I said, you don't always have control over where your stuff ends up, or it gets inserted into multiple places with different structures.
im a programming student and web design is only one semester in all of our education but idk why im really enjoying html and css... also really enjoying your vids
Great breakdown - these are definitely best practices _everyone_ should be using when composing HTML documents. I have to point out that what you said about H1 tags isn’t completely accurate. Multiple H1’s on a page are definitely acceptable _when they’re enclosed inside article tags._ So what you might have is the main content of a page (not necessarily within an ), and then “content snippets” for additional, related content, and that sort of thing.
@@KevinPowell True, but it's still in the spec, and Google is on record that's multiple H1's are OK if/when it makes sense, "as long as you don't abuse them"; neither does it affect SEO. Also, Section 508's documentation does not identify any negative impact; only that 1. there needs to be numerical hierarchy, and 2. don't use them for non-heading content. So I don't think it's as much of a question of whether it can be taken advantage of (particularly since it's neither a gain or loss), as much as whether your document structure makes sense to incorporate it. And I've certainly been times where it made more sense for my project.
RU-vid often deletes my comments, and I don't know why. It happens on other channels as well. What I wanted to say: Chrome actually has an accessibility tree view inspector built-in too!
So basically, you have to go to Settings, Experiments, Enable full accessibility tree view in the Elements panel. Now the comment doesn't include any quotes or arrows, which may lead to RU-vid not recognizing it as spam?
Some others have mentioned the same thing to me. Some comments get flagged by YT and put in their "held for review" section, but a lot just seem to vanish. I don't see anything from you in that held for review, so 🤷♂️ Thanks for pointing out the accessibility tree in Chrome though :)
Another pet peeve is the heading "AUSTRALIA & NEW ZEALAND 2023". If you want headings to take a capitalised style, it should be done with uppercase in CSS but the HTML written normally - "Australia & New Zealand 2023". Then that content pulled into any other system will read better AND if you later change your heading styles to not be in capitals, you won't have to edit the HTML to remove the capitals there, it will just change ;)
@@kilianvalkhof I'm not referring to ssistive technologies - if you've capitalised your HTML and it pulls into anywhere else(eg. RSS feed) it will remain capitalised. If capitalised with CSS, it will only take a capitalised style when the CSS styles it so.
When I review job application projects I always look at semantic HTML first. Too many "frontend developers" only use DIV elements. Buttons and tags for links? Nope, all DIV tags with an onclick. It's horrendous. Instant rejection.
@@MiserableDuck95 The library/framework don't really matter, I think, I think some devs are crazy creative in their bad code :) I wish I could educate them..
I'd love to see more on html. I'm very new to this programming stuff, and in the tutorials i've watched, there's always one or a few videos on html and then a ton of videos about CSS or other things. But I hadn't heard of this kind of thought-out, structured process of making headings and essentially setting up a website. So yeah, I would love some more!
Definitely would LOVE more accessibility content! Also, would another way to do the header / subtitle be to wrap both the title and subtitle in the h1 but use a tag on the subtitle?
Yeah, if you think the header plus subtitle makes more sense being read as one continuous phrase, then some kind of inline styling element could be used to differentiate them visually without separating them for screen readers.
Article vs Section has always confused me. If you have a a for-dummies approach I wanna hear it! Newspapers have articles and they're grouped into sections, or newspaper articles have sections?
Search engines are blind, deaf, cant use a mouse, has no cognitive abilities and probably a lot more disadvantages. Good sites for impared people are good for SEO(search engine optimization), and the other way around. It should be a nobrainer to design sites that are as accessible as possible if you are interesred in traffic to your sites.
A lot of CMS give you bad html and a often content managers (in my experience) don't know html so they use different level headings to style text. Another side of using heading is SEO managers asking to use almost no headings at all... exept for h1. And of course no hidden content that could help people that have bad vision. SEO managers in out company allow us to include almost nothing that could improve accessibility and I'm tired of trying to fight this.
Great video. everything you said is important for SEO as well. correct use of headers and content that follows semantically is indeed important for search engines to fully grasp what a page is about but also how each section answers a query.
please do make more accessibility content! itd be great to see you make one of those "building a website" from scratch and demonstrating the proper way to type out accessibility content.
Can you blame anyone for saying "that looks nice" as they pick a below a , compared to "I need to consider the structure of my page and use something other than this nice , but rather, use something else, maybe it should be a or maybe not, and how do I get that thing to look like I want to it look?" CSS, IMHO, has to be one of the most poorly marketed technologies in the modern age. (My Teflon-coated suit of armour now deployed.)
You are supposed to group a title and subtitle in an hgroup element. According to W3C you can group h1 and h2. WHATWG says group exactly one h? and any number of p’s.
How does this work with SEO? The copy I'm given for client's sites is heavily skewed toward spamming the H1 with SEO keywords. If I was to reformat this correctly where would this SEO spam go?
I know this is about accessibility, not SEO (although i find the question relevant since the video as a whole is about common HTML mistakes) and i may even be completely wrong about this, so please correct me if i am... But wouldn't the 2 H3s at 4:10 be a bad choice SEO wise, since the Headings usually have a higher SEO value and they're titles for the page they're referring to, not this one, which they are just being promoted on?
I haven't seen alot of websites that actually use html5 as it should. As you stated, headings are most likely to be misused. Sections, dd-listings, button vs hrefs, focus & hover, tabIndex (or a11y in general), basic SEO, .... You name it. What do you get as response in some big companies, that's not the priority. It shouldn't be a priority, it should be common sense, like brushing teeth. Cause fixing that later down the line, costs more money. As stupid as it sounds, such laziness, costs thousands extras (fixes, PR, useless meetings, ...).
Thank you Kevin, I would love some more accessibility videos 😁. Do chrome devtools not support this feature? I've tried several extensions but none of them works, and I can't afford to use Polypane 😛.
Most useful thing in this video is learning of Polypane and its Outline viewer. At my previous company we had a custom XSLT we could bring up side-by-side to show that.
Thank you Kevin, I've been honestly thinking about this a lot, and there is a lot I didn't fully understand. This really helps a lot, and I would love to learn about more about articles and sections, I'm never quite sure when to use what and where, finding good examples is sometimes hard.
Given the corruption scandal not many years ago, one might wonder if the fundamental problem with the FIFA website is FIFA itself: the site manifesting the disorder within.
Great video! So, we're not supposed to have multiple elements each with their own h1, because I've seen a few websites doing this, for example, the Netflix homepage?
Good day sir. I have been a long subscriber of your channel, even though I suck at CSS. I love all your videos. I just want to ask you a question, "Are you a CS degree holder by any chance". I know that getting into software doesn't require it though.
I bet you if you designed an "accessible website" properly, slapped on some blinders and tried using something like JAWS you wouldn't be able to access that website.
Do you use CSS for debugging malformed HTML? I saw some this on Twitter about a year ago, and it did things like check that all ul and ol tags have a child of li. There's probably a way to do a check for headings too
I'm constantly getting contractor created content in my office where heading tags are used for stylistic purposes, and it drives me batty. I guess it won't matter for long though, since my entire agency is in the process of converting all their HTML pages to PDFs (in the name of accessibility, if you can get your head around that). It's a dark, dark time.
I've recently been tasked with ADA compliance where I work. It's an old aspx site that uses tables for both content presentation and data presentation. Learning about html tables alone were a hurdle. I feel like the site should be reformatted because it's not all semantically correct, but that's not efficient for the company right now. It has to be level AA compliant, too. Has anyone else ever had to deal with something like this? And if so, how did you get through it? It's making me not want to work at this company anymore.
Probably what happened with that FIFA website is the headings were coded in the stylesheets where H2 was very big, so someone felt forced to use H6 just to use a smaller heading...
I really liked the "Info" button that the Polypane browser seemed to have to view the outline. Is there a similar feature like this Google Chrome or Mozilla Firefox has?
Where in this video does he talk about why the sections are called "Untitled x" emphasis on "Untitled"? That would save me a lot of time if anyone knows. Thank you.
Could you use a span within a heading to add some more subtitle context? I'm learning html and css currently and that's something I did for a title that I wanted on two different lines and styled differently.
I had already written some Markdown before and the headings being used as a table of contents surprised me more than it should I knew they weren't for styling but thought they denoted like importance in the document instead of hierarchy Nice to get it right now
You should look at the AT&T website, it will give you a headache. That site is a hot mess. I was talking with people who know nothing about web design tell me it was terrible to navigate.
is there any way of deciding between a main and a section tag , when you are making a landing page, or is it okay if section tags are used inside of main. Great video as always 👍
