Using Blended HTML-CSS-JS

Semantic to Implement Web

Accessibility Principles
Daniel Dang

https://doi.org/10.34074/proc.240110
Correspondence: [email protected]

Using Blended HTML-CSS-JS Semantic to Implement Web Accessibility Principles by

Daniel Dang is licensed under a Creative Commons Attribution-NonCommercial 4.0
International licence.

This publication may be cited as:

Dang, D (2024). Using Blended HTML-CSS-JS Semantic to Implement Web Accessibility

Principles. In H. Sharifzadeh (Ed.), Proceedings: CITRENZ 2023 Conference, Auckland, 27–29
September (pp. 70–77). ePress, Unitec. https://doi.org/10.34074/proc.240110

Contact:
[email protected]
www.unitec.ac.nz/epress/
Unitec
Private Bag 92025, Victoria Street West
Tāmaki Makaurau Auckland 1142
Aotearoa New Zealand

ISBN: 978-1-99-118344-6

Unitec is a business division of Te Pūkenga –

New Zealand Institute of Skills and Technology
ABSTRACT

Web accessibility is the inclusive practice to overcome all barriers that prevent interaction with websites
or web apps on the World Wide Web (WWW) by people with physical disabilities (cognitive/auditory/
visual limitation), situational disabilities (small screen, bright sunlight), and socioeconomic restrictions on
bandwidth and speed. Tim Berners-Lee, W3 Director and inventor of the WWW, stated that “the power
of the Web is in its universality, access by everyone regardless of disability is an essential aspect” (World
Wide Web Consortium, n.d.). Web accessibility is a crucial aspect of modern technology and is playing
an increasingly critical role in shaping a more equitable and accessible future for all users. Teaching web
accessibility as a topic to undergraduate students in the Bachelor of Computing Systems (BCS) at EIT is not
only a technical necessity (meeting legal requirements and enhancing user experiences) but also promotes
inclusivity and fosters social responsibility. As a result, students are prepared for successful and rewarding
careers in the technology industry. However, this also comes with challenges. These challenges may stem
from various factors, such as technical complexities, time constraints, resource constraints, and lack of
awareness and understanding. This article discusses in more detail some challenges to teaching this topic
to undergraduate students. It then suggests how to use HTML/CSS/Javascript semantics to implement four
web accessibility principles – perceivable, operable, understandable and robust (POUR).

KEYWORDS

Web accessibility, web accessibility principles, HTML semantic, CSS semantic, Javascript semantic

INTRODUCTION
Web accessibility is the inclusive practice to overcome all barriers that prevent interaction with websites or web
apps on the World Wide Web (WWW) by people with physical disabilities (cognitive/auditory/visual limitation),
situational disabilities (small screen, bright sunlight), and socioeconomic restrictions on bandwidth and speed.
Web accessibility ensures that digital content and services are available to everyone. Many countries have laws
and regulations that mandate web accessibility for public and private organisations. By teaching web accessibility,
we equip our students (future technology professionals) with the knowledge and skills needed to adhere to
these legal requirements and uphold ethical standards in their work. As accessibility becomes an integral part
of web-development practices, students who understand web accessibility will be better prepared for future
job opportunities (Web Accessibility Initiative, n.d.b). Organisations increasingly prioritise accessible design, and
candidates with accessibility skills will have a competitive advantage.

Teaching web accessibility promotes a sense of social responsibility among students, as they recognise the impact
of their work on the lives of individuals with disabilities. By prioritising accessibility, they contribute positively to
society and advocate for an inclusive online environment. Web accessibility challenges students to think creatively
and innovatively to solve design and development problems. Overcoming accessibility barriers can lead to novel
solutions and more robust web applications (Abuaddous et al., 2016).

As shown in Figure 1, teaching this topic comes with challenges. These challenges may stem from various factors,
including technical complexities, attitudinal barriers and resource constraints. Educators must be aware of and
address the challenges that can arise during the teaching process.

