5 best HTML practices for improving Web Page Accessibility
Introduction: According to the National Institutes for Health — about 15% of the population at any given point is disabled — either partially or permanently. Web sites and web pages need to be created such that such individuals can fully access and interact with them. This is the meaning of the term “Web Accessibility”. All individuals including individuals with disability should be able to understand and interact with web pages (and web sites)
In last few years, web has taken over as the primary channel of customer servicing and fulfilment for both businesses and government agencies.
Hence designing pages that are accessible by all individuals has become critical. In many cases there are legal requirements to do so –if a web page is not accessibly all, there could be a class action lawsuit. However, more than the concern for legal action, it is desire for better customer service (and hence better revenue) that drives web accessibility initiatives.
This article is geared towards individuals who write HTML web pages — this is content authors as well developers.
It suggests 5 things — which are easy to be implemented but are often overlooked. These can significantly improve accessibility of any web page.
These are
1. Use Semantic HTML element tags instead of using div and span tags.
2. Use heading H1-H6 tags correctly, more often than not these heading tags are used incorrectly
3. Provide description for images using alt tags. Screen readers can read such text descriptions and provide context for such images. Provide suitable messages to the links
4. Specify language — e.g. US-English, British English, French, etc. This helps screen readers when the web page is accessed in a different locale
5. For forms — use Accessible Rich Internet Applications (ARIA)attributes. These are understood by the modern web desktop browsers, IE, Chrome, Firefox and Safari and also by mobile browsers.
The first four of these items do not require any programming. The last item above requires a small amount of JavaScript. Details with examples of each of these 5 items are given below:
Use Semantic HTML
Since its inception, HTML has always had the following 2 elements
1. div and
2. span
which can be used to create content.
HTML 5 introduced additional elements such that the html element describes the content called semantic elements. These are elements where element name describes the content .
Examples of such semantic elements include
Aside content that is separate (hence aside) from main content
Article e.g. article, blog post, etc
Section logical content partition in a web page
Header header of the web page
Nav site navigation — links to other pages
Footer footer of the web page
Form editable area with input fields that user fills and submits
Table grid of rows and columns for showing related data — e.g. items in an order
Screen readers understand such content — so if it is a form, the screen reader will read that the element is a form
Such semantic tags should be used to create HTML contact and the usage of div and span tags should be reduced
Headings
HTML has 6 types of headings <h1> through <h6>. <h1> defines the most important heading, then further sub-headings are defined as <h2>, through <h6>
While a web page can have any heading element in any order, this makes accessibly difficult
Screen readers allow reading of heading and sub headings and enable the user to go to a specific sub heading, if these headings are defined correctly
Here are heading best practices
A hierarchy of information to be displayed on page should be created.
Each page should have only a single <h1> heading element
Immediate Sub headings should be use <h2> tag. If there are headings below sub headings, these should use <h3>
Do not skip heading levels, e.g. the sub headings after main heading should be called <h2>, not <h3>.
Browsers apply default style to headings, do not select headings based on such styles. E.g. if bold sub heading is required do not choose <h1> here, use <h2> and style it via CSS
Here is an example of a page, this page will not be properly read by the screen reader. The screen reader will not be able to identify the main heading, sub heading paragraph, button. Hence the will not be able to scroll between headings and the resulting experience will be sub optimal
<font size=”10">Main Heading</font>
<br>
Paragraph for extra information within main heading before sub headings<br>
<font size=”8">First Sub Heading</font>
<br>
First subheading content
<br><br>
<font size=”8">Second Sub Heading</font>
<br>
Second subheading content
<p>
<div>Click Me Button</div>
The above page is re-factored and re-written using Heading tags with best practices. Now the screen reader will be able to read the headings and convey these to the user. The user can the directly choose to go to a specific sub heading and have the reader read such content
<h1>Main Heading</h1>
<p>Paragraph for extra information within main heading before sub headings</p>
<h2>First Sub Heading</h2>
<p>First subheading content</p>
<h2>Second Sub Heading</h2>
<p>Second subheading content</p>
<button>Click Me</button>
Image — use alt attribute
It is very likely that a Web page will have one or more image tags. An image tag is of this kind
<img src=”pyramids.gif”>
Where pyramids.gif the actual image file of the pyramids. When a screen reader comes across this, it cannot understand this.
We need a way for the screen reader to convey to these use what this picture is. This if done by the alt attribute. So the above link could be rewritten as
<img src=”pyramids.gif” alt=”pyramids”>
Images should have alt attribute, alt stands for alternate text. this attribute should describe the image. Screen readers are able to read text of the alt attributes. Also, if the browser cannot display the image it will display the contents of the alt attribute
the alt attribute should typically not have “Image of”, “Photo of”, “Picture of” etc., e.g. if the image is of pyramids, alt text can simply be “rose” and not “image of pyramids”
Image –use meaningful text in image links
Image links should describe the purpose of the link and not the image. E.g. if the image link has a picture of pyramids of Egypt and links to a payment page to book a vacation to Egypt then image link should say “book Egypt vacation” or something similar and not describe the pyramids.
Language
Screen readers can detect the default language of the system by default, no additional coding is necessary for this. However there are times when the language of the page changes — especially for location specific pages. In such cases declaring the language enables screen readers to provide better information to the user. To declare the language HTML provides the lang attribute and it is used like so
<html lang=”en”>
If this page was in french then <html lang=”fr”>
The language code is 2 character iso 639–1 code
Forms
Forms are very common use case on Web. Forms are key part of user engagement on any web site. Forms offer a special challenge to accessibility.
The key difference between a read only web page and the form is the aspect of error handling. In a form, there can be errors upon user entry. In some cases these errors are received after the form data is posted — e.g. that user name already exists for a registration form.
Use Case 1 Reading form input fields
When implementing forms using traditional HTML form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control. When a screen reader user navigates a page, the screen reader will describe form controls. Without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one.
This is shown below
<label for=”firstName”>First Name:</label>
<input type=”text” id=”firstName” name=”firstName”/>
Here the screen reader will correctly read that the text box has value is for the First name field
Use Case 2 — reading form errors.
HTML offers ARIA (Accessible Rich Internet Applications). ARIA defines a way to make Web content and Web applications more accessible to people with disabilities. ARIA is understood out-of-box by browsers, no special plug in or 3rd party libraries are required.
To handle forms validation errors, we will use 2 ARIA attributes
1. aria hidden and
2. aria invalid
and an ARIA role — alert role
Here is a brief explanation of each
The aria-invalid attribute is used to indicate that the value entered into an input is not proper, e.g. it could be a missing value, it could be an invalid format such as email, phone, etc.
The aria-hidden attribute tells screen-readers if they should ignore the element. Have a look at the w3 docs for more details:
The aria role of alert role is used to communicate an important and usually time-sensitive message to the user.
In this example, we show an example of use tabbing out of first name field — which is a required field without entering a value. With combination or aria-hidden, aria-invalid, alert role and minimal JavaScript, the system will be accessible and screen readers will read message to the user that “First Name required”.
Screen shot below has the HTML. Screen shot further below has the JavaScript.
On line 15, the First Name text box code initially has aria-invalid to be false. On line 17 it has a “nameErrorMessage” div which has aria-hidden attribute of true. It also has the role of alert meaning that the content of this div will be read by the screen reader when it is visible
When the form loads, no errors appear. When the user tabs out of first name field, the validate JS function is called.
It checks is the first name is empty. If first name is empty, it sets the
Aria-hidden of the nameErrorMessage div to true so now this div is read by the screen reader
It sets the aria-invalid attribute of first name field to true
Now the screen reader reads the “First Name required “ message
Conclusion
Specifying language and using Semantic HTML, Image ALT tags, Proper Headings and a combination of ARIA constructs & JavaScript (for forms) will significantly increase the accessibility of the web page.
