Web_Dev_Grad

Providing accessibility in our HTML allows our websites to be enjoyed by more users. This can come from making sure that our colour schemes do not clash so that they can be seen well by colour blind users or that our images have an alt description on them so that they can be read by screen readers for visually impaired users.

Alt attributes have been covered in the HTML media section and colour schemes fall under the purview of the CSS accessibility guidelines.

The remaining HTML attribute to consider is the ARIA label. ARIA labels attach a label to an element that has a purpose or behaviour. For instance labelling links with what they do.

<a href="InstagramURL" title="Instagram" aria-label="Go to our Instagram page" target="_blank">Instagram</a>

The aria-labelledby attribute is used in HTML to explicitly associate a label or multiple labels with an element, helping assistive technologies like screen readers convey the right information to users. The value of aria-labelledby should be a space-separated list of element IDs. These elements listed will contain the text content to be used as the label.

Screen readers will read the combined text content of the referenced elements, in order, as the accessible name for the element with aria-labelledby. In the example below, assistive technology will read: “Main Title Subtitle” as the accessible name for the div as these are the contents of the elements with ids "heading-one" and "heading-two".

<div aria-labelledby="heading-one heading-two">
    <h1 id="heading-one">Main Title</h1>
    <h2 id="heading-two">Subtitle</h2>
    <p>This section contains detailed information.</p>
</div>

You will want to validate the HTML code that you have written to ensure that it complies with the standards set by W3C. IT is important to make sure that your syntax is correct, so that things like cross-browser compatibility and SEO are up to snuff so that your website can be found and enjoyed by more users. I use the W3C HTML validator. Whilst your site is still in development you can pick “text input” from the Check by dropdown and copy and paste your code into the textarea before clicking check.

For websites created using Flask or Django you may have some templating language in your HTML files that will result in errors. To get around this and to ensure that all of your HTML is up to scratch, run your website locally then right click in the browser and select view page source or Ctrl + U in Google Chrome. This will open a new tab with all of the HTML and then you can simply copy and paste this into the validator.