2 ms·

I am finding that it is female developers who are on the conference circuit explaining how we have been doing it wrong and how we can do it right. I did the vie

I am finding that it is female developers who are on the conference circuit explaining how we have been doing it wrong and how we can do it right. I did the view source and I won't be adding him to my list of 'HTML5 gurus' just yet, even though times change and his work may be better now. Same as my previous comment, no 'main' or 'nav' or all that stuff. There are these microformat things which are okay if you want to get your product info or book into Google in an sku/price/ISBN type of schema. But we conflate that with weird 'aria' accessibility things. Properly structured HTML just does that out the box. So why use 'main'? Well, if you do reader mode in Firefox or Safari then it cuts the cruft out and just shows you the stuff you want to read. Or that you want others to read. It is not rocket science and you don't need any Wordpress style 'skip to main content' link hidden at the top or 'role=main', just the 'main' element will do. But who knows that? Everyone in the game should. I checked the Apple site for HTML recently and they sell billions from that site. But none of the links in the footer are in a 'nav' element. I know people don't care and that I am the only person in the world that has noticed their 'poor HTML' but you would think they would be able to get that bit of structure right. Their site is pretty awesome, they have 'main' done but didn't do very well with the navigation links. I am not being a pedant for thinking that is odd but for people who only care about the latest frameworks and 'technologies' content is just data not something that needs to be structured. I don't care about 'technologies', to me content has to be structured right if it is to be taken seriously. What I also find odd is that structure and HTML5 elements are easy. There are vastly less elements than there are random Bootstrap classes but nobody cares to learn the elements.

detaro 8y ago
Apple has the footer links in a footer tag with role=contentinfo, which is somewhat appropriate (The role=contentinfo is somewhat unnecessary, since a top-level footer already implies it, but it doesn't hurt). Not all navigation has to be in a nav tag. To quote the HTML spec: > Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary. You can argue that what Apple has here is comprehensive enough to warrant being called out as a navigation, especially since the structure there doesn't appear to be immediately accessible from other page sections, but it's not clear cut, and it's likely a predictable pattern for a user of assistive technologies that company homepages have such footers.
- Theodores 8y ago
  I am sure assistive technologies and their users are able to 'see' the footer for what it is. But Apple do have what I 'see' as a massive amount of navigation going on down there that goes beyond a short series of links. They have the short series of links in the absolute footer too. On closer inspection of the iPhone page they are using 'nav' elements for this. However the markup is still curious to me. There are h3 tags in label elements. The document outline is sound but it looks cranky to me. According to MDN: Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead. They also have the breadcrumbs for the page in the footer. I approve of breadcrumbs but there is a place for them and that is in the 'main' content. Whether you show them on visually pretty pages or not is another matter, but a global footer isn't the specific content the breadcrumbs refer to, that is in 'main'. Now Apple clearly care a lot about their page but it also has to look great on those 32 bit ipads that don't have the latest Safari on them. So they cannot use grid layout. If they were able to use grid layout then they would be able to have a fraction of the markup plus they could have the breadcrumbs in main at the top of the document with them appearing at the top of the footer. The visual layout could be solved with the document structure being less of a hack. They also load images as background images when I feel they are content images, not mere decoration. By doing so they are not able to use things like srcsets and make use of data saving on phones that request that mode due to low bandwidth. I do find these design decisions most interesting. I also appreciate that they do have to have the site work for old 32 bit ipads - particularly if those users are to buy a 64 bit ipad! Their site is undoubtedly working well and they have gone the extra mile for accessibility. However, the more you look into it, even if first assumptions are wrong (me not seeing the 'nav') the more curious it gets. I didn't spot the 'nav' elements for the sea of divs with untold class tags, labels with headings in them and 'aria' markup. If it was true design elegance then it would be simpler markup and the assistive technologies could work it all out due to clear document structure. Plus I would spot the 'nav' elements first time.
dredmorbius 8y ago
I agree with you regards 'main'. Absent that, Pilgrim's source is vastly cleaner and more sane than endless nines of what I see daily.

detaro 8y ago

Apple has the footer links in a footer tag with role=contentinfo, which is somewhat appropriate (The role=contentinfo is somewhat unnecessary, since a top-level footer already implies it, but it doesn't hurt). Not all navigation has to be in a nav tag. To quote the HTML spec: > Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary. You can argue that what Apple has here is comprehensive enough to warrant being called out as a navigation, especially since the structure there doesn't appear to be immediately accessible from other page sections, but it's not clear cut, and it's likely a predictable pattern for a user of assistive technologies that company homepages have such footers.

Theodores 8y ago
I am sure assistive technologies and their users are able to 'see' the footer for what it is. But Apple do have what I 'see' as a massive amount of navigation going on down there that goes beyond a short series of links. They have the short series of links in the absolute footer too. On closer inspection of the iPhone page they are using 'nav' elements for this. However the markup is still curious to me. There are h3 tags in label elements. The document outline is sound but it looks cranky to me. According to MDN: Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead. They also have the breadcrumbs for the page in the footer. I approve of breadcrumbs but there is a place for them and that is in the 'main' content. Whether you show them on visually pretty pages or not is another matter, but a global footer isn't the specific content the breadcrumbs refer to, that is in 'main'. Now Apple clearly care a lot about their page but it also has to look great on those 32 bit ipads that don't have the latest Safari on them. So they cannot use grid layout. If they were able to use grid layout then they would be able to have a fraction of the markup plus they could have the breadcrumbs in main at the top of the document with them appearing at the top of the footer. The visual layout could be solved with the document structure being less of a hack. They also load images as background images when I feel they are content images, not mere decoration. By doing so they are not able to use things like srcsets and make use of data saving on phones that request that mode due to low bandwidth. I do find these design decisions most interesting. I also appreciate that they do have to have the site work for old 32 bit ipads - particularly if those users are to buy a 64 bit ipad! Their site is undoubtedly working well and they have gone the extra mile for accessibility. However, the more you look into it, even if first assumptions are wrong (me not seeing the 'nav') the more curious it gets. I didn't spot the 'nav' elements for the sea of divs with untold class tags, labels with headings in them and 'aria' markup. If it was true design elegance then it would be simpler markup and the assistive technologies could work it all out due to clear document structure. Plus I would spot the 'nav' elements first time.

dredmorbius 8y ago

I agree with you regards 'main'. Absent that, Pilgrim's source is vastly cleaner and more sane than endless nines of what I see daily.