Accessible Websites: Arts Council of Northern Ireland

Our commitment to creating a more accessible digital world is a central focus of our web design efforts, especially when it comes to websites designed for arts organisations like the Arts Council of Northern Ireland. Join us as we take a look at "Behind the Build” of the ACNI website, exploring some of the elements that ensure the Arts Council's website is a welcoming space for individuals of diverse abilities.

What is Web Accessibility?

Web accessibility means making the online world inclusive and accessible to everyone, particularly those with disabilities. It is ensuring that your website and mobile apps are welcoming to everyone, breaking down barriers that might hinder access. It's about making sure your content is available and understandable from every angle, ensuring that individuals with visual, hearing, motor, or cognitive impairments are not left out of the digital experience.

This inclusivity extends to allowing contributions to the digital space by individuals with disabilities. The principles of web accessibility are not limited to websites but also encompass various digital platforms and applications.

Prioritising digital accessibility not only enhances the overall user experience for everyone but also aligns with legal requirements, such as the Equality Act 2010 in the UK.

Keyboard Accessibility

Keyboard accessibility refers to the design and implementation of digital interfaces, websites, or applications in a way that allows users to navigate, interact, and operate them effectively using only a keyboard. Creating an accessible website for keyboard users hinges on understanding which elements should be navigable via the keyboard. A strong HTML semantic is essential as it guides us in identifying the elements we want to prioritise for keyboard navigation.

In the journey to make the Arts Council's website universally accessible, we began with a "keyboard first" approach. Every interactive element, from navigation to dropdowns, is designed to be operated seamlessly using a keyboard alone. Skip Links were positioned, offering users a shortcut to vital sections.

Ensuring keyboard accessibility is not only beneficial for users with disabilities but also contributes to a better user experience for everyone. It allows for efficient navigation and interaction, especially in situations where using a mouse may be impractical or impossible.

Semantic HTML

Semantic HTML (HyperText Markup Language) refers to the use of HTML markup elements that carry meaning about the structure and content of a web page. In other words, semantic HTML provides a way to convey the intended meaning of the content within the HTML document, making it more understandable for both browsers and developers.

Our approach to the Arts Council's website involves the meticulous use of semantic HTML. The structure is composed of elements that describe the purpose of the content (such as H1,H2,H3, <header>, <nav>, <article>, <section>, <footer>, etc.), ensuring that screen readers interpret and present content correctly.

Semantic HTML is important for web design because it improves code readability, enhances accessibility, aids in SEO, facilitates maintenance and scalability, encourages best practices, and ensures future compatibility with emerging technologies. By using semantic HTML, our developers create well-structured and meaningful documents that benefit both humans and machines interacting with the content.

Alternative Text (Alt Text)

Alternative text, often referred to as "alt text" or "alt attribute," is a descriptive text attribute added to an HTML image tag. Its primary purpose is to provide a text alternative to images on a webpage, making the content accessible to individuals who may be using screen readers or other assistive technologies. Alt text is essential for web accessibility and is a key component of creating inclusive digital content.

In our visual tapestry, alt text serves as the brushstroke, vividly describing images and bringing them to life for users relying on screen readers. The collaboration with the Arts Council team ensures that each uploaded image is accessible to all.

Text Contrast

Text contrast refers to the difference in visual brightness and colour between text and its background. It is a critical factor in web and graphic design, especially for ensuring readability and accessibility. Proper text contrast helps users easily perceive and comprehend the content, and it is particularly important for individuals with visual impairments.

The colour palette of the Arts Council's website is carefully designed to meet accessibility standards. Our UX experts tested each hue using WebAIM's Contrast Checker, ensuring that the symphony of colours resonates with individuals of varying vision abilities.

Responsive Design

The primary goal of responsive design is to provide an optimal viewing and interaction experience across a wide range of devices, from desktop computers to tablets and smartphones. Responsive design is closely tied to accessibility, as it plays a crucial role in ensuring that digital content is usable and enjoyable for people with diverse needs and abilitiesJust as a ballet troupe adapts to various stages, the Arts Council's website is optimised for a diverse range of screens and devices.

Resizable Text

Resizable text refers to text on a digital interface, such as a website or application, that can be adjusted or scaled in size by users according to their preferences. This feature allows individuals to customise the text size based on their visual needs, making the content more accessible and user-friendly.

The script of accessibility places text in the spotlight. Resizable text ensures that users can adjust the font size, tailoring their reading experience without compromising clarity. This flexible script lets users direct their narrative, creating an inclusive stage for all.

Keyboard Focus

Interactive elements command the spotlight with clear and distinguishable focus, echoing the precision of a seasoned performer. The website's design ensures that buttons, links, and form fields shine brightly, delivering a performance accessible to all, including those relying on keyboards and screen readers.

Skip Navigation Links

"Skip to Content" links set the stage for users to gracefully bypass repetitive elements, ensuring they find the content they need without unnecessary detours.

Consistent Navigation

Consistent navigation refers to the practice of maintaining uniformity and predictability in the design and layout of navigation elements across a website or application. It involves using consistent patterns, styles, and placement of navigation elements, such as menus, links, and buttons, to create a cohesive and user-friendly experience.

A uniform layout and navigation structure form the backbone of the Arts Council website, allowing users to anticipate where to find information, creating a narrative that resonates across every scene.

Error Handling

The GOV.UK website, along with its utilised design system, stands out as a leading force in the industry when it comes to accessible web design. Using this design system we took a similar approach for the handling of validation errors which guide users through unexpected turns when navigating the site.

These error messages are clear and concise, describing what has happened and tells users how to fix it. The messages appear in plain English for simple screen reader interpretation. Visually, a subtle border brings attention to potential pitfalls, supporting users with colour contrast issues.

Plain Language

Every line of our code is written with care. Plain and simple language bridges the gap, making content accessible to a diverse audience. The tone may vary, but the underlying principle remains—clarity and inclusivity for all.

User Feedback

Strategic feedback mechanisms invite users to be part of the ongoing conversation. Users encountering accessibility barriers can raise their concerns directly with the Arts Council via the provided links at https://artscouncil-ni.org/accessibility.

Testing and Validation

Utilising WebAIM's Wave tool and Google Lighthouse, we thoroughly tested the site to ensure adherence to the WCAG 2.1 level AA standard.

Our work ensures compatibility with current and future assistive technologies. The website is not just accessible for today; it's an enduring piece, resonating with evolving web standards.

Accessible Web Design

Elevate your online accessibility with our tailored web design projects and comprehensive digital auditing services. If you’re looking to embark on a new, fully accessible website development, or identify areas for improvement, count on us to be your dedicated partner in creating an inclusive online presence. Get in touch to discuss your needs today.