插件截图
插件概述
With HTML5 content sectioning highlighted in green you can easily identify structure and accessibility problems in any web page.
插件详情
This toolbar button enables content creators and web developers to see the document structure of any web page.
Without it you can't see where this could be going wrong.
Accessibility is now a statutory duty for public sector websites in the European Union. For a website to be truly accessible the document structure has to be right and that means using the right elements.
What are the right elements?
The header needs to be in a
element, the main content in the element and the footer in a element.
Then the site navigation needs to be in a element. As for the main content, that needs to be using the , , and elements.
With one click of the Document Structure Highlighter button these content sectioning elements are highlighted in green boxes. The headings are also prefixed with to depending on what heading thy are.
Headings need to be inside rather than before the content sectioning elements. This is so that those using assistive technologies have a useful document outline - a table of contents for the page. With the highlighter on it is easy to identify if any headings are incorrectly located in the document and likely to negatively affect the accessibility of the page.
Also highlighted are the and
elements that add to the bloat found in most web pages. These show with red boxes around them.
Invariably there is no need to use and
elements. The HTML5 specification describes these elements as last resort, to be rarely used rather than wrapped around everything.
This tool makes it easy to identify where there is excessive use going on. Sometimes these
elements can be replaced with more appropriate content sectioning elements. For instance a code sample could be put in a
element instead of a . Or a series of links in a footer could be placed in a
element. Or a list of products could be placed in elements instead of groupings.
In previous times before CSS Grid it was popular to use
elements just to centre or align content to suit responsive layouts. Nowadays there is no need for this, the
elements can be removed or upgraded for more appropriate elements, then the content can be styled much more easily with CSS Grid.
By taking this approach the non-semantic markup can be removed from the document to result in much more maintainable code that downloads quicker and also delivers a first class experience for those using assistive technologies.
CSS Grid has not been widely adopted yet, however it is supported in all of the browsers. It enables the
element to be made redundant and for web pages to be built from just the right elements with no presentational markup getting in the way.
Some web pages may look pretty and some web pages may have funky animation. However, content is king and the best content is structured. The correct elements are how to structure a page, with this benefit of accessibility. With this Document Structure Highlighter you can look past the shiny and see what web pages are written properly. Be prepared to be shocked at the poor HTML vocabulary used in many a top rated website.
If you are serious about wanting to write quality, accessible HTML this extension works nicely in conjunction with the HTML5 document outliner extension:
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo
With the outliner and the highlighter you can see where common mistakes are made, e.g. a heading that comes before rather than inside an
, or a .
In web development it is easy to get carried away with the latest technologies and build tools. However, sometimes it is worth taking a step back, to see if the code is actually any good, as in using the full HTML vocabulary and accessible.
It is also a lot easier and a lot quicker to build web pages without the soup that is just not needed when the right elements can be used and the right elements can be styled with CSS Grid.
其他信息
官方唯一标识:eohgjgom****************ihpaabln
官方最后更新日期:2019年4月26日
分类:辅助工具
大小:16.02KiB
版本:1.04
语言:English (UK)
提供方:https://www.antipattern.co.uk
星级:none
插件下载
温馨提示
本站中的部份内容来源网络和网友发布,纯属个人收集并供大家交流学习参考之用,版权归版权原作者所有 。
如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。
如果您觉得网多鱼对您有帮助,欢迎收藏我们 Ctrl+D
。