Proceedings: CITRENZ 2023 Conference, Auckland, 27–29 September 71

 Figure 1. Visualised level of topic’s difficulty: bigger text corresponds to more challenging (Dang, 2022).

AIMS AND RESEARCH DESIGN

People with disabilities represent a significant market segment with unique needs and preferences. Teaching web
accessibility empowers students to tap into this underserved market and create products and services that cater
to diverse audiences. As the population ages, the number of individuals with disabilities is expected to increase.
We prepare students to address the needs of an ageing population and a more diverse user base by teaching web
accessibility.

In an increasingly digital world, the internet plays a pivotal role in providing access to information, communication
and services. However, without proper consideration of accessibility, many individuals with disabilities face barriers
in accessing and utilising online resources. To address this issue, it is crucial to integrate web accessibility education
into the curriculum of computer science and BCS students.

Research questions:

1. What are web accessibility principles?

2. What are the challenges to teaching web accessibility to undergraduate students?
3. How can we blend HTML/CSS/JS semantics to build an accessible website?

ANALYSIS AND FINDINGS

Web Accessibility Principles

Web accessibility principles are a set of guidelines and best practices designed to ensure that websites and their
content are usable and accessible to individuals with disabilities. These principles aim to provide equal access and a
positive user experience for all users, regardless of their abilities. The Web Content Accessibility Guidelines (WCAG),
developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) (Web Accessibility
Initiative, n.d.a), are the most widely recognised and accepted set of principles for web accessibility. The WCAG
guidelines are organised around four key principles, often referred to by the acronym ‘POUR’, as shown in Figure 2:

Proceedings: CITRENZ 2023 Conference, Auckland, 27–29 September 72

• Perceivable: Information and user interface (UI) components must be presented in ways that users can
perceive. This involves providing alternatives for non-text content, such as images and multimedia, so that users
with visual or cognitive disabilities can understand them. It also includes using clear and consistent navigation
and layout structures.
• Operable: UI components and navigation must be operable by users with various disabilities. This includes
ensuring that all functionality is available via keyboard navigation, as some users may not be able to use a
mouse. Time-sensitive content or animations should also be adjustable or avoid causing confusion.
• Understandable: The content and operation of the UI must be understandable. This involves using clear and
simple language, providing instructions and context, and designing consistent and predictable navigation.
• Robust: Content must be robust enough to be reliably interpreted by a wide variety of user agents, including
assistive technologies. This means using valid code, adhering to web standards, and avoiding technologies that
might create barriers for users.

Figure 2. Four principles of web accessibility – POUR: Perceivable, Operable, Understandable and Robust (Web Accessibility Initiative, n.d.a).

Within these four principles, there are specific guidelines that provide more detailed instructions for making web
content accessible, as shown in Figure 2. Some common practices include providing alternative text for images,
ensuring sufficient colour contrast, providing captions for videos or voice recognition and text-to-speech support,
clear layout and design, accessible large links/buttons/controls, and making sure interactive elements are easily
navigable via keyboard.

Web accessibility is not only about accommodating individuals with disabilities; it also improves the overall user
experience for everyone, including those using mobile devices or experiencing temporary impairments. Following
these principles helps create a more inclusive and user-friendly online environment.

Teaching Web Accessibility: Challenges

Teaching web accessibility to undergraduate students is essential for fostering an inclusive digital landscape.
However, educators must be aware of and address the challenges that can arise during the teaching process.
Teaching web accessibility to undergraduate students faces challenges that stem from four main factors:

Proceedings: CITRENZ 2023 Conference, Auckland, 27–29 September 73

(1) technical complexities, (2) time constraints, (3) resource constraints, and (4) lack of awareness and understanding,
as shown in Table 1.

By taking a proactive approach, staying up to date with evolving guidelines, providing hands-on experiences, and
emphasising the real-world impact of accessible design, tutors can effectively equip students with the knowledge
and skills needed to champion web accessibility in their future careers.

