my essays.

Introduction

While first going through the 24BitGameStudio website, I initially considered its general design elements, i.e., the font size consistency, the purposeful utilisation of background colors to direct users' attention, and the chromatic equilibrium that accompanies their brand identity. A more critical inspection of the site through the lens of web accessibility and ethical user experience design principles, however, revealed several points that merit further discussion. Website accessibility should not be treated as a compliance matter alone; rather, it is a core commitment to inclusive design that addresses the needs of all users with or without disabilities. This essay aims to assess the 24BitGameStudio website's performance based on standard accessibility guidelines and ethical user experience frameworks.

Visual Design Elements

The 24BitGameStudio website demonstrates thoughtful attention to visual design, particularly in its consistent use of brand colors. The background colors effectively differentiate sections and guide the user's visual flow through the content. The navbar buttons also provide interactive feedback, changing color upon hover (glowing blue) and when pressed (turning red), the latter of which also indicates to the user what page they are on, which provides clear visual feedback, which enhances user interaction.

While the color coordination with the logo fosters a streamlined visual experience, this does not necessarily guarantee accessibility for users with color vision deficiencies or low vision. The website primarily uses hues of blue, red, white, and dark grey. Although these colors can be visually striking, they may still present challenges if used without adequate contrast or if critical information is conveyed through color alone. For example, users with red-green color blindness, a common form of color vision deficiency, may struggle to distinguish between certain shades of red and grey.

A notable accessibility issue concerns the site's interactive elements. While navbar buttons change color when hovered or clicked, standard buttons and form elements lack visual feedback for interaction states. This absence of clear focus indicators violates accessibility best practices and creates significant barriers for keyboard users, particularly those with motor disabilities who can't use a mouse. Without visible indicators showing their current location during keyboard navigation, these users face unnecessary difficulties interacting with the site.

Additionally, I observed inconsistencies in typography across the website, particularly in the use of capitalisation. For example, the contact page features text that is written entirely in uppercase letters, in contrast to the rest of the site, excluding the game preview section, which predominantly uses standard sentence case (capitalised first letters followed by lowercase). While the use of all caps may have been intended to create emphasis, such typographic inconsistency can introduce cognitive friction for users. This is especially true for individuals with cognitive disabilities, who benefit from uniform and predictable visual patterns. All-caps text can also reduce readability, as it disrupts the familiar shapes of words that readers rely on for quick recognition. I found myself suffering from that as well since I find familiarity comforting.

Despite this issue, the website maintains legible font sizes across desktop, tablet, and mobile platforms, demonstrating an understanding of responsive design principles. This adaptability is important for accessibility, ensuring that text remains readable across various devices and screen dimensions.

Content and Information Structure

A critical aspect of my accessibility testing involved using a screen reader to navigate the 24BitGameStudio website, where I encountered significant barriers related to image accessibility. While using Microsoft Edge's immersive screen reader mode, I found that images across the site were not being read aloud, posing a substantial accessibility issue for visually impaired users who rely on screen readers to access content.

Upon further inspection with developer tools, I noted that the images, particularly in the service and client sections, were named using generic filenames such as "service1," "service2," and "client1." This naming convention introduces two primary accessibility concerns:

First, even if the screen reader were properly configured, these generic names offer no meaningful description of the image content. For instance, a user might hear "client1" without understanding which client the image represents or what the image itself depicts. This lack of descriptive alt text directly contradicts Vaidya's (2020) assertion that "the alternative text for each image must convey the meaning the image is intended to communicate, not merely describe what the image looks like."

Second, the failure to announce images in screen reader mode suggests possible technical issues in the website's implementation, such as missing alt attributes, improper ARIA roles, or problems with the HTML structure. According to Vaidya (2020), "alternative text is not required for decorative images," but logos and service illustrations carry meaningful information and should be described appropriately to accommodate non-visual users. The lack of these descriptions further compounds the accessibility barriers that visually impaired users face.

I also encountered a significant navigation barrier on the home/about page. When activating the immersive screen reader mode, the page is simplified visually, presumably to enhance readability. However, this simplified version removed navigation options, effectively trapping users on the page. As I noted during testing, "When simplified, I cannot navigate to any other page. When I exit this immersive screen reader mode, I can navigate freely to other pages." This restricted experience violates core principles of accessible design, which emphasise providing equal access for all users, regardless of their method of interaction.

