The Web is fundamentally designed to work for all people, irrespective of their software, hardware, language, ability or location. If the Web meets this defined goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive abilities.
Thus the impact of disability is drastically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. When websites, applications, technologies, or tools are poorly designed, or designed in such a way that lacks accessibility they can create barriers that exclude people from using the Web.
Accessibility is necessary for developers as well as organizations which want to develop high-quality websites and web tools, and not to exclude people from using their products and services.
The aspect of this blog is to focus on some of the most useful HTML elements for scaling up the accessibility of pages and show that every developer can learn about and write accessible HTML!
You might be aware that ARIA roles are often used with HTML elements. but it’s good to see how HTML written without ARIA can still be accessible.
An important thing to remember is that HTML is just the semantic structure of the web page just like a skeleton, and is not used for the styling purpose. Elements such as and do alter some styles but also it has semantic meaning.
Why Accessibility:
Accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities or having constraint abilities can use them. More specifically, people can:
- understand, navigate,perceive, and interact with the Web
- contribute to the Web
Web accessibility incorporate all disabilities that can have affect on accessing the Web, which includes:
- neurological
- Physical
- cognitive
- Speech
- auditory
- visual
Web accessibility also benefits people don’t have disabilities, for example:
- Users having smart watches,mobile phones,smart TVs, and other devices with smaller resolutions or different input modes, etc.
- older people with changing abilities due to aging as time changes
- People who are having “temporary disabilities” like a broken arm or lost glasses
- people who are having “situational limitations” like in bright sunlight or in an environment where they cannot listen to audio
- people who are having a slow Internet connection, or those who have limited bandwidth
Contents:
Sectioned Titled Contents:
- Section Headings(h1-h6)
- Paragraphs
- Ordered Lists, Unordered Lists, and List Items
- Description Lists, Description Terms, and Description Details
- Time and DateTime(attributes)
Section Heading (h1-h6)
Section heading levels are one of the important parts of a web page’s HTML structure. They also allow screen reader users to effectively “see” a web page as a tree of contents. This allows content on the page to be navigated much more quickly and easily.
If the section headings are skipped, e.g. a fourth-level heading is used before a second-level heading in the same section of the page, screen reader users can become confused when trying to work out the page’s contents and structure. However, as shown in the above block of code there is third-level headings followed by a second-level heading. This is fine because section headings can be nested. Here, the third-level headings act like subsections of the second-level headings.
A great way to check the heading structure of a web page is by using the W3C Validator. First, add some HTML via URL, file upload or direct input content. Then, open the More options dropdown and select the Show outline checkbox option. Then, click or tap the ‘Check’ button. Finally, select the ‘outline’ checkbox. Right at the bottom of the page should be the HTML
Heading-level and structural outlines, It is similar to the following image:
Breaking content into paragraphs is another way to section content. Screen reader users can skip forward or backward between paragraphs, improving the navigability of a page. Using empty paragraphs for visual spacing or for any other styling consideration tends to hurt accessibility. This is because screen readers will announce even empty paragraphs, which can confuse users.
Ordered List, Unordered List, and List Item
An ordered list (ol) can provide a numerical list and an unordered list (ul)can provide a bullet-point list. These elements are used to wrap list item (li) elements. Ordered and unordered lists can be nested within each other and will still be accessible.
Screen readers know to announce nested or unnested <ol> or <ul> elements as a list, and <li> as a list item. If an element other than <ol>,<ul> or <li> is used to create a list, a screen reader will not recognize the list or any list items. In this case, ARIA roles can help. However, it’s definitely best to use the correct, semantic HTML element wherever possible.
Description List, Description Term, and Description Details
Section titled Description List, Description Term, and Description Details
Any key-value paired information fits well inside a description list (originally known as a definition list).
The three elements <dl>, <dt>, and <dd> are designed to be used together. In a description list, <dt> represents the key and <dd> gives the value of that key. For styling, adding microdata or other attributes, it is allowed (although some see this as a grey area) to wrap each key-value pair in a <div> element. You can use more than one <dt> element with a <dd> element.
Some screen readers such as VoiceOver for iOS will not announce these elements as list Because of this thing, it’s important to make sure each list item does make sense in the context of the other list items. Don’t at all be put things that even some screen readers do not announce these elements properly. Think about how many other screen reader users will still benefit.
Time and Datetime (attribute)
The section titled Time and Datetime (attribute)
The time element is used with the datetime attribute. This attribute’s value can take formats such as:
- YYYY-MM-DDThh:mm:ssZ
- PTDHMS
See these used in the example code block above.
The datetime value can provide a standardized, machine-readable date or time that can be accessed by assistive technology. The human-readable date or time can be placed between the time element.
There are quite a few ways to provide a valid datetime value so I won’t list them all here. However, there are available resources on the web for checking this. If a page uses JavaScript, then one great resource for creating dates is date-fns. As with all JS libraries, it is really good to check that the HTML it outputs is accessible and semantic.