Table 1. Challenges when teaching web accessibility to undergraduate students.

Challenges Explanation

Technical complexity It is technically challenging to design and develop accessible websites that work seamlessly across different
platforms, across browsers, and supporting assistive technologies.
As web accessibility principles include all other fields, such as web responsiveness, web usability and
advanced web technologies, implementing web accessibility features can be technically complex, especially
when addressing diverse disabilities and various types of devices.

Time constraints The bachelor programme has a packed curriculum with various courses to cover, and web accessibility is
only one topic covered in one paper, Website Development, so allocating sufficient time to effectively teach
this topic might be difficult, which leads to limited coverage or rushed teaching. As a result, students might
not gain a comprehensive understanding of the topic.
Students might have limited exposure to working on projects that prioritise web accessibility. Without
practical experience, it can be challenging for them to fully grasp the complexities and benefits of accessible
design.

Resource constraints Accessing a range of assistive technologies (screen readers, text-to-speech, and braille computers) for
testing and experimentation is challenging and limited for both educational institutions and individual
students.
Moreover, web accessibility guidelines and assistive technologies are continuously evolving to keep up with
advancements in web development. This presents a challenge for tutors to stay updated with the latest
standards and teach students the most current best practices.

Lack of awareness and At the beginning of the semester in 2021, we conducted a small survey by asking students a question:
understanding “Do you prioritise a responsive web design that provides a great mobile UX over web accessibility?”
Surprisingly, many students said “Yes.” It means that those students underestimate the significance of web
accessibility, viewing it as an optional or secondary concern in web development. They might not be aware
of the barriers faced by people with disabilities, or the legal and ethical aspects of web accessibility. As a
result, tutors may need to invest time in raising awareness and building a foundational understanding of
accessibility principles before delving into more technical aspects.

Combination HTML/CSS/JS semantics to implement web accessibility principles:

• Using HTML semantic elements appropriately is a fundamental aspect of improving web accessibility. Semantic
HTML elements provide meaningful structure and context to web content, making it easier for assistive
technologies and users with disabilities to understand and navigate the content.
• Using CSS semantic techniques improves web accessibility by enhancing the visual presentation and usability
of web content.
• Using JavaScript semantic techniques enhances web accessibility by adding interactivity, dynamic behaviour,
and improved user experiences for all users, including those with disabilities.

Proceedings: CITRENZ 2023 Conference, Auckland, 27–29 September 74

Table 2. Guidelines to using HTML/CSS/JS semantics to implement web accessibility principles (POUR).

Web Accessibility HTML Semantic Elements CSS Semantic Techniques JS Semantic Techniques
Principle

Perceivable Use semantic elements for Responsive design: Toggle buttons and ARIA
This involves multimedia: + Implement responsive CSS checkbox/radio:
providing + Employ <figure> and <figcaption> techniques to ensure that web + Use JavaScript to create
alternatives for elements to associate captions with content adapts to different screen toggle buttons and custom
non-text content, images and multimedia content. sizes and devices, providing an checkboxes/radio buttons that
such as images + Add <alt> attributes to images to accessible experience across convey their state to screen
and multimedia, provide alternative text descriptions various platforms. readers using ARIA attributes.
so that users with for users who cannot see the visuals. + <meta viewport=””> and CSS Progressive enhancement:
visual or cognitive Structure content with sectioning Grid or Flexbox for laying out + Use JavaScript semantic
disabilities can elements: webpage structure. techniques to progressively
understand them. It + Utilise <header>, <main>, <section>, Use CSS Grid and Flexbox: enhance the user experience,
also includes using <article>, and <footer> elements to + Employ modern CSS layout ensuring that the core
clear and consistent structure content logically. techniques such as CSS Grid and functionality of the website
navigation and + Group related content within Flexbox to create more accessible remains accessible even
layout structures. <section> and <article> elements, and and flexible layouts that adapt to without JavaScript.
include relevant headings for each various screen sizes. Accessible dropdowns and
section. Optimise for print: menus:
Offer text alternatives for audio and + Implement print CSS styles to + Use JavaScript to create
video: ensure that printed versions of accessible dropdown menus
+ Use the <audio> and <video> web pages are accessible, legible and expandable/collapsible
elements for multimedia content and and well structured. sections using ARIA attributes
provide captions, transcripts, and and keyboard support.
audio descriptions for users who may
have difficulties perceiving the content.