Furthermore, I found that the 'read aloud' feature on other pages did not support image descriptions, creating an inconsistent user experience. As I observed, I cannot activate the immersive screen reader on those pages; instead, I can click on 'read aloud,' which does not account for images. This inconsistency highlights potential issues with the semantic structure of the website. Proper semantic HTML is essential for screen reader compatibility, as it informs assistive technologies how to interpret and navigate content. Vaidya (2020) emphasises that "headings must be structured appropriately in the design specifications. Skipping heading levels is not recommended, as it disrupts the structure." Without a consistent heading hierarchy and semantic markup, screen readers cannot effectively communicate the organisation of content, making navigation difficult.

Dynamic Content Accessibility

The inconsistent behavior between pages, where only the home/about page changes its presentation in screen reader mode, suggests uneven implementation of accessibility features. Such inconsistencies can be particularly challenging for users with cognitive disabilities, who benefit from predictable patterns and consistent behaviors. Moreover, the 24BitGameStudio website features a section where client logos scroll horizontally in a carousel format. While visually engaging, this dynamic content presents several accessibility challenges. The images in the carousel are generically named (e.g., "client1"), which fails to provide meaningful information to screen reader users.

Vaidya (2020) specifically addresses this issue, noting that "the user should be given control to stop, pause, or hide any content or information that appears on the interface that moves, blinks, or scrolls." During my testing, I did not observe any controls that would allow users to pause or control the carousel's movement, suggesting non-compliance with this important accessibility guideline.

Form Accessibility

The contact page features forms for user input, which present their own set of accessibility considerations. While the slightly larger font size on this page might enhance readability for some users, other aspects of form accessibility require evaluation. For forms to be fully accessible, they should include properly associated labels, clear instructions, indication of required fields, and accessible error validation that doesn't rely solely on color to convey meaning. As Vaidya (2020) notes, "It is not a good practice to alert the user when there is an error by just changing the labels of a form to red color. Color should not be used as the only means to indicate an action in an interface."

The 24BitGameStudio form does just that; however, the font size of the text indicator for error validation, as well as its color choice, makes it hard to read and a bit difficult to focus on. There also seems to be a strange inconsistency regarding the headings' color choice and that of the error validation, both are red; however, the former is a brighter hue that contrasts well against the background, while the other is a duller shade, which leads to the accessibility issues noted earlier.

Data Collection and Privacy

While analysing, I came across a curious choice regarding the data collection practices on the 24BitGameStudio website. The site collects extensive personal information, including identifying, contact, and demographic data, albeit for people or clients seeking more information through their contact section. Despite this comprehensive data gathering, the website lacks a cookie policy, raising significant ethical concerns regarding informed consent and transparency (Brignull, H., Leiser, M., Santos, C., and Doshi, K., 2023).

As Geyser (n.d. a) argues, ethical web design must prioritise "Privacy," "Transparency," and "Ethical Persuasion". This absence of cookie notifications particularly affects users from regions with strict privacy regulations like the EU, where GDPR mandates explicit consent. While omitting such notices might create a smoother user experience, it compromises ethical standards. Through the lens of "Design Justice" (Costanza-Chock, 2020; Geyser, n.d. b), this represents a problematic power imbalance between the website owner's extensive data collection and users' limited awareness, potentially violating ethical design principles.

User Experience and Interface Design

While the 24BitGameStudio website does not display overt cultural insensitivity, it lacks consideration for local usability in a South African context. The site is exclusively in English, which, while commonly used in business, is only the fourth most spoken language in the country, spoken by roughly 9% of the population. More widely spoken languages like Zulu, Xhosa, and Afrikaans are notably absent, as are the remaining official languages of South Africa. Although users can rely on third-party translation tools, the absence of built-in multilingual support may be perceived as tone-deaf or exclusionary, especially given the country's linguistic diversity and constitutional commitment to language equity.

Their website maintains visual consistency across most pages, which should, in theory, support a predictable user experience. Font sizes for headings and paragraph text are consistent, and the layout adapts well across desktop, tablet, and mobile views. Additionally, the use of different background colors to distinguish sections effectively supports visual hierarchy and guides the user's eye, helping to emphasise important content.

