Building accessibility in a web page needs good semantic page structure. Semantic structure easily conveys important information of web pages to assistive technology users. When actual headings, links, and lists are used, and when tables are marked up properly, it become more usable for disable people.
Below are some parts of semantic structure that can be used to establish a library for page structure code.
Screen readers can navigate to different sections of a web page if those sections are marked up using landmarks. Landmarks can find sections like the header, footer, navigation menus, and the main content of the web page. Users can jump to the main content of the page or to different navigation menus on the page if landmarks are used in the code.
Headings are useful for both assistive technology users and non-assistive technology users. They visually provide a clear structure of a web page, but when actual headings are used, the structure is also clear to assistive technology users. For instance, screen reader users can browse a page heading by heading or pull out a list of headings on the web page.
When a real, semantic list is used on a web page, screen readers will announce users that the list is a list and provide how many items are in the list. This kind of information is handy to users who are unable to see and glance over a list of items. Assistive technology users like screen reader users can also use lists for navigation. Users can browse by lists or by list items. It is important that semantic lists are used to increase the usability of the web page for assistive technology users.
Tables can be navigated by screen reader users similarly to how a spreadsheet is navigated, from cell to cell and in any direction. When coded properly, the headers that correspond to each data cell can be conveyed when screen reader users land on a data cell, making the table more understandable. This will only work, though, if the table is marked up appropriately in the code.
Navigation menus on web pages should ideally be created using HTML lists (e.g., unordered lists) so that assistive technology users will know how many items are within the menu. Additionally, navigation menus should be designated as navigation through the use of either the HTML5 <nav> element or through the ARIA landmark role=”navigation”. Identifying navigation menus using <nav> or role=”navigation” will allow users to jump right to the navigation menu, or menus, if there is more than one menu on a web page.