Operable Implement landmark roles with Focus states and keyboard Keyboard accessibility:
This includes ARIA: navigation: + Ensure that all interactive
ensuring that + Use ARIA landmark roles + Use CSS to style focus states elements and components are
all functionality (role=“banner”, role=“navigation”, for interactive elements, such as fully accessible via keyboard
is available role=“main”, role=“complementary”, links and form fields. This makes navigation.
via keyboard role=“contentinfo”, etc.) to indicate it easier for keyboard users to + Add keyboard event listeners
navigation, as important sections of the page for identify their current position on to elements to handle focus,
some users may assistive technology users. the page. key presses and actions.
not be able to use Enhance link navigation: + Test keyboard navigation to + Use appropriate ARIA roles
a mouse. Time- + Include descriptive text within ensure that users can access all and states to convey the
sensitive content or anchor tags using the title attribute or, interactive elements and content purpose and behaviour of
animations should preferably, the ARIA-label attribute. without the need for a mouse. dynamic elements.
also be adjustable + Avoid using generic phrases such as Avoid animation overload: Control over animations:
or avoid causing ‘click here’ or ‘read more’ for links, as + Use CSS animations judiciously + Provide users with the
confusion. they may not provide enough context and provide options for users ability to control or disable
for screen-reader users. to control or disable animations animations using JavaScript,
if necessary, as they can be as rapid animations may cause
distracting for some users. issues for some users.

Understandable Use semantic elements for data: Use logical and intuitive tab Focus states and styling:
This involves using + For tabular data, use the <table>, order: + Implement custom focus
clear and simple <th>, <tr>, and <td> elements + Order HTML elements in a styles for interactive elements
language, providing appropriately, and associate headers logical sequence and use CSS to using JavaScript, ensuring they
instructions and with data cells using the scope or ensure that the tab order follows are clearly visible for keyboard
context, and headers attribute. the visual layout. users.
designing consistent + For data representation, use <dl> for Use clear and readable fonts: + Remove focus styles only
and predictable definition lists and <dt> and <dd> for + Choose fonts that are legible when a custom focus indicator
navigation. term-description pairs. and easy to read, especially for has been provided to maintain
Use heading elements properly: body text. keyboard accessibility.
+ Utilise <h1> for the main heading + Ensure that font sizes are Navigation and skip links:
of the page and follow a hierarchical adjustable by users without + Use JavaScript to create skip
structure for subsequent headings causing content overlap or loss of links that allow keyboard users
(e.g., <h2>, <h3>, etc.). functionality. to bypass repetitive content
+ Ensure that heading levels are used Contrast and colour: and jump directly to the main
in sequential order and not skipped, as + Ensure sufficient colour contrast content.
this helps screen-reader users navigate between text and background + Ensure that hidden
through the content more efficiently. to make content easily readable navigation menus or off-
Properly label forms: for all users, including those with screen content are accessible
+ Use <label> elements to associate visual impairments. to screen readers.
labels with form fields explicitly. + Avoid using colour alone to
+ Provide informative <legend> convey important information;
elements for <fieldset> elements in use text or symbols as
complex forms. alternatives.

Proceedings: CITRENZ 2023 Conference, Auckland, 27–29 September 75

 Robust Create accessible buttons: Hidden content and screen Optimise for assistive
