Posted on 10/16/2018 in Accessibility

There is a common theme that I’ve found from running accessibility audits on websites. Many of us use HTML based on our perceptions rather than on its intended purpose.

HTML is already accessible. Where it breaks from being accessible is when it is used outside of its intended purpose. Everyone benefits when we construct content based on HTML’s intentions.

3 common violations I run into are:

  • Headings: Page must contain one <h1> heading & heading levels should only increase by one
  • Images: Images must have alternate text
  • Links: Links must have discernible text


Perception: Headings are used based on their visual appearance.


Headings describe the relationship between sections and subsections (i.e. - table of contents). When used correctly, they provide a structured outline as well as a means of navigation for screen reader users.

As a general rule, there should only be a single <h1>. Its purpose is to state the meaning of the page. Subsequent subsections (<h2> - <h6>) should not skip any levels as content becomes more specific. Example:

  • <h1> Title of Pag
    • <h2> Headin
      • <h3> Subheading
      • <h3> Subheading
    • <h2> Headin
      • <h3> Subheading
      • <h3> Subheadin
        • <h4> Subheading
    • <h2> Headin
      • <h3> Subheading


Perception: Alternate text is not important or is not needed.


The <img> `alt` attribute is a required attribute. It provides an alternate description of the image (i.e. - alternate text) and is used by:

  • Assistive technology users (i.e. - Screen readers>)
  • Users who experience image loading errors of some sort
  • Search engines who rely on image alternate text as a factor in page ranking

Barring any network issues, images will load if their paths are correct. What determines their validity is the presence of its `alt` attribute:

  • Valid: <img src=”/path/to/image” alt=”image description”&gt
    • Alternate text present, alternate text value present
  • Valid: <img src=”/path/to/image” alt=””&gt
    • Alternate text present, alternate text value not present (NOTE: empty ‘alt’ attribute value is used in cases where an image is decorative, not informative. Screen readers skip over any image with an empty ‘alt’ attribute value)
  • Invalid: <img src=”/path/to/image”&gt
    • Missing alternate text attribute, making it invalid. The image will be skipped over by screen readers


Perception: Link text isn’t as important as the link itself.


Link text alone should describe the purpose of the link itself. Ambiguous link text such as “click here” and “learn more” should be avoided. While their visual presentation may be appealing, their underlying message may be lost. Examples:

  • Meaningless: “For more information about our monthly events, click here.
  • Meaningful: “Learn more about our monthly events.”

To understand why ambiguous links should be avoided, let’s look at how a screen reader user might interpret these links. Screen reader users may use an Element List to view all links on a page and/or navigate to a particular link. In doing so, if a page has non-discernible links, they may be presented with a listing of many “read more” links, such as:

elements list

Alternatively, when these links are more meaningful, this listing would be presented in the manner below:

element list discernible links

NOTE: Screen readers will announce the alternate text value of an image when it is linked.

Below, the link will be announced as “Download our latest newsletter”.

<a href="/path/to/page">

<img src="/path/to/img" alt="Download our latest newsletter" />



There are many other HTML elements that can be covered here. I’d be happy to discuss any of them with you as this can be overwhelming. The main hope is that we can start this shift from usage-based on perception to one ideally based on specifications (reality).

Not sure if your site meets proper accessibility standards?

Contact us today for an accessibility audit to find out

Related Blogs

Can your bank’s website compete with the giants?

Can your bank’s website compete with the giants?

There is an ocean of opportunity in digital banking. Customers these days want to do more and more of their banking activities online. In fact, the [...]

Trends in Website Design: What’s right for your site?

Trends in Website Design: What’s right for your site?

These days, web designers have a lot of new technology they can build into websites. There are endless widgets, buttons, pop-ups, and graphics to [...]

EU Web Accessibility Directive Deadline

EU Web Accessibility Directive Deadline

Even for businesses that have taken a proactive approach to online accessibility, the onset of the new directives translates to quite a bit of work. [...]