However, this visual consistency is undermined by significant inconsistencies in accessibility, particularly in how the site behaves with assistive technologies. Screen reader testing revealed that only the about page adapts its presentation in reader mode, while other pages remain unchanged. This creates an unpredictable and potentially frustrating experience for users relying on screen readers. Predictable navigation and consistent behavior are especially critical for users with cognitive disabilities or those unfamiliar with web conventions. As Vaidya (2020) emphasises, information architecture should prioritise accessibility for elderly users and those with cognitive challenges, with features like always-visible menus.

Furthermore, while visual cues like background colors help with organisation, they must be supported by proper semantic structure in the code. The inconsistencies uncovered in screen reader performance suggest that this underlying structure may not be fully accessible or well-implemented.

Conclusion

This analysis reveals that the site's UI, UX, and IxD suffer from not only technical oversights but also critical ethical failings. The inconsistent support for assistive technologies, lack of focus indicators, and segregated immersive reader experience demonstrate a disregard for inclusive design, effectively marginalising users with disabilities. These are not isolated design flaws, they reflect broader systemic neglect of accessibility as a core value.

Equally troubling is the lack of data transparency, with missing cookie policies and unclear consent mechanisms compromising user autonomy and trust (Geyser, n.d. a). Ethical UX requires respect for user agency and informed consent, both of which are undermined here.

As Vaidya (2020) asserts, accessibility and inclusion should not be retrofitted but rather integrated into design from its earliest stages. The failure to do so in this case exemplifies a broader systemic issue in digital design, where accessibility is often deprioritised in favor of aesthetic or commercial goals. This neglect not only reinforces existing power imbalances, excluding those with less access or fewer abilities, but also contradicts the foundational ideals of user-centered design.

References

24Bit Games (n.d.) 24Bit Games. Brignull, H., Leiser, M., Santos, C. and Doshi, K., 2023. Deceptive patterns. Costanza-Chock, S., 2020. Design justice: Community-led practices to build the worlds we need. The MIT Press. Geyser, H., (n.d. a). Ethics of UX Practice. University of Witwatersrand.
Geyser, H., (n.d. b). Internet, Society and Design Justice - So what do we do? University of Witwatersrand.
Vaidya, M. (2020). Accessibility: Guidelines for Information Architecture, UX Design, and Visual Design. IBM Design.

Introduction

The digital age has presented unprecedented opportunities for global connectivity and the sharing of information. Yet, it has also contributed to the creation of new forms of colonial power structures that mirror historical patterns of domination and exploitation. Digital colonialism, as defined by Coleman (2018), represents "a modern-day 'Scramble for Africa' where large-scale tech companies extract, analyse, and own user data for profit and market influence with nominal benefit to the data source." This essay examines how Western-controlled social media platforms enable the systematic spread of misinformation about the Global South, using the recent case of Elon Musk's parroting of "white genocide" conspiracy theories about South Africa as a critical lens. The incident, which reached its peak in 2024–2025, demonstrates how digital colonial structures not only extract data and profits from African users but also impose harmful narratives that serve Western political interests while silencing African voices.

Understanding Digital Colonialism

Digital colonialism extends past economic exploitation to encompass what can be termed "epistemic violence", the systematic marginalisation and delegitimisation of non-Western ways of knowing and being. As noted in a recent scholarship, "digital colonialism, the systemic extraction and commodification of marginalised cultures through digital platforms, where those with privilege can claim ownership over traditions while the original communities lose control of their narratives" (OpenGlobalRights, n.d.). This framework is particularly relevant when examining how Western-owned platforms like X (formerly Twitter) become vehicles for spreading misinformation about African realities, despite the platform being owned by a South African ironically enough.

Kwame Nkrumah's concept of neo-colonialism, which describes the practice of using economic, political, or cultural influence rather than direct military force to control former colonies, finds new expression in the digital age. Social media platforms, predominantly owned and operated by Western corporations, create algorithmic architectures that privilege certain voices while marginalising others, effectively recreating colonial hierarchies in digital spaces. Elon Musk's continued campaign to promote "white genocide" conspiracy theories about South Africa represents a paradigmatic example of digital colonialism in action. Beginning with renewed intensity in 2023 and continuing through 2025, Musk leveraged his massive following of over 200 million users on X to spread demonstrably false claims about systematic violence against white South Africans (The Washington Post 2023). "They are openly pushing for genocide of white people in South Africa," Musk tweeted, before asking why South African President Cyril Ramaphosa had said "nothing" about the incident (The Washington Post, 2023).

