Now also as Chrome Extension: How to make it easier to find bugs on your website

This entry was first published in English and on bitsofco.de. Here the link to the original article.

If you write incorrect HTML, nothing happens at first – the browser just ignores it. But that’s exactly why it happens quickly that you write an invalid, or not barrier-free markup, and may even not even notice.

In principle, there are some ways to have your own HTML code validated, for example, by using the W3C Markup Validation Service. Another option that is even easier to integrate into your development process is to use CSS selectors to highlight any problem areas. Here are a few examples of how we can use such CSS selectors to visualize invalid markup with simple means. The link to the Chrome Extension is at the end of the article.

Inline Styles

					* [style] {border: 5px solid red; / * Frames all inline style elements with a red border * /}
				

This selector targets every element on a page that keeps inline styles. Inline styles should generally be avoided, as they are difficult to overwrite due to their high specificity, and make the maintainability of a website much more difficult. Although inline styles may be helpful in some cases, highlighting helps us to make a case-by-case assessment.

Now that we are targeting these issues through selector, we can apply any style to make them more prominent on the page, such as a red border.

Bad or missing link targets

					a: not ([href]), a [href = "#"], a [href = ""], a [href * = "javascript: void (0)"] {...}
				

These selectors emphasize all anchor elements that are neitherhrefAttribute still otherwise definedhrefAttribute.

Non-accessible images

					img: not ([old]) {...}
				

One of the rules of thumb in terms of accessibility is that all images should have an alt attribute. A non-existent Alt attribute not only damages the visibility of the search engines, but especially those whose vision is limited or not available. MissingoldAttribute, most read-reading applications instead read the value ofsrc-Attributes, which is completely useless for the users.

It should be noted that the above selector does not have images with an empty oneoldAttribute, ie images withalt = "", This has the background that one with oneZero-OldAttribute the read-aloud application can skip a particular image, such as when the image is purely decorative in nature. However, it may still be useful to highlight them, which we can do with the following selector:

					img [alt = ""] {...}
				

Missing Document Language

					html: not ([lang]), html [lang = ""] {...}
				

An important attribute that should be present in all HTML elements is the language attribute. This attribute is a signal for read-out applications, in which language the page exists, that is, in which language the contents of a page should be read.

Wrong character set

					meta [charset]: not ([charset = "UTF-8"]) {...}
				

This selector targets any meta-character set tag that is not set to UTF-8.Instructs the browser to use the UTF-8 form of character encoding currently recommended for HTML documents. It is therefore required for valid HTML.

Ideally shouldalso the first element after the openingBe your day. We can check this with the following selector:

					meta [charset = "UTF-8"]: not (: first-child) {...}
				

Non-accessible zooming attributes

					meta [name = "viewport"] [content * = "user-scalable = no"], meta [name = "viewport"] [content * = "maximum-scale"], meta [name = "viewport"] [content * = "minimum-scale"] {...}
				

This selection can be used to highlight non-accessible zooming attributes. In general, it is recommended that you do not restrict the user’s ability to zoom out or zoom in on the viewport. Therefore, the following attributes should never be used:

					user-scalable = no maximum-scale minimum-scale
				

Unlabeled form elements

					input: not ([id]), select: not ([id]), textarea: not ([id]) {...} label: not ([for]) {...}
				

Although there are several ways to specify a form element, the simplest method is to assign an ID to a label element. The example above looks for form items that have no ID and label items that are not explicitly linked to a form item by specifying the attribute[For]is used.

Another type of label that is important to form items is the name attribute. While thatidAttribute is used to label the item in the context of the HTML document is using theSurnameAttribute to the element when it is sent with the form data.

					input: not ([name]), select: not ([name]), textarea: not ([name]) {...}
				

In addition to the form elements themselves, it is helpful to associate a name or ID with the form element itself.

					form: not ([name]): not ([id]) {...}
				

This selection highlights each form element that is missing both the name and ID attributes.

Empty, interactive elements

					button: empty, a: empty {...}
				

Interactive elements such as links or buttons are usually identified by their content. If there is no content, you can use the code above to highlight all links and buttons that do not contain HTML content.

Unused or obsolete attributes

					script [type = "text / javascript"], link [rel = "stylesheet"] [type = "text / css"] {...}
				

Finally, we can use CSS selectors to highlight attributes in our HTML that are obsolete or no longer needed.

For all that, I’ve created a Chrome extension that you can download. I have also written a post called “Making Alix”, which you can read on Englich.