This means using + Use <button> elements for readers: technologies:
valid code, adhering interactive buttons rather than <div> + Use CSS to visually hide non- + Test JavaScript-powered
to web standards, or <span> elements with click event essential content (e.g., skip links, components with assistive
and avoiding listeners. off-screen menus) while making it technologies to ensure they
technologies that + Provide descriptive text within the available to screen readers using are appropriately announced
might create barriers button to convey its purpose. techniques like clip-path, position, and interactable.
for users. or opacity. Error handling and
Test with users with disabilities: validation:
+ Involve users with disabilities + Implement real-time form
in usability testing to gather validation using JavaScript to
feedback and ensure the provide immediate feedback
JavaScript enhancements are to users, including users with
genuinely accessible. disabilities.
+ Ensure that error messages
are accessible and associated
with the corresponding form
fields.

CONCLUSION AND RECOMMENDATIONS

Web accessibility is a crucial aspect of modern technology, ensuring that websites and web applications are usable
and navigable by individuals with disabilities. As the internet continues to play an increasingly significant role in our
daily lives, the need for an inclusive digital environment becomes more apparent.

Teaching web accessibility to undergraduate students is not just a technical necessity but a moral imperative. Tutors
must be aware of and address the challenges that can arise during the teaching process. Teaching web accessibility
to undergraduate students faces up to challenges that stem from four main factors: (1) technical complexities,
(2) time constraints, (3) resource constraints, and (4) lack of awareness and understanding. By taking a proactive
approach, staying up to date with evolving guidelines, providing hands-on experiences, and emphasising the real-
world impact of accessible design, tutors can effectively equip students with the knowledge and skills needed to
champion web accessibility in their future careers.

By using HTML semantic elements appropriately, we can create a more accessible and inclusive online experience
for all users, including those with disabilities. Additionally, when combined with proper use of ARIA attributes,
HTML semantic elements contribute significantly to making websites more user-friendly for individuals who rely on
assistive technologies. By using CSS semantic techniques appropriately, we can create an inclusive and accessible
design that enhances the user experience for all visitors, including those with disabilities. It is essential to test and
verify the accessibility improvements using various tools and by involving users with disabilities in the testing
process. By using JavaScript semantic techniques, we can create a more inclusive and accessible web experience
that enhances the usability and functionality for all users, regardless of their abilities or assistive technology usage.
Always combine JavaScript enhancements with appropriate ARIA roles and attributes to provide meaningful
information to assistive technologies and ensure a seamless experience for everyone.

Proceedings: CITRENZ 2023 Conference, Auckland, 27–29 September 76

REFERENCES
Abuaddous, H. Y., Jali, M. Z., & Basir, N. (2016). Web accessibility challenges. International Journal
of Advanced Computer Science and Applications, 7(10), 172–182. https://doi.org/10.14569/
IJACSA.2016.071023
Dang, D. (2022). Recommended topics and practical labs for the introductory Level-5 Website
Development Course. In E. Erturk & B. Otinpong (Eds.), Proceedings of the 13th Annual Conference
of Computing and Information Technology Education and Research in New Zealand (pp. 29–36).
CITRENZ.
Web Accessibility Initiative (WAI). (n.d.a). Accessibility principles. https://www.w3.org/WAI/fundamentals/
accessibility-principles/
Web Accessibility Initiative (WAI). (n.d.b). Introduction to web accessibility. https://www.w3.org/WAI/
fundamentals/accessibility-intro/
World Wide Web Consortium. (n.d.) Accessibility. https://www.w3.org/mission/accessibility/

AUTHOR
Dr Daniel Dang is an ICT Lecturer in the School of Computing at Eastern Institute of Technology
Te Aho a Māui. His research interests are sharing the best practices in teaching ICT subjects and
using digital technologies to tackle social and environmental issues. [email protected]

Proceedings: CITRENZ 2023 Conference, Auckland, 27–29 September 77