The factual reality contradicts these claims. South African police recorded 26,232 murders nationwide in 2024, of which 44 were linked to farming communities (NBC News, 2025). Most murder victims in South Africa are Black, not white, and a South African court determined in February that claims of a white genocide in the country are not true (Reuters, 2025). Yet despite these facts being readily available and extensively documented by South African institutions and journalists, Musk's misinformation gained significant traction, even influencing U.S. foreign policy.

The colonial nature of this misinformation campaign becomes evident when examining its impact. President Donald Trump, influenced by these false narratives, offered asylum to white South Africans and maintained these positions even when directly confronted by South African President Cyril Ramaphosa (Fortune, 2025). During a recent meeting, Trump continued to push the baseless conspiracy theory even with South Africa's president present to refute it directly (Fortune, 2025). This represents a form of epistemic violence where Western figures claim authority over African realities, dismissing the knowledge and lived experiences of Africans themselves.

The structural inequalities inherent in Western-controlled social media platforms became startlingly apparent in how Musk's misinformation was amplified while South African counter-narratives were marginalised. Despite numerous South Africans, including white South Africans, actively refuting these claims on the platform, their voices were systematically diminished by algorithmic biases that prioritise engagement metrics over truth or local expertise.

X's algorithm prioritises accounts with large followings and high engagement rates, creating what can be termed "algorithmic colonialism", a system where Western voices are structurally advantaged over those from the Global South, this is despite Musk's claims that the algorithm would boost smaller accounts to counter such biases . Lutz (2019) identifies this as part of the third-level digital divide, where disparities in outcomes emerge even when access and usage are similar. Western users with higher digital capital can translate engagement into influence, while Global South users face structural disadvantages in shaping discourse. This technological bias enabled Musk's false claims to reach millions while South African fact-checkers, journalists, and ordinary citizens struggled to gain visibility for accurate information about their own country.

The community notes feature, supposedly designed to halt the spread of misinformation, failed in this case. Ironically, even Musk's own AI chatbot Grok contradicted his claims, noting that "No trustworthy sources back Elon Musk's 'white genocide' claim in South Africa; courts dismiss it as unfounded" (NBC News, 2025). However, the structural power imbalances on the platform meant that this correction had minimal impact compared to the original misinformation.

The absence of widely used, African-controlled social media platforms that could provide alternative spaces for African narratives is something that can no longer be ignored. While countries such as Nigeria, Ghana, Kenya, and Senegal have initiated local digital media platforms, these applications reflect the South's ability to offer successful models based on the interests and priorities of their people, free from Western control. However, these platforms lack the global reach and influence of Western-controlled social media giants.

This digital dependency creates what Frantz Fanon might have recognised as a form of psychological colonialism, where Africans are forced to contest representations of themselves on platforms owned and controlled by their former colonisers. The inability to control the technological infrastructure through which global conversations about Africa occur represents a fundamental form of digital subjugation.

The Role of Technology in Perpetuating Colonial Narratives

The recent revelation that Musk's chatbot Grok keeps bringing up false claims about 'white genocide' in South Africa unprompted demonstrates how colonial biases become embedded in artificial intelligence systems (Rolling Stone, 2025). This technological amplification of misinformation represents a new frontier in digital colonialism, where AI systems trained on biased data reproduce and amplify harmful stereotypes about the Global South. The digital space has demonstrated considerable bias, particularly through the democratisation of AI programming, which has resulted in explicit racism and sexism becoming ingrained in many AI platforms (Slate, 2025). In the case of Grok's obsession with "white genocide" narratives, we see how these biases manifest in concrete harm to African communities and international relations.

The international ramifications of Musk's misinformation campaign showcase how digital colonialism intersects with traditional geopolitical power structures. The fact that false narratives propagated on a Western-owned platform could influence U.S. foreign policy toward South Africa demonstrates the continued salience of colonial relationships in the digital age.

The situation escalated to the point where President Donald Trump maintained his false beliefs about South African "white genocide" even when directly confronted by President Ramaphosa with factual information (Reuters, 2025). This represents a direct material consequence of digital colonial violence, where misinformation spread through Western-controlled platforms translates into concrete diplomatic tensions and potential economic harm for African nations. Despite the structural disadvantages, South African resistance to these false narratives provides important insights into potential strategies for digital decolonisation. The coordinated efforts by South African social media users to counter Musk's misinformation, while ultimately limited by algorithmic biases, demonstrate the possibility of grassroots resistance within colonial digital structures.

However, these efforts also highlight the inadequacy of individual resistance in the face of structural inequalities. As Shahid (2024) notes, "Around 75% of Internet users are from non-English speaking countries in the Majority World (i.e., Global South). Yet social media companies allocate most of their content moderation resources to English speaking populations in the West." This disparity in content moderation resources meant that harmful misinformation about South Africa received insufficient attention from platform moderators. This highlights the urgent need for what might be termed "digital sovereignty", the ability of nations and communities in the Global South to control the technological infrastructure through which narratives about them are constructed and disseminated. This involves not just creating alternative platforms but developing entirely different models of digital interaction that prioritise truth, community well-being, and cultural authenticity over engagement metrics and profit maximisation.

As noted by digital rights advocates, "As Big Tech's data and profit extraction extends the world over, activists in the Global South are pointing the way to a more just digital future" (OpenGlobalRights, n.d.). These efforts must be supported and scaled to challenge the current digital colonial order.

Conclusion

The case of Elon Musk's amplification of "white genocide" misinformation about South Africa represents a paradigmatic example of digital colonialism in the contemporary era. Through his control of a major social media platform and his massive following, Musk was able to impose false narratives about African realities that influenced international relations and policy, despite consistent refutation by South Africans themselves. This shows how digital colonial structures operate through algorithmic biases, unequal resource allocation, and the systematic privileging of Western voices over Global South perspectives. The inability of South Africans to effectively counter these narratives on a platform owned by their former colonial powers demonstrates the continued salience of colonial relationships in digital spaces. Moving forward, the development of African-controlled digital platforms and the establishment of digital sovereignty frameworks will be crucial for challenging these colonial structures. Only through such efforts can the Global South begin to reclaim control over the narratives that shape international perceptions and policies regarding their societies. The fight against digital colonialism is not merely a technological challenge but a fundamental struggle for epistemic justice and the right of all peoples to define themselves in the digital age.

References

Coleman, D. (2018). Digital Colonialism: The 21st Century Scramble for Africa through the Extraction and Control of User Data and the Limitations of Data Protection Laws. Michigan Journal of Race and Law, 24(2), 417-449. Fortune. (2025, May 21). With Elon Musk in attendance, South Africa's president counters Trump for pushing a baseless conspiracy theory about 'white genocide'. Fortune. Lutz, C. (2019) 'Digital inequalities in the age of artificial intelligence and big data', Human Behavior and Emerging Technologies, 1(2), pp. 141–148. NBC News. (2025, February 10). How a land law sparked Elon Musk's accusations of 'genocide' against his home country. NBC News. NBC News. (2025). Elon Musk's AI chatbot Grok brings up South African 'white genocide' claims in responses to unrelated questions. NBC News. OpenGlobalRights. (n.d.). Digital colonialism: How social media enables new violations of cultural rights. OpenGlobalRights. Reuters. (2025). A check of Trump's false claims about white genocide in South Africa. Reuters. Rolling Stone. (2025). Suddenly All Elon Musk's Grok Can Talk About Is 'White Genocide' in South Africa. Rolling Stone. Shahid, F. (2024, August 27). Colonialism in Content Moderation Research: The Struggles of Scholars in the Majority World. Center for Democracy and Technology. Slate. (2025). Elon Musk news: Why X's Grok chatbot keeps glitching out about "white genocide" and "Kill the Boer" in South Africa. Slate. The Washington Post. (2023, August 1). Elon Musk raises specter of 'white genocide' after South Africa apartheid chant. The Washington Post.

Introduction

Looking back on my website development process, I want to examine how the UI and UX decisions I made throughout influenced my technical implementation. By analysing the relationship between my design choices and code structure, I can identify what worked well and what I could improve in creating an accessible, maintainable, and user-centered digital experience.

My Folder Structure

I structured my folders to mirror how I wanted users to navigate my content. Each major section I created, blog, design, essay, portfolio, profile, has its own directory, which directly reflects the primary navigation I built for users. This helped me maintain a logical connection between how users think about my site and how I organised the files. I'm particularly proud of how I organised my blog section. I gave each blog post its own subdirectory (blogone, blogtwo, etc.), making it intuitive for both users and me to understand the relationships between different pieces of content and maintain my codebase.

I maintained a clear separation between my three main layers. My data layer consists of HTML, where I structured my content and semantic markup. My presentation layer includes my styling, organised in dedicated CSS files like main.css, blog.css, and essay.css. My logic layer contains interactive functionality that I separated into script.js, essay_filter.js, and portfolio_filter.js among others. This separation makes my code much easier to maintain and allows me to update modules without breaking other parts of my site.

My folder structure reflects good modularity and allows for scalability, which makes any plans of upscaling the website relatively simple, as I can keep track of all my stuff more easily. I can maintain section-specific CSS files like blog.css and essay.css independently while sharing common styles through main.css. I followed consistent naming conventions that make my codebase scalable and intuitive for future development.

I made sure my HTML markup gives browsers substantial context through proper semantic elements. I used <article>, <header>, <nav>, <main>, and <footer> elements to create a clear document structure that browsers and assistive technologies can interpret effectively. My blog and essay sections particularly benefit from this approach. I wrapped each post in <article> elements with proper heading hierarchies (<h1>, <h2>) and time elements with datetime attributes for publication dates.

I expressed my interface elements through appropriate semantic HTML. My navigation uses proper <nav> and <ul> structures to create a clear hierarchical understanding for both users and browsers. Interactive elements like my hamburger menu use proper button semantics to ensure accessibility and proper functionality. My filter system in the essay section uses semantic button elements with data attributes to maintain both functionality and semantic meaning. I structured my content with proper heading hierarchies, paragraph elements, and citation markup. I used <cite> elements in my essays to provide semantic meaning to references, while <time> elements with datetime attributes give temporal context to my publications.

My semantic markup significantly improves accessibility by providing screen readers with proper document structure through semantic elements, creating logical tab order through proper HTML structure, enabling skip navigation through clear content organisation, and supporting assistive technologies with meaningful element roles. However, I recognise areas where I could improve, particularly in providing more comprehensive alt text for images and ensuring all my interactive elements have proper focus indicators.

Guiding Browsers

My website includes essential metadata in the <head> sections:

• Character encoding (<meta charset="UTF-8">)
• Viewport settings for responsive design
• Page descriptions for SEO and accessibility
• Proper title elements for each page

I properly identified and implemented metadata for content that needed it. I included publication dates with structured datetime attributes to provide temporal context. I added author information with microformat classes like h-card and p-author to establish clear authorship. I used content type identification through microformat classes such as h-entry and e-content to help machines understand the structure and purpose of my content.

I implemented microformats effectively in my blog and essay sections. I used h-entry for my blog posts and essays to establish them as individual entries, p-name for titles to identify content headings, dt-published for publication dates to provide temporal metadata, p-author h-card for author information to establish clear authorship, and e-content for main content areas to identify the primary content for each entry. This structured data enhances machine readability and supports future content syndication.

I successfully avoided inline styles throughout my website, for the most part, handling all styling through external CSS files (I say for the most past as there was certain sections in my website where I was unsure of how to handle the styling externally). This creates consistency across my site and makes maintenance much easier for me. My modular approach with section-specific stylesheets (blog.css, essay.css) allows me to target specific styling while maintaining global consistency through main.css. My CSS architecture demonstrates the modularity I was aiming for. I keep shared styles in main.css for common elements that appear throughout the site. I maintain section-specific styles in dedicated files to allow for targeted customisation without affecting other areas. I use consistent naming conventions for classes to make the code intuitive and predictable. I create reusable component styles that can be applied across different sections when appropriate. This structure makes my codebase maintainable and allows me to easily update specific sections without affecting others.

I included responsive layouts that adapt to different screen sizes through a mobile-first design approach with appropriate media queries. I implemented flexible grid systems for content layout that adjust naturally to different viewport sizes. I created responsive navigation with a hamburger menu for mobile devices to ensure usability across all screen sizes. I used fluid typography that scales appropriately across devices to maintain readability and visual hierarchy. My responsive design ensures accessibility across different devices and viewing contexts, supporting the inclusive design principles I learned in the course.

I properly implemented JavaScript functionality through event handlers and DOM manipulation. I created mobile menu toggle functionality through my toggleMobileMenu() function to ensure smooth navigation across devices. I built an essay filtering system through dedicated script files that allows users to sort content dynamically. I implemented smooth scrolling and interactive elements to enhance the user experience. I added back-to-top button functionality to improve navigation on longer pages. My JavaScript demonstrates good practices in consolidating repeated functionality. I maintain shared utility functions in script.js that I use across multiple pages to avoid code duplication. I separate specialised functionality like essay filtering into dedicated files to keep code organised and maintainable. I use consistent event handling patterns throughout the site to create predictable and reliable interactions. I properly avoided inline scripting, linking all my JavaScript through external files using the defer attribute for optimal loading performance. This approach improves maintainability and allows for better caching strategies.

I also recognise that more extensive JavaScript could've been used throughout the site, but I found that coming up with a playful design in that respect quite challenging without causing it to deviate from the overall experience I wanted to create. The implementation I went for merely served to highlight my interests in Pokémon and thus lacked any real interaction elements aside from people who share the same interests as me, but in the context of my design philosophy, I'd say I did a good enough job. While my current implementation works well, I recognise opportunities for improvement in async requests and performance optimisation. The script I used was fairly straightforward and didn't deviate too much from the tutorial video I followed along with. The static nature of my current site means most content loads synchronously, but future enhancements could benefit from dynamic content loading for improved user experience.

How Design Drove My Technical Decisions

My user experience design directly influenced several technical implementations:

Content Filtering: My desire to allow users to easily navigate between different essays led me to implement JavaScript-based filtering, requiring careful consideration of semantic markup and accessible interaction patterns.

Responsive Navigation: My need for a consistent navigation experience across devices resulted in implementing a hamburger menu system that maintains accessibility while adapting to different screen sizes.

Content Hierarchy: My emphasis on readable, academic content influenced my semantic markup structure, with proper heading hierarchies and citation formatting.

How I Integrated Accessibility

My focus on inclusive design throughout the course directly impacted my code structure. Something that struck throughout my lectures was that we should not be designing things without the input of the end user in mind, and although a small test group, I did get a few of my family members to go through my website and take a look for accessibility pointers I could lean on. For instance, the menu blurring out the background, although a minor thing, was suggested so that they could concentrate on the menu content exclusively when it's opened, as that was what they were used to when navigating through other sites. In terms of screen readers I did my best to describe what was contained inside images as difficult as it was for me to put into words, which put into perspective how much I take my clear eyesight for granted as I do not think that much about what I see when looking at a picture as much as I do 'see'. Reflecting on my implementation, I see several areas I could enhance. Enhanced accessibility would benefit from adding more comprehensive ARIA labels, improving focus indicators, and ensuring all my interactive elements are properly announced to screen readers. Performance optimisation could include implementing lazy loading for images, optimising CSS delivery, and considering progressive enhancement strategies. Error handling improvements would involve adding more robust error handling in my JavaScript to ensure fewer breaks in my functionality. Progressive enhancement would ensure all functionality works without JavaScript, then enhance with interactive features for users who have it enabled.

Conclusion

My implementation of this website demonstrates how UI and UX decisions directly influence technical implementation. My semantic markup, modular CSS architecture, and thoughtful JavaScript implementation all serve my goal of creating an accessible, maintainable, and user-centered digital experience.

My separation of concerns, proper semantic markup, and responsive design principles create a foundation that supports both current usability needs and future scalability. While I have areas for improvement, particularly in advanced accessibility features and performance optimisation, my current implementation successfully translates my design intentions into functional, accessible code. This reflection reinforces for me the importance of considering accessibility, maintainability, and user experience from the earliest stages of development, as these considerations fundamentally shape the final product. My integration of inclusive design principles with technical implementation creates a more robust and ethically responsible digital presence. Below I've attached a few videos which helped me along the way, I hope they help you too!

References

Tab filtering animation with view transitions / HTML, CSS & JS How to Make a Simple Button Filter in 3 Minutes | Html Tutorial for Beginners How to FETCH data from an API using